/* global React, Icon, BRL, Ticker, Drawer */


const PARECERES = [
  { id: 'par-1', n: 'PE-094_2026_TecnicoJuridico.pdf', d: '12/05', s: 'final', titulo: 'PARECER TÉCNICO-JURÍDICO Nº 094/2026', processo: 'Processo Administrativo nº PE-094/2026 — SEFAZ-RJ', referencia: 'Pregão Eletrônico nº 094/2026 — Aquisição de material de expediente.', conclusao: 'regularidade', autora: 'Mariana Costa' },
  { id: 'par-2', n: 'PE-087_2026_PrestacaoContas.pdf', d: '10/05', s: 'final', titulo: 'PRESTAÇÃO DE CONTAS Nº 087/2026', processo: 'Processo Administrativo nº PE-087/2026 — TJ-PR', referencia: 'Pregão Eletrônico nº 087/2026 — Aquisição de material escolar.', conclusao: 'execução concluída', autora: 'Mariana Costa' },
  { id: 'par-3', n: 'PE-079_2026_AnaliseRecurso.pdf', d: '05/05', s: 'rascunho', titulo: 'ANÁLISE DE RECURSO Nº 079/2026', processo: 'Processo Administrativo nº PE-079/2026 — Pref. Vitória', referencia: 'Pregão Eletrônico nº 079/2026 — Recurso administrativo do item 12.', conclusao: 'rascunho · em análise', autora: 'Mariana Costa' },
  { id: 'par-4', n: 'ARP_014_2026_Acompanh_trimestral.pdf', d: '02/05', s: 'final', titulo: 'ACOMPANHAMENTO TRIMESTRAL ARP 014/2026', processo: 'ARP nº 014/2026 — Pref. Niterói', referencia: 'Ata de Registro de Preços nº 014/2026 — primeiro trimestre.', conclusao: 'em execução normal', autora: 'Mariana Costa' },
  { id: 'par-5', n: 'Relatorio_Conformidade_Abr2026.pdf', d: '30/04', s: 'final', titulo: 'RELATÓRIO DE CONFORMIDADE · ABR/2026', processo: 'Relatório mensal interno', referencia: 'Relatório de Conformidade Operacional — Abril/2026.', conclusao: '97% conformidade · 2 itens pendentes', autora: 'Ana Lúcia Pereira (DPO)' },
  { id: 'par-6', n: 'Auto_circunstanciado_PE068.pdf', d: '25/04', s: 'final', titulo: 'AUTO CIRCUNSTANCIADO Nº 068/2026', processo: 'Processo Administrativo nº PE-068/2026 — UFMG', referencia: 'Pregão Eletrônico nº 068/2026 — Aquisição de material gráfico.', conclusao: 'execução concluída · pagamento liquidado', autora: 'Mariana Costa' },
];

