import React, { useEffect, useState, useRef, useCallback } from 'react'
import { useRouter } from 'next/router'
import { motion, AnimatePresence } from 'framer-motion'
import {
  Settings, Paintbrush, Globe, Bell, Mail, Users, Wrench,
  Upload, Save, Check, AlertTriangle, Eye, EyeOff, Send,
  Image as ImageIcon, Smile, RefreshCw, Webhook,
} from 'lucide-react'
import { useAuth } from '@/context/AuthContext'
import { api } from '@/services/chatApiService'
import { PageHeader, Card, Badge } from '@/components/ui'

// ─── Types ────────────────────────────────────────────────────────────────────

interface SystemSettings {
  systemName: string
  timezone: string
  logoUrl: string | null
  faviconUrl: string | null
  accentColor: string
  sounds: { newMessage: boolean; notification: boolean; connectionStatus: boolean }
  smtp: { host: string; port: number; user: string; password: string; from: string; secure: boolean }
  emailTemplates: { welcome: string; passwordReset: string; trialExpiring: string }
  registration: { mode: 'open' | 'closed' | 'invite'; defaultPlanId: string | null }
  maintenance: { enabled: boolean; message: string }
  webhook: { url: string; secret: string }
}

const TABS = [
  { id: 'branding',     label: 'Branding',       icon: Paintbrush },
  { id: 'regional',     label: 'Regional',        icon: Globe },
  { id: 'sounds',       label: 'Sons',            icon: Bell },
  { id: 'email',        label: 'E-mail',          icon: Mail },
  { id: 'registration', label: 'Registro',        icon: Users },
  { id: 'system',       label: 'Sistema',         icon: Wrench },
  { id: 'deploys',      label: 'Versões',         icon: RefreshCw },
] as const

type Tab = typeof TABS[number]['id']

const TIMEZONES = [
  'America/Sao_Paulo','America/Manaus','America/Belem','America/Fortaleza',
  'America/Recife','America/Maceio','America/Bahia','America/Cuiaba',
  'America/Porto_Velho','America/Boa_Vista','America/Rio_Branco','America/Noronha',
  'America/New_York','America/Chicago','America/Denver','America/Los_Angeles',
  'Europe/London','Europe/Paris','Europe/Berlin','Europe/Lisbon',
  'Asia/Tokyo','Asia/Shanghai','Asia/Kolkata','Australia/Sydney','UTC',
]

// ─── Sub-components ───────────────────────────────────────────────────────────

function SectionTitle({ children }: { children: React.ReactNode }) {
  return <h3 className="text-sm font-black text-white uppercase tracking-widest mb-4">{children}</h3>
}

function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-xs font-bold text-slate-400 mb-1.5">{label}</label>
      {children}
      {hint && <p className="text-xs text-slate-600 mt-1">{hint}</p>}
    </div>
  )
}

function TextInput({ value, onChange, placeholder, type = 'text', disabled }: {
  value: string; onChange: (v: string) => void; placeholder?: string; type?: string; disabled?: boolean
}) {
  return (
    <input
      type={type}
      value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      disabled={disabled}
      className="w-full bg-white/[0.03] border border-white/5 rounded-xl px-4 py-2.5 text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:border-brand-500/40 focus:bg-white/[0.05] transition-all disabled:opacity-40"
    />
  )
}

function Toggle({ checked, onChange, label, hint }: { checked: boolean; onChange: (v: boolean) => void; label: string; hint?: string }) {
  return (
    <div className="flex items-center justify-between p-4 rounded-2xl bg-white/[0.02] border border-white/5">
      <div>
        <p className="text-sm font-semibold text-slate-200">{label}</p>
        {hint && <p className="text-xs text-slate-500 mt-0.5">{hint}</p>}
      </div>
      <button
        onClick={() => onChange(!checked)}
        className={`relative w-11 h-6 rounded-full transition-colors duration-200 ${checked ? 'bg-brand-500' : 'bg-white/10'}`}
      >
        <span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform duration-200 ${checked ? 'translate-x-5' : 'translate-x-0'}`} />
      </button>
    </div>
  )
}

function AssetUpload({ label, current, onUpload, accept = 'image/*' }: {
  label: string; current: string | null; onUpload: (f: File) => Promise<void>; accept?: string
}) {
  const [dragging, setDragging] = useState(false)
  const [loading, setLoading] = useState(false)
  const inputRef = useRef<HTMLInputElement>(null)
  const API = process.env.NEXT_PUBLIC_API_URL ?? ''

  const handle = async (file: File) => {
    setLoading(true)
    try { await onUpload(file) } finally { setLoading(false) }
  }

  return (
    <div>
      <label className="block text-xs font-bold text-slate-400 mb-1.5">{label}</label>
      <div
        onDragOver={e => { e.preventDefault(); setDragging(true) }}
        onDragLeave={() => setDragging(false)}
        onDrop={e => { e.preventDefault(); setDragging(false); const f = e.dataTransfer.files[0]; if (f) handle(f) }}
        onClick={() => inputRef.current?.click()}
        className={`relative h-28 rounded-2xl border-2 border-dashed flex flex-col items-center justify-center gap-2 cursor-pointer transition-all
          ${dragging ? 'border-brand-500 bg-brand-500/5' : 'border-white/10 hover:border-white/20 bg-white/[0.02]'}`}
      >
        {current ? (
          <img src={`${API}${current}`} alt={label} className="h-16 object-contain" />
        ) : (
          <>
            <Upload size={20} className="text-slate-500" />
            <span className="text-xs text-slate-500">Arraste ou clique para enviar</span>
          </>
        )}
        {loading && (
          <div className="absolute inset-0 bg-black/50 rounded-2xl flex items-center justify-center">
            <RefreshCw size={20} className="text-brand-400 animate-spin" />
          </div>
        )}
        <input ref={inputRef} type="file" accept={accept} className="hidden" onChange={e => { const f = e.target.files?.[0]; if (f) handle(f) }} />
      </div>
    </div>
  )
}

function SaveBar({ saving, saved, onSave }: { saving: boolean; saved: boolean; onSave: () => void }) {
  return (
    <div className="flex items-center justify-end mt-8 pt-6 border-t border-white/5">
      <button
        onClick={onSave}
        disabled={saving}
        className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-sm font-bold transition-all disabled:opacity-50"
      >
        {saving ? <RefreshCw size={15} className="animate-spin" /> : saved ? <Check size={15} /> : <Save size={15} />}
        {saving ? 'Salvando...' : saved ? 'Salvo!' : 'Salvar Alterações'}
      </button>
    </div>
  )
}

// ─── Main Page ────────────────────────────────────────────────────────────────

export default function AdminSettings() {
  const { user, loading } = useAuth()
  const router = useRouter()
  const [tab, setTab] = useState<Tab>('branding')
  const [settings, setSettings] = useState<SystemSettings | null>(null)
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)
  const [smtpPassVisible, setSmtpPassVisible] = useState(false)
  const [sendingTest, setSendingTest] = useState(false)
  const [plans, setPlans] = useState<{ id: string; name: string }[]>([])
  const [engine, setEngine] = useState<'infinite' | 'official'>('infinite')
  const [switchingEngine, setSwitchingEngine] = useState(false)

  // ── Estados de Controle de Versões & Deploys ──
  const [versionData, setVersionData] = useState<{
    version: string;
    buildCount: number;
    lastDeploy: string;
    lastCommit?: { hash: string; message: string; author: string };
  } | null>(null)
  const [deploysHistory, setDeploysHistory] = useState<any[]>([])
  const [triggeringDeploy, setTriggeringDeploy] = useState(false)

  const fetchDeployData = useCallback(async () => {
    try {
      const vRes = await fetch('/version.json?t=' + Date.now())
      if (vRes.ok) {
        const vData = await vRes.json()
        setVersionData(vData)
      }
    } catch (e) {}

    try {
      const dRes = await fetch('/deploys.json?t=' + Date.now())
      if (dRes.ok) {
        const dData = await dRes.json()
        setDeploysHistory(dData)
      }
    } catch (e) {}
  }, [])

  const triggerDeploy = async () => {
    if (!window.confirm('Deseja realmente iniciar uma nova compilação e deploy em produção agora?\n\nIsso irá atualizar o repositório, reinstalar dependências, compilar o frontend e backend, e reiniciar os serviços.')) return
    setTriggeringDeploy(true)
    try {
      await api.post('/api/admin/deploys/trigger')
      alert('Deploy automático iniciado em segundo plano! A VPS 4 está compilando os arquivos. O painel monitorará o progresso automaticamente.')
      
      let attempts = 0
      const interval = setInterval(async () => {
        attempts++
        try {
          const vRes = await fetch('/version.json?t=' + Date.now())
          if (vRes.ok) {
            const vData = await vRes.json()
            if (!versionData || vData.buildCount !== versionData.buildCount) {
              setVersionData(vData)
              const dRes = await fetch('/deploys.json?t=' + Date.now())
              if (dRes.ok) {
                setDeploysHistory(await dRes.json())
              }
              setTriggeringDeploy(false)
              clearInterval(interval)
              alert(`Sucesso! Deploy finalizado. Versão atualizada para ${vData.version}.`)
              return
            }
          }
        } catch (e) {}
        
        if (attempts >= 36) { // 3 minutos
          clearInterval(interval)
          setTriggeringDeploy(false)
          alert('O tempo limite de monitoramento esgotou, mas o deploy pode ainda estar rodando. Por favor, recarregue a página em instantes.')
        }
      }, 5000)
    } catch (err) {
      alert('Erro ao tentar acionar o deploy automático.')
      setTriggeringDeploy(false)
    }
  }

  useEffect(() => {
    if (user?.role === 'admin') {
      fetchDeployData()
    }
  }, [user, fetchDeployData])


  useEffect(() => {
    if (!loading && user?.role !== 'admin') router.replace('/inbox')
  }, [loading, user, router])

  useEffect(() => {
    if (user?.role !== 'admin') return
    api.get('/api/admin/settings').then(r => setSettings(r.data)).catch(() => {})
    api.get('/api/admin/plans').then(r => setPlans(r.data ?? [])).catch(() => {})
    api.get('/api/admin/engine').then(r => setEngine(r.data.engine)).catch(() => {})
  }, [user])

  const handleEngineSwitch = async (newEngine: 'infinite' | 'official') => {
    if (newEngine === engine) return
    const confirmSwitch = window.confirm(
      `Deseja realmente alternar a Engine para "${newEngine === 'infinite' ? 'InfiniteAPI' : 'Baileys Oficial'}"?\n\nEsta alteração irá reiniciar o backend (~10s) para aplicar as novas configurações.`
    )
    if (!confirmSwitch) return

    setSwitchingEngine(true)
    try {
      await api.post('/api/admin/engine', { engine: newEngine })
      setEngine(newEngine)
      alert('Engine configurada com sucesso! O servidor está reiniciando. Por favor, aguarde cerca de 10 segundos antes de recarregar a página.')
    } catch {
      alert('Erro ao tentar alternar a engine.')
    } finally {
      setSwitchingEngine(false)
    }
  }

  const set = useCallback(<K extends keyof SystemSettings>(key: K, value: SystemSettings[K]) => {
    setSettings(prev => prev ? { ...prev, [key]: value } : prev)
  }, [])

  const setNested = useCallback(<K extends keyof SystemSettings>(key: K, patch: Partial<SystemSettings[K]>) => {
    setSettings(prev => prev ? { ...prev, [key]: { ...(prev[key] as object), ...patch } } : prev)
  }, [])

  const save = async () => {
    if (!settings) return
    setSaving(true)
    try {
      await api.patch('/api/admin/settings', settings)
      setSaved(true)
      setTimeout(() => setSaved(false), 3000)
    } catch {
    } finally {
      setSaving(false)
    }
  }

  const uploadAsset = async (type: 'logo' | 'favicon', file: File) => {
    const form = new FormData()
    form.append('file', file)
    const { data } = await api.post(`/api/admin/settings/${type}`, form, { headers: { 'Content-Type': 'multipart/form-data' } })
    setSettings(prev => prev ? { ...prev, [`${type}Url`]: data.url } : prev)
  }

  const sendTestEmail = async () => {
    setSendingTest(true)
    try {
      await api.post('/api/admin/settings/smtp-test')
      alert('E-mail de teste enviado!')
    } catch {
      alert('Falha ao enviar e-mail de teste. Verifique as configurações SMTP.')
    } finally {
      setSendingTest(false)
    }
  }

  if (loading || user?.role !== 'admin' || !settings) return (
    <div className="min-h-screen bg-surface flex items-center justify-center">
      <RefreshCw size={24} className="text-brand-400 animate-spin" />
    </div>
  )

  return (
    <div className="min-h-screen bg-surface p-6 lg:p-10 font-sans">
      <PageHeader icon={Settings} title="Configurações do Sistema" subtitle="Personalização global da plataforma" />

      {/* Tabs */}
      <div className="flex items-center gap-1 mb-8 bg-white/[0.02] border border-white/5 rounded-2xl p-1.5 w-fit flex-wrap">
        {TABS.map(t => {
          const Icon = t.icon
          const active = tab === t.id
          return (
            <button
              key={t.id}
              onClick={() => setTab(t.id)}
              className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all ${
                active ? 'bg-brand-600 text-white shadow-lg shadow-brand-900/40' : 'text-slate-400 hover:text-white hover:bg-white/5'
              }`}
            >
              <Icon size={15} />
              {t.label}
            </button>
          )
        })}
      </div>

      <AnimatePresence mode="wait">
        <motion.div key={tab} initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }} transition={{ duration: 0.18 }}>
          <Card variant="glass" padding="p-8" className={`rounded-3xl transition-all duration-300 ${tab === 'deploys' ? 'max-w-5xl w-full' : 'max-w-3xl'}`}>

            {/* ── BRANDING ── */}
            {tab === 'branding' && (
              <div className="space-y-6">
                <SectionTitle>Identidade Visual</SectionTitle>

                <Field label="Nome do Sistema">
                  <TextInput value={settings.systemName} onChange={v => set('systemName', v)} placeholder="NewWhats" />
                </Field>

                <Field label="Cor de Destaque" hint="Aplica-se a botões, links e elementos ativos em toda a interface">
                  <div className="flex items-center gap-3">
                    <input
                      type="color"
                      value={settings.accentColor}
                      onChange={e => set('accentColor', e.target.value)}
                      className="w-12 h-10 rounded-xl border border-white/10 bg-transparent cursor-pointer"
                    />
                    <TextInput value={settings.accentColor} onChange={v => set('accentColor', v)} placeholder="#3b82f6" />
                  </div>
                </Field>

                <div className="grid grid-cols-2 gap-6">
                  <AssetUpload
                    label="Logo"
                    current={settings.logoUrl}
                    onUpload={f => uploadAsset('logo', f)}
                  />
                  <AssetUpload
                    label="Favicon"
                    current={settings.faviconUrl}
                    onUpload={f => uploadAsset('favicon', f)}
                    accept=".ico,.png,.svg"
                  />
                </div>

                <SaveBar saving={saving} saved={saved} onSave={save} />
              </div>
            )}

            {/* ── REGIONAL ── */}
            {tab === 'regional' && (
              <div className="space-y-6">
                <SectionTitle>Configurações Regionais</SectionTitle>

                <Field label="Fuso Horário" hint="Usado para exibição de datas, relatórios e agendamentos">
                  <select
                    value={settings.timezone}
                    onChange={e => set('timezone', e.target.value)}
                    className="w-full bg-white/[0.03] border border-white/5 rounded-xl px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:border-brand-500/40 transition-all"
                  >
                    {TIMEZONES.map(tz => (
                      <option key={tz} value={tz} className="bg-slate-900">{tz}</option>
                    ))}
                  </select>
                </Field>

                <div className="p-4 rounded-2xl bg-brand-500/5 border border-brand-500/20 text-xs text-slate-400">
                  Hora atual no fuso selecionado:{' '}
                  <span className="text-brand-400 font-bold">
                    {new Date().toLocaleString('pt-BR', { timeZone: settings.timezone })}
                  </span>
                </div>

                <SaveBar saving={saving} saved={saved} onSave={save} />
              </div>
            )}

            {/* ── SONS ── */}
            {tab === 'sounds' && (
              <div className="space-y-4">
                <SectionTitle>Sons do Sistema</SectionTitle>
                <Toggle
                  checked={settings.sounds.newMessage}
                  onChange={v => setNested('sounds', { newMessage: v })}
                  label="Nova Mensagem"
                  hint="Som ao receber uma nova mensagem no inbox"
                />
                <Toggle
                  checked={settings.sounds.notification}
                  onChange={v => setNested('sounds', { notification: v })}
                  label="Notificações"
                  hint="Som para alertas e notificações do sistema"
                />
                <Toggle
                  checked={settings.sounds.connectionStatus}
                  onChange={v => setNested('sounds', { connectionStatus: v })}
                  label="Status de Conexão"
                  hint="Som ao conectar ou desconectar uma instância WhatsApp"
                />
                <SaveBar saving={saving} saved={saved} onSave={save} />
              </div>
            )}

            {/* ── EMAIL ── */}
            {tab === 'email' && (
              <div className="space-y-6">
                <div>
                  <SectionTitle>Servidor SMTP</SectionTitle>
                  <div className="grid grid-cols-2 gap-4">
                    <Field label="Host">
                      <TextInput value={settings.smtp.host} onChange={v => setNested('smtp', { host: v })} placeholder="smtp.gmail.com" />
                    </Field>
                    <Field label="Porta">
                      <TextInput value={String(settings.smtp.port)} onChange={v => setNested('smtp', { port: Number(v) || 587 })} placeholder="587" />
                    </Field>
                    <Field label="Usuário">
                      <TextInput value={settings.smtp.user} onChange={v => setNested('smtp', { user: v })} placeholder="noreply@empresa.com" />
                    </Field>
                    <Field label="Senha">
                      <div className="relative">
                        <TextInput
                          type={smtpPassVisible ? 'text' : 'password'}
                          value={settings.smtp.password}
                          onChange={v => setNested('smtp', { password: v })}
                          placeholder="••••••••"
                        />
                        <button
                          onClick={() => setSmtpPassVisible(p => !p)}
                          className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300"
                        >
                          {smtpPassVisible ? <EyeOff size={15} /> : <Eye size={15} />}
                        </button>
                      </div>
                    </Field>
                    <Field label="E-mail Remetente">
                      <TextInput value={settings.smtp.from} onChange={v => setNested('smtp', { from: v })} placeholder="NewWhats <noreply@empresa.com>" />
                    </Field>
                    <Field label="Segurança">
                      <div className="flex items-center gap-2 mt-1">
                        <Toggle
                          checked={settings.smtp.secure}
                          onChange={v => setNested('smtp', { secure: v })}
                          label="TLS/SSL"
                          hint="Porta 465"
                        />
                      </div>
                    </Field>
                  </div>

                  <button
                    onClick={sendTestEmail}
                    disabled={sendingTest || !settings.smtp.host}
                    className="mt-4 flex items-center gap-2 px-4 py-2 rounded-xl bg-white/5 border border-white/10 text-sm text-slate-300 hover:border-brand-500/40 hover:text-brand-400 transition-all disabled:opacity-40"
                  >
                    {sendingTest ? <RefreshCw size={14} className="animate-spin" /> : <Send size={14} />}
                    Enviar E-mail de Teste
                  </button>
                </div>

                <div>
                  <SectionTitle>Modelos de E-mail</SectionTitle>
                  <div className="space-y-4">
                    {[
                      { key: 'welcome' as const, label: 'Boas-vindas', hint: 'Enviado ao novo usuário após cadastro' },
                      { key: 'passwordReset' as const, label: 'Redefinição de Senha', hint: 'Link de reset enviado ao usuário' },
                      { key: 'trialExpiring' as const, label: 'Trial Expirando', hint: 'Aviso enviado 3 dias antes do fim do trial' },
                    ].map(({ key, label, hint }) => (
                      <Field key={key} label={label} hint={hint}>
                        <textarea
                          value={settings.emailTemplates[key]}
                          onChange={e => setNested('emailTemplates', { [key]: e.target.value })}
                          rows={5}
                          placeholder={`Conteúdo HTML do e-mail de ${label.toLowerCase()}...`}
                          className="w-full bg-white/[0.03] border border-white/5 rounded-xl px-4 py-3 text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:border-brand-500/40 font-mono resize-y transition-all"
                        />
                      </Field>
                    ))}
                  </div>
                </div>

                <SaveBar saving={saving} saved={saved} onSave={save} />
              </div>
            )}

            {/* ── REGISTRO ── */}
            {tab === 'registration' && (
              <div className="space-y-6">
                <SectionTitle>Controle de Acesso</SectionTitle>

                <Field label="Modo de Registro" hint="Define quem pode criar uma conta na plataforma">
                  <div className="grid grid-cols-3 gap-3 mt-1">
                    {([
                      { val: 'open',   label: 'Aberto',        hint: 'Qualquer pessoa pode se cadastrar' },
                      { val: 'invite', label: 'Por Convite',   hint: 'Somente via link de convite' },
                      { val: 'closed', label: 'Fechado',       hint: 'Apenas o admin cria usuários' },
                    ] as const).map(opt => (
                      <button
                        key={opt.val}
                        onClick={() => setNested('registration', { mode: opt.val })}
                        className={`p-3 rounded-xl border text-left transition-all ${
                          settings.registration.mode === opt.val
                            ? 'border-brand-500/40 bg-brand-500/10 text-white'
                            : 'border-white/5 bg-white/[0.02] text-slate-400 hover:border-white/10'
                        }`}
                      >
                        <p className="text-sm font-bold">{opt.label}</p>
                        <p className="text-xs text-slate-500 mt-0.5">{opt.hint}</p>
                      </button>
                    ))}
                  </div>
                </Field>

                <Field label="Plano Padrão" hint="Plano atribuído automaticamente a novos usuários">
                  <select
                    value={settings.registration.defaultPlanId ?? ''}
                    onChange={e => setNested('registration', { defaultPlanId: e.target.value || null })}
                    className="w-full bg-white/[0.03] border border-white/5 rounded-xl px-4 py-2.5 text-sm text-slate-200 focus:outline-none focus:border-brand-500/40 transition-all"
                  >
                    <option value="" className="bg-slate-900">Nenhum (sem plano)</option>
                    {plans.map(p => (
                      <option key={p.id} value={p.id} className="bg-slate-900">{p.name}</option>
                    ))}
                  </select>
                </Field>

                <SaveBar saving={saving} saved={saved} onSave={save} />
              </div>
            )}

            {/* ── SISTEMA ── */}
            {tab === 'system' && (
              <div className="space-y-6">
                <SectionTitle>Manutenção</SectionTitle>

                {settings.maintenance.enabled && (
                  <div className="flex items-center gap-2 p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 text-xs text-amber-400 font-bold">
                    <AlertTriangle size={14} /> Modo manutenção ATIVO — usuários não-admin não conseguem fazer login
                  </div>
                )}

                <Toggle
                  checked={settings.maintenance.enabled}
                  onChange={v => setNested('maintenance', { enabled: v })}
                  label="Modo Manutenção"
                  hint="Bloqueia o login de todos os usuários não-admin"
                />

                <Field label="Mensagem de Manutenção" hint="Exibida na tela de login durante a manutenção">
                  <TextInput
                    value={settings.maintenance.message}
                    onChange={v => setNested('maintenance', { message: v })}
                    placeholder="Sistema em manutenção. Voltamos em breve."
                  />
                </Field>

                <div className="border-t border-white/5 pt-6">
                  <SectionTitle>Webhook Global</SectionTitle>
                  <div className="space-y-4">
                    <Field label="URL do Webhook" hint="Recebe eventos: novo usuário, instância conectada/desconectada, broadcast finalizado">
                      <TextInput value={settings.webhook.url} onChange={v => setNested('webhook', { url: v })} placeholder="https://n8n.empresa.com/webhook/newwhats" />
                    </Field>
                    <Field label="Secret de Assinatura" hint="Enviado no header X-Webhook-Secret para validar autenticidade">
                      <TextInput value={settings.webhook.secret} onChange={v => setNested('webhook', { secret: v })} placeholder="um-segredo-aleatorio-forte" type="password" />
                    </Field>
                  </div>
                </div>

                <div className="border-t border-white/5 pt-6">
                  <SectionTitle>Engine de WhatsApp</SectionTitle>
                  <p className="text-xs text-slate-500 mb-4">
                    Selecione o motor de conexão do WhatsApp. O InfiniteAPI permite o envio nativo de botões, listas e carrosséis que funcionam perfeitamente no celular e no WhatsApp Web. O Baileys Oficial é o motor padrão de mercado (estável, mas sem suporte nativo a botões no Web).
                  </p>
                  <div className="grid grid-cols-2 gap-3 mt-1">
                    {([
                      { val: 'infinite', label: 'InfiniteAPI', hint: 'Suporta botões, listas e carrosséis ricos (Celular & Web)' },
                      { val: 'official', label: 'Baileys Oficial', hint: 'Estável padrão de mercado (sem botões no Web)' },
                    ] as const).map(opt => (
                      <button
                        key={opt.val}
                        disabled={switchingEngine}
                        onClick={() => handleEngineSwitch(opt.val)}
                        type="button"
                        className={`p-4 rounded-xl border text-left transition-all relative ${
                          engine === opt.val
                            ? 'border-brand-500/40 bg-brand-500/10 text-white'
                            : 'border-white/5 bg-white/[0.02] text-slate-400 hover:border-white/10'
                        } disabled:opacity-40`}
                      >
                        <p className="text-sm font-bold flex items-center gap-2">
                          {opt.label}
                          {engine === opt.val && (
                            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                          )}
                        </p>
                        <p className="text-xs text-slate-500 mt-0.5">{opt.hint}</p>
                      </button>
                    ))}
                  </div>
                  <p className="text-[11px] text-amber-500/70 mt-3 flex items-center gap-1.5 font-semibold">
                    <AlertTriangle size={12} /> Nota: Alterar a engine causará a reinicialização automática do backend (~10 segundos).
                  </p>
                </div>

                <SaveBar saving={saving} saved={saved} onSave={save} />
              </div>
            )}

            {/* ── DEPLOYS ── */}
            {tab === 'deploys' && (
              <div className="space-y-8">
                <div>
                  <SectionTitle>Ciclo de Deploy (GitOps) e Versões</SectionTitle>
                  <p className="text-xs text-slate-500 mt-1">
                    Visualize o histórico de compilação da plataforma e gerencie os deploys automáticos em produção diretamente do painel de administração.
                  </p>
                </div>

                {/* Grid das Versões */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {/* Card Versão Atual */}
                  <div className="p-6 rounded-2xl bg-white/[0.02] border border-white/5 flex flex-col justify-between">
                    <div>
                      <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Versão Ativa</span>
                      <div className="flex items-baseline gap-2 mt-2">
                        <span className="text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-brand-400 to-brand-500">
                          {versionData?.version || 'v1.0.0'}
                        </span>
                        <span className="text-xs text-slate-400 font-semibold bg-white/5 px-2 py-0.5 rounded-lg border border-white/5">
                          build #{versionData?.buildCount || 0}
                        </span>
                      </div>
                      <div className="flex items-center gap-2 mt-4 text-xs text-slate-400">
                        <span className="relative flex h-2 w-2">
                          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                          <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                        </span>
                        Online em Produção (VPS 1)
                      </div>
                    </div>

                    <div className="mt-6 pt-4 border-t border-white/5 text-xs text-slate-400">
                      Último deploy:{' '}
                      <span className="text-slate-300 font-semibold">
                        {versionData?.lastDeploy
                          ? new Date(versionData.lastDeploy).toLocaleString('pt-BR')
                          : 'Pendente ou Manual'}
                      </span>
                    </div>
                  </div>

                  {/* Card Último Commit */}
                  <div className="p-6 rounded-2xl bg-white/[0.02] border border-white/5 flex flex-col justify-between">
                    <div>
                      <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Última Alteração Integrada</span>
                      <div className="flex items-center gap-2 mt-2">
                        <span className="text-sm font-bold text-slate-200 truncate">
                          {versionData?.lastCommit?.message || 'Sem dados de commit'}
                        </span>
                      </div>
                      <div className="text-xs text-slate-500 mt-1">
                        Por: <span className="text-slate-400 font-medium">{versionData?.lastCommit?.author || 'N/A'}</span>
                      </div>
                    </div>

                    <div className="mt-6 pt-4 border-t border-white/5 flex items-center justify-between text-xs">
                      <span className="text-slate-500">Hash do commit:</span>
                      <span className="font-mono text-brand-400 bg-brand-500/10 px-2 py-0.5 rounded-lg border border-brand-500/20">
                        {versionData?.lastCommit?.hash || 'N/A'}
                      </span>
                    </div>
                  </div>
                </div>

                {/* Bloco de Ação Manual */}
                <div className="p-6 rounded-2xl bg-brand-500/5 border border-brand-500/10 flex flex-col md:flex-row items-center justify-between gap-4">
                  <div className="space-y-1">
                    <h4 className="text-sm font-bold text-slate-200">Compilação e Deploy Forçado</h4>
                    <p className="text-xs text-slate-500 max-w-xl">
                      Deseja puxar a última versão do repositório Git, reinstalar pacotes, rodar o build do Next.js e reiniciar os containers de produção agora?
                    </p>
                  </div>
                  <button
                    onClick={triggerDeploy}
                    disabled={triggeringDeploy}
                    className="flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-sm font-bold shadow-lg shadow-brand-900/20 transition-all disabled:opacity-50 whitespace-nowrap min-w-[200px]"
                  >
                    {triggeringDeploy ? (
                      <>
                        <RefreshCw size={16} className="animate-spin" />
                        Compilando & Sincronizando...
                      </>
                    ) : (
                      <>
                        <Send size={15} />
                        Compilar e Despachar
                      </>
                    )}
                  </button>
                </div>

                {/* Histórico Completo de Deploys */}
                <div className="space-y-4">
                  <SectionTitle>Histórico de Push & Compilações</SectionTitle>
                  
                  {deploysHistory.length === 0 ? (
                    <div className="text-center py-10 rounded-2xl border border-dashed border-white/5 text-xs text-slate-500">
                      Nenhum histórico de deploy registrado ainda.
                    </div>
                  ) : (
                    <div className="overflow-x-auto rounded-2xl border border-white/5 bg-white/[0.01]">
                      <table className="w-full text-left text-xs text-slate-400">
                        <thead>
                          <tr className="bg-white/[0.02] border-b border-white/5 font-semibold text-slate-300">
                            <th className="px-5 py-3.5">Versão</th>
                            <th className="px-5 py-3.5">Autor</th>
                            <th className="px-5 py-3.5">Mensagem do Commit</th>
                            <th className="px-5 py-3.5">Data & Hora</th>
                            <th className="px-5 py-3.5 text-right">Status</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-white/5">
                          {deploysHistory.map((deploy, index) => (
                            <tr key={index} className="hover:bg-white/[0.01] transition-colors">
                              <td className="px-5 py-4 font-bold text-transparent bg-clip-text bg-gradient-to-r from-brand-300 to-brand-400 font-mono">
                                {deploy.version}
                              </td>
                              <td className="px-5 py-4 text-slate-200 font-semibold">{deploy.author}</td>
                              <td className="px-5 py-4 max-w-xs truncate text-slate-300">{deploy.commitMessage}</td>
                              <td className="px-5 py-4">
                                {new Date(deploy.timestamp).toLocaleString('pt-BR')}
                              </td>
                              <td className="px-5 py-4 text-right">
                                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
                                  {deploy.status || 'Sucesso'}
                                </span>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )}
                </div>
              </div>
            )}


          </Card>
        </motion.div>
      </AnimatePresence>
    </div>
  )
}