import React, { useState, useMemo } from 'react';
import { SchoolData, SchoolProfile } from '../types';
import { dbService } from '../services/dbService';
import { Download, Upload, Trash2, Database, School, Camera, FileText, Info, AlertTriangle, X, CheckCircle, AlertCircle, Cloud, HelpCircle, RefreshCw, Plus, User } from 'lucide-react';
import { isSupabaseConfigured, uploadLogo } from '../services/supabase';
import { useDialog } from '../DialogContext';
import imageCompression from 'browser-image-compression';

interface SettingsProps {
  data: SchoolData;
  updateData: (newData: Partial<SchoolData>) => void;
  setData: (data: SchoolData) => void;
}

const Settings: React.FC<SettingsProps> = ({ data, updateData, setData }) => {
  const { showAlert, showConfirm } = useDialog();
  const [selectedProfileId, setSelectedProfileId] = useState<string>(data.profile.id || 'main-school');
  const [profiles, setProfiles] = useState<SchoolProfile[]>(data.profiles || [data.profile]);
  const [globalLogo, setGlobalLogo] = useState<string>(data.logo || '');
  
  const currentProfile = profiles.find(p => p.id === selectedProfileId) || profiles[0];

  const currentDirector = useMemo(() => {
    const employees = data.employees || [];
    const categories = data.employeeCategories || [];
    
    return employees.find(e => {
      const cat = categories.find(c => c.id === e.categoryId);
      const catName = cat?.name.toLowerCase() || '';
      const empName = e.name.toLowerCase();
      return catName.includes('diretor') || catName.includes('diretoria') || 
             empName.includes('diretor') || empName.includes('diretoria');
    });
  }, [data.employees, data.employeeCategories]);

  const [profileForm, setProfileForm] = useState<SchoolProfile>(currentProfile);

  const [showEvolutionModal, setShowEvolutionModal] = useState(false);
  const [evolutionForm, setEvolutionForm] = useState({
    apiUrl: data.evolutionConfig?.apiUrl || '',
    instanceName: data.evolutionConfig?.instanceName || '',
    apiKey: data.evolutionConfig?.apiKey || ''
  });

  const saveEvolutionConfig = () => {
    updateData({ evolutionConfig: evolutionForm });
    setShowEvolutionModal(false);
    showAlert('Sucesso', 'Configurações da Evolution API salvas!', 'success');
  };

  React.useEffect(() => {
    setProfileForm(currentProfile);
  }, [selectedProfileId, profiles]);

  React.useEffect(() => {
    setGlobalLogo(data.logo || '');
  }, [data.logo]);

  const [activeTab, setActiveTab] = useState<'perfil' | 'monitoramento'>('perfil');
  const [apiLogs, setApiLogs] = useState<any[]>([]);

  React.useEffect(() => {
    if (activeTab === 'monitoramento') {
      fetch('/api/logs')
        .then(res => res.json())
        .then(data => setApiLogs(data))
        .catch(err => console.error('Erro ao buscar logs:', err));
    }
  }, [activeTab]);

  const validateCNPJ = (cnpj: string) => {
    cnpj = cnpj.replace(/[^\d]+/g, '');
    if (cnpj === '' || cnpj.length !== 14) return false;
    if (/^(\d)\1+$/.test(cnpj)) return false;
    
    let tamanho = cnpj.length - 2;
    let numeros = cnpj.substring(0, tamanho);
    let digitos = cnpj.substring(tamanho);
    let soma = 0;
    let pos = tamanho - 7;
    for (let i = tamanho; i >= 1; i--) {
      soma += parseInt(numeros.charAt(tamanho - i)) * pos--;
      if (pos < 2) pos = 9;
    }
    let resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);
    if (resultado !== parseInt(digitos.charAt(0))) return false;
    
    tamanho = tamanho + 1;
    numeros = cnpj.substring(0, tamanho);
    soma = 0;
    pos = tamanho - 7;
    for (let i = tamanho; i >= 1; i--) {
      soma += parseInt(numeros.charAt(tamanho - i)) * pos--;
      if (pos < 2) pos = 9;
    }
    resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);
    if (resultado !== parseInt(digitos.charAt(1))) return false;
    
    return true;
  };

  const handleZipChange = async (zip: string) => {
    const cleanZip = zip.replace(/\D/g, '');
    setProfileForm(prev => ({ ...prev, zip: zip.replace(/^(\d{5})(\d)/, '$1-$2').slice(0, 9) }));
    
    if (cleanZip.length === 8) {
      try {
        const response = await fetch(`https://viacep.com.br/ws/${cleanZip}/json/`);
        const data = await response.json();
        if (!data.erro) {
          setProfileForm(prev => ({
            ...prev,
            address: data.logradouro,
            city: data.localidade,
            state: data.uf
          }));
        }
      } catch (error) {
        console.error('Erro ao buscar CEP:', error);
      }
    }
  };

  const saveProfile = () => {
    if (!validateCNPJ(profileForm.cnpj)) {
      showAlert('Erro', 'CNPJ inválido. Por favor, insira um CNPJ verdadeiro.', 'error');
      return;
    }

    // Check if trying to set as Matriz but another Matriz already exists
    if (profileForm.type === 'matriz') {
      const otherMatriz = profiles.find(p => p.type === 'matriz' && p.id !== profileForm.id);
      if (otherMatriz) {
        showAlert('Erro', `Já existe uma matriz cadastrada (${otherMatriz.name}). Só é permitida uma matriz.`, 'error');
        return;
      }
    }

    const updatedProfiles = profiles.map(p => p.id === profileForm.id ? profileForm : p);
    const mainProfile = updatedProfiles.find(p => p.type === 'matriz') || updatedProfiles[0];
    
    setProfiles(updatedProfiles);
    updateData({ profiles: updatedProfiles, profile: mainProfile });
    showAlert('Sucesso', 'Configurações salvas com sucesso!', 'success');
  };

  const addNewInstitution = () => {
    const newId = `school-${Date.now()}`;
    const newProfile: SchoolProfile = {
      id: newId,
      name: 'Nova Instituição',
      address: '',
      city: '',
      state: '',
      zip: '',
      cnpj: '',
      phone: '',
      email: '',
      type: 'filial'
    };
    setProfiles([...profiles, newProfile]);
    setSelectedProfileId(newId);
  };

  const deleteInstitution = (id: string) => {
    if (profiles.length <= 1) {
      showAlert('Erro', 'É necessário ter pelo menos uma instituição cadastrada.', 'error');
      return;
    }
    
    const profileToDelete = profiles.find(p => p.id === id);
    if (profileToDelete?.type === 'matriz') {
      showAlert('Erro', 'Não é possível excluir a instituição matriz. Altere outra para matriz primeiro.', 'error');
      return;
    }

    showConfirm(
      'Excluir Instituição?',
      `Tem certeza que deseja excluir a instituição "${profileToDelete?.name}"?`,
      () => {
        const updatedProfiles = profiles.filter(p => p.id !== id);
        setProfiles(updatedProfiles);
        setSelectedProfileId(updatedProfiles[0].id);
        updateData({ profiles: updatedProfiles, profile: updatedProfiles[0] });
      }
    );
  };

  const [isSyncing, setIsSyncing] = useState(false);
  const supabaseConfigured = useMemo(() => isSupabaseConfigured(), []);
  const [showImportModal, setShowImportModal] = useState(false);
  const [isClosing, setIsClosing] = useState(false);

  const downloadSupabaseSQL = () => {
    const sql = `-- Create the table for storing the entire application state as a JSON blob
create table if not exists school_data (
  id bigint primary key,
  data jsonb not null default '{}'::jsonb,
  updated_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Insert the initial row (id=1) if it doesn't exist so the app has something to fetch/update
insert into school_data (id, data)
values (1, '{}'::jsonb)
on conflict (id) do nothing;

-- Enable Row Level Security (RLS)
alter table school_data enable row level security;

-- Create a policy that allows anyone to read/write (for development/demo purposes)
-- In a real production app, you would restrict this to authenticated users
create policy "Enable read access for all users"
on school_data for select
using (true);

create policy "Enable insert access for all users"
on school_data for insert
with check (true);

create policy "Enable update access for all users"
on school_data for update
using (true);`;

    const blob = new Blob([sql], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'supabase_setup.sql';
    a.click();
    URL.revokeObjectURL(url);
  };

  const closeModal = () => {
    setIsClosing(true);
    setTimeout(() => {
      setShowImportModal(false);
      setIsClosing(false);
    }, 300);
  };

  const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      try {
        showAlert('Aguarde', 'Fazendo upload e otimizando a logo...', 'info');
        
        // Compression options
        const options = {
          maxSizeMB: 0.1, // 100KB
          maxWidthOrHeight: 500,
          useWebWorker: true
        };

        const compressedFile = await imageCompression(file, options);
        
        let logoUrl = '';
        
        // Try to upload to Supabase if configured
        if (supabaseConfigured) {
          const url = await uploadLogo(compressedFile);
          if (url) {
            logoUrl = url;
          }
        }
        
        // Fallback to base64 if Supabase upload failed or not configured
        if (!logoUrl) {
          const reader = new FileReader();
          logoUrl = await new Promise((resolve) => {
            reader.onload = (e) => resolve(e.target?.result as string);
            reader.readAsDataURL(compressedFile);
          });
        }

        setGlobalLogo(logoUrl);
        updateData({ logo: logoUrl });
        showAlert('Sucesso', 'Logo atualizada com sucesso!', 'success');
      } catch (error) {
        console.error('Erro ao fazer upload da imagem:', error);
        showAlert('Erro', 'Falha ao processar e salvar a imagem.', 'error');
      }
    }
  };

  const handleReset = async () => {
    await dbService.resetData();
    window.location.reload();
  };

  const formatPhone = (value: string) => {
    return value
      .replace(/\D/g, '')
      .replace(/^(\d{2})(\d)/, '($1) $2 ')
      .replace(/(\d{4})(\d)/, '$1-$2')
      .slice(0, 16);
  };

  const handleManualSync = async () => {
    if (!supabaseConfigured) return;
    
    setIsSyncing(true);
    try {
      const cloudData = await dbService.fetchFromCloud();
      if (cloudData) {
        setData(cloudData);
        await dbService.saveData(cloudData);
        showAlert('Sucesso', '✅ Dados sincronizados com a nuvem!', 'success');
      } else {
        // If no cloud data, maybe we should push local data?
        await dbService.saveToCloud(data);
        showAlert('Sucesso', '✅ Dados locais enviados para a nuvem!', 'success');
      }
    } catch (error) {
      showAlert('Erro', '❌ Falha na sincronização. Verifique sua conexão e configurações.', 'error');
    } finally {
      setIsSyncing(false);
    }
  };

  const inputClass = "w-full px-4 py-3 bg-white text-black border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all shadow-sm text-sm";

  return (
    <div className="space-y-8 animate-in fade-in duration-300 pb-20">
      <header>
        <h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">Configurações</h2>
        <p className="text-slate-500 font-medium">Gerencie o perfil da escola, modelo de contrato e dados.</p>
        
        <div className="flex gap-4 mt-6 border-b border-slate-200">
          <button 
            onClick={() => setActiveTab('perfil')}
            className={`pb-2 font-bold text-sm ${activeTab === 'perfil' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}
          >
            Perfil
          </button>
          <button 
            onClick={() => setActiveTab('monitoramento')}
            className={`pb-2 font-bold text-sm ${activeTab === 'monitoramento' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-slate-500 hover:text-slate-700'}`}
          >
            Monitoramento de API
          </button>
        </div>
      </header>

      {activeTab === 'perfil' ? (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-6">
            <div className="bg-white p-8 rounded-xl border border-slate-200 shadow-xl space-y-6">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3 text-indigo-600">
                  <div className="p-3 bg-indigo-50 rounded-lg">
                    <School size={24} />
                  </div>
                  <h3 className="text-xl font-black text-slate-800">Perfil da Instituição</h3>
                </div>
                <button 
                  onClick={addNewInstitution}
                  className="flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all font-bold text-xs shadow-md"
                >
                  <Plus size={16} /> Nova Instituição
                </button>
              </div>

              {/* Institution Selector */}
              <div className="flex flex-wrap gap-2 mb-6">
                {profiles.map(p => (
                  <div key={p.id} className="flex items-center">
                    <button
                      onClick={() => setSelectedProfileId(p.id)}
                      className={`px-4 py-2 rounded-lg font-bold text-xs transition-all border ${
                        selectedProfileId === p.id 
                          ? 'bg-indigo-600 text-white border-indigo-600 shadow-md' 
                          : 'bg-white text-slate-600 border-slate-200 hover:border-indigo-300'
                      }`}
                    >
                      {p.name} {p.type === 'matriz' && '(Matriz)'}
                    </button>
                    {p.id !== selectedProfileId && p.type !== 'matriz' && (
                      <button 
                        onClick={(e) => { e.stopPropagation(); deleteInstitution(p.id); }}
                        className="ml-1 p-1 text-red-400 hover:text-red-600 transition-colors"
                      >
                        <Trash2 size={14} />
                      </button>
                    )}
                  </div>
                ))}
              </div>

              <div className="flex flex-col md:flex-row gap-8">
                <div className="flex flex-col items-center gap-4">
                  <div className="w-40 h-40 rounded-xl bg-slate-50 border-2 border-dashed border-slate-200 flex items-center justify-center overflow-hidden relative group shadow-inner">
                    {globalLogo ? (
                      <img src={globalLogo} alt="Logo" className="w-full h-full object-contain p-2" />
                    ) : (
                      <div className="text-slate-300 text-center p-4">
                        <Camera size={40} className="mx-auto mb-2 opacity-20" />
                        <span className="text-[10px] font-bold uppercase text-slate-500">Logo Global</span>
                      </div>
                    )}
                    <label className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer text-white">
                      <Upload size={24} />
                      <input type="file" accept="image/*" className="hidden" onChange={handleLogoUpload} />
                    </label>
                  </div>
                  <p className="text-[10px] font-bold text-slate-400 uppercase text-center">Logo única para todas as unidades</p>
                </div>

                <div className="flex-1 space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Nome da Escola</label>
                      <input className={inputClass} value={profileForm.name} onChange={e => setProfileForm({...profileForm, name: e.target.value})} />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">CNPJ</label>
                      <input className={inputClass} placeholder="00.000.000/0001-00" value={profileForm.cnpj} onChange={e => setProfileForm({...profileForm, cnpj: e.target.value})} />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="md:col-span-1">
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">CEP</label>
                      <input className={inputClass} placeholder="00000-000" value={profileForm.zip} onChange={e => handleZipChange(e.target.value)} />
                    </div>
                    <div className="md:col-span-2">
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Endereço</label>
                      <input className={inputClass} value={profileForm.address} onChange={e => setProfileForm({...profileForm, address: e.target.value})} />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="md:col-span-1">
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Cidade</label>
                      <input className={inputClass} value={profileForm.city} onChange={e => setProfileForm({...profileForm, city: e.target.value})} />
                    </div>
                    <div className="md:col-span-1">
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Estado (UF)</label>
                      <input className={inputClass} placeholder="UF" value={profileForm.state} onChange={e => setProfileForm({...profileForm, state: e.target.value.toUpperCase().slice(0, 2)})} />
                    </div>
                    <div className="md:col-span-1">
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Tipo</label>
                      <select 
                        className={inputClass} 
                        value={profileForm.type} 
                        onChange={e => setProfileForm({...profileForm, type: e.target.value as 'matriz' | 'filial'})}
                      >
                        <option value="matriz">Matriz</option>
                        <option value="filial">Filial</option>
                      </select>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Telefone</label>
                      <input className={inputClass} placeholder="(00) 0 0000-0000" value={profileForm.phone} onChange={e => setProfileForm({...profileForm, phone: formatPhone(e.target.value)})} maxLength={16} />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Email</label>
                      <input className={inputClass} placeholder="Email" value={profileForm.email} onChange={e => setProfileForm({...profileForm, email: e.target.value})} />
                    </div>
                  </div>
                </div>
              </div>

              <div className="pt-4">
                <button 
                  onClick={saveProfile}
                  className="w-full py-4 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition-all shadow-lg font-bold text-sm"
                >
                  Salvar Perfil da Instituição
                </button>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-xl space-y-4">
              <div className="flex items-center gap-3 text-indigo-600">
                <div className="p-2 bg-indigo-50 rounded-lg">
                  <Cloud size={20} />
                </div>
                <h3 className="text-lg font-black text-slate-800">Sincronização Nuvem</h3>
              </div>
              
              <div className={`p-4 rounded-lg border ${supabaseConfigured ? 'bg-emerald-50 border-emerald-200 text-emerald-700' : 'bg-slate-50 border-slate-200 text-slate-500'}`}>
                <div className="flex items-center gap-2 font-bold text-sm mb-1">
                  {supabaseConfigured ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
                  {supabaseConfigured ? 'Conectado ao Supabase' : 'Não Conectado'}
                </div>
                <p className="text-xs opacity-80 leading-relaxed">
                  {supabaseConfigured 
                    ? 'Seus dados estão sendo salvos automaticamente na nuvem.' 
                    : 'Para habilitar o backup na nuvem, configure as variáveis de ambiente VITE_SUPABASE_URL e VITE_SUPABASE_KEY.'}
                </p>
                {!supabaseConfigured && (
                  <div className="mt-3 text-[10px] bg-white p-2 rounded border border-slate-200 font-mono text-slate-400 break-all">
                    VITE_SUPABASE_URL=...<br/>
                    VITE_SUPABASE_KEY=...
                  </div>
                )}
              </div>

              {supabaseConfigured && (
                <div className="p-4 rounded-lg bg-emerald-50 border border-emerald-100 text-emerald-700">
                  <p className="text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
                    <CheckCircle size={14} /> Sincronização Automática Ativa
                  </p>
                </div>
              )}

              <button 
                onClick={downloadSupabaseSQL}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 transition-all font-bold text-xs border border-indigo-100"
              >
                <FileText size={16} /> Baixar Script SQL Supabase
              </button>
            </div>

            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-xl space-y-4">
              <div className="flex items-center gap-3 text-indigo-600">
                <div className="p-2 bg-indigo-50 rounded-lg">
                  <Database size={20} />
                </div>
                <h3 className="text-lg font-black text-slate-800">Dados do System</h3>
              </div>
              <button onClick={async () => await dbService.exportData()} className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-slate-800 text-white rounded-lg hover:bg-slate-700 transition-all font-bold text-xs">
                <Download size={16} /> Exportar Backup
              </button>
              <label className="flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-slate-200 text-slate-600 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors font-bold text-xs">
                <Upload size={16} /> Importar Backup
                <input type="file" className="hidden" accept=".json" onChange={async (e) => {
                  const file = e.target.files?.[0];
                  if (file) {
                    showConfirm(
                      'Substituir Dados?', 
                      '⚠️ Tem certeza que deseja substituir todos os dados atuais? Esta ação não pode ser desfeita.',
                      async () => {
                        await dbService.importData(file);
                        const newData = await dbService.initData();
                        setData(newData);
                        showAlert('Sucesso', '✅ Dados restaurados com sucesso!', 'success');
                      }
                    );
                  }
                }} />
              </label>
            </div>

            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-xl space-y-4">
              <div className="flex items-center gap-3 text-indigo-600">
                <div className="p-2 bg-indigo-50 rounded-lg">
                  <FileText size={20} />
                </div>
                <h3 className="text-lg font-black text-slate-800">Evolution API</h3>
              </div>
              
              <div className="p-4 rounded-lg bg-slate-50 border border-slate-200">
                {data.evolutionConfig?.apiUrl ? (
                  <div className="space-y-2 text-sm text-slate-600">
                    <p><strong>URL:</strong> {data.evolutionConfig.apiUrl}</p>
                    <p><strong>Instância:</strong> {data.evolutionConfig.instanceName}</p>
                    <p><strong>API Key:</strong> ••••••••</p>
                  </div>
                ) : (
                  <p className="text-xs text-slate-500 text-center">Nenhuma credencial configurada.</p>
                )}
              </div>

              <button 
                onClick={() => setShowEvolutionModal(true)}
                className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all font-bold text-xs shadow-md"
              >
                <Plus size={16} /> Configurar Credenciais
              </button>
            </div>

            <div className="bg-gradient-to-br from-indigo-50 to-blue-50 p-6 rounded-xl border border-indigo-100 shadow-xl space-y-4">
              <div className="flex items-center gap-3 text-indigo-800">
                <div className="p-2 bg-white rounded-lg shadow-sm">
                  <User size={20} className="text-indigo-600" />
                </div>
                <h3 className="text-lg font-black text-slate-800">Responsável Legal / Diretor</h3>
              </div>
              
              <div className="p-4 rounded-lg bg-white border border-indigo-50 shadow-sm">
                {currentDirector ? (
                  <div className="space-y-2 text-sm text-slate-700">
                    <p><strong>Nome:</strong> {currentDirector.name}</p>
                    <p><strong>CPF:</strong> {currentDirector.cpf}</p>
                    <p className="text-xs text-indigo-500 mt-2 font-medium bg-indigo-50 inline-block px-2 py-1 rounded">Este responsável assinará automaticamente os documentos.</p>
                  </div>
                ) : (
                  <p className="text-xs text-slate-500 text-center">Nenhum diretor localizado. Cadastre um funcionário como Diretor na aba Funcionários.</p>
                )}
              </div>
            </div>

            <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-xl">
              <button 
                onClick={() => showConfirm(
                  'Resetar Sistema', 
                  'Isso apagará TODOS os dados cadastrados. Não há como desfazer.',
                  handleReset,
                  'alert'
                )} 
                className="w-full py-3 border border-red-200 text-red-600 rounded-lg hover:bg-red-50 transition-colors font-bold text-xs flex items-center justify-center gap-2"
              >
                <Trash2 size={16} /> Resetar Fábrica
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="bg-white p-8 rounded-xl border border-slate-200 shadow-xl">
          <h3 className="text-xl font-black text-slate-800 mb-6">Logs de API</h3>
          <div className="overflow-x-auto">
            <table className="w-full text-left text-sm">
              <thead className="bg-slate-50 text-slate-500 uppercase text-[10px] font-black tracking-wider">
                <tr>
                  <th className="px-4 py-3">Data</th>
                  <th className="px-4 py-3">Serviço</th>
                  <th className="px-4 py-3">Ação</th>
                  <th className="px-4 py-3">Detalhes</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {apiLogs.map((log, i) => (
                  <tr key={i}>
                    <td className="px-4 py-3 text-slate-500">{new Date(log.date).toLocaleString()}</td>
                    <td className="px-4 py-3 font-bold text-indigo-600">{log.service}</td>
                    <td className="px-4 py-3 text-slate-700">{log.action}</td>
                    <td className="px-4 py-3 text-slate-600 text-xs font-mono">{JSON.stringify(log.details)}</td>
                  </tr>
                ))}
                {apiLogs.length === 0 && (
                  <tr>
                    <td colSpan={4} className="px-4 py-8 text-center text-slate-400">Nenhum log encontrado.</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Evolution API Modal */}
      {showEvolutionModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-transparent animate-in fade-in duration-200">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-slide-up">
            <div className="px-6 py-5 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
              <h3 className="text-xl font-bold text-slate-800">Credenciais Evolution API</h3>
              <button 
                onClick={() => setShowEvolutionModal(false)}
                className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-full transition-colors"
              >
                <X size={20} />
              </button>
            </div>
            
            <div className="p-6 space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">URL da API</label>
                <input 
                  type="text" 
                  value={evolutionForm.apiUrl} 
                  onChange={e => setEvolutionForm({...evolutionForm, apiUrl: e.target.value})}
                  className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all shadow-sm text-sm"
                  placeholder="https://api.evolution.com"
                />
              </div>
              
              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Nome da Instância</label>
                <input 
                  type="text" 
                  value={evolutionForm.instanceName} 
                  onChange={e => setEvolutionForm({...evolutionForm, instanceName: e.target.value})}
                  className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all shadow-sm text-sm"
                  placeholder="minha-instancia"
                />
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">API Key</label>
                <input 
                  type="password" 
                  value={evolutionForm.apiKey} 
                  onChange={e => setEvolutionForm({...evolutionForm, apiKey: e.target.value})}
                  className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all shadow-sm text-sm"
                  placeholder="••••••••••••"
                />
              </div>
            </div>

            <div className="p-6 border-t border-slate-100 bg-slate-50/50 flex justify-end gap-3">
              <button 
                onClick={() => setShowEvolutionModal(false)}
                className="px-5 py-2.5 text-slate-600 font-semibold hover:bg-slate-200 rounded-xl transition-all"
              >
                Cancelar
              </button>
              <button 
                onClick={saveEvolutionConfig}
                className="px-6 py-2.5 bg-indigo-600 text-white font-bold rounded-xl hover:bg-indigo-700 shadow-md transition-all flex items-center gap-2"
              >
                <CheckCircle size={18} /> Confirmar
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Settings;