const RISCOS = [
  { id: 'r1', area: 'Tributário', prob: 'baixa', imp: 'alta', cor: 'amber', evt: 'reclassificação NCM', resp: 'Contabilidade JF', plano: 'Auditoria trimestral de NCMs por categoria. Consulta prévia à RFB quando há nova linha de produto. Treinamento da equipe de cadastro.', historico: ['Mar/2026: NCM de toner revisado · ajuste de 9608 para 8443.99', 'Jan/2026: auditoria preventiva · 0 divergências'], mitigado: 70 },
  { id: 'r2', area: 'Operacional', prob: 'média', imp: 'média', cor: 'amber', evt: 'atraso entrega > SLA', resp: 'Logística BTM', plano: 'SLA monitorado em tempo real via M06. Triangulação como plano B para SKUs com estoque crítico. Múltiplos transportadores cadastrados (Correios, JadLog, Braspress).', historico: ['Abr/2026: 1 atraso em 62 entregas (98.4% no prazo)', 'Mar/2026: 0 atrasos'], mitigado: 85 },
  { id: 'r3', area: 'Financeiro', prob: 'baixa', imp: 'alta', cor: 'amber', evt: 'inadimplência cliente público', resp: 'Financeiro · Mariana', plano: 'Cobrança automática em D+40 pós-NF. Diversificação de carteira (sem cliente > 25% do faturamento). Acompanhamento via M07 com alertas em vermelho para atrasos.', historico: ['Mai/2026: 1 cliente em atraso (AGE-RS · R$ 31.280)', 'Q1/2026: 0 inadimplências'], mitigado: 75 },
  { id: 'r4', area: 'Fiscal', prob: 'baixa', imp: 'baixa', cor: 'lime', evt: 'erro em NF · revisão IA', resp: 'IA-Gerente + Contador', plano: 'Validação automática de 6 checks por NF antes da aprovação manual. SPED gerado e auditado mensalmente pelo contador externo.', historico: ['Últimos 12 meses: 0 NFs com erro reclamado pela SEFAZ', '100% das NFs aprovadas com check IA'], mitigado: 95 },
  { id: 'r5', area: 'Conformidade', prob: 'média', imp: 'alta', cor: 'red', evt: 'CND vencer antes do empenho', resp: 'Mariana + Contador', plano: 'Alerta automático 12 dias antes do vencimento. Renovação automatizada via Portal RF/SEFAZ quando possível. Dashboard de certidões sempre visível no painel principal.', historico: ['Mai/2026: 1 alerta ativo (CND Municipal · 6 dias)', 'Abr/2026: 100% certidões renovadas no prazo'], mitigado: 60 },
  { id: 'r6', area: 'Reputacional', prob: 'baixa', imp: 'média', cor: 'lime', evt: 'descumpr. contrato', resp: 'Mariana + IA', plano: 'Acompanhamento contínuo via M05 (pipeline 12 etapas). IA monitora SLA de cada empenho. Resposta automática ao órgão em cada fase.', historico: ['Últimos 24 meses: 0 reclamações formais', '98.4% das entregas no prazo'], mitigado: 90 },
  { id: 'r7', area: 'Logístico', prob: 'média', imp: 'média', cor: 'amber', evt: 'transportadora indisponível', resp: 'Logística BTM', plano: '3 transportadoras cadastradas (Correios PAC/SEDEX, JadLog, Braspress). Cotação automática prévia. Coleta agendada com 48h de antecedência.', historico: ['Mar/2026: 1 troca de transportadora durante operação', 'Resolvido em 4h'], mitigado: 80 },
  { id: 'r8', area: 'TI/Segurança', prob: 'baixa', imp: 'alta', cor: 'amber', evt: 'vazamento de dados', resp: 'DPO · Ana Lúcia', plano: 'Backup diário em AWS Glacier (criptografia AES-256). Acesso por 2FA. Trilha de auditoria com hash em blockchain privada. Treinamento LGPD anual.', historico: ['Nunca houve incidente reportado', 'Última auditoria DPO: 97% conformidade'], mitigado: 88 },
];

