import { useMemo, useState } from 'react';

import {
  AlertTriangle,
  BookOpen,
  CheckCircle2,
  ClipboardCheck,
  Copy,
  KeyRound,
  Link2,
  MonitorCog,
  Router,
  Save,
  Search,
  Server,
  ShieldCheck,
  Terminal,
  Wrench,
  LockKeyhole,
  Network,
  UploadCloud,
  Rocket,
  Cpu,
  PlugZap,
  FileUp,
  Activity,
  ShieldAlert,
  Clock3,
  Pencil,
  ServerCrash,
  MonitorX,
  Bug,
  Trash2
} from 'lucide-react';

import { Badge } from '@/components/ui/Badge';
import { Card } from '@/components/ui/Card';

import {
  getSettings,
  saveSettings,
} from '@/services/apiClient';

const DEFAULT_OVERLAY_ROUTE = '198.19.0.0/16';
const DEFAULT_ROUTER_IP = '198.51.100.1';
const DEFAULT_CONTROLLER_IP = '198.51.100.10';
const DEFAULT_PLC_IP = '198.51.100.50';
const DEFAULT_FIRMWARE =
  'openwrt-23.05.5-zbt-we826-16m-litoral-golden-sysupgrade.bin';

const manualTabs = [
  'Painel',
  'Controladores',
  'UDP2RAW',
  'Provisionamento',
  'Registos de Atividade',
  'Manual Rápido',
  'Fluxos Operacionais',
  'Troubleshooting',
  'Convenções',
] as const;

type ManualTab = typeof manualTabs[number];

