// Audit — cross-module event stream with filters. Every user action is logged.
function Audit() {
  const { state, dispatch } = useApp();
  const moduleFilter = state.filters.auditModule;

  const modules = ["all", "Roster", "Payroll", "Compliance", "HR"];
  const counts = modules.reduce((acc, m) => {
    acc[m] = m === "all" ? state.auditEvents.length : state.auditEvents.filter(e => e.module === m).length;
    return acc;
  }, {});
  const rows = state.auditEvents.filter(e => moduleFilter === "all" ? true : e.module === moduleFilter);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Observability</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>Audit trail</h1>
          <div className="page-sub">{state.auditEvents.length} events · last {state.auditEvents[0]?.ts || "—"} · stream auto-generated from every workflow action</div>
        </div>
        <div className="hstack">
          <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Exported ${rows.length} events as CSV` } })}><Icon name="download" size={13} /> Export</button>
          <Dropdown align="right" trigger={<button className="btn"><Icon name="filter" size={13} /> {moduleFilter === "all" ? "All modules" : moduleFilter}</button>}>
            {(close) => (
              <>
                <div className="dropdown-label">Module</div>
                {modules.map(m => (
                  <DropdownItem key={m} icon={moduleFilter === m ? "check" : "eye"} label={m === "all" ? `All · ${counts[m]}` : `${m} · ${counts[m] || 0}`} onClick={() => { dispatch({ type: "SET_FILTER", key: "auditModule", value: m }); close(); }} />
                ))}
              </>
            )}
          </Dropdown>
        </div>
      </div>

      <div className="hstack" style={{ marginBottom: 12, gap: 6 }}>
        <div className="kbar">
          {modules.map(m => (
            <button key={m} className="chip" data-active={moduleFilter === m} onClick={() => dispatch({ type: "SET_FILTER", key: "auditModule", value: m })}>
              {m === "all" ? "All" : m} <span className="count">{counts[m] || 0}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="card scroll">
        <div className="table-scroll" style={{ maxHeight: "68vh" }}>
          <table className="table">
            <thead>
              <tr><th>When</th><th>Actor</th><th>Module</th><th>Action</th><th>Approver</th><th>Detail</th><th></th></tr>
            </thead>
            <tbody>
              {rows.map(ev => {
                // Map NuCo actions to their agent + inferred approver (human-in-the-loop chain).
                const agent = ev.actor === "NuCo" ? state.agents.find(a => a.scope.some(s => s.toLowerCase().includes(ev.module.toLowerCase()) || ev.module.toLowerCase().includes(s.toLowerCase()))) : null;
                const approver = agent && (agent.tier === "L3" || agent.tier === "L4") ? agent.approver.split(" · ")[0] : (ev.actor === "NuCo" ? "—" : "self");
                return (
                  <tr key={ev.id}>
                    <td className="mono" style={{ fontSize: 11 }}>{ev.ts}</td>
                    <td>
                      {ev.actor === "NuCo" ? (
                        <span className="hstack" style={{ gap: 6 }}>
                          <span style={{ width: 20, height: 20, borderRadius: 4, background: "var(--ink)", color: "var(--paper)", display: "grid", placeItems: "center", fontFamily: "var(--font-serif)", fontSize: 11 }}>N</span>
                          <div>
                            <div style={{ fontSize: 12 }}>NuCo</div>
                            {agent && <TierBadge tier={agent.tier} />}
                          </div>
                        </span>
                      ) : <span style={{ fontSize: 12 }}>{ev.actor}</span>}
                    </td>
                    <td><Badge tone={ev.module === "Compliance" ? "warn" : ev.module === "Payroll" ? "ink" : undefined}>{ev.module}</Badge></td>
                    <td><div style={{ fontWeight: 500, fontSize: 12.5 }}>{ev.action}</div></td>
                    <td><span className="sub mono" style={{ fontSize: 11 }}>{approver}</span></td>
                    <td><div className="sub" style={{ fontSize: 11.5, color: "var(--ink-2)" }}>{ev.detail}</div></td>
                    <td>{ev.tone && <Badge tone={ev.tone} dot>{ev.tone === "ok" ? "success" : ev.tone === "warn" ? "warn" : ev.tone === "block" ? "blocked" : "info"}</Badge>}</td>
                  </tr>
                );
              })}
              {rows.length === 0 && <tr><td colSpan={7} style={{ padding: 28, textAlign: "center" }}><div className="sub">No events for this filter.</div></td></tr>}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Audit });