// SOP - 3 Gatilhos → Auditoria (spec 2026-09-23-gatilhos-notas-reabrir-auditoria-design).
// Quem fez o quê em cada ticket: notas, pegar, devolver, resolver, reabrir e os
// eventos automáticos da fila (Sistema). Molde ui-fenix: LoadingScreen no 1º load,
// FullLoadingOverlay na troca de filtro, offline honesto — SEM mock (tela operacional).
// Prefixo gau/GAU_ (os .jsx dividem um escopo Babel só; `au` já é da Auditoria geral).

const GAU_TIPO_LABEL = {
  nota: 'Nota', pegar: 'Pegou', devolver: 'Devolveu', resolver: 'Resolveu',
  reabrir: 'Reabriu', criado: 'Caso aberto', checkpoint: 'Checkpoint', encerrado: 'Encerrado',
};
const GAU_TIPO_COR = {
  nota:      { color: 'var(--fenix-blue)', background: 'var(--fenix-blue-100)' },
  resolver:  { color: 'var(--positive)',   background: 'var(--positive-bg)' },
  reabrir:   { color: 'var(--warning)',    background: 'var(--warning-bg)' },
  pegar:     { color: 'var(--fg-1)',       background: 'var(--bg-sunken)' },
  devolver:  { color: 'var(--fg-2)',       background: 'var(--bg-sunken)' },
};
const GAU_TIPO_COR_SISTEMA = { color: 'var(--fg-4)', background: 'var(--bg-sunken)' };

const gauFmt = (s) => s
  ? new Date(s).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
  : '—';

// Mesma leitura de `dados` do pop-up (gtaDetalheEvento), mais o texto quando houver.
const gauDetalhe = (ev) => {
  const partes = [];
  const extra = gtaDetalheEvento(ev);
  if (extra) partes.push(extra);
  if (ev.texto) partes.push(ev.tipo === 'nota' ? ev.texto : `“${ev.texto}”`);
  return partes.join(' · ') || '—';
};

