import React, { useState, useCallback, useEffect } from 'react';
import { KeyIcon, SaveIcon, TestTubeIcon, TrashIcon, XIcon } from './Icons';
import { PROVIDERS, type AIProvider } from '../types/providers';
import { testApiKey, type ModelInfo } from '../services/apiTestService';

interface ApiKeySetupProps {
  onKeySave: (key: string, provider: AIProvider, model: string, endpoint?: string) => void;
  onCancel?: () => void;
}

const isValidApiKey = (key: string): boolean => {
  const trimmedKey = key.trim();
  return trimmedKey.length > 10 && /^[A-Za-z0-9_-]+$/.test(trimmedKey);
};

export const ApiKeySetup: React.FC<ApiKeySetupProps> = ({ onKeySave, onCancel }) => {
  const [localApiKey, setLocalApiKey] = useState('');
  const [endpoint, setEndpoint] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [isValid, setIsValid] = useState<boolean | null>(null);
  const [provider, setProvider] = useState<AIProvider>('gemini');
  const [model, setModel] = useState('gemini-2.5-flash');
  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
  const [isTesting, setIsTesting] = useState(false);
  const [testStatus, setTestStatus] = useState<'idle' | 'success' | 'error'>('idle');

  useEffect(() => {
    const savedProvider = localStorage.getItem('ai-provider') as AIProvider;
    if (savedProvider && PROVIDERS.find(p => p.id === savedProvider)) {
      setProvider(savedProvider);
      const savedModel = localStorage.getItem(`model-${savedProvider}`);
      const providerConfig = PROVIDERS.find(p => p.id === savedProvider);
      setModel(savedModel || providerConfig?.defaultModel || '');
    }
    
    const lastKey = localStorage.getItem('last-api-key');
    if (lastKey) {
      setLocalApiKey(lastKey);
      setIsValid(isValidApiKey(lastKey));
    }
  }, []);

  useEffect(() => {
    const providerConfig = PROVIDERS.find(p => p.id === provider);
    if (providerConfig && provider !== 'openrouter' && !providerConfig.models.includes(model)) {
      setModel(providerConfig.defaultModel);
    } else if (provider === 'openrouter' && !model) {
      setModel(providerConfig?.defaultModel || '');
    }
    setAvailableModels([]);
    setTestStatus('idle');
  }, [provider, model]);

  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setLocalApiKey(value);
    setTestStatus('idle');
    
    if (value.trim() === '') {
      setIsValid(null);
      setError(null);
    } else {
      const valid = isValidApiKey(value);
      setIsValid(valid);
      setError(valid ? null : 'A chave de API parece inválida.');
    }
  }, []);

  const getProviderLink = (provider: AIProvider): string => {
    switch (provider) {
      case 'gemini': return 'https://aistudio.google.com/app/apikey';
      case 'openai': return 'https://platform.openai.com/api-keys';
      case 'ollama': return 'https://ollama.com/download';
      case 'openrouter': return 'https://openrouter.ai/keys';
      default: return '#';
    }
  };

  const getProviderLabel = (provider: AIProvider): string => {
    switch (provider) {
      case 'gemini': return 'Google Gemini';
      case 'openai': return 'OpenAI';
      case 'ollama': return 'Ollama (Local)';
      case 'openrouter': return 'OpenRouter';
      default: return 'API';
    }
  };

  const handleTestApi = async () => {
    if (provider === 'ollama') {
      setIsTesting(true);
      setError(null);
      try {
        const result = await testApiKey(provider, '', endpoint);
        
        if (result.success && result.models && result.models.length > 0) {
          setAvailableModels(result.models);
          setModel(result.models[0].id);
          if (result.endpoint) {
            setEndpoint(result.endpoint);
          }
          setTestStatus('success');
          setError(null);
        } else {
          setTestStatus('error');
          setError(result.error || 'Falha ao conectar com Ollama');
        }
      } catch (err) {
        setTestStatus('error');
        setError(err instanceof Error ? err.message : 'Erro ao testar API');
      } finally {
        setIsTesting(false);
      }
      return;
    }

    if (!localApiKey.trim() || !isValidApiKey(localApiKey)) {
      setError('Insira uma chave de API válida para testar.');
      return;
    }

    setIsTesting(true);
    setError(null);

    try {
      const result = await testApiKey(provider, localApiKey, endpoint);
      
      if (result.success) {
        if (result.models && result.models.length > 0) {
          setAvailableModels(result.models);
          setModel(result.models[0].id);
        }
        setTestStatus('success');
        setError(null);
      } else {
        setTestStatus('error');
        setError(result.error || 'Falha ao testar API');
      }
    } catch (err) {
      setTestStatus('error');
      setError(err instanceof Error ? err.message : 'Erro ao testar API');
    } finally {
      setIsTesting(false);
    }
  };

  const handleProviderChange = (newProvider: AIProvider) => {
    setProvider(newProvider);
    const providerConfig = PROVIDERS.find(p => p.id === newProvider);
    setModel(providerConfig?.defaultModel || '');
    setAvailableModels([]);
    setTestStatus('idle');
    setEndpoint('');
  };

  const handleSave = () => {
    if (provider === 'ollama') {
      if (endpoint.trim() || testStatus === 'success') {
        onKeySave('', provider, model, endpoint.trim());
      }
    } else if (localApiKey.trim() && isValidApiKey(localApiKey)) {
      onKeySave(localApiKey.trim(), provider, model);
    }
  };

  return (
    <div className="max-w-md mx-auto animate-fade-in pt-10">
      <div className="bg-white/70 dark:bg-slate-800/60 backdrop-blur-md border border-white/20 dark:border-slate-700/50 shadow-xl p-6 sm:p-8 rounded-2xl relative overflow-hidden group">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

        <div className="relative z-10">
          {onCancel && (
            <button
              onClick={onCancel}
              className="absolute top-0 right-0 p-1 rounded-full text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-colors"
              title="Fechar"
            >
              <XIcon className="w-5 h-5" />
            </button>
          )}
          <h2 className="text-2xl font-display font-bold text-center mb-3 text-slate-800 dark:text-white">
            Configurar API
          </h2>
          <p className="text-sm text-slate-500 dark:text-slate-400 text-center mb-6">
            Selecione o provedor e insira sua chave de API.
          </p>

          <div className="space-y-5">
            {/* Provider Selector */}
            <div>
              <label className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
                Provedor de IA
              </label>
              <div className="grid grid-cols-2 gap-2">
                {PROVIDERS.map((p) => (
                  <button
                    key={p.id}
                    type="button"
                    onClick={() => handleProviderChange(p.id)}
                    className={`px-3 py-2 rounded-lg text-sm font-medium transition-all border
                      ${provider === p.id 
                        ? 'bg-blue-500 text-white border-blue-500' 
                        : 'bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-600 hover:border-blue-400'
                      }`}
                  >
                    {p.name}
                  </button>
                ))}
              </div>
            </div>

            {/* Ollama Endpoint - Auto Detect */}
            {provider === 'ollama' && (
              <div>
                <label className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
                  Ollama (Local)
                </label>
                <div className="p-4 bg-slate-100 dark:bg-slate-700/50 rounded-xl border border-slate-200 dark:border-slate-600">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center text-white font-bold">
                        O
                      </div>
                      <div>
                        <p className="font-medium text-slate-700 dark:text-slate-200">Detectando Ollama...</p>
                        <p className="text-xs text-slate-500 dark:text-slate-400">Procurando na rede local</p>
                      </div>
                    </div>
                    {isTesting && (
                      <span className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin"></span>
                    )}
                    {testStatus === 'success' && (
                      <svg className="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </div>
                  <button
                    type="button"
                    onClick={handleTestApi}
                    disabled={isTesting}
                    className="w-full py-2 px-4 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-medium rounded-lg transition-all disabled:opacity-50"
                  >
                    {isTesting ? 'Procurando...' : testStatus === 'success' ? 'Conectado!' : 'Conectar ao Ollama'}
                  </button>
                  {endpoint && (
                    <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
                      Endpoint: <span className="font-mono">{endpoint}</span>
                    </p>
                  )}
                  {error && (
                    <p className="mt-2 text-xs text-red-600 dark:text-red-400">
                      {error}
                    </p>
                  )}
                </div>
                {testStatus === 'success' && availableModels.length > 0 && (
                  <p className="mt-2 text-xs text-green-600 dark:text-green-400">
                    ✓ {availableModels.length} modelos disponíveis detectados
                  </p>
                )}
              </div>
            )}

            {/* Outros Provedores */}
            {provider !== 'ollama' && (
              <div>
                <label htmlFor="api-key-setup" className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                  Chave de API ({getProviderLabel(provider)})
                </label>
                <div className="relative">
                  <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                    <KeyIcon className="h-5 w-5 text-slate-400" />
                  </div>
                  <input
                    type="password"
                    id="api-key-setup"
                    className={`block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 pl-10 pr-24 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-all
                      ${isValid === false ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : ''}
                      ${testStatus === 'success' ? 'border-green-500 focus:border-green-500 focus:ring-green-500' : ''}`}
                    placeholder="Cole sua chave aqui"
                    value={localApiKey}
                    onChange={handleChange}
                    onKeyDown={(e) => e.key === 'Enter' && handleTestApi()}
                    autoComplete="off"
                  />
                  <div className="absolute inset-y-0 right-0 flex items-center pr-2 gap-2">
                    {localApiKey && (
                      <button
                        type="button"
                        onClick={() => {
                          setLocalApiKey('');
                          setIsValid(null);
                          setError(null);
                          setTestStatus('idle');
                          localStorage.removeItem('last-api-key');
                        }}
                        className="p-2 text-slate-400 hover:text-red-500 transition-colors"
                        title="Apagar chave salva"
                      >
                        <TrashIcon className="w-4 h-4" />
                      </button>
                    )}
                    <button
                      type="button"
                      onClick={handleTestApi}
                      disabled={isTesting || !localApiKey.trim()}
                      className={`flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-all
                        ${testStatus === 'success' 
                          ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                          : testStatus === 'error'
                          ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
                          : 'bg-slate-200 dark:bg-slate-600 text-slate-600 dark:text-slate-300 hover:bg-blue-500 hover:text-white'
                        } disabled:opacity-50 disabled:cursor-not-allowed`}
                    >
                      {isTesting ? (
                        <span className="w-3 h-3 border-2 border-current border-t-transparent rounded-full animate-spin"></span>
                      ) : testStatus === 'success' ? (
                        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      ) : (
                        <TestTubeIcon className="w-3 h-3" />
                      )}
                      <span>{isTesting ? 'Testando...' : testStatus === 'success' ? 'OK' : 'Testar'}</span>
                    </button>
                  </div>
                </div>
                {error && (
                  <p className="mt-2 text-xs text-red-600 dark:text-red-400" role="alert">
                    {error}
                  </p>
                )}
                <p className="mt-2 text-xs text-slate-500 dark:text-slate-400">
                  Não tem uma chave? <a href={getProviderLink(provider)} target="_blank" rel="noopener noreferrer" className="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline">Obtenha aqui</a>.
                </p>
              </div>
            )}

            {/* Model Selector */}
            <div>
              <label htmlFor="model-selector" className="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">
                Modelo{availableModels.length > 0 && <span className="text-green-600 ml-1">(detectado automaticamente)</span>}
              </label>
              {provider === 'openrouter' ? (
                <input
                  type="text"
                  id="model-selector"
                  value={model}
                  onChange={(e) => setModel(e.target.value)}
                  placeholder="Ex: google/gemini-2.5-flash"
                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm transition-all"
                />
              ) : availableModels.length > 0 ? (
                <select
                  id="model-selector"
                  value={model}
                  onChange={(e) => setModel(e.target.value)}
                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                >
                  {availableModels.map((m) => (
                    <option key={m.id} value={m.id}>{m.name}</option>
                  ))}
                </select>
              ) : (
                <select
                  id="model-selector"
                  value={model}
                  onChange={(e) => setModel(e.target.value)}
                  className="block w-full rounded-xl border-slate-300 dark:border-slate-600 bg-white/50 dark:bg-slate-700/50 py-3 px-4 text-slate-900 dark:text-slate-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                >
                  {PROVIDERS.find(p => p.id === provider)?.models.map((m) => (
                    <option key={m} value={m}>{m}</option>
                  ))}
                </select>
              )}
              {testStatus === 'success' && availableModels.length > 0 && (
                <p className="mt-2 text-xs text-green-600 dark:text-green-400">
                  ✓ {availableModels.length} modelos disponíveis detectados
                </p>
              )}
            </div>

            {onCancel ? (
              <div className="flex gap-3">
                <button
                  type="button"
                  onClick={onCancel}
                  className="w-1/3 flex justify-center items-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 font-bold py-3.5 px-4 rounded-xl transition-all duration-300 transform active:scale-[0.98]"
                >
                  Cancelar
                </button>
                <button
                  onClick={handleSave}
                  disabled={provider === 'ollama' ? !endpoint && testStatus !== 'success' : (!localApiKey.trim() || isValid === false)}
                  className="w-2/3 flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
                >
                  <SaveIcon className="h-5 w-5" />
                  <span>Salvar</span>
                </button>
              </div>
            ) : (
              <button
                onClick={handleSave}
                disabled={provider === 'ollama' ? !endpoint && testStatus !== 'success' : (!localApiKey.trim() || isValid === false)}
                className="w-full flex justify-center items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-lg hover:shadow-blue-500/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 transform active:scale-[0.98]"
              >
                <SaveIcon className="h-5 w-5" />
                <span>{provider === 'ollama' ? 'Conectar e Continuar' : 'Salvar e Continuar'}</span>
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};