function MAuditoria({ onNav }) {
  const [tab, setTab] = React.useState('trilha');
  const [evento, setEvento] = React.useState(null);
  const [risco, setRisco] = React.useState(null);
  const [riscoTab, setRiscoTab] = React.useState('plano');
  const [eventos, setEventos] = React.useState([]);
  const [loadingEventos, setLoadingEventos] = React.useState(true);

  React.useEffect(() => {
    let mounted = true;
    window.dataApi.listAuditoriaEvents({ limit: 200 })
      .then(rows => {
        if (!mounted) return;
        setEventos(rows.map(r => ({
          id: r.id,
          ts: new Date(r.ts).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' }),
          a: r.autor,
          ev: r.evento,
          mod: r.modulo || 'CORE',
          tipo: r.tipo,
          ip: r.ip || '—',
          userAgent: r.user_agent || '—',
          detalhes: r.detalhes,
          valor: r.valor_relacionado != null ? parseFloat(r.valor_relacionado) : null,
          modulo: r.modulo_target,
          // LGPD compatibility shape
          d: new Date(r.ts).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }),
          u: r.autor,
          dd: r.detalhes ? r.detalhes.split('.')[0] : r.evento,
          bl: 'execução contrato',
          f: r.evento,
          justificativa: r.detalhes,
        })));
        setLoadingEventos(false);
      })
      .catch(() => { if (mounted) setLoadingEventos(false); });
    return () => { mounted = false; };
  }, []);

  const trilhaEventos = eventos.filter(e => e.tipo !== 'lgpd');
  const lgpdEventos = eventos.filter(e => e.tipo === 'lgpd');

  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow"><span>Auditoria & Compliance</span><span className="chip">M12</span></div>
            <h1 className="page-title">Trilha imutável · LGPD · Pareceres TCU/CGU</h1>
            <p className="page-sub">Log inviolável (hash em blockchain privada) · Versionamento de propostas e atas · Geração automática de pareceres em formato CGU.</p>
          </div>
          <div className="flex items-center gap-3">
            <span className="badge badge-lime">{eventos.length} EVENTOS</span>
            <button className="btn"><Icon name="download" /> Exportar relatório</button>
          </div>
        </div>
        <div className="tabs" style={{ marginBottom: 14 }}>
          <div className={`tab ${tab === 'trilha' ? 'active' : ''}`} onClick={() => setTab('trilha')}>Trilha de Auditoria <span className="count">{loadingEventos ? '…' : trilhaEventos.length}</span></div>
          <div className={`tab ${tab === 'lgpd' ? 'active' : ''}`} onClick={() => setTab('lgpd')}>LGPD · Acessos <span className="count">{loadingEventos ? '…' : lgpdEventos.length}</span></div>
          <div className={`tab ${tab === 'parecer' ? 'active' : ''}`} onClick={() => setTab('parecer')}>Pareceres TCU/CGU <span className="count">{PARECERES.length}</span></div>
          <div className={`tab ${tab === 'risco' ? 'active' : ''}`} onClick={() => setTab('risco')}>Mapa de Risco <span className="count">{RISCOS.length}</span></div>
        </div>

        {tab === 'trilha' && <TrilhaView onOpen={setEvento} eventos={trilhaEventos} loading={loadingEventos} />}
        {tab === 'lgpd' && <LGPDView onOpen={setEvento} eventos={lgpdEventos} loading={loadingEventos} />}
        {tab === 'parecer' && <ParecerView />}
        {tab === 'risco' && <RiscoView onOpen={(r) => { setRisco(r); setRiscoTab('plano'); }} />}
      </div>

      {evento && <EventoDrawer evento={evento} onClose={() => setEvento(null)} onNav={onNav} />}
      {risco && <RiscoDrawer risco={risco} onClose={() => setRisco(null)} tab={riscoTab} onTab={setRiscoTab} />}
    </>
  );
}

