import React, { useState } from 'react';
import { Settings, Server, Globe, Lock, Bell, Moon, Sun, RefreshCw, Cpu, Database, Save, AlertCircle, Info, LayoutDashboard } from 'lucide-react';
import { useAuthContext } from '@/components/shared/AuthProvider';
import { toast } from 'sonner';

const GrOpsConfigView = () => {
  const { isDark, toggleTheme } = useAuthContext();
  const [activeTab, setActiveTab] = useState('Geral');
  const [saving, setSaving] = useState(false);

  // Settings logic
  const handleSave = () => {
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
      toast.success("Configurações atualizadas com sucesso!");
    }, 1500);
  };

  const sections = [
    { id: 'Geral', icon: Settings },
    { id: 'Conexão', icon: Server },
    { id: 'Notificações', icon: Bell },
    { id: 'Segurança', icon: Lock }
  ];

  return (
    <div className="flex flex-col gap-8 p-6 md:p-10 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <header className="flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div className="space-y-2">
          <h1 className="text-4xl md:text-6xl font-bold text-slate-800 dark:text-white tracking-tighter leading-none">
            Configurações <span className="text-[var(--gr-primary)]">GR</span>
          </h1>
          <p className="text-slate-400 dark:text-slate-500 text-base md:text-lg font-medium italic opacity-80">
            Ajustes de Engine, integração de API e preferências do sistema
          </p>
        </div>

        <button 
          onClick={handleSave}
          disabled={saving}
          className="flex items-center justify-center gap-3 px-10 py-5 bg-[var(--gr-primary)] hover:bg-[var(--gr-primary-dark)] text-white rounded-[24px] font-bold text-xs uppercase tracking-[0.2em] transition-all shadow-xl shadow-[var(--gr-primary)]/20 hover:scale-[1.05] active:scale-95 disabled:opacity-50"
        >
          {saving ? <RefreshCw className="animate-spin" size={18} /> : <Save size={18} />}
          Salvar Alterações
        </button>
      </header>

      <div className="grid grid-cols-1 xl:grid-cols-12 gap-10">
        {/* Navigation Sidebar */}
        <div className="xl:col-span-3 space-y-6">
           <div className="bg-white dark:bg-[#1b1b1b] p-6 rounded-[40px] border border-slate-200 dark:border-white/5 shadow-sm space-y-2">
              {sections.map(section => (
                 <button
                   key={section.id}
                   onClick={() => setActiveTab(section.id)}
                   className={`w-full flex items-center gap-4 px-6 py-4 rounded-[24px] text-sm font-bold uppercase tracking-widest transition-all ${
                     activeTab === section.id 
                     ? 'bg-[var(--gr-primary)] text-white shadow-lg shadow-[var(--gr-primary)]/20' 
                     : 'text-slate-400 hover:bg-slate-50 dark:hover:bg-[#141414]'
                   }`}
                 >
                    <section.icon size={20} />
                    {section.id}
                 </button>
              ))}
           </div>
           
           <div className="bg-slate-900 dark:bg-black p-8 rounded-[40px] border border-white/5 space-y-6">
              <div className="flex items-center gap-3 text-emerald-500">
                 <Cpu size={24} />
                 <span className="text-[10px] font-bold uppercase tracking-[0.2em]">Engine Status</span>
              </div>
              <div className="space-y-3">
                 <div className="flex justify-between text-[10px] font-bold text-slate-500">
                    <span>Otimização</span>
                    <span className="text-white">98%</span>
                 </div>
                 <div className="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
                    <div className="h-full bg-emerald-500" style={{ width: '98%' }} />
                 </div>
              </div>
              <p className="text-[10px] text-slate-500 leading-relaxed font-medium">
                 O motor de processamento GR está operando em alta performance com baixa latência de I/O.
              </p>
           </div>
        </div>

        {/* Configuration Forms */}
        <div className="xl:col-span-9 space-y-8">
           {activeTab === 'Geral' && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                 <div className="bg-white dark:bg-[#1b1b1b] p-10 rounded-[48px] border border-slate-200 dark:border-white/5 shadow-sm space-y-8">
                    <h3 className="text-xl font-bold text-slate-800 dark:text-white flex items-center gap-3">
                       <Globe className="text-blue-500" size={24} />
                       Interface & Idioma
                    </h3>
                    
                    <div className="space-y-6">
                       <div className="space-y-3">
                          <label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Idioma do Sistema</label>
                          <select className="w-full px-6 py-4 bg-slate-50 dark:bg-[#141414] border-none rounded-[24px] text-sm font-bold text-slate-700 dark:text-white focus:ring-4 focus:ring-[var(--gr-primary)]/10 outline-none appearance-none">
                             <option>Português (Brasil)</option>
                             <option>English (US)</option>
                             <option>Español</option>
                          </select>
                       </div>

                       <div className="flex items-center justify-between p-6 bg-slate-100 dark:bg-[#141414] rounded-[32px] border border-slate-200 dark:border-white/5">
                          <div className="space-y-1">
                             <h4 className="text-xs font-bold text-slate-800 dark:text-white uppercase tracking-tight">Tema Dark / Light</h4>
                             <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">ALTERAR APARÊNCIA VOLÁTIL</p>
                          </div>
                          <button 
                            onClick={toggleTheme}
                             className={`p-4 rounded-2xl transition-all duration-500 ${isDark ? 'bg-slate-900 text-yellow-400' : 'bg-white text-blue-500 shadow-xl'}`}
                          >
                             {isDark ? <Sun size={24}/> : <Moon size={24}/>}
                          </button>
                       </div>
                    </div>
                 </div>

                 <div className="bg-white dark:bg-[#1b1b1b] p-10 rounded-[48px] border border-slate-200 dark:border-white/5 shadow-sm space-y-8">
                    <h3 className="text-xl font-bold text-slate-800 dark:text-white flex items-center gap-3">
                       <LayoutDashboard className="text-emerald-500" size={24} />
                       Preferências Dashboard
                    </h3>
                    
                    <div className="space-y-4">
                       {[
                         { label: 'Atualização Automática (5s)', enabled: true },
                         { label: 'Exibir Logs de Sistema', enabled: false },
                         { label: 'Notificações Sonoras', enabled: true },
                         { label: 'Compactar Listas Longas', enabled: true }
                       ].map((pref, i) => (
                          <div key={i} className="flex items-center justify-between py-2">
                             <span className="text-xs font-bold text-slate-600 dark:text-slate-300">{pref.label}</span>
                             <div className={`w-12 h-6 rounded-full p-1 transition-all ${pref.enabled ? 'bg-emerald-500' : 'bg-slate-200 dark:bg-[#141414]'}`}>
                                <div className={`w-4 h-4 rounded-full bg-white transition-all ${pref.enabled ? 'translate-x-6' : 'translate-x-0'}`} />
                             </div>
                          </div>
                       ))}
                    </div>
                 </div>
              </div>
           )}

           {activeTab === 'Conexão' && (
              <div className="bg-white dark:bg-[#1b1b1b] p-10 rounded-[48px] border border-slate-200 dark:border-white/5 shadow-sm space-y-8 animate-in slide-in-from-right-4">
                 <div className="flex items-center justify-between">
                    <h3 className="text-xl font-bold text-slate-800 dark:text-white flex items-center gap-3">
                       <Database className="text-purple-500" size={24} />
                       Backend & API Endpoints
                    </h3>
                    <div className="flex items-center gap-2 bg-emerald-500/10 px-4 py-2 rounded-xl">
                       <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                       <span className="text-[10px] font-bold text-emerald-500 uppercase tracking-widest">Produção Online</span>
                    </div>
                 </div>

                 <div className="space-y-6">
                    <div className="space-y-3">
                       <label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">API Base URL</label>
                       <input 
                         type="text" 
                         defaultValue="https://api.gr-ops.pralog.com.br/v2"
                         className="w-full px-6 py-4 bg-slate-50 dark:bg-[#141414] border border-slate-200 dark:border-white/5 rounded-[24px] text-sm font-mono font-bold text-blue-500 focus:ring-4 focus:ring-blue-500/10 outline-none"
                       />
                    </div>
                    
                    <div className="grid grid-cols-2 gap-6">
                       <div className="space-y-3">
                          <label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Timeout (ms)</label>
                          <input type="number" defaultValue="30000" className="w-full px-6 py-4 bg-slate-50 dark:bg-[#141414] border-none rounded-[24px] text-sm font-bold opacity-70 outline-none" />
                       </div>
                       <div className="space-y-3">
                          <label className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">Retentativas Max</label>
                          <input type="number" defaultValue="3" className="w-full px-6 py-4 bg-slate-50 dark:bg-[#141414] border-none rounded-[24px] text-sm font-bold opacity-70 outline-none" />
                       </div>
                    </div>
                 </div>

                 <div className="p-6 bg-amber-50/50 dark:bg-amber-900/10 rounded-[32px] border border-amber-100 dark:border-amber-900/20 flex gap-4">
                    <AlertCircle className="text-amber-500 shrink-0" size={24} />
                    <p className="text-xs text-amber-800 dark:text-amber-300 font-medium leading-relaxed">
                       <strong>Atenção:</strong> Alterar as URLs da API pode causar instabilidade no sistema ou perda de conexão com os serviços de monitoramento em tempo real. Solicite suporte antes de proceder.
                    </p>
                 </div>
              </div>
           )}

           <div className="bg-slate-50 dark:bg-[#141414] p-8 rounded-[40px] border border-slate-100 dark:border-white/5 flex items-center gap-6">
              <div className="p-4 bg-white dark:bg-[#1b1b1b] rounded-2xl shadow-sm">
                 <Info size={24} className="text-blue-500" />
              </div>
              <div className="space-y-1">
                 <h4 className="text-sm font-bold text-slate-800 dark:text-white uppercase tracking-tight">Sobre esta Build</h4>
                 <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">VERSÃO 2.4.0-FINAL | BUILD_ID: 0x98AF | AMBIENTE GR CLOUD</p>
              </div>
           </div>
        </div>
      </div>
    </div>
  );
};

export default GrOpsConfigView;
