import React, { useState, useEffect } from 'react';
import {
  getStoredCredentials,
  storeCredentials,
  clearStoredCredentials,
} from '@/services/tradingService.browser';

interface APIKeyManagerProps {
  isApiActive: boolean;
  onToggleApiStatus: () => void;
}

const APIKeyManager: React.FC<APIKeyManagerProps> = ({ isApiActive, onToggleApiStatus }) => {
  const [apiKeyInput, setApiKeyInput] = useState('');
  const [apiSecretInput, setApiSecretInput] = useState('');
  const [mode, setMode] = useState<'live' | 'testnet'>('testnet');
  const [keysSaved, setKeysSaved] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [hasStoredSecret, setHasStoredSecret] = useState(false);

  useEffect(() => {
    async function loadStored() {
      const stored = await getStoredCredentials();
      if (stored) {
        setApiKeyInput(stored.apiKey);
        setMode(stored.mode);
        setKeysSaved(true);
        setHasStoredSecret(Boolean(stored.apiSecret));
      }
    }
    loadStored();
  }, []);

  const handleSave = async () => {
    const trimmedKey = apiKeyInput.trim();
    const trimmedSecret = apiSecretInput.trim();

    if (!trimmedKey) {
      alert('API Key cannot be empty.');
      return;
    }
    // If the secret input is empty but a secret already exists for this key,
    // keep the existing secret. Otherwise require a secret.
    let secretToPersist = trimmedSecret;
    if (!secretToPersist) {
      const existing = await getStoredCredentials(trimmedKey);
      const existingSecret = existing?.apiSecret ?? '';
      if (!existingSecret) {
        alert('Secret Key cannot be empty.');
        return;
      }
      secretToPersist = existingSecret;
    }

    await storeCredentials({ apiKey: trimmedKey, apiSecret: secretToPersist, mode });
    setKeysSaved(true);
    setIsEditing(false);
    setApiSecretInput('');
    setHasStoredSecret(true);
    alert('API keys saved successfully.');
  };

  const handleEdit = async () => {
    const stored = await getStoredCredentials(apiKeyInput.trim());
    if (stored) {
      setApiKeyInput(stored.apiKey);
      setMode(stored.mode);
      setHasStoredSecret(Boolean(stored.apiSecret));
    } else {
      setApiKeyInput('');
      setMode('testnet');
      setHasStoredSecret(false);
    }
    setApiSecretInput('');
    setIsEditing(true);
  };

  const handleDelete = () => {
    if (window.confirm('Are you sure you want to delete the API keys? This action cannot be undone.')) {
      clearStoredCredentials();
      setApiKeyInput('');
      setApiSecretInput('');
      setMode('testnet');
      setKeysSaved(false);
      setIsEditing(false);
      setHasStoredSecret(false);
      if (isApiActive) {
        onToggleApiStatus();
      }
    }
  };

  const handleCancelEdit = async () => {
    setIsEditing(false);
    const stored = await getStoredCredentials();
    if (stored) {
      setApiKeyInput(stored.apiKey);
      setMode(stored.mode);
      setHasStoredSecret(Boolean(stored.apiSecret));
    } else {
      setApiKeyInput('');
      setMode('testnet');
      setHasStoredSecret(false);
    }
    setApiSecretInput('');
  };

  const maskApiKey = (key: string) => {
    if (key.length <= 8) return '****';
    return `${key.substring(0, 4)}...${key.substring(key.length - 4)}`;
  };

  const effectiveApiStatus = isApiActive && keysSaved;
  const modeLabel = mode === 'testnet' ? 'TESTNET' : 'LIVE';

  return (
    <div className="bg-gray-800/50 border border-gray-700 rounded-lg shadow-lg p-6 h-full flex flex-col">
      <div className="flex justify-between items-start">
        <div>
          <h3 className="text-xl font-semibold text-gray-200 mb-1">Layer 5: API Management</h3>
          <p className="text-sm text-gray-400 mb-4">Manage API keys for trade execution.</p>
        </div>
        <div className="flex items-center space-x-3">
          <span className={`text-sm font-bold ${effectiveApiStatus ? 'text-success' : 'text-destructive'}`}>
            {keysSaved ? (effectiveApiStatus ? 'API ACTIVE' : 'API INACTIVE') : 'NO KEY SET'}
          </span>
          {keysSaved && (
            <span className="text-xs font-semibold text-primary bg-primary/40 border border-primary/60 px-2 py-1 rounded">
              {modeLabel} MODE
            </span>
          )}
          <button
            role="switch"
            aria-checked={effectiveApiStatus}
            onClick={onToggleApiStatus}
            disabled={!keysSaved}
            className={`${effectiveApiStatus ? 'bg-success' : 'bg-gray-600'} relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-success focus:ring-offset-2 focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed`}
          >
            <span className={`${effectiveApiStatus ? 'translate-x-6' : 'translate-x-1'} inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}/>
          </button>
        </div>
      </div>

      <div className="bg-gray-900/50 border border-gray-700 rounded-lg p-4 mt-4 flex-grow flex flex-col">
        {keysSaved && !isEditing ? (
          <div className="flex flex-col flex-grow">
            <div className="flex-grow">
              <div className="flex justify-between items-center mb-4">
                <div className="flex items-center gap-3">
                  <span className="bg-gray-600 text-gray-200 text-xs font-bold px-2 py-1 rounded">HMAC</span>
                  <h4 className="text-lg font-semibold text-white">Primary Trading Key</h4>
                  <span className="bg-primary/30 text-primary text-xs font-bold px-2 py-1 rounded border border-primary/60">
                    {modeLabel} MODE
                  </span>
                </div>
                <div className="flex items-center gap-4 text-sm font-medium">
                  <button onClick={handleEdit} className="text-warning hover:underline">Edit</button>
                  <button onClick={handleDelete} className="text-destructive hover:underline">Delete</button>
                </div>
              </div>

              <div className="space-y-2">
                <div>
                  <p className="text-xs text-gray-400">API Key</p>
                  <p className="font-mono text-gray-300 break-all text-sm">{maskApiKey(apiKeyInput)}</p>
                </div>
                <div>
                  <p className="text-xs text-gray-400 mt-2">Secret Key</p>
                  <p className="font-mono text-gray-300 break-all text-sm">**************************************************</p>
                </div>
                <div>
                  <p className="text-xs text-gray-400 mt-2">Trading Mode</p>
                  <p className="text-sm font-semibold text-primary">
                    {mode === 'testnet' ? 'Binance Testnet (Paper Trading)' : 'Binance Live Trading'}
                  </p>
                </div>
              </div>

              <div className="mt-4 pt-4 border-t border-gray-700 text-xs text-gray-400">
                <p className="font-bold mb-1">Permissions:</p>
                <div className="flex gap-4">
                  <span className="text-success">✓ Read Info</span>
                  <span className="text-success">✓ Enable Trading</span>
                  <span className="text-gray-500 line-through">✗ Enable Withdrawals</span>
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div className="flex-grow flex flex-col">
            <h4 className="text-lg font-semibold text-white mb-4">{isEditing ? 'Edit API Keys' : 'Add New API Key'}</h4>
            <div className="space-y-4 flex-grow">
              <div>
                <label htmlFor="api-key" className="block text-sm font-medium text-gray-400 mb-1">API Key</label>
                <input
                  type="text"
                  id="api-key"
                  value={apiKeyInput}
                  onChange={(e) => setApiKeyInput(e.target.value)}
                  placeholder="Enter your API key"
                  className="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary text-gray-200"
                />
              </div>
              <div>
                <label htmlFor="api-secret" className="block text-sm font-medium text-gray-400 mb-1">
                  Secret Key {hasStoredSecret && (isEditing || keysSaved) ? '(leave blank to keep existing)' : ''}
                </label>
                <input
                  type="password"
                  id="api-secret"
                  value={apiSecretInput}
                  onChange={(e) => setApiSecretInput(e.target.value)}
                  placeholder="Enter your secret key"
                  className="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary text-gray-200"
                />
              </div>
              <div>
                <label htmlFor="api-mode" className="block text-sm font-medium text-gray-400 mb-1">Trading Mode</label>
                <select
                  id="api-mode"
                  value={mode}
                  onChange={(e) => setMode(e.target.value as 'live' | 'testnet')}
                  className="w-full bg-gray-700 border border-gray-600 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-primary text-gray-200"
                >
                  <option value="testnet">Paper Trading (Binance Testnet)</option>
                  <option value="live">Live Trading (Binance Production)</option>
                </select>
              </div>
            </div>
            <div className="mt-4 flex justify-end gap-3">
              {isEditing && (
                <button onClick={handleCancelEdit} className="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded text-sm">
                  Cancel
                </button>
              )}
              <button onClick={handleSave} className="bg-warning hover:bg-warning text-black font-bold py-2 px-4 rounded text-sm">
                Save Keys
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default APIKeyManager;