export function BackendSettings() {
  const [settings, setSettings] = useState(getSettings());
  const [saved, setSaved] = useState(false);
  const [activeTab, setActiveTab] = useState<ManualTab>('Manual Rápido');
  const [manualSearch, setManualSearch] = useState('');

  const backendHost = useMemo(() => {
    try {
      return new URL(settings.backendUrl).host;
    } catch {
      return 'URL backend inválido';
    }
  }, [settings.backendUrl]);

  function handleSave() {
    saveSettings(settings);
    setSaved(true);

    window.setTimeout(() => {
      setSaved(false);
    }, 2500);
  }

  return (
    <div className="flex min-h-full flex-col">
      <div className="mb-5 flex flex-wrap items-start justify-between gap-4 rounded-3xl border border-white/10 bg-white/[0.025] px-5 py-4">
        <div className="min-w-0">
          <h1 className="text-3xl font-black tracking-tight text-white">
            Posto de Trabalho
          </h1>

          <p className="mt-1 max-w-3xl text-sm leading-6 text-slate-400">
            Configuração local da consola técnica, referência operacional e manual rápido para uso em produção.
          </p>
        </div>

        <Badge tone={saved ? 'green' : 'blue'}>
          {saved ? 'Guardado' : 'Configuração Local'}
        </Badge>
      </div>

      {saved && (
        <div className="mb-4 rounded-2xl border border-green-500/20 bg-green-500/10 p-4 text-sm text-green-300">
          <div className="flex items-center gap-2">
            <CheckCircle2 size={16} />
            Configuração do posto de trabalho guardada.
          </div>
        </div>
      )}

      <div className="grid gap-4 2xl:grid-cols-12">
        <Card className="2xl:col-span-7">
          <div className="mb-6 flex items-center gap-4">
            <div className="rounded-2xl bg-blue-500/10 p-3 text-blue-300">
              <Server size={24} />
            </div>

            <div className="min-w-0">
              <h2 className="text-xl font-semibold text-white">
                Ligação ao Backend
              </h2>

              <p className="text-sm text-slate-400">
                Endpoint API usado pela consola para comunicar com a VPS.
              </p>
            </div>
          </div>

          <div className="grid gap-5 xl:grid-cols-2">
            <SettingsInput
              label="URL do Backend"
              value={settings.backendUrl}
              icon={<Link2 size={16} />}
              placeholder="http://localhost:8080"
              onChange={(value) =>
                setSettings({
                  ...settings,
                  backendUrl: value,
                })
              }
            />

            <SettingsInput
              label="Chave API"
              value={settings.apiKey}
              icon={<KeyRound size={16} />}
              placeholder="dev-api-key"
              onChange={(value) =>
                setSettings({
                  ...settings,
                  apiKey: value,
                })
              }
            />
          </div>

          <div className="mt-6 grid gap-4 xl:grid-cols-[1fr_auto] xl:items-center">
            <div className="rounded-2xl border border-white/10 bg-white/[0.025] p-5">
              <div className="flex items-start justify-between gap-4">
                <div className="min-w-0">
                  <p className="text-sm font-semibold text-white">
                    Alvo ligado
                  </p>

                  <p className="mt-1 truncate font-mono text-sm text-slate-400">
                    {backendHost}
                  </p>
                </div>

                <Badge tone="green">
                  Pronto
                </Badge>
              </div>
            </div>

            <button
              type="button"
              onClick={handleSave}
              className="group inline-flex w-full items-center justify-center gap-2 rounded-2xl border border-white/10 bg-white/[0.02] px-5 py-3 text-sm font-semibold text-white transition-all duration-200 hover:-translate-y-[1px] hover:border-blue-500/30 hover:bg-blue-500/10 active:translate-y-0 xl:w-auto"
            >
              <Save
                size={16}
                className="transition-transform duration-200 group-hover:rotate-6"
              />

              <span className="transition-colors group-hover:text-blue-200">
                Guardar Configuração
              </span>
            </button>
          </div>
        </Card>

        <Card className="2xl:col-span-5">
          <div className="mb-5 flex items-center gap-4">
            <div className="rounded-2xl bg-purple-500/10 p-3 text-purple-300">
              <MonitorCog size={24} />
            </div>

            <div className="min-w-0">
              <h2 className="text-xl font-semibold text-white">
                Base de Provisionamento
              </h2>

              <p className="text-sm text-slate-400">
                Valores de referência para instalações e suporte.
              </p>
            </div>
          </div>

          <div className="grid gap-3 sm:grid-cols-2 2xl:grid-cols-1">
            <InfoRow label="Rota Overlay" value={DEFAULT_OVERLAY_ROUTE} />
            <InfoRow label="IP LAN Router" value={DEFAULT_ROUTER_IP} />
            <InfoRow label="IP Controlador" value={DEFAULT_CONTROLLER_IP} />
            <InfoRow label="IP PLC" value={DEFAULT_PLC_IP} />

            <div className="sm:col-span-2 2xl:col-span-1">
              <InfoRow label="Firmware Alvo" value={DEFAULT_FIRMWARE} />
            </div>
          </div>
        </Card>
      </div>

      <Card className="mt-4">
        <div className="flex flex-col gap-5 xl:flex-row xl:items-start xl:justify-between">
          <div className="flex items-start gap-4">
            <div className="rounded-2xl bg-green-500/10 p-3 text-green-300">
              <ShieldCheck size={24} />
            </div>

            <div className="max-w-4xl">
              <h2 className="text-xl font-semibold text-white">
                Perfil de Produção
              </h2>

              <p className="mt-3 text-sm leading-6 text-slate-400">
                Base OpenWrt 23.05, alvo ZBT-WE826 16M, firewall fw4/nftables,
                LuCI sobre WireGuard, topologia LAN estável e gestão de regras
                DNAT através da VPS.
              </p>
            </div>
          </div>

          <div className="flex shrink-0 flex-wrap gap-2 xl:justify-end">
            <Badge tone="blue">OpenWrt 23.05</Badge>
            <Badge tone="purple">WireGuard</Badge>
            <Badge tone="green">fw4/nftables</Badge>
          </div>
        </div>
      </Card>

      <Card className="mt-4">
        <div className="mb-5 flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
          <div className="flex items-start gap-4">
            <div className="rounded-2xl bg-blue-500/10 p-3 text-blue-300">
              <BookOpen size={24} />
            </div>

            <div>
              <h2 className="text-xl font-semibold text-white">
                Manual Operacional
              </h2>

              <p className="mt-1 max-w-3xl text-sm leading-6 text-slate-400">
                Guia rápido para uso da consola em produção: clientes, controladores,
                routers, regras DNAT, erros comuns e procedimentos seguros.
              </p>
            </div>
          </div>

          <div className="relative w-full xl:max-w-sm">
            <Search
              size={16}
              className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500"
            />

            <input
              value={manualSearch}
              onChange={(event) => setManualSearch(event.target.value)}
              placeholder="Pesquisar no manual..."
              className="w-full rounded-2xl border border-white/10 bg-slate-950 py-3 pl-10 pr-3 text-sm text-white outline-none transition placeholder:text-slate-600 focus:border-blue-500/40"
            />
          </div>
        </div>

        <div className="mb-5 flex gap-2 overflow-x-auto pb-1">
          {manualTabs.map((tab) => {
            const active = activeTab === tab;

            return (
              <button
                key={tab}
                type="button"
                onClick={() => setActiveTab(tab)}
                className={`shrink-0 rounded-2xl border px-4 py-2 text-sm font-bold transition ${active
                  ? 'border-blue-500/30 bg-blue-500/15 text-blue-100'
                  : 'border-white/10 bg-white/[0.025] text-slate-400 hover:bg-white/[0.05] hover:text-white'
                  }`}
              >
                {tab}
              </button>
            );
          })}
        </div>

        <ManualContent
          activeTab={activeTab}
          search={manualSearch}
        />
      </Card>
    </div>
  );
}

function ManualContent({
  activeTab,
  search,
}: {
  activeTab: ManualTab;
  search: string;
}) {
  const normalizedSearch = search.trim().toLowerCase();

  const sections = getManualSections(activeTab);

  const filteredSections = normalizedSearch
    ? sections.filter((section) =>
      [
        section.title,
        section.description,
        ...section.items,
      ]
        .join(' ')
        .toLowerCase()
        .includes(normalizedSearch),
    )
    : sections;

  if (filteredSections.length === 0) {
    return (
      <div className="rounded-2xl border border-dashed border-white/10 bg-black/10 p-8 text-center text-sm text-slate-500">
        Nenhum resultado encontrado para esta pesquisa.
      </div>
    );
  }

  return (
    <div className="grid gap-4 xl:grid-cols-2">
      {filteredSections.map((section) => (
        <ManualSection
          key={section.title}
          icon={section.icon}
          tone={section.tone}
          title={section.title}
          description={section.description}
          items={section.items}
        />
      ))}
    </div>
  );
}

