/**
 * Back office — auditoria.
 *
 * O registo de tudo o que a equipa NetScreen fez, de todas as contas, do mais
 * recente para o mais antigo. É o que se abre num incidente: "quem mexeu nisto,
 * e quando?". A ficha de cada cliente já mostra a sua parte no separador
 * Actividade; este é o mesmo registo sem o recorte por conta.
 *
 * Só leitura. E com um limite que se diz: **só aparece o que passa por uma rota
 * da API**. O que a própria base faz sozinha — como o trigger que activa uma
 * conta quando o onboarding fica completo — não deixa registo aqui. É a dúvida
 * O2 em docs/duvidas-para-rever.md, e está escrita no ecrã para ninguém a
 * descobrir só quando lhe fizer falta.
 */

/** Rótulos dos filtros por acção. Uma acção que ainda não tem rótulo mostra-se como vem. */
const ROTULO_FILTRO_AUDITORIA = {
  create: 'Criações',
  allocate: 'Atribuições',
  impersonate: 'Ver como cliente',
  // Sem rótulo, as pastilhas diziam «loja painel» e «update role» (administrador virgem, A2).
  'loja.painel': 'Painel posto numa loja',
  'hardware.virado': 'Para onde está virado um painel',
  'update.role': 'Mudou o papel de alguém',
  'fila.responsavel': 'Quem trata no A tratar',
  'vnnox.publicar': 'Envios para painéis',
  update: 'Alterações',
  delete: 'Apagados',
};

function ScreenAdminAuditoria({ onNavegar }) {
  const [dados, setDados] = React.useState(null);
  const [erro, setErro] = React.useState(null);
  const [accao, setAccao] = React.useState('');
  // As entradas (logins) estão na mesma tabela, atrás de um interruptor — o
  // que o FC aprovou a 22 Set. Desligado, o ecrã é sobre alterações, e diz
  // quantas entradas está a esconder.
  const [comEntradas, setComEntradas] = React.useState(false);

  React.useEffect(() => {
    setDados(null);
    const q = new URLSearchParams();
    if (accao) q.set('accao', accao);
    if (comEntradas) q.set('entradas', '1');
    const s = q.toString();
    api
      .get(`/api/admin/audit${s ? `?${s}` : ''}`)
      .then(setDados)
      .catch((e) => setErro(e.message || 'Não foi possível ler a auditoria.'));
  }, [accao, comEntradas]);

  // A pesquisa da <Tabela> lê campos planos, por isso o nome da conta sobe à raiz.
  const linhas = React.useMemo(
    () => (dados ? dados.eventos.map((e) => ({ ...e, conta_nome: e.conta ? e.conta.nome : '' })) : []),
    [dados]
  );

  const colunas = [
    {
      chave: 'at', rotulo: 'Quando', ordenavel: true,
      valorOrdenacao: (e) => new Date(e.at).getTime(),
      render: (e) => <span className="whitespace-nowrap">{formatarMomento(e.at)}</span>,
    },
    { chave: 'actor_email', rotulo: 'Quem', ordenavel: true, render: quemEvento },
    // A frase e o pormenor recolhido vêm da ficha (screen_admin_marca.jsx): o JSON cru
    // na coluna «Como ficou» não se lia (demo de 12 Out).
    { chave: 'action', rotulo: 'O quê', principal: true, render: oQueEvento },
    {
      chave: 'conta_nome', rotulo: 'Conta',
      render: (e) =>
        e.conta ? (
          <a
            href={`/admin/clientes/${e.conta.slug}`}
            onClick={(ev) => {
              ev.preventDefault();
              ev.stopPropagation();
              onNavegar(`/admin/clientes/${e.conta.slug}`);
            }}
            className="text-foreground underline-offset-2 outline-none hover:text-primary hover:underline focus-visible:ring-1 focus-visible:ring-accent"
          >
            {e.conta.nome}
          </a>
        ) : (
          <span className="text-muted-foreground">—</span>
        ),
    },
  ];

  const chip = (valor, texto) => (
    <button
      type="button"
      aria-pressed={accao === valor}
      onClick={() => setAccao(valor)}
      className="ns-chip"
    >
      {texto}
    </button>
  );

  if (erro) {
    return (
      <div className="space-y-6">
        <header>
          <h1 className="mt-1 font-display text-4xl uppercase leading-none tracking-wide">Auditoria</h1>
        </header>
        <div className="border border-border bg-card px-6 py-12 text-center">
          <p className="font-display text-xl tracking-wide">Não deu para ler a auditoria</p>
          <p className="mt-2 text-sm text-muted-foreground">{erro}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <header>
        <h1 className="mt-1 font-display text-4xl uppercase leading-none tracking-wide">Auditoria</h1>
        {dados && (
          <p className="mt-2 text-sm text-muted-foreground">
            {dados.total} {dados.total === 1 ? 'registo' : 'registos'}
            {dados.total >= dados.limite ? ` — só os ${dados.limite} mais recentes` : ''}
          </p>
        )}
      </header>

      <div className="flex flex-wrap items-center gap-2">
        {chip('', 'Tudo')}
        {/* Sem rótulo, a acção diz-se pelo nome legível do código, e não com pontos e dois pontos
            («criacao.interpretar», agentes, 20 Out). As conhecidas estão em FRASE_ACCAO. */}
        {(dados ? dados.accoes : []).map((a) => chip(a, ROTULO_FILTRO_AUDITORIA[a] || FRASE_ACCAO[a] || a.replace(/[._:-]+/g, ' ')))}
        <label className="ml-auto flex cursor-pointer items-center gap-2 text-xs text-muted-foreground">
          <input
            type="checkbox"
            checked={comEntradas}
            onChange={(e) => setComEntradas(e.target.checked)}
            className="accent-[hsl(var(--primary))]"
          />
          Mostrar as entradas
          {!comEntradas && dados && dados.entradas_escondidas > 0 && (
            <span className="font-mono tabular-nums">({dados.entradas_escondidas} escondidas)</span>
          )}
        </label>
      </div>

      <Tabela
        colunas={colunas}
        linhas={linhas}
        carregando={!dados}
        chaveLinha={(e) => e.id}
        ordemInicial={{ chave: 'at', sentido: 'desc' }}
        pesquisa={{ campos: ['actor_email', 'conta_nome'], placeholder: 'Pesquisar por pessoa ou conta' }}
        vazio={{
          titulo: 'Sem registos',
          descricao: accao
            ? 'Não há registos com este filtro.'
            : 'Ainda não há nada registado. Cada criação de conta, atribuição de painel e "ver como cliente" fica aqui.',
        }}
      />

      <div className="border border-border bg-card p-4">
        <p className="text-xs text-muted-foreground">
          <strong className="text-foreground">O que não aparece aqui:</strong> a activação automática de uma
          conta, quando o onboarding fica completo. A data fica na ficha do cliente, em «Activada em».
        </p>
      </div>
    </div>
  );
}