import React, { useState, useEffect } from 'react';
import { 
  FiSettings, 
  FiMessageCircle, 
  FiSave, 
  FiEye,
  FiEyeOff,
  FiActivity,
  FiWifi,
  FiWifiOff,
  FiChevronDown,
  FiChevronRight
} from 'react-icons/fi';
import toast from 'react-hot-toast';

const Configuracoes = () => {
  const [loading, setLoading] = useState(false);
  const [testingConnection, setTestingConnection] = useState(false);
  const [connectionStatus, setConnectionStatus] = useState(null);
  const [showApiKey, setShowApiKey] = useState(false);
  
  // Estados da configuração Evolution API
  const [evolutionConfig, setEvolutionConfig] = useState({
    enabled: false,
    baseUrl: '',
    apiKey: '',
    instanceName: '',
    webhookUrl: ''
  });

  // Estados da configuração de mensagens WhatsApp
  const [whatsappConfig, setWhatsappConfig] = useState({
    alertaVencimento: false,
    // Primeira antecedência
    diasAntecedencia1: 3,
    mensagemAntecedencia1: 'Olá {cliente}! Lembramos que sua parcela no valor de R$ {valor} vence {quando}. Entre em contato conosco para mais informações. Obrigado!',
    // Segunda antecedência  
    diasAntecedencia2: 0,
    mensagemAntecedencia2: 'Olá {cliente}! Sua parcela no valor de R$ {valor} vence hoje ({quando}). Entre em contato conosco para regularizar. Obrigado!',
    // Após vencimento
    diasAposVencimento: 3,
    mensagemAposVencimento: 'Olá {cliente}! Sua parcela no valor de R$ {valor} venceu em {quando}. Por favor, entre em contato conosco para regularizar. Obrigado!'
  });

  // Estados da configuração ChatGPT
  const [chatgptConfig, setChatgptConfig] = useState({
    enabled: false,
    apiKey: '',
    model: 'gpt-3.5-turbo',
    temperature: 0.7
  });

  // Estados de expansão das seções
  const [expandedSections, setExpandedSections] = useState({
    chatgpt: false,
    evolution: false,
    whatsapp: false
  });

  const toggleSection = (section) => {
    setExpandedSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  useEffect(() => {
    carregarConfiguracoes();
  }, []);

  const carregarConfiguracoes = async () => {
    try {
      setLoading(true);
      const [evolutionRes, whatsappRes, chatgptRes] = await Promise.all([
        fetch('/api/configuracoes/evolution'),
        fetch('/api/configuracoes/whatsapp-alertas'),
        fetch('/api/configuracoes/chatgpt')
      ]);
      
      if (evolutionRes.ok) {
        const data = await evolutionRes.json();
        setEvolutionConfig(data);
      }
      
      if (whatsappRes.ok) {
        const data = await whatsappRes.json();
        setWhatsappConfig(data);
      }

      if (chatgptRes.ok) {
        const data = await chatgptRes.json();
        setChatgptConfig(data);
      }
    } catch (error) {
      console.error('Erro ao carregar configurações:', error);
    } finally {
      setLoading(false);
    }
  };

  // Função para salvar configurações ChatGPT
  const salvarChatGPTConfig = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/configuracoes/chatgpt', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(chatgptConfig),
      });

      if (response.ok) {
        toast.success('Configurações do ChatGPT salvas com sucesso!');
      } else {
        throw new Error('Erro ao salvar configurações');
      }
    } catch (error) {
      console.error('Erro ao salvar configurações ChatGPT:', error);
      toast.error('Erro ao salvar configurações do ChatGPT');
    } finally {
      setLoading(false);
    }
  };

  // Função para testar conexão ChatGPT
  const testarChatGPT = async () => {
    if (!chatgptConfig.apiKey) {
      toast.error('Preencha a API Key primeiro');
      return;
    }

    try {
      setTestingConnection(true);
      const response = await fetch('/api/configuracoes/chatgpt/test', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ apiKey: chatgptConfig.apiKey }),
      });

      if (response.ok) {
        toast.success('Conexão com ChatGPT funcionando!');
        setConnectionStatus('success');
      } else {
        throw new Error('Erro na conexão');
      }
    } catch (error) {
      console.error('Erro ao testar ChatGPT:', error);
      toast.error('Erro ao conectar com ChatGPT');
      setConnectionStatus('error');
    } finally {
      setTestingConnection(false);
    }
  };

  const salvarConfiguracoes = async () => {
    try {
      setLoading(true);
      
      const response = await fetch('/api/configuracoes/evolution', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(evolutionConfig)
      });

      if (response.ok) {
        toast.success('Configurações salvas com sucesso!');
      } else {
        const error = await response.json();
        toast.error(error.message || 'Erro ao salvar configurações');
      }
    } catch (error) {
      console.error('Erro ao salvar configurações:', error);
      toast.error('Erro ao salvar configurações');
    } finally {
      setLoading(false);
    }
  };

  const testarConexao = async () => {
    if (!evolutionConfig.baseUrl || !evolutionConfig.apiKey || !evolutionConfig.instanceName) {
      toast.error('Preencha todos os campos obrigatórios antes de testar');
      return;
    }

    try {
      setTestingConnection(true);
      setConnectionStatus(null);
      
      const response = await fetch('/api/configuracoes/evolution/test', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(evolutionConfig)
      });

      const result = await response.json();
      
      if (response.ok) {
        setConnectionStatus('success');
        toast.success('Conexão testada com sucesso!');
      } else {
        setConnectionStatus('error');
        toast.error(result.message || 'Erro ao testar conexão');
      }
    } catch (error) {
      console.error('Erro ao testar conexão:', error);
      setConnectionStatus('error');
      toast.error('Erro ao testar conexão');
    } finally {
      setTestingConnection(false);
    }
  };

  const handleInputChange = (field, value) => {
    setEvolutionConfig(prev => ({
      ...prev,
      [field]: value
    }));
    // Reset connection status when config changes
    setConnectionStatus(null);
  };

  if (loading) {
    return (
      <div className="loading">
        <div>Carregando configurações...</div>
      </div>
    );
  }

  return (
    <div className="configuracoes fade-in">
      <div className="page-header">
        <div>
          <h1>Configurações</h1>
          <p>Configure as integrações e preferências do sistema</p>
        </div>
      </div>

      {/* ChatGPT Configuration */}
      <div className="config-section">
        <div className="config-header" onClick={() => toggleSection('chatgpt')} style={{ cursor: 'pointer' }}>
          <div className="config-title">
            <FiMessageCircle className="config-icon" />
            <div>
              <h2>✨ ChatGPT - Inteligência Artificial</h2>
              <p>Configure a integração com ChatGPT para gerar descrições automáticas de produtos</p>
            </div>
          </div>
          <div className="config-controls">
            <div className="config-toggle">
              <label className="toggle-switch" onClick={(e) => e.stopPropagation()}>
                <input
                  type="checkbox"
                  checked={chatgptConfig.enabled}
                  onChange={async (e) => {
                    const novoValor = e.target.checked;
                    
                    try {
                      // Salvar imediatamente no servidor
                      const response = await fetch('/api/configuracoes/chatgpt', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                          ...chatgptConfig,
                          enabled: novoValor
                        })
                      });

                      if (response.ok) {
                        // Só atualizar estado local após sucesso no servidor
                        setChatgptConfig(prev => ({
                          ...prev,
                          enabled: novoValor
                        }));
                        toast.success(novoValor ? 'ChatGPT ativado!' : 'ChatGPT desativado!');
                      } else {
                        toast.error('Erro ao salvar configuração');
                      }
                    } catch (error) {
                      console.error('Erro ao salvar:', error);
                      toast.error('Erro ao salvar configuração');
                    }
                  }}
                />
                <span className="toggle-slider"></span>
              </label>
              <span className="toggle-label">
                {chatgptConfig.enabled ? 'Ativado' : 'Desativado'}
              </span>
            </div>
            <div className="expand-icon">
              {expandedSections.chatgpt ? <FiChevronDown /> : <FiChevronRight />}
            </div>
          </div>
        </div>

        {expandedSections.chatgpt && (
          <div className="config-form">
            <div className="form-grid">
              <div className="form-group">
                <label className="form-label">API Key do OpenAI *</label>
                <div className="input-with-icon">
                  <input
                    type={showApiKey ? 'text' : 'password'}
                    className="form-input"
                    value={chatgptConfig.apiKey}
                    onChange={(e) => setChatgptConfig(prev => ({
                      ...prev,
                      apiKey: e.target.value
                    }))}
                    placeholder="sk-..."
                  />
                  <button
                    type="button"
                    className="input-icon-btn"
                    onClick={() => setShowApiKey(!showApiKey)}
                  >
                    {showApiKey ? <FiEyeOff /> : <FiEye />}
                  </button>
                </div>
                <small className="form-help">
                  Obtenha sua API Key em: <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">https://platform.openai.com/api-keys</a>
                </small>
              </div>

              <div className="form-group">
                <label className="form-label">Modelo</label>
                <select
                  className="form-select"
                  value={chatgptConfig.model}
                  onChange={(e) => setChatgptConfig(prev => ({
                    ...prev,
                    model: e.target.value
                  }))}
                >
                  <option value="gpt-3.5-turbo">GPT-3.5 Turbo (Mais rápido)</option>
                  <option value="gpt-4">GPT-4 (Mais preciso)</option>
                </select>
                <small className="form-help">
                  Escolha o modelo de IA para geração de descrições
                </small>
              </div>

              <div className="form-group">
                <label className="form-label">Criatividade (Temperature)</label>
                <select
                  className="form-select"
                  value={chatgptConfig.temperature}
                  onChange={(e) => setChatgptConfig(prev => ({
                    ...prev,
                    temperature: parseFloat(e.target.value)
                  }))}
                >
                  <option value="0.3">0.3 - Mais conservador</option>
                  <option value="0.7">0.7 - Equilibrado</option>
                  <option value="1.0">1.0 - Mais criativo</option>
                </select>
                <small className="form-help">
                  Controla a criatividade das descrições geradas
                </small>
              </div>
            </div>

            <div className="config-actions">
              <button
                type="button"
                className={`btn btn-secondary ${testingConnection ? 'loading' : ''}`}
                onClick={testarChatGPT}
                disabled={testingConnection}
              >
                <FiActivity />
                {testingConnection ? 'Testando...' : 'Testar Conexão'}
              </button>

              <button
                type="button"
                className={`btn btn-primary ${loading ? 'loading' : ''}`}
                onClick={salvarChatGPTConfig}
                disabled={loading}
              >
                <FiSave />
                {loading ? 'Salvando...' : 'Salvar Configurações'}
              </button>
            </div>

            {/* Connection Status */}
            {connectionStatus && (
              <div className={`connection-status ${connectionStatus}`}>
                {connectionStatus === 'success' ? (
                  <>
                    <FiWifi className="status-icon" />
                    <span>Conexão com ChatGPT estabelecida com sucesso!</span>
                  </>
                ) : (
                  <>
                    <FiWifiOff className="status-icon" />
                    <span>Falha na conexão. Verifique a API Key.</span>
                  </>
                )}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Evolution API Configuration */}
      <div className="config-section">
        <div className="config-header" onClick={() => toggleSection('evolution')} style={{ cursor: 'pointer' }}>
          <div className="config-title">
            <FiMessageCircle className="config-icon" />
            <div>
              <h2>Evolution API - WhatsApp</h2>
              <p>Configure a integração com Evolution API para envio de mensagens WhatsApp</p>
            </div>
          </div>
          <div className="config-controls">
            <div className="config-toggle">
              <label className="toggle-switch" onClick={(e) => e.stopPropagation()}>
                <input
                  type="checkbox"
                  checked={evolutionConfig.enabled}
                  onChange={async (e) => {
                    const novoValor = e.target.checked;
                    
                    try {
                      // Salvar imediatamente no servidor
                      const response = await fetch('/api/configuracoes/evolution', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                          ...evolutionConfig,
                          enabled: novoValor
                        })
                      });

                      if (response.ok) {
                        // Só atualizar estado local após sucesso no servidor
                        setEvolutionConfig(prev => ({
                          ...prev,
                          enabled: novoValor
                        }));
                        toast.success(novoValor ? 'Evolution API ativada!' : 'Evolution API desativada!');
                      } else {
                        toast.error('Erro ao salvar configuração');
                      }
                    } catch (error) {
                      console.error('Erro ao salvar:', error);
                      toast.error('Erro ao salvar configuração');
                    }
                  }}
                />
                <span className="toggle-slider"></span>
              </label>
              <span className="toggle-label">
                {evolutionConfig.enabled ? 'Ativado' : 'Desativado'}
              </span>
            </div>
            <div className="expand-icon">
              {expandedSections.evolution ? <FiChevronDown /> : <FiChevronRight />}
            </div>
          </div>
        </div>

        {expandedSections.evolution && (
          <div className="config-form">
            <div className="form-grid">
              <div className="form-group">
                <label className="form-label">URL Base da API *</label>
                <input
                  type="url"
                  className="form-input"
                  placeholder="https://sua-evolution-api.com"
                  value={evolutionConfig.baseUrl}
                  onChange={(e) => handleInputChange('baseUrl', e.target.value)}
                />
                <small className="form-help">
                  URL completa da sua instância Evolution API
                </small>
              </div>

              <div className="form-group">
                <label className="form-label">Nome da Instância *</label>
                <input
                  type="text"
                  className="form-input"
                  placeholder="liberi-kids"
                  value={evolutionConfig.instanceName}
                  onChange={(e) => handleInputChange('instanceName', e.target.value)}
                />
                <small className="form-help">
                  Nome da instância criada na Evolution API
                </small>
              </div>

              <div className="form-group">
                <label className="form-label">API Key *</label>
                <div className="input-with-icon">
                  <input
                    type={showApiKey ? 'text' : 'password'}
                    className="form-input"
                    placeholder="Sua chave de API"
                    value={evolutionConfig.apiKey}
                    onChange={(e) => handleInputChange('apiKey', e.target.value)}
                  />
                  <button
                    type="button"
                    className="input-icon-btn"
                    onClick={() => setShowApiKey(!showApiKey)}
                  >
                    {showApiKey ? <FiEyeOff /> : <FiEye />}
                  </button>
                </div>
                <small className="form-help">
                  Chave de autenticação da Evolution API
                </small>
              </div>

              <div className="form-group">
                <label className="form-label">Webhook URL</label>
                <input
                  type="url"
                  className="form-input"
                  placeholder="https://seu-webhook.com/evolution"
                  value={evolutionConfig.webhookUrl}
                  onChange={(e) => handleInputChange('webhookUrl', e.target.value)}
                />
                <small className="form-help">
                  URL para receber webhooks (opcional)
                </small>
              </div>
            </div>

            <div className="config-actions">
              <button
                type="button"
                className={`btn btn-secondary ${testingConnection ? 'loading' : ''}`}
                onClick={testarConexao}
                disabled={testingConnection}
              >
                <FiActivity />
                {testingConnection ? 'Testando...' : 'Testar Conexão'}
              </button>

              <button
                type="button"
                className={`btn btn-primary ${loading ? 'loading' : ''}`}
                onClick={salvarConfiguracoes}
                disabled={loading}
              >
                <FiSave />
                {loading ? 'Salvando...' : 'Salvar Configurações'}
              </button>
            </div>

            {/* Connection Status */}
            {connectionStatus && (
              <div className={`connection-status ${connectionStatus}`}>
                {connectionStatus === 'success' ? (
                  <>
                    <FiWifi className="status-icon" />
                    <span>Conexão estabelecida com sucesso!</span>
                  </>
                ) : (
                  <>
                    <FiWifiOff className="status-icon" />
                    <span>Falha na conexão. Verifique as configurações.</span>
                  </>
                )}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Configurações de Alertas WhatsApp */}
      <div className="config-section">
        <div className="config-header" onClick={() => toggleSection('whatsapp')} style={{ cursor: 'pointer' }}>
          <div className="config-title">
            <FiMessageCircle className="config-icon" />
            <div>
              <h2>Alertas de Vencimento - WhatsApp</h2>
              <p>Configure alertas automáticos para clientes com parcelas vencendo</p>
            </div>
          </div>
          <div className="config-controls">
            <div className="config-toggle">
              <label className="toggle-switch" onClick={(e) => e.stopPropagation()}>
                <input
                  type="checkbox"
                  checked={whatsappConfig.alertaVencimento}
                  onChange={async (e) => {
                    const novoValor = e.target.checked;
                    
                    try {
                      // Salvar imediatamente no servidor
                      const response = await fetch('/api/configuracoes/whatsapp-alertas', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                          ...whatsappConfig,
                          alertaVencimento: novoValor
                        })
                      });

                      if (response.ok) {
                        // Só atualizar estado local após sucesso no servidor
                        setWhatsappConfig(prev => ({
                          ...prev,
                          alertaVencimento: novoValor
                        }));
                        toast.success(novoValor ? 'Alertas ativados!' : 'Alertas desativados!');
                      } else {
                        toast.error('Erro ao salvar configuração');
                      }
                    } catch (error) {
                      console.error('Erro ao salvar:', error);
                      toast.error('Erro ao salvar configuração');
                    }
                  }}
                />
                <span className="toggle-slider"></span>
              </label>
              <span className="toggle-label">
                {whatsappConfig.alertaVencimento ? 'Ativado' : 'Desativado'}
              </span>
            </div>
            <div className="expand-icon">
              {expandedSections.whatsapp ? <FiChevronDown /> : <FiChevronRight />}
            </div>
          </div>
        </div>

        {expandedSections.whatsapp && (
          <div className="config-form">
            {/* Primeira Antecedência */}
            <div className="alert-config-section">
              <h4>🔔 Primeiro Alerta</h4>
              <div className="form-grid">
                <div className="form-group">
                  <label className="form-label">Quando Enviar</label>
                  <select
                    className="form-select"
                    value={whatsappConfig.diasAntecedencia1}
                    onChange={(e) => setWhatsappConfig(prev => ({
                      ...prev,
                      diasAntecedencia1: parseInt(e.target.value)
                    }))}
                  >
                    <option value={0}>No dia do vencimento</option>
                    <option value={3}>3 dias antes</option>
                    <option value={5}>5 dias antes</option>
                    <option value={7}>7 dias antes</option>
                  </select>
                </div>
              </div>
              <div className="form-group">
                <label className="form-label">Mensagem do Primeiro Alerta</label>
                <textarea
                  className="form-textarea"
                  rows="3"
                  value={whatsappConfig.mensagemAntecedencia1}
                  onChange={(e) => setWhatsappConfig(prev => ({
                    ...prev,
                    mensagemAntecedencia1: e.target.value
                  }))}
                />
              </div>
            </div>

            {/* Segunda Antecedência */}
            <div className="alert-config-section">
              <h4>⚠️ Segundo Alerta</h4>
              <div className="form-grid">
                <div className="form-group">
                  <label className="form-label">Quando Enviar</label>
                  <select
                    className="form-select"
                    value={whatsappConfig.diasAntecedencia2}
                    onChange={(e) => setWhatsappConfig(prev => ({
                      ...prev,
                      diasAntecedencia2: parseInt(e.target.value)
                    }))}
                  >
                    <option value={0}>No dia do vencimento</option>
                    <option value={1}>1 dia antes</option>
                    <option value={2}>2 dias antes</option>
                    <option value={3}>3 dias antes</option>
                  </select>
                </div>
              </div>
              <div className="form-group">
                <label className="form-label">Mensagem do Segundo Alerta</label>
                <textarea
                  className="form-textarea"
                  rows="3"
                  value={whatsappConfig.mensagemAntecedencia2}
                  onChange={(e) => setWhatsappConfig(prev => ({
                    ...prev,
                    mensagemAntecedencia2: e.target.value
                  }))}
                />
              </div>
            </div>

            {/* Após Vencimento */}
            <div className="alert-config-section">
              <h4>🚨 Alerta Após Vencimento</h4>
              <div className="form-grid">
                <div className="form-group">
                  <label className="form-label">Quando Enviar</label>
                  <select
                    className="form-select"
                    value={whatsappConfig.diasAposVencimento}
                    onChange={(e) => setWhatsappConfig(prev => ({
                      ...prev,
                      diasAposVencimento: parseInt(e.target.value)
                    }))}
                  >
                    <option value={3}>3 dias após</option>
                    <option value={5}>5 dias após</option>
                    <option value={7}>7 dias após</option>
                  </select>
                </div>
              </div>
              <div className="form-group">
                <label className="form-label">Mensagem Após Vencimento</label>
                <textarea
                  className="form-textarea"
                  rows="3"
                  value={whatsappConfig.mensagemAposVencimento}
                  onChange={(e) => setWhatsappConfig(prev => ({
                    ...prev,
                    mensagemAposVencimento: e.target.value
                  }))}
                />
              </div>
            </div>

            <div className="form-help-section">
              <small className="form-help">
                <strong>Variáveis disponíveis para todas as mensagens:</strong><br/>
                <code>{'{cliente}'}</code> - Nome do cliente<br/>
                <code>{'{valor}'}</code> - Valor da parcela<br/>
                <code>{'{quando}'}</code> - Data de vencimento<br/>
                <code>{'{parcela}'}</code> - Número da parcela
              </small>
            </div>

            <div className="config-actions">
              <button
                type="button"
                className="btn btn-primary"
                onClick={async () => {
                  try {
                    const response = await fetch('/api/configuracoes/whatsapp-alertas', {
                      method: 'POST',
                      headers: { 'Content-Type': 'application/json' },
                      body: JSON.stringify(whatsappConfig)
                    });

                    if (response.ok) {
                      toast.success('Configurações de alerta salvas com sucesso!');
                    } else {
                      toast.error('Erro ao salvar configurações');
                    }
                  } catch (error) {
                    console.error('Erro completo:', error);
                    toast.error(`Erro ao salvar configurações: ${error.message}`);
                  }
                }}
              >
                <FiSave />
                Salvar Alertas
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Configuracoes;