function getManualSections(tab: ManualTab) {
  if (tab === 'Painel') {
    return [
      {
        icon: <MonitorCog size={20} />,
        tone: 'blue' as const,
        title: 'Objetivo do Painel',
        description: 'O Painel é a vista principal de operação e estado geral da plataforma.',
        items: [
          'Mostra rapidamente se a VPS, VPN e serviços principais estão operacionais.',
          'Ajuda a perceber se existe algum problema antes de mexer em clientes, routers ou regras.',
          'Deve ser a primeira página consultada quando algo parece não estar a funcionar.',
          'Serve como ponto de partida para diagnóstico e navegação operacional.',
        ],
      },
      {
        icon: <Server size={20} />,
        tone: 'green' as const,
        title: 'Estado da VPS',
        description: 'Indica se o backend consegue comunicar corretamente com a VPS.',
        items: [
          'Estado saudável significa que a API consegue obter dados da VPS.',
          'Se aparecer erro, pode haver falha de SSH, backend mal configurado ou VPS indisponível.',
          'Antes de alterar routers ou DNAT, confirma que a VPS responde corretamente.',
          'Se a VPS estiver indisponível, as restantes operações podem falhar.',
        ],
      },
      {
        icon: <ShieldCheck size={20} />,
        tone: 'purple' as const,
        title: 'WireGuard / VPN',
        description: 'Mostra o estado da camada VPN usada para chegar aos routers e controladores.',
        items: [
          'A VPN deve estar ativa para que os routers sejam alcançáveis pelo IP WireGuard.',
          'Sem VPN, o painel de Controladores pode listar clientes, mas pode falhar ao carregar regras do router.',
          'Se houver problemas de ligação a routers, verificar primeiro a VPN.',
          'Handshakes recentes indicam comunicação ativa com peers.',
        ],
      },
      {
        icon: <Terminal size={20} />,
        tone: 'blue' as const,
        title: 'UDP2RAW',
        description: 'Ajuda a perceber se o túnel UDP2RAW está ativo e a transportar tráfego.',
        items: [
          'Tráfego ativo indica que o túnel está a ser usado.',
          'Se UDP2RAW estiver parado, a ligação pode ficar degradada ou indisponível em alguns cenários.',
          'Verifica esta secção quando houver falhas intermitentes de comunicação.',
          'Comparar tráfego WireGuard e UDP2RAW ajuda a perceber onde está o problema.',
        ],
      },
      {
        icon: <AlertTriangle size={20} />,
        tone: 'red' as const,
        title: 'Quando algo aparece a vermelho',
        description: 'Estados vermelhos devem ser tratados como alerta operacional.',
        items: [
          'Confirmar primeiro se o backend e a VPS estão acessíveis.',
          'Depois verificar VPN/WireGuard.',
          'Se a VPN estiver saudável mas o router falhar, testar password SSH e IP do router.',
          'Não fazer alterações DNAT enquanto o estado base estiver instável.',
        ],
      },
      {
        icon: <ClipboardCheck size={20} />,
        tone: 'green' as const,
        title: 'Ordem recomendada de diagnóstico',
        description: 'Sequência simples para resolver problemas a partir do Painel.',
        items: [
          '1. Confirmar backend configurado em Posto de Trabalho.',
          '2. Confirmar VPS saudável no Painel.',
          '3. Confirmar WireGuard/VPN ativa.',
          '4. Confirmar UDP2RAW se aplicável.',
          '5. Ir para Controladores e carregar regras do router.',
          '6. Validar cliente/controlador afetado.',
        ],
      },
    ];
  }

  if (tab === 'Controladores') {
    return [
      {
        icon: <MonitorCog size={20} />,
        tone: 'blue' as const,
        title: 'Objetivo da página',
        description: 'Gestão completa de clientes, controladores e regras DNAT.',
        items: [
          'Permite criar, editar e remover clientes da VPS.',
          'Controla os ficheiros .txt usados pelos controladores.',
          'Agrupa automaticamente controladores por router.',
          'Permite consultar e gerir regras DNAT diretamente no router.',
          'É a principal área operacional da plataforma.',
        ],
      },
      {
        icon: <Server size={20} />,
        tone: 'green' as const,
        title: 'Clientes',
        description: 'Cada cliente representa um ficheiro dentro da VPS.',
        items: [
          'Os ficheiros são armazenados em /var/litoral_regas_app/maquinas.',
          'A primeira linha do ficheiro representa a password principal do cliente.',
          'Cada linha seguinte representa um controlador.',
          'O número apresentado na lista corresponde ao total de controladores.',
          'Apagar um cliente remove permanentemente o ficheiro da VPS.',
        ],
      },
      {
        icon: <ShieldCheck size={20} />,
        tone: 'purple' as const,
        title: 'Formato dos controladores',
        description: 'Cada controlador é armazenado numa linha do ficheiro.',
        items: [
          'Formato: nomexxxrouterxxxportaxxxpassword',
          'O separador "xxx" é obrigatório.',
          'Cada controlador deve ter porta externa única.',
          'O PIN/password deve ter exatamente 6 dígitos.',
          'Os routers podem ser IPv4 ou hostname.',
        ],
      },
      {
        icon: <Router size={20} />,
        tone: 'blue' as const,
        title: 'Gestão do Router',
        description: 'A secção Router / Firewall comunica diretamente por SSH.',
        items: [
          'As regras são carregadas usando UCI firewall.',
          'O backend comunica via SSH usando password.',
          'O sistema trata automaticamente problemas de known_hosts.',
          'Routers antigos com ssh-rsa também são suportados.',
          'Se o router estiver inacessível, nenhuma alteração DNAT será aplicada.',
        ],
      },
      {
        icon: <Network size={20} />,
        tone: 'green' as const,
        title: 'Regras DNAT',
        description: 'As regras DNAT permitem acesso externo aos equipamentos internos.',
        items: [
          'Cada regra associa porta externa → IP interno:porta.',
          'As alterações são aplicadas diretamente no firewall do router.',
          'Criar regra adiciona redirect UCI.',
          'Editar regra altera a configuração existente.',
          'Apagar regra remove permanentemente a entrada UCI.',
        ],
      },
      {
        icon: <LockKeyhole size={20} />,
        tone: 'yellow' as const,
        title: 'Boas práticas operacionais',
        description: 'Recomendações para evitar falhas operacionais.',
        items: [
          'Carregar sempre as regras antes de criar novas.',
          'Nunca reutilizar portas externas já existentes.',
          'Evitar editar regras críticas sem confirmação do destino.',
          'Após alterações DNAT, validar acesso ao controlador.',
          'Confirmar sempre router correto antes de guardar.',
        ],
      },
      {
        icon: <AlertTriangle size={20} />,
        tone: 'red' as const,
        title: 'Situações de erro',
        description: 'Problemas mais comuns nesta página.',
        items: [
          'Router inacessível → SSH falhou ou VPN indisponível.',
          'Host key changed → resolvido automaticamente pelo backend.',
          'Porta duplicada → regra rejeitada pelo sistema.',
          'Rule already exists → ID técnico já existe no router.',
          'Falha ao carregar regras → confirmar password SSH.',
        ],
      },
      {
        icon: <ClipboardCheck size={20} />,
        tone: 'green' as const,
        title: 'Fluxo recomendado',
        description: 'Sequência operacional recomendada.',
        items: [
          '1. Selecionar cliente.',
          '2. Confirmar controladores.',
          '3. Carregar regras do router.',
          '4. Validar portas existentes.',
          '5. Criar ou editar regra.',
          '6. Testar conectividade após alteração.',
        ],
      },
    ];
  }

  if (tab === 'UDP2RAW') {
    return [
      {
        icon: <Terminal size={20} />,
        tone: 'blue' as const,
        title: 'Objetivo da página',
        description: 'Instalação, arranque e validação do túnel UDP2RAW no router.',
        items: [
          'Esta página configura o UDP2RAW diretamente no router.',
          'É usada quando o túnel precisa de transportar WireGuard de forma mais resiliente.',
          'Permite verificar estado, enviar binário, enviar script, executar setup e testar o túnel.',
          'Deve ser usada com cuidado porque altera ficheiros e serviços no router.',
        ],
      },
      {
        icon: <Router size={20} />,
        tone: 'purple' as const,
        title: 'Router alvo',
        description: 'Define o router onde o UDP2RAW será instalado ou validado.',
        items: [
          'O IP deve ser o endereço acessível pela rede técnica/VPN.',
          'A password SSH deve pertencer ao router selecionado.',
          'Se a password estiver errada, todos os passos vão falhar.',
          'Antes de executar setup, confirma que estás no router correto.',
        ],
      },
      {
        icon: <Search size={20} />,
        tone: 'green' as const,
        title: 'Verificar Estado',
        description: 'Primeiro passo recomendado antes de qualquer alteração.',
        items: [
          'Confirma se o binário udp2raw existe no router.',
          'Confirma se o serviço init.d está instalado.',
          'Confirma se existe processo ativo.',
          'Confirma se a porta local esperada está disponível.',
        ],
      },
      {
        icon: <Server size={20} />,
        tone: 'blue' as const,
        title: 'Enviar Binário',
        description: 'Copia o binário UDP2RAW para o router.',
        items: [
          'O destino esperado é /usr/bin/udp2raw.',
          'Este passo deve ser feito quando o binário não existe ou está desatualizado.',
          'Depois de enviar, o binário deve ter permissões de execução.',
          'Se falhar, verificar espaço disponível e permissões no router.',
        ],
      },
      {
        icon: <UploadCloud size={20} />,
        tone: 'purple' as const,
        title: 'Enviar Script',
        description: 'Envia o script de setup usado para criar/configurar o serviço.',
        items: [
          'O script é copiado temporariamente para o router.',
          'Este passo prepara o router para executar a instalação.',
          'Não valida sozinho se o túnel ficou ativo.',
          'Após enviar o script, executar o passo de setup.',
        ],
      },
      {
        icon: <Wrench size={20} />,
        tone: 'blue' as const,
        title: 'Executar Setup',
        description: 'Cria ou atualiza o serviço UDP2RAW no router.',
        items: [
          'Cria o serviço init.d quando necessário.',
          'Configura o comando de arranque do túnel.',
          'Arranca ou reinicia o serviço.',
          'Este é o passo mais sensível, porque altera a configuração ativa do router.',
        ],
      },
      {
        icon: <ShieldCheck size={20} />,
        tone: 'green' as const,
        title: 'Testar Túnel',
        description: 'Valida se o UDP2RAW e WireGuard estão operacionais.',
        items: [
          'Confirma processo UDP2RAW ativo.',
          'Valida listener/porta local.',
          'Executa testes de conectividade.',
          'Confirma se WireGuard continua funcional após o setup.',
        ],
      },
      {
        icon: <AlertTriangle size={20} />,
        tone: 'red' as const,
        title: 'Erros comuns',
        description: 'Problemas típicos nesta página.',
        items: [
          'Password SSH errada → nenhum passo consegue comunicar com o router.',
          'Router inacessível → confirmar VPN, IP e rede.',
          'Binário incompatível → confirmar arquitetura do router.',
          'Serviço não arranca → verificar script, permissões e logs do router.',
          'Túnel falha no teste → validar portas, firewall e configuração WireGuard.',
        ],
      },
      {
        icon: <ClipboardCheck size={20} />,
        tone: 'green' as const,
        title: 'Fluxo recomendado',
        description: 'Ordem segura para usar esta página.',
        items: [
          '1. Inserir IP e password do router.',
          '2. Executar Verificar Estado.',
          '3. Enviar Binário se necessário.',
          '4. Enviar Script.',
          '5. Executar Setup.',
          '6. Testar Túnel.',
          '7. Confirmar no Painel se UDP2RAW/WireGuard mostram tráfego saudável.',
        ],
      },
    ];
  }

  if (tab === 'Provisionamento') {
    return [
      {
        icon: <Rocket size={20} />,
        tone: 'blue' as const,
        title: 'Objetivo da página',
        description: 'Provisionamento completo ou parcial de routers.',
        items: [
          'Permite preparar routers novos ou já existentes.',
          'Pode fazer flash de firmware e aplicar configuração automática.',
          'Cria ficheiros router.env e executa scripts de provisionamento.',
          'Regista o peer WireGuard na VPS quando aplicável.',
        ],
      },
      {
        icon: <Search size={20} />,
        tone: 'green' as const,
        title: 'Detetar Router',
        description: 'Primeiro passo antes de qualquer operação.',
        items: [
          'Testa se o router está acessível no IP escolhido.',
          'Valida comunicação SSH.',
          'Identifica se a password é necessária.',
          'Pode detetar problemas de chave SSH antiga.',
        ],
      },
      {
        icon: <UploadCloud size={20} />,
        tone: 'purple' as const,
        title: 'Enviar Firmware',
        description: 'Copia a imagem OpenWrt para o router.',
        items: [
          'Usado no modo provisionamento completo.',
          'O firmware é enviado para /tmp no router.',
          'Confirmar sempre se o modelo do router é compatível.',
          'Não interromper esta fase depois de iniciada.',
        ],
      },
      {
        icon: <Cpu size={20} />,
        tone: 'red' as const,
        title: 'Gravar Firmware',
        description: 'Executa sysupgrade no router.',
        items: [
          'Esta é a fase mais crítica do processo.',
          'O router pode reiniciar e ficar temporariamente inacessível.',
          'Não desligar energia durante o flash.',
          'Aguardar o tempo indicado antes de tentar reconectar.',
        ],
      },
      {
        icon: <PlugZap size={20} />,
        tone: 'blue' as const,
        title: 'Reconectar Router',
        description: 'Após flash/reboot, o router volta com a configuração base.',
        items: [
          'Reconectar cabo Ethernet se necessário.',
          'Confirmar novo IP LAN.',
          'Aguardar SSH voltar a responder.',
          'Só avançar quando o router estiver novamente acessível.',
        ],
      },
      {
        icon: <FileUp size={20} />,
        tone: 'green' as const,
        title: 'Enviar pacote de provisionamento',
        description: 'Envia router.env e provision.sh para o router.',
        items: [
          'router.env contém hostname, WireGuard IP e dados de rede.',
          'provision.sh aplica a configuração no router.',
          'Verificar os campos antes de enviar.',
          'Evitar nomes de router duplicados.',
        ],
      },
      {
        icon: <Terminal size={20} />,
        tone: 'purple' as const,
        title: 'Executar Provisionamento',
        description: 'Aplica a configuração final no router.',
        items: [
          'Configura LAN, WireGuard, firewall e serviços necessários.',
          'Pode alterar hostname e rede do router.',
          'Deve ser executado apenas depois de validar router.env.',
          'Se falhar, consultar logs e repetir apenas a fase necessária.',
        ],
      },
      {
        icon: <Network size={20} />,
        tone: 'green' as const,
        title: 'Registar Peer VPS',
        description: 'Adiciona o router como peer WireGuard na VPS.',
        items: [
          'Necessário para o router comunicar pela VPN.',
          'O IP WireGuard deve ser único.',
          'Depois de registar, validar handshake no Painel.',
          'Se já existir peer com o mesmo IP, rever configuração antes de avançar.',
        ],
      },
      {
        icon: <AlertTriangle size={20} />,
        tone: 'red' as const,
        title: 'Erros comuns',
        description: 'Falhas frequentes durante provisionamento.',
        items: [
          'Password SSH errada.',
          'Router não está no IP esperado.',
          'Firmware incompatível.',
          'Router ainda está a reiniciar.',
          'Peer WireGuard duplicado.',
          'Cabo/rede local mal ligada.',
        ],
      },
      {
        icon: <ClipboardCheck size={20} />,
        tone: 'green' as const,
        title: 'Fluxo recomendado',
        description: 'Sequência segura para provisionar.',
        items: [
          '1. Escolher modo: completo ou apenas provisionamento.',
          '2. Preencher dados do router.',
          '3. Detetar router.',
          '4. Enviar firmware se necessário.',
          '5. Aguardar reboot.',
          '6. Enviar pacote de provisionamento.',
          '7. Executar provisionamento.',
          '8. Registar peer VPS.',
          '9. Validar VPN e acesso no Painel.',
        ],
      },
    ];
  }

  if (tab === 'Registos de Atividade') {
    return [
      {
        icon: <Activity size={20} />,
        tone: 'blue' as const,
        title: 'Objetivo da página',
        description: 'Consulta centralizada de eventos e ações do sistema.',
        items: [
          'Mostra operações executadas pela plataforma.',
          'Ajuda a diagnosticar falhas operacionais.',
          'Permite rastrear alterações feitas nos routers e VPS.',
          'Serve como histórico técnico para suporte e auditoria.',
        ],
      },
      {
        icon: <Search size={20} />,
        tone: 'green' as const,
        title: 'Pesquisa e filtros',
        description: 'Filtragem rápida de eventos específicos.',
        items: [
          'Pode pesquisar por router, cliente, IP ou ação.',
          'Filtros ajudam a localizar eventos críticos.',
          'Utilizar pesquisa parcial quando o nome completo não é conhecido.',
          'Eventos mais recentes aparecem primeiro.',
        ],
      },
      {
        icon: <Server size={20} />,
        tone: 'purple' as const,
        title: 'Eventos da VPS',
        description: 'Ações relacionadas com a infraestrutura principal.',
        items: [
          'Criação e atualização de clientes.',
          'Rollback de backups WireGuard.',
          'Operações de provisionamento.',
          'Alterações de peers e rede VPN.',
        ],
      },
      {
        icon: <Router size={20} />,
        tone: 'blue' as const,
        title: 'Eventos do Router',
        description: 'Operações executadas diretamente nos routers.',
        items: [
          'Leitura de regras firewall.',
          'Criação, edição e remoção de DNAT.',
          'Instalação e setup UDP2RAW.',
          'Execução de scripts remotos.',
        ],
      },
      {
        icon: <ShieldAlert size={20} />,
        tone: 'red' as const,
        title: 'Eventos críticos',
        description: 'Falhas e situações que exigem atenção.',
        items: [
          'Falhas SSH.',
          'Routers inacessíveis.',
          'Problemas de autenticação.',
          'Erros durante provisionamento.',
          'Falhas WireGuard ou UDP2RAW.',
        ],
      },
      {
        icon: <Clock3 size={20} />,
        tone: 'purple' as const,
        title: 'Linha temporal',
        description: 'Interpretação cronológica dos eventos.',
        items: [
          'Cada registo contém timestamp.',
          'Os eventos são ordenados do mais recente para o mais antigo.',
          'Eventos relacionados normalmente aparecem próximos.',
          'Útil para perceber sequência de falhas.',
        ],
      },
      {
        icon: <ClipboardCheck size={20} />,
        tone: 'green' as const,
        title: 'Boas práticas',
        description: 'Recomendações operacionais.',
        items: [
          'Consultar logs antes de repetir operações.',
          'Verificar timestamps ao investigar falhas.',
          'Correlacionar eventos entre VPS e router.',
          'Guardar screenshots/logs em situações críticas.',
        ],
      },
      {
        icon: <AlertTriangle size={20} />,
        tone: 'red' as const,
        title: 'Situações comuns',
        description: 'Problemas normalmente encontrados nos registos.',
        items: [
          'Timeout SSH.',
          'Host key changed.',
          'Porta DNAT duplicada.',
          'Erro de autenticação.',
          'Provisionamento interrompido.',
          'Firewall reload falhou.',
        ],
      },
    ];
  }

  if (tab === 'Manual Rápido') {
    return [
      {
        icon: <MonitorCog size={20} />,
        tone: 'blue' as const,
        title: 'Criar um cliente',
        description: 'Fluxo base para criar um novo cliente na VPS.',
        items: [
          'Abrir Controladores.',
          'Clicar em Novo Cliente.',
          'Inserir nome e password inicial.',
          'Guardar cliente.',
          'Confirmar que o ficheiro foi criado na VPS.',
        ],
      },
      {
        icon: <Router size={20} />,
        tone: 'purple' as const,
        title: 'Adicionar controlador',
        description: 'Adiciona uma nova entrada ao ficheiro do cliente.',
        items: [
          'Selecionar cliente.',
          'Clicar em Editar Cliente.',
          'Adicionar controlador.',
          'Definir router, porta externa e PIN.',
          'Guardar alterações.',
          'Confirmar que o controlador aparece na lista.',
        ],
      },
      {
        icon: <Terminal size={20} />,
        tone: 'green' as const,
        title: 'Carregar regras DNAT',
        description: 'Lê as regras reais diretamente do router.',
        items: [
          'Selecionar router.',
          'Introduzir password SSH.',
          'Clicar em Carregar regras.',
          'Aguardar estado Ligado.',
          'Validar total de regras carregadas.',
        ],
      },
      {
        icon: <Wrench size={20} />,
        tone: 'blue' as const,
        title: 'Criar regra DNAT',
        description: 'Cria uma nova regra no firewall do router.',
        items: [
          'Carregar regras antes de criar.',
          'Clicar em Nova Regra.',
          'Definir ID técnico único.',
          'Escolher porta externa livre.',
          'Definir IP interno correto.',
          'Guardar e testar acesso.',
        ],
      },
      {
        icon: <Pencil size={20} />,
        tone: 'purple' as const,
        title: 'Editar regra DNAT',
        description: 'Atualiza uma regra já existente.',
        items: [
          'Carregar regras do router.',
          'Selecionar Editar.',
          'Alterar IP, portas ou protocolo.',
          'Guardar alterações.',
          'Validar funcionamento após update.',
        ],
      },
      {
        icon: <Trash2 size={20} />,
        tone: 'red' as const,
        title: 'Remover regra DNAT',
        description: 'Remove uma regra do firewall.',
        items: [
          'Confirmar router correto.',
          'Selecionar regra.',
          'Clicar em eliminar.',
          'Confirmar operação.',
          'Validar que a regra desapareceu da lista.',
        ],
      },
    ];
  }

  if (tab === 'Fluxos Operacionais') {
    return [
      {
        icon: <ClipboardCheck size={20} />,
        tone: 'green' as const,
        title: 'Nova instalação completa',
        description: 'Fluxo recomendado para instalação nova.',
        items: [
          'Provisionar router.',
          'Registar peer WireGuard.',
          'Criar cliente.',
          'Adicionar controlador.',
          'Carregar regras DNAT.',
          'Criar regra VNC.',
          'Testar acesso remoto.',
        ],
      },
      {
        icon: <Wrench size={20} />,
        tone: 'blue' as const,
        title: 'Troca de controlador',
        description: 'Quando um controlador muda de IP interno.',
        items: [
          'Carregar regras atuais.',
          'Editar regra DNAT existente.',
          'Atualizar IP interno.',
          'Guardar alterações.',
          'Testar VNC/comunicação.',
        ],
      },
      {
        icon: <Router size={20} />,
        tone: 'purple' as const,
        title: 'Cliente multi-router',
        description: 'Clientes com vários routers associados.',
        items: [
          'Selecionar cliente.',
          'Escolher router correto.',
          'Carregar regras apenas desse router.',
          'Executar alterações nesse contexto.',
          'Validar alterações antes de trocar de router.',
        ],
      },
      {
        icon: <ShieldCheck size={20} />,
        tone: 'green' as const,
        title: 'Manutenção preventiva',
        description: 'Validações recomendadas após alterações.',
        items: [
          'Confirmar handshake WireGuard.',
          'Validar tráfego UDP2RAW.',
          'Confirmar acesso VNC.',
          'Validar portas DNAT.',
          'Consultar Registos de Atividade.',
        ],
      },
      {
        icon: <AlertTriangle size={20} />,
        tone: 'red' as const,
        title: 'Recuperação de falhas',
        description: 'Fluxo para incidentes comuns.',
        items: [
          'Verificar logs.',
          'Confirmar VPN.',
          'Testar SSH ao router.',
          'Recarregar regras.',
          'Reaplicar DNAT se necessário.',
          'Validar serviço final.',
        ],
      },
    ];
  }

  if (tab === 'Troubleshooting') {
    return [
      {
        icon: <AlertTriangle size={20} />,
        tone: 'red' as const,
        title: 'Router inacessível',
        description: 'Erro de comunicação SSH.',
        items: [
          'Confirmar router online.',
          'Confirmar VPN operacional.',
          'Validar password SSH.',
          'Testar ping ao router.',
          'Verificar firewall/rede.',
        ],
      },
      {
        icon: <ShieldAlert size={20} />,
        tone: 'red' as const,
        title: 'Host key changed',
        description: 'O router alterou fingerprint SSH.',
        items: [
          'O backend tenta resolver automaticamente.',
          'Known_hosts antigo é removido.',
          'Nova chave SSH é aceite.',
          'Se persistir, validar IP correto.',
        ],
      },
      {
        icon: <Network size={20} />,
        tone: 'purple' as const,
        title: 'Porta DNAT duplicada',
        description: 'Uma porta externa já está em uso.',
        items: [
          'Carregar regras atuais.',
          'Localizar regra existente.',
          'Escolher porta diferente.',
          'Evitar reutilização manual.',
        ],
      },
      {
        icon: <ServerCrash size={20} />,
        tone: 'red' as const,
        title: 'UDP2RAW offline',
        description: 'O túnel não está funcional.',
        items: [
          'Validar processo ativo.',
          'Confirmar binário instalado.',
          'Reexecutar setup.',
          'Validar portas locais/remotas.',
        ],
      },
      {
        icon: <MonitorX size={20} />,
        tone: 'red' as const,
        title: 'VNC sem acesso',
        description: 'Controlador não responde remotamente.',
        items: [
          'Confirmar regra DNAT.',
          'Validar IP interno.',
          'Testar porta externa.',
          'Confirmar VNC ativo no controlador.',
        ],
      },
      {
        icon: <Bug size={20} />,
        tone: 'purple' as const,
        title: 'Falha inesperada',
        description: 'Erro genérico da plataforma.',
        items: [
          'Consultar Registos de Atividade.',
          'Validar backend VPS.',
          'Repetir operação.',
          'Confirmar estado do router.',
          'Recolher logs antes de escalar.',
        ],
      },
    ];
  }

  return [
    {
      icon: <ClipboardCheck size={20} />,
      tone: 'green' as const,
      title: 'Novo cliente',
      description: 'Checklist para cliente novo.',
      items: [
        'Cliente criado.',
        'Password inicial definida.',
        'Controlador criado.',
        'Router selecionado.',
        'Regras carregadas.',
        'DNAT criado.',
        'VNC testado.',
      ],
    },
    {
      icon: <ClipboardCheck size={20} />,
      tone: 'blue' as const,
      title: 'Alteração de controlador',
      description: 'Checklist para mudança de equipamento/IP.',
      items: [
        'Regra atual identificada.',
        'Novo IP interno confirmado.',
        'Regra editada.',
        'Firewall recarregada.',
        'Acesso validado.',
      ],
    },
    {
      icon: <ClipboardCheck size={20} />,
      tone: 'purple' as const,
      title: 'Antes de terminar intervenção',
      description: 'Validação final.',
      items: [
        'Sem erros ativos na UI.',
        'Router mostra estado Ligado.',
        'Regras listadas corretamente.',
        'Cliente atualizado.',
        'Teste real feito pelo operador.',
      ],
    },
    {
      icon: <AlertTriangle size={20} />,
      tone: 'red' as const,
      title: 'Bloqueios obrigatórios',
      description: 'Não avançar se isto falhar.',
      items: [
        'Password SSH errada.',
        'Router inacessível.',
        'Porta externa duplicada.',
        'IP interno inválido.',
        'Firewall reload falhou.',
      ],
    },
  ];
}