/* ── TRILHA ───────────────────────────────────────────────── */
function TrilhaView({ onOpen, eventos, loading }) {
  return (
    <div className="card">
      <div className="card-head">
        <Icon name="check" />
        <div className="t">Trilha imutável · cada evento ancorado em hash</div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <select className="input" style={{ width: 140 }}><option>Todos módulos</option><option>M03 Precificação</option><option>M04 Disputa</option><option>M07 Financeiro</option></select>
          <input className="input" placeholder="Buscar evento..." style={{ width: 200 }} />
        </div>
      </div>
      <table className="tbl">
        <thead>
          <tr>
            <th>Timestamp</th>
            <th>Ator</th>
            <th>Mód.</th>
            <th>Evento</th>
            <th>Hash</th>
            <th>IP</th>
            <th style={{ width: 32 }}></th>
          </tr>
        </thead>
        <tbody>
          {loading && (
            <tr><td colSpan={7} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
              <span className="spinner" style={{ marginRight: 8 }}></span> Carregando trilha de auditoria...
            </td></tr>
          )}
          {!loading && eventos.length === 0 && (
            <tr><td colSpan={7} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
              Nenhum evento registrado ainda.
            </td></tr>
          )}
          {!loading && eventos.map(e => (
            <tr key={e.id} onClick={() => onOpen({ ...e, tipo: 'trilha' })} style={{ cursor: 'pointer' }}>
              <td className="mono" style={{ fontSize: 10.5 }}>{e.ts}</td>
              <td>{e.a}</td>
              <td><span className="badge">{e.mod}</span></td>
              <td style={{ fontSize: 11.5 }}>{e.ev}</td>
              <td className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>{e.id.slice(0, 8)}…</td>
              <td className="mono" style={{ fontSize: 10, color: 'var(--fg-3)' }}>{e.ip}</td>
              <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ padding: 12, borderTop: '1px solid var(--line-1)', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>
        <span className="dot-pulse" style={{ width: 6, height: 6 }}></span>
        <span>{eventos.length} eventos · ordenados por timestamp · IDs em UUID v4</span>
      </div>
    </div>
  );
}

/* ── LGPD ─────────────────────────────────────────────────── */
function LGPDView({ onOpen, eventos, loading }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 14 }}>
      <div className="card">
        <div className="card-head"><Icon name="check" /><div className="t">Acessos a dados pessoais · últimos 30d</div><div className="s">clique para detalhe</div></div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Data</th>
              <th>Usuário</th>
              <th>Dado acessado</th>
              <th>Base legal</th>
              <th>Finalidade</th>
              <th style={{ width: 32 }}></th>
            </tr>
          </thead>
          <tbody>
            {loading && (
              <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                <span className="spinner" style={{ marginRight: 8 }}></span> Carregando eventos LGPD...
              </td></tr>
            )}
            {!loading && eventos.length === 0 && (
              <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--fg-3)' }}>
                Nenhum acesso a dados pessoais registrado.
              </td></tr>
            )}
            {!loading && eventos.map(r => (
              <tr key={r.id} onClick={() => onOpen({ ...r, tipo: 'lgpd' })} style={{ cursor: 'pointer' }}>
                <td className="mono">{r.d}</td>
                <td>{r.u}</td>
                <td style={{ fontSize: 11.5 }}>{r.dd}</td>
                <td><span className="badge badge-cyan" style={{ fontSize: 9.5 }}>{(r.bl || '—').toUpperCase()}</span></td>
                <td style={{ fontSize: 11.5 }}>{r.f}</td>
                <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div className="card" style={{ padding: 14 }}>
          <div className="field-label">CONFORMIDADE LGPD</div>
          <div className="mono" style={{ fontSize: 36, fontWeight: 600, color: 'var(--lime)', marginTop: 6, lineHeight: 1 }}>97%</div>
          <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', marginTop: 4 }}>2 itens pendentes · revisão DPO</div>
          <div style={{ marginTop: 12, height: 8, background: 'var(--bg-3)', borderRadius: 4 }}><div style={{ width: '97%', height: '100%', background: 'var(--lime)', borderRadius: 4 }}></div></div>
        </div>
        <div className="card">
          <div className="card-head"><Icon name="cpu" /><div className="t">Direitos do titular</div></div>
          <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <button className="btn btn-sm" style={{ justifyContent: 'flex-start' }}><Icon name="search" size={11} /> Consulta de dados</button>
            <button className="btn btn-sm" style={{ justifyContent: 'flex-start' }}><Icon name="download" size={11} /> Portabilidade</button>
            <button className="btn btn-sm" style={{ justifyContent: 'flex-start' }}><Icon name="edit" size={11} /> Retificação</button>
            <button className="btn btn-sm" style={{ justifyContent: 'flex-start' }}><Icon name="x" size={11} /> Eliminação</button>
            <button className="btn btn-sm" style={{ justifyContent: 'flex-start' }}><Icon name="warn" size={11} /> Revogação consentimento</button>
          </div>
        </div>
        <div className="card" style={{ padding: 14 }}>
          <div className="field-label">DPO RESPONSÁVEL</div>
          <div style={{ fontSize: 13, fontWeight: 500, marginTop: 4 }}>Ana Lúcia Pereira · OAB-RJ 174.892</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>dpo@btm.com.br · (21) 99812-4477</div>
        </div>
      </div>
    </div>
  );
}

/* ── PARECERES ────────────────────────────────────────────── */
function ParecerView() {
  const [sel, setSel] = React.useState(PARECERES[0].id);
  const p = PARECERES.find(p => p.id === sel) || PARECERES[0];

  return (
    <div className="card">
      <div className="card-head"><Icon name="file" /><div className="t">Pareceres gerados automaticamente · formato TCU/CGU</div></div>
      <div style={{ padding: 18, display: 'grid', gridTemplateColumns: '320px 1fr', gap: 18 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {PARECERES.map(par => (
            <div key={par.id} onClick={() => setSel(par.id)} className="clickable" style={{
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              padding: '8px 10px',
              background: par.id === sel ? 'var(--bg-2)' : 'var(--bg-1)',
              borderRadius: 4,
              borderLeft: par.id === sel ? '2px solid var(--lime)' : '2px solid transparent',
            }}>
              <span style={{ fontFamily: 'IBM Plex Mono', fontSize: 9.5, fontWeight: 700, color: 'var(--red)', background: 'var(--bg-3)', padding: '2px 5px', borderRadius: 3 }}>PDF</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="mono" style={{ fontSize: 10.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--fg-1)' }}>{par.n}</div>
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--fg-3)' }}>{par.d} · <span style={{ color: par.s === 'final' ? 'var(--lime)' : 'var(--amber)' }}>{par.s}</span></div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ background: '#ffffff', color: '#1a1a1a', padding: 32, borderRadius: 4, minHeight: 480, fontFamily: 'Georgia, serif', boxShadow: '0 8px 24px rgba(0,0,0,0.3)' }}>
          <div style={{ textAlign: 'center', marginBottom: 24 }}>
            <div style={{ fontSize: 11, color: '#666', letterSpacing: 1 }}>BTM SERVIÇOS E COMÉRCIO LTDA</div>
            <div style={{ fontSize: 11, color: '#666' }}>CNPJ 33.804.351/0001-04</div>
          </div>
          <div style={{ textAlign: 'center', fontSize: 18, fontWeight: 600, marginBottom: 6, letterSpacing: 1 }}>{p.titulo}</div>
          <div style={{ textAlign: 'center', fontSize: 11, color: '#666', marginBottom: 24 }}>{p.processo}</div>
          <p style={{ fontSize: 12, lineHeight: 1.7, marginBottom: 12 }}><strong>Referência:</strong> {p.referencia}</p>
          <p style={{ fontSize: 12, lineHeight: 1.7, marginBottom: 12 }}><strong>Objeto:</strong> Análise técnica e jurídica da proposta apresentada pela empresa BTM Ltda., bem como verificação de conformidade documental, fiscal e operacional para os fins do disposto na Lei nº 14.133/2021.</p>
          <p style={{ fontSize: 12, lineHeight: 1.7, marginBottom: 12 }}><strong>1. DA HABILITAÇÃO.</strong> Verificou-se a regularidade fiscal junto à RFB, FGTS, Trabalhista, Estadual e Municipal, todas dentro do prazo de validade. As certidões estão arquivadas eletronicamente sob hash de auditoria 0x8a7b2c91...e4f2.</p>
          <p style={{ fontSize: 12, lineHeight: 1.7, marginBottom: 12 }}><strong>2. DA PROPOSTA.</strong> A proposta apresentada respeita os limites mínimos de viabilidade econômica (margem INNER ≥ 15%), preservando capacidade de execução do contrato sem comprometimento da qualidade do fornecimento.</p>
          <p style={{ fontSize: 12, lineHeight: 1.7, marginBottom: 12 }}><strong>3. DA CONCLUSÃO.</strong> Pelo exposto, opina-se pela <strong>{p.conclusao}</strong> da participação da BTM Ltda. no certame, atendidos todos os requisitos do edital.</p>
          <div style={{ marginTop: 36, fontSize: 11, color: '#444', textAlign: 'right' }}>Rio de Janeiro, {p.d} de maio de 2026.</div>
          <div style={{ marginTop: 24, fontSize: 11, color: '#444', textAlign: 'center' }}>__________________________________<br /><strong>{p.autora}</strong><br /><span style={{ fontSize: 10 }}>Assinatura digital ICP-Brasil A3</span></div>
        </div>
      </div>
      <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', background: 'var(--bg-2)', display: 'flex', gap: 8, alignItems: 'center' }}>
        <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)' }}>{p.n} · status <span style={{ color: p.s === 'final' ? 'var(--lime)' : 'var(--amber)' }}>{p.s.toUpperCase()}</span></span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <button className="btn btn-sm"><Icon name="download" size={11} /> Baixar PDF</button>
          <button className="btn btn-sm"><Icon name="print" size={11} /> Imprimir</button>
          <button className="btn btn-sm btn-primary"><Icon name="check" size={11} /> Assinar ICP-Brasil</button>
        </div>
      </div>
    </div>
  );
}

/* ── RISCO ────────────────────────────────────────────────── */
function RiscoView({ onOpen }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
      <div className="card">
        <div className="card-head"><Icon name="warn" /><div className="t">Mapa de risco · {RISCOS.length} áreas monitoradas</div><div className="s">clique para plano</div></div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Área</th>
              <th>Evento</th>
              <th>Probab.</th>
              <th>Impacto</th>
              <th>Status</th>
              <th style={{ width: 32 }}></th>
            </tr>
          </thead>
          <tbody>
            {RISCOS.map(r => (
              <tr key={r.id} onClick={() => onOpen(r)} style={{ cursor: 'pointer' }}>
                <td>{r.area}</td>
                <td style={{ fontSize: 11.5 }}>{r.evt}</td>
                <td className="mono">{r.prob}</td>
                <td className="mono">{r.imp}</td>
                <td><span className={`badge badge-${r.cor}`}>{r.cor === 'lime' ? 'OK' : r.cor === 'amber' ? 'MONITORAR' : 'CRÍTICO'}</span></td>
                <td><Icon name="chevR" size={11} style={{ color: 'var(--fg-3)' }} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="card">
        <div className="card-head"><Icon name="warn" /><div className="t">Matriz Probabilidade × Impacto</div></div>
        <div style={{ padding: 18 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '60px repeat(3, 1fr)', gridTemplateRows: '40px repeat(3, 80px)', gap: 4 }}>
            <div></div>
            <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>BAIXA</div>
            <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>MÉDIA</div>
            <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>ALTA</div>
            {['ALTA', 'MÉDIA', 'BAIXA'].map((imp, ri) => (
              <React.Fragment key={imp}>
                <div style={{ display: 'flex', alignItems: 'center', fontSize: 10, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono' }}>{imp}</div>
                {['baixa', 'média', 'alta'].map(prob => {
                  const sev = ri === 0 && prob !== 'baixa' ? 'red' : ri === 0 || prob === 'alta' ? 'amber' : 'lime';
                  const itens = RISCOS.filter(m => m.imp.toUpperCase() === imp && m.prob === prob);
                  return (
                    <div key={prob} style={{ background: sev === 'red' ? 'rgba(255,93,93,0.12)' : sev === 'amber' ? 'rgba(255,176,32,0.1)' : 'rgba(212,247,82,0.08)', border: `1px solid ${sev === 'red' ? 'rgba(255,93,93,0.3)' : sev === 'amber' ? 'rgba(255,176,32,0.3)' : 'var(--lime-border)'}`, borderRadius: 4, padding: 6, fontSize: 9.5, color: 'var(--fg-1)', fontFamily: 'IBM Plex Mono', overflow: 'hidden' }}>
                      {itens.map(i => <div key={i.area} className="clickable" onClick={() => onOpen(i)} style={{ marginBottom: 2 }}>● {i.area}</div>)}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── EVENTO DRAWER (trilha + LGPD) ─────────────────────────── */
function EventoDrawer({ evento, onClose, onNav }) {
  const isLgpd = evento.tipo === 'lgpd';
  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>{isLgpd ? 'LGPD · Acesso a dado pessoal' : 'Evento de auditoria'}</span><span className="chip">M12</span>{!isLgpd && <span className="badge">{evento.mod}</span>}{isLgpd && <span className="badge badge-cyan">{evento.bl.toUpperCase()}</span>}</>}
      title={<span style={{ fontWeight: 600 }}>{isLgpd ? evento.dd : evento.ev}</span>}
      subtitle={`${isLgpd ? evento.d : evento.ts} · por ${isLgpd ? evento.u : evento.a}`}
      headRight={
        !isLgpd && (
          <div style={{ textAlign: 'right' }}>
            <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>HASH ANCORADO</div>
            <div className="mono" style={{ fontSize: 12, fontWeight: 600, color: 'var(--cyan)' }}>{evento.hash}</div>
          </div>
        )
      }
      footer={
        <>
          <button className="btn"><Icon name="link" /> Copiar hash</button>
          <button className="btn"><Icon name="print" /> Imprimir registro</button>
          {!isLgpd && evento.modulo && (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => onNav(evento.modulo)}>
              <Icon name="arrowR" /> Abrir módulo {evento.mod}
            </button>
          )}
          {isLgpd && (
            <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
              <Icon name="check" /> Validar base legal
            </button>
          )}
        </>
      }
    >
      <div style={{ padding: 18 }}>
        {!isLgpd && (
          <>
            <div className="field-label" style={{ marginBottom: 10 }}>DETALHES DO EVENTO</div>
            <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, fontSize: 12.5, lineHeight: 1.5, marginBottom: 22 }}>
              {evento.detalhes}
            </div>

            <div className="field-label" style={{ marginBottom: 10 }}>METADADOS</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 22 }}>
              <Field label="TIMESTAMP" value={evento.ts} mono />
              <Field label="ATOR" value={evento.a} />
              <Field label="MÓDULO" value={evento.mod} mono />
              <Field label="IP DE ORIGEM" value={evento.ip} mono />
              <Field label="USER AGENT" value={evento.userAgent} mono />
              {evento.valor && <Field label="VALOR ENVOLVIDO" value={typeof evento.valor === 'number' && evento.valor > 100 ? BRL(evento.valor) : `R$ ${evento.valor.toFixed(2)}`} valueClass="text-lime" />}
            </div>

            <div className="field-label" style={{ marginBottom: 10 }}>HASH DE INTEGRIDADE</div>
            <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--cyan)', borderRadius: 6, marginBottom: 14 }}>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'IBM Plex Mono', marginBottom: 6 }}>SHA-256 · ancorado em cadeia privada</div>
              <div style={{ fontSize: 11.5, fontFamily: 'IBM Plex Mono', wordBreak: 'break-all', color: 'var(--cyan)' }}>{evento.hashFull}</div>
            </div>

            <div className="alert-banner alert-lime">
              <Icon name="check" size={13} />
              <div>
                <strong>Evento imutável · validado em cadeia</strong>
                <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                  Qualquer alteração no registro original quebraria o hash e seria detectada na próxima validação automática (a cada 32 minutos).
                </div>
              </div>
            </div>
          </>
        )}

        {isLgpd && (
          <>
            <div className="field-label" style={{ marginBottom: 10 }}>DETALHES DO ACESSO</div>
            <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, fontSize: 12.5, lineHeight: 1.5, marginBottom: 22 }}>
              {evento.justificativa}
            </div>

            <div className="field-label" style={{ marginBottom: 10 }}>METADADOS DO ACESSO</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 22 }}>
              <Field label="DATA/HORA" value={evento.d} mono />
              <Field label="USUÁRIO" value={evento.u} />
              <Field label="DADO ACESSADO" value={evento.dd} />
              <Field label="DATASET" value={evento.dataset} mono />
              <Field label="BASE LEGAL" value={evento.bl} valueClass="text-cyan" />
              <Field label="FINALIDADE" value={evento.f} />
              <Field label="RETENÇÃO" value={evento.retencao} />
            </div>

            <div className="alert-banner alert-cyan">
              <Icon name="info" size={13} />
              <div>
                <strong>LGPD · Art. 7º — Base legal documentada</strong>
                <div style={{ fontSize: 11.5, color: 'var(--fg-2)', marginTop: 2 }}>
                  Acesso registrado em conformidade com a Lei 13.709/2018. O titular pode solicitar relatório completo à DPO Ana Lúcia Pereira (OAB-RJ 174.892).
                </div>
              </div>
            </div>
          </>
        )}
      </div>
    </Drawer>
  );
}

/* ── RISCO DRAWER ──────────────────────────────────────────── */
function RiscoDrawer({ risco, onClose, tab, onTab }) {
  return (
    <Drawer
      open={true}
      onClose={onClose}
      eyebrow={<><span>Risco · {risco.area}</span><span className="chip">M12</span><span className={`badge badge-${risco.cor}`}>{risco.cor === 'lime' ? 'OK' : risco.cor === 'amber' ? 'MONITORAR' : 'CRÍTICO'}</span></>}
      title={<span style={{ fontWeight: 600 }}>{risco.evt}</span>}
      subtitle={`Probabilidade ${risco.prob} · Impacto ${risco.imp} · Responsável ${risco.resp}`}
      headRight={
        <div style={{ textAlign: 'right' }}>
          <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)' }}>MITIGAÇÃO</div>
          <div className="mono" style={{ fontSize: 16, fontWeight: 600, color: risco.mitigado >= 80 ? 'var(--lime)' : risco.mitigado >= 60 ? 'var(--amber)' : 'var(--red)' }}>{risco.mitigado}%</div>
        </div>
      }
      tabs={[
        { id: 'plano', label: 'Plano de mitigação' },
        { id: 'hist', label: 'Histórico', count: risco.historico.length },
        { id: 'acoes', label: 'Próximas ações' },
      ]}
      activeTab={tab}
      onTabChange={onTab}
      footer={
        <>
          <button className="btn"><Icon name="edit" /> Editar plano</button>
          <button className="btn"><Icon name="users" /> Atribuir responsável</button>
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }}>
            <Icon name="check" /> Marcar como revisado
          </button>
        </>
      }
    >
      {tab === 'plano' && (
        <div style={{ padding: 18 }}>
          <div className="field-label" style={{ marginBottom: 10 }}>NÍVEL DE MITIGAÇÃO</div>
          <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, marginBottom: 22 }}>
            <div className="flex items-center gap-3" style={{ marginBottom: 8 }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', minWidth: 30 }}>0%</span>
              <div style={{ flex: 1, height: 10, background: 'var(--bg-3)', borderRadius: 5, overflow: 'hidden' }}>
                <div style={{ width: risco.mitigado + '%', height: '100%', background: risco.mitigado >= 80 ? 'var(--lime)' : risco.mitigado >= 60 ? 'var(--amber)' : 'var(--red)' }}></div>
              </div>
              <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', minWidth: 40, textAlign: 'right' }}>100%</span>
            </div>
            <div className="flex items-center gap-3" style={{ justifyContent: 'space-between', marginTop: 8 }}>
              <span style={{ fontSize: 11.5, color: 'var(--fg-2)' }}>Cobertura atual do plano</span>
              <span className="mono" style={{ fontSize: 16, fontWeight: 600, color: risco.mitigado >= 80 ? 'var(--lime)' : risco.mitigado >= 60 ? 'var(--amber)' : 'var(--red)' }}>{risco.mitigado}%</span>
            </div>
          </div>

          <div className="field-label" style={{ marginBottom: 10 }}>DESCRIÇÃO DO RISCO</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 14 }}>
            <Field label="ÁREA" value={risco.area} />
            <Field label="PROBABILIDADE" value={risco.prob} valueClass={risco.prob === 'alta' ? 'text-red' : risco.prob === 'média' ? 'text-amber' : 'text-lime'} />
            <Field label="IMPACTO" value={risco.imp} valueClass={risco.imp === 'alta' ? 'text-red' : risco.imp === 'média' ? 'text-amber' : 'text-lime'} />
            <Field label="EVENTO ESPERADO" value={risco.evt} />
            <Field label="RESPONSÁVEL" value={risco.resp} />
            <Field label="STATUS" value={risco.cor === 'lime' ? 'OK' : risco.cor === 'amber' ? 'MONITORAR' : 'CRÍTICO'} valueClass={risco.cor === 'lime' ? 'text-lime' : risco.cor === 'amber' ? 'text-amber' : 'text-red'} />
          </div>

          <div className="field-label" style={{ marginTop: 22, marginBottom: 10 }}>PLANO DE MITIGAÇÃO</div>
          <div style={{ padding: 14, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderLeft: `3px solid var(--${risco.cor})`, borderRadius: 6, fontSize: 12.5, lineHeight: 1.55 }}>
            {risco.plano}
          </div>
        </div>
      )}

      {tab === 'hist' && (
        <div style={{ padding: 18 }}>
          <div className="field-label" style={{ marginBottom: 10 }}>HISTÓRICO DE OCORRÊNCIAS</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {risco.historico.map((h, i) => (
              <div key={i} style={{ padding: 12, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderRadius: 6, fontSize: 12.5 }}>
                {h}
              </div>
            ))}
          </div>
          <div className="alert-banner alert-cyan" style={{ marginTop: 18 }}>
            <Icon name="info" size={13} />
            Histórico mantido por 7 anos para auditoria externa (TCU/CGU).
          </div>
        </div>
      )}

      {tab === 'acoes' && (
        <div style={{ padding: 18 }}>
          <div className="field-label" style={{ marginBottom: 10 }}>PRÓXIMAS AÇÕES DE MITIGAÇÃO</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { t: 'Revisão trimestral do plano', q: 'próxima · 30/06/2026', tone: '' },
              { t: 'Treinamento da equipe', q: 'agendado · 15/07/2026', tone: 'cyan' },
              { t: 'Auditoria externa', q: 'agendada · Q4/2026', tone: 'amber' },
              { t: 'Atualização da política', q: 'pendente · sem data', tone: 'red' },
            ].map((a, i) => (
              <div key={i} style={{ padding: 12, background: 'var(--bg-2)', border: '1px solid var(--line-1)', borderLeft: a.tone ? `3px solid var(--${a.tone})` : '3px solid var(--fg-4)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{a.t}</div>
                  <div className="mono" style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 2 }}>{a.q}</div>
                </div>
                <button className="btn btn-ghost btn-sm"><Icon name="edit" size={11} /></button>
              </div>
            ))}
          </div>
        </div>
      )}
    </Drawer>
  );
}

function Field({ label, value, valueClass, mono }) {
  return (
    <div>
      <div className="field-label">{label}</div>
      <div className={`${valueClass || ''} ${mono ? 'mono' : ''}`} style={{ fontSize: 13, fontWeight: 500 }}>{value}</div>
    </div>
  );
}

window.MAuditoria = MAuditoria;