// Tela de Auditoria (spec 2026-08-05) — trilha completa do que os usuários
// fazem no sistema: logins (ok/falha/bloqueado), logout, gestão de usuários e
// perfis, exports. Filtros + paginação servidos por /audit-logs.

const AU_API = window.FENIX_API_BASE;
const AU_PAGE = 50;

// Cores por grupo de ação — falhas saltam aos olhos.
const AU_ACAO_CORES = {
  'login-falhou':    { color:'var(--negative)',  background:'var(--negative-bg)' },
  'login-bloqueado': { color:'var(--negative)',  background:'var(--negative-bg)' },
  'excluir':         { color:'var(--negative)',  background:'var(--negative-bg)' },
  'login':           { color:'var(--positive)',  background:'var(--positive-bg)' },
  'logout':          { color:'var(--fg-3)',      background:'var(--bg-sunken)' },
  'exportar':        { color:'var(--warning)',   background:'var(--warning-bg)' },
};

function AuditoriaView() {
  const [dados, setDados] = React.useState(null);   // {rows,total,acoes,recursos}
  const [erro, setErro] = React.useState(null);
  const [pagina, setPagina] = React.useState(0);
  const [filtros, setFiltros] = React.useState({ usuario:'', acao:'', recurso:'', q:'', de:'', ate:'' });
  const [aplicados, setAplicados] = React.useState(filtros);

  const carrega = React.useCallback(async (f, pg) => {
    setErro(null);
    const qs = new URLSearchParams({ limit: AU_PAGE, offset: pg * AU_PAGE });
    Object.entries(f).forEach(([k, v]) => { if (v) qs.set(k, v); });
    try {
      const res = await fetch(`${AU_API}/audit-logs?${qs}`, { signal: AbortSignal.timeout(15000) });
      if (!res.ok) throw new Error(`API ${res.status}`);
      setDados(await res.json());
    } catch (e) { setErro(String(e.message || e)); }
  }, []);
  React.useEffect(() => { carrega(aplicados, pagina); }, [aplicados, pagina, carrega]);

  if (!window.FenixAuth.can('auditoria.ver'))
    return <div style={au.vazio}>Seu perfil não tem acesso à auditoria.</div>;
  if (erro) return <div style={au.vazio}>Erro ao carregar: {erro}</div>;
  if (!dados) return <div style={au.vazio}>Carregando…</div>;

  const totalPaginas = Math.max(1, Math.ceil(dados.total / AU_PAGE));
  const aplicar = () => { setPagina(0); setAplicados({...filtros}); };
  const limpar = () => {
    const zero = { usuario:'', acao:'', recurso:'', q:'', de:'', ate:'' };
    setFiltros(zero); setAplicados(zero); setPagina(0);
  };
  const set = (k) => (e) => setFiltros(v => ({...v, [k]: e.target.value}));

  return (
    <div>
      <div style={au.head}>
        <div>
          <div className="fenix-eyebrow">Administração</div>
          <h2 style={au.h2}>Auditoria <span style={au.badge}>{dados.total.toLocaleString('pt-BR')} registros</span></h2>
        </div>
      </div>

      <div style={au.filtros}>
        <input style={au.input} placeholder="Usuário…" autoComplete="off"
          value={filtros.usuario} onChange={set('usuario')} onKeyDown={e=>e.key==='Enter'&&aplicar()}/>
        <select style={au.input} value={filtros.acao} onChange={set('acao')}>
          <option value="">Ação — todas</option>
          {dados.acoes.map(a => <option key={a} value={a}>{a}</option>)}
        </select>
        <select style={au.input} value={filtros.recurso} onChange={set('recurso')}>
          <option value="">Recurso — todos</option>
          {dados.recursos.map(r => <option key={r} value={r}>{r}</option>)}
        </select>
        <input style={au.input} type="date" value={filtros.de} onChange={set('de')} title="De"/>
        <input style={au.input} type="date" value={filtros.ate} onChange={set('ate')} title="Até"/>
        <input style={{...au.input, flex:1, minWidth:160}} placeholder="Buscar na descrição…"
          autoComplete="off" value={filtros.q} onChange={set('q')} onKeyDown={e=>e.key==='Enter'&&aplicar()}/>
        <button style={au.btnPrimary} onClick={aplicar}>Filtrar</button>
        <button style={au.btnGhost} onClick={limpar}>Limpar</button>
      </div>

      <div style={au.card}>
        <table style={au.table}>
          <thead>
            <tr>{['Data/hora','Usuário','Ação','Recurso','Descrição'].map(h =>
              <th key={h} style={au.th}>{h}</th>)}</tr>
          </thead>
          <tbody>
            {dados.rows.map(a => (
              <tr key={a.id}>
                <td style={{...au.td, whiteSpace:'nowrap', fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-3)'}}>
                  {new Date(a.criado_em).toLocaleString('pt-BR')}</td>
                <td style={{...au.td, whiteSpace:'nowrap'}}><b>{a.usuario_nome}</b></td>
                <td style={au.td}>
                  <span style={{...au.chip, ...(AU_ACAO_CORES[a.acao] ||
                    { color:'var(--fenix-blue)', background:'var(--fenix-blue-100)' })}}>{a.acao}</span>
                </td>
                <td style={{...au.td, color:'var(--fg-3)'}}>{a.recurso}</td>
                <td style={au.td}>{a.descricao}</td>
              </tr>
            ))}
            {!dados.rows.length && <tr><td colSpan={5}
              style={{...au.td, textAlign:'center', color:'var(--fg-3)'}}>Nenhum registro com esses filtros.</td></tr>}
          </tbody>
        </table>
      </div>

      <div style={au.pager}>
        <button style={au.btnGhost} disabled={pagina === 0}
          onClick={()=>setPagina(p=>p-1)}>← Anterior</button>
        <span style={au.pagerInfo}>página {pagina + 1} de {totalPaginas}</span>
        <button style={au.btnGhost} disabled={pagina + 1 >= totalPaginas}
          onClick={()=>setPagina(p=>p+1)}>Próxima →</button>
      </div>
    </div>
  );
}

const au = {
  head:{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom:14 },
  h2:{ font:'var(--text-h2)', color:'var(--fg-1)', margin:'2px 0 0' },
  badge:{ font:'600 13px/1 var(--font-mono)', color:'var(--fg-3)', background:'var(--bg-sunken)',
    borderRadius:'var(--r-pill)', padding:'4px 10px', verticalAlign:'middle', marginLeft:8 },
  filtros:{ display:'flex', flexWrap:'wrap', gap:8, marginBottom:14, alignItems:'center' },
  input:{ font:'var(--text-body-sm)', color:'var(--fg-1)', background:'var(--bg-surface)',
    border:'1px solid var(--border-2)', borderRadius:'var(--r-sm)', padding:'8px 11px', outline:'none' },
  card:{ background:'var(--bg-surface)', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)',
    boxShadow:'var(--shadow-sm)', overflow:'auto' },
  table:{ width:'100%', borderCollapse:'collapse' },
  th:{ font:'var(--text-label)', textAlign:'left', textTransform:'uppercase', letterSpacing:'.06em',
    color:'var(--fg-3)', padding:'12px 16px', borderBottom:'1px solid var(--border-1)' },
  td:{ font:'var(--text-body-sm)', color:'var(--fg-1)', padding:'10px 16px',
    borderBottom:'1px solid var(--border-1)', verticalAlign:'top' },
  chip:{ font:'var(--text-caption)', fontWeight:700, borderRadius:'var(--r-pill)',
    padding:'4px 10px', whiteSpace:'nowrap' },
  pager:{ display:'flex', justifyContent:'center', alignItems:'center', gap:14, marginTop:14 },
  pagerInfo:{ font:'var(--text-body-sm)', color:'var(--fg-3)' },
  btnPrimary:{ font:'var(--text-label)', color:'var(--fg-on-accent)', background:'var(--fenix-orange)',
    border:'none', borderRadius:'var(--r-sm)', padding:'9px 16px', cursor:'pointer' },
  btnGhost:{ font:'var(--text-label)', color:'var(--fg-2)', background:'transparent',
    border:'1px solid var(--border-2)', borderRadius:'var(--r-sm)', padding:'9px 16px', cursor:'pointer' },
  vazio:{ font:'var(--text-body)', color:'var(--fg-3)', textAlign:'center', padding:'60px 0' },
};

window.AuditoriaView = AuditoriaView;