const GatilhosAuditoria = () => {
  const [period, setPeriod] = React.useState('7d');
  const [customRange, setCustomRange] = React.useState(null);
  const [pessoa, setPessoa] = React.useState(null);
  const [tipos, setTipos] = React.useState([]);
  const [busca, setBusca] = React.useState('');
  const [q, setQ] = React.useState('');
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState(false);
  const [tick, setTick] = React.useState(0);
  const [aberto, setAberto] = React.useState(null);

  const fullLoading = useFullLoading();
  const withLoad = (fn) => (...a) => { fullLoading.mark(); fn(...a); };
  const retry = useAutoRetry(err);

  // Busca digitada: aplica 400ms depois da última tecla, sem martelar a API.
  React.useEffect(() => {
    const h = setTimeout(() => { if (busca !== q) { fullLoading.mark(); setQ(busca); } }, 400);
    return () => clearTimeout(h);
    // eslint-disable-next-line
  }, [busca]);

  React.useEffect(() => {
    const began = fullLoading.begin();
    let cancelled = false;
    fetchGatilhosAuditoria({ period, customRange, pessoa, tipos, q })
      .then(d => { if (!cancelled) { setData(d); setErr(false); } })
      .catch(() => { if (!cancelled) setErr(true); })
      .finally(() => fullLoading.end(began));
    return () => { cancelled = true; };
    // eslint-disable-next-line
  }, [period, customRange, pessoa, tipos, q, retry, tick]);

  if (err && !data) return (
    <>
      <LoadingScreen conn="offline" />
      <div style={gau.nota}>A Auditoria lê direto do banco — se a API caiu, esta tela reconecta sozinha a cada 15s.</div>
    </>
  );
  if (!data) return <LoadingScreen conn="connecting" />;

  const pessoasOpts = [{ key: '__todas__', label: 'Todas as pessoas' },
    ...data.pessoas.map(p => ({ key: p, label: p }))];

  return (
    <div style={{ position: 'relative' }}>
      <div style={gau.header}>
        <div>
          <div style={gau.eye}>Setor de Afiliados</div>
          <div style={gau.title}>Auditoria dos casos</div>
          <div style={gau.regua}>Quem fez cada ação e cada nota nos tickets dos Três Gatilhos</div>
        </div>
      </div>

      {err && (
        <div style={gau.aviso}><Icon name="alert" size={14} color="currentColor" />
          Falha ao atualizar — mostrando a última leitura carregada.</div>
      )}

      <div style={gau.filtros}>
        <PeriodSelector period={period} setPeriod={withLoad(setPeriod)}
          customRange={customRange} setCustomRange={withLoad(setCustomRange)} />
        <SearchDropdown icon="users" label="Pessoa" value={pessoa || '__todas__'} options={pessoasOpts}
          onChange={withLoad(k => setPessoa(k === '__todas__' ? null : k))} />
        <MultiDropdown icon="filter" label="Ação" values={tipos} allLabel="Todas as ações"
          options={data.tipos.map(t => ({ key: t, label: GAU_TIPO_LABEL[t] || t }))}
          onChange={withLoad(setTipos)} />
        <div style={gau.buscaWrap}>
          <Icon name="search" size={14} color="var(--fg-4)" />
          <input style={gau.busca} value={busca} onChange={e => setBusca(e.target.value)}
            placeholder="Afiliado, oferta ou #ticket" autoComplete="off" />
        </div>
      </div>

      {data.truncated && (
        <div style={gau.aviso}><Icon name="alert" size={14} color="currentColor" />
          Mostrando os 1.000 eventos mais recentes. Estreite o período ou os filtros para ver o resto.</div>
      )}

      {data.eventos.length === 0 ? (
        <div style={gau.vazio}>Nenhum evento com estes filtros.</div>
      ) : (
        <div style={gau.tabelaWrap}>
          <table style={gau.tabela}>
            <thead>
              <tr>{['Data e hora', 'Pessoa', 'Ação', 'Ticket', 'Afiliado', 'Oferta', 'Detalhe']
                .map(h => <th key={h} style={gau.th}>{h}</th>)}</tr>
            </thead>
            <tbody>
              {data.eventos.map(ev => {
                const sistema = ev.autor_nome === 'Sistema';
                const cor = sistema ? GAU_TIPO_COR_SISTEMA : (GAU_TIPO_COR[ev.tipo] || GAU_TIPO_COR_SISTEMA);
                return (
                  <tr key={ev.id} style={gau.tr}>
                    <td style={{ ...gau.td, whiteSpace: 'nowrap' }} className="fenix-num">{gauFmt(ev.criado_em)}</td>
                    <td style={{ ...gau.td, ...(sistema ? { color: 'var(--fg-4)' } : {}) }}>{ev.autor_nome}</td>
                    <td style={gau.td}><span style={{ ...gau.chip, ...cor }}>{GAU_TIPO_LABEL[ev.tipo] || ev.tipo}</span></td>
                    <td style={gau.td}>
                      <button style={gau.idBtn} onClick={() => setAberto(ev.ticket_id)}>#{ev.ticket_id}</button>
                    </td>
                    <td style={gau.td}>{ev.afiliado}</td>
                    <td style={gau.td}>{ev.oferta}</td>
                    <td style={{ ...gau.td, ...gau.tdDetalhe }}>{gauDetalhe(ev)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {aberto != null && (
        <GtaTicketModal ticketId={aberto} onClose={() => setAberto(null)}
          onChanged={() => setTick(n => n + 1)} onOpenTicket={setAberto} />
      )}

      <FullLoadingOverlay show={fullLoading.show && !!data} conn="connecting" />
    </div>
  );
};

const gau = {
  header: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 16, flexWrap: 'wrap' },
  eye: { font: 'var(--text-label)', letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-3)' },
  title: { font: '800 22px/1.1 var(--font-sans)', color: 'var(--fg-1)', letterSpacing: '-.01em', marginTop: 4 },
  regua: { font: 'var(--text-caption)', color: 'var(--fg-3)', marginTop: 6 },
  nota: { textAlign: 'center', font: 'var(--text-body-sm)', color: 'var(--fg-4)', maxWidth: 520, margin: '-28px auto 0' },
  aviso: { display: 'flex', alignItems: 'center', gap: 6, font: '600 12px/1.4 var(--font-sans)', color: 'var(--warning)', background: 'var(--warning-bg)', padding: '10px 16px', borderRadius: 'var(--r-md)', marginBottom: 12 },
  filtros: { display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center', marginBottom: 16 },
  buscaWrap: { display: 'flex', alignItems: 'center', gap: 6, background: 'var(--bg-surface)', border: '1px solid var(--border-2)', borderRadius: 'var(--r-sm)', padding: '0 10px', minWidth: 220, flex: '1 1 220px', maxWidth: 320 },
  busca: { border: 0, outline: 'none', background: 'transparent', font: 'var(--text-body-sm)', color: 'var(--fg-1)', padding: '9px 0', width: '100%' },
  vazio: { padding: '48px 22px', textAlign: 'center', font: 'var(--text-body-sm)', color: 'var(--fg-4)', background: 'var(--bg-surface)', border: '1px solid var(--border-1)', borderRadius: 'var(--r-lg)' },
  tabelaWrap: { background: 'var(--bg-surface)', border: '1px solid var(--border-1)', borderRadius: 'var(--r-lg)', overflowX: 'auto' },
  tabela: { width: '100%', borderCollapse: 'collapse' },
  th: { textAlign: 'left', font: '700 10px/1 var(--font-sans)', letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-3)', padding: '12px 14px', borderBottom: '1px solid var(--border-1)', whiteSpace: 'nowrap' },
  tr: { borderBottom: '1px solid var(--border-1)' },
  td: { font: '500 12.5px/1.4 var(--font-sans)', color: 'var(--fg-2)', padding: '10px 14px', verticalAlign: 'top' },
  tdDetalhe: { maxWidth: 420, whiteSpace: 'pre-wrap', wordBreak: 'break-word' },
  chip: { display: 'inline-block', font: '700 10.5px/1 var(--font-sans)', borderRadius: 'var(--r-pill)', padding: '4px 9px', whiteSpace: 'nowrap' },
  idBtn: { border: 0, background: 'transparent', font: '600 12px/1 var(--font-mono)', color: 'var(--fenix-blue)', cursor: 'pointer', padding: 0, textDecoration: 'underline' },
};

window.GatilhosAuditoria = GatilhosAuditoria;