function ManualSection({
  icon,
  tone,
  title,
  description,
  items,
}: {
  icon: React.ReactNode;
  tone: 'blue' | 'green' | 'purple' | 'red' | 'yellow';
  title: string;
  description: string;
  items: string[];
}) {
  const toneClass = {
    blue: 'bg-blue-500/10 text-blue-300',
    green: 'bg-green-500/10 text-green-300',
    purple: 'bg-purple-500/10 text-purple-300',
    red: 'bg-red-500/10 text-red-300',
    yellow: 'bg-yellow-500/10 text-yellow-300',
  }[tone];

  return (
    <div className="rounded-3xl border border-white/10 bg-white/[0.025] p-5">
      <div className="mb-4 flex items-start gap-3">
        <div className={`rounded-2xl p-3 ${toneClass}`}>
          {icon}
        </div>

        <div className="min-w-0">
          <h3 className="font-black text-white">
            {title}
          </h3>

          <p className="mt-1 text-sm leading-6 text-slate-400">
            {description}
          </p>
        </div>
      </div>

      <div className="space-y-2">
        {items.map((item, index) => (
          <div
            key={`${title}-${index}`}
            className="flex gap-3 rounded-2xl border border-white/10 bg-black/10 px-3 py-2 text-sm text-slate-300"
          >
            <span className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-white/[0.05] text-[11px] font-black text-slate-400">
              {index + 1}
            </span>

            <span className="leading-6">
              {item}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SettingsInput({
  label,
  value,
  icon,
  placeholder,
  onChange,
}: {
  label: string;
  value: string;
  icon: React.ReactNode;
  placeholder: string;
  onChange: (value: string) => void;
}) {
  return (
    <div>
      <label className="mb-2 block text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
        {label}
      </label>

      <div className="flex items-center gap-3 rounded-2xl border border-white/10 bg-slate-950 px-4 py-3">
        <div className="text-slate-500">
          {icon}
        </div>

        <input
          value={value}
          onChange={(event) => onChange(event.target.value)}
          placeholder={placeholder}
          className="w-full bg-transparent font-mono text-sm text-white outline-none placeholder:text-slate-600"
        />
      </div>
    </div>
  );
}

function InfoRow({
  label,
  value,
}: {
  label: string;
  value: string;
}) {
  const [copied, setCopied] = useState(false);

  async function copyValue() {
    try {
      await navigator.clipboard.writeText(value);
      setCopied(true);

      window.setTimeout(() => {
        setCopied(false);
      }, 1500);
    } catch {
      setCopied(false);
    }
  }

  return (
    <div className="group rounded-2xl border border-white/10 bg-white/[0.025] p-4">
      <div className="mb-2 flex items-center justify-between gap-3">
        <p className="text-xs font-medium uppercase tracking-[0.16em] text-slate-500">
          {label}
        </p>

        <button
          type="button"
          onClick={copyValue}
          className="rounded-lg p-1.5 text-slate-600 transition hover:bg-white/[0.06] hover:text-white"
          title="Copiar"
        >
          {copied ? <CheckCircle2 size={14} /> : <Copy size={14} />}
        </button>
      </div>

      <p className="break-all font-mono text-sm font-semibold text-slate-200">
        {value}
      </p>
    </div>
  );
}