/* NutriDMS audit ledger — the server is the only source of events. */
function AuditLog() {
  const [q, setQ] = React.useState("");
  const [fSeverity, setFSeverity] = React.useState("all");
  const [fCategory, setFCategory] = React.useState("all");
  const [fFrom, setFFrom] = React.useState("");
  const [fTo, setFTo] = React.useState("");
  const [events, setEvents] = React.useState([]);
  const [count, setCount] = React.useState(0);
  const [page, setPage] = React.useState(1);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState("");
  const [detail, setDetail] = React.useState(null);
  const [detailLoading, setDetailLoading] = React.useState(false);
  const [exporting, setExporting] = React.useState(false);
  const [scan, setScan] = React.useState(null);

  const filters = React.useMemo(() => ({
    search: q.trim(),
    severity: fSeverity === "all" ? "" : fSeverity,
    category: fCategory === "all" ? "" : fCategory,
    from: fFrom,
    to: fTo,
    page: page,
    limit: 25,
  }), [q, fSeverity, fCategory, fFrom, fTo, page]);

  const load = React.useCallback(async () => {
    setLoading(true); setError("");
    try {
      const payload = await window.NutriData.audit.list(filters);
      if (!payload || !Array.isArray(payload.results)) throw new Error("The audit ledger is unavailable for this workspace.");
      setEvents(payload.results); setCount(Number(payload.count || 0));
    } catch (err) {
      setEvents([]); setCount(0); setError(err && err.message ? err.message : "Could not load the audit ledger.");
    } finally { setLoading(false); }
  }, [filters]);

  React.useEffect(() => {
    const timer = window.setTimeout(() => { load(); }, 180);
    return () => window.clearTimeout(timer);
  }, [load]);
  React.useEffect(() => {
    const refresh = () => load();
    window.addEventListener("nutridms-backend", refresh);
    return () => window.removeEventListener("nutridms-backend", refresh);
  }, [load]);

  const apply = (setter) => (event) => { setPage(1); setter(event.target.value); };
  const clearFilters = () => { setQ(""); setFSeverity("all"); setFCategory("all"); setFFrom(""); setFTo(""); setPage(1); };
  const pages = Math.max(1, Math.ceil(count / 25));
  const activeFilters = Number(Boolean(q || fFrom || fTo)) + Number(fSeverity !== "all") + Number(fCategory !== "all");
  const stats = {
    total: count,
    high: events.filter((event) => event.presentation && event.presentation.severity === "high").length,
    medium: events.filter((event) => event.presentation && event.presentation.severity === "medium").length,
    today: events.filter((event) => String(event.created_at || "").slice(0, 10) === new Date().toISOString().slice(0, 10)).length,
  };

  const openDetail = async (event) => {
    setDetailLoading(true); setDetail(null);
    try {
      const payload = await window.NutriData.audit.get(event.id);
      if (!payload) throw new Error("The event detail is unavailable.");
      setDetail(payload);
    } catch (err) { setError(err && err.message ? err.message : "Could not load event detail."); }
    finally { setDetailLoading(false); }
  };
  const exportCsv = async () => {
    setExporting(true); setError("");
    try {
      const payload = await window.NutriData.audit.export(Object.assign({}, filters, { page: "" }));
      if (!payload || !payload.blob) throw new Error("The export is unavailable.");
      const href = URL.createObjectURL(payload.blob); const link = document.createElement("a");
      link.href = href; link.download = payload.filename || "nutridms-audit-log.csv";
      document.body.appendChild(link); link.click(); link.remove(); window.setTimeout(() => URL.revokeObjectURL(href), 1000);
      load();
    } catch (err) { setError(err && err.message ? err.message : "Could not export the audit ledger."); }
    finally { setExporting(false); }
  };
  const runScan = async () => {
    setScan({ running: true }); setError("");
    try {
      const payload = await window.NutriData.audit.scan(Object.assign({}, filters, { page: "", limit: "" }));
      if (!payload) throw new Error("Loraa audit scanning is unavailable.");
      setScan({ running: false, result: payload }); load();
    } catch (err) {
      setScan(null); setError(err && err.message ? err.message : "Loraa could not scan this audit window.");
    }
  };
  const downloadDetail = () => {
    if (!detail) return;
    const blob = new Blob([JSON.stringify(detail, null, 2)], { type: "application/json" });
    const href = URL.createObjectURL(blob); const link = document.createElement("a");
    link.href = href; link.download = `audit-event-${detail.id}.json`;
    document.body.appendChild(link); link.click(); link.remove(); window.setTimeout(() => URL.revokeObjectURL(href), 1000);
  };
  const timestamp = (value) => value ? new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value)) : "—";
  const severityClass = { high: "error", medium: "warning", low: "neutral" };

  return (
    <div className="aud">
      <Crumbs path={[{ label: "Dashboard" }, { label: "Audit Log" }]} />
      <div className="page-head">
        <div><h1 className="page-title">Audit Log</h1><p className="page-sub">Immutable, tenant-scoped activity recorded by NutriDMS services.</p></div>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <button className="btn secondary" onClick={exportCsv} disabled={exporting || loading}><Icon name="download" size={16} /> {exporting ? "Exporting…" : "Export CSV"}</button>
          <button className="aud-loraa-btn" onClick={runScan} disabled={loading || (scan && scan.running)}><span className="aud-loraa-label">{scan && scan.running ? "Scanning…" : "Scan with Loraa"}</span></button>
        </div>
      </div>

      <div className="aud-stats">
        <div className="aud-stat"><span className="aud-stat-ic brand"><Icon name="history" size={18} /></span><div><span className="aud-stat-v">{stats.total}</span><span className="aud-stat-k">Matching events</span></div></div>
        <div className="aud-stat"><span className="aud-stat-ic amber"><Icon name="alert-triangle" size={18} /></span><div><span className="aud-stat-v">{stats.medium}</span><span className="aud-stat-k">Warnings on this page</span></div></div>
        <div className="aud-stat"><span className="aud-stat-ic red"><Icon name="shield-alert" size={18} /></span><div><span className="aud-stat-v">{stats.high}</span><span className="aud-stat-k">High severity on this page</span></div></div>
        <div className="aud-stat"><span className="aud-stat-ic green"><Icon name="calendar-check" size={18} /></span><div><span className="aud-stat-v">{stats.today}</span><span className="aud-stat-k">Today on this page</span></div></div>
      </div>

      {error && <div className="notice error" role="alert">{error} <button className="btn link sm" onClick={load}>Retry</button></div>}
      {scan && !scan.running && <div className="aud-scanpanel"><div className="aud-scanpanel-head"><div className="aud-scanpanel-t"><strong>Loraa audit scan</strong><span>Reviewed {scan.result.eventCount} server-selected event{scan.result.eventCount === 1 ? "" : "s"}.</span></div><button className="aud-scan-x" onClick={() => setScan(null)}><Icon name="x" size={16} /></button></div><div className="aud-scanfindings"><p>{scan.result.answer}</p>{(scan.result.evidence || []).map((item, index) => <div className="aud-finding pill info" key={index}>{item}</div>)}</div></div>}

      <div className="aud-toolbar">
        <div className="aud-search"><Icon name="search" size={16} /><input value={q} onChange={apply(setQ)} placeholder="Search action, actor, entity, IP…" /></div>
        <select className="aud-sel" value={fSeverity} onChange={apply(setFSeverity)}><option value="all">All severity</option><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option></select>
        <select className="aud-sel" value={fCategory} onChange={apply(setFCategory)}><option value="all">All categories</option><option value="security">Security</option><option value="content">Content</option><option value="labeling">Labeling</option><option value="compliance">Compliance</option><option value="workspace">Workspace</option><option value="loraa">Loraa</option><option value="audit">Audit</option><option value="system">System</option></select>
        <label className="aud-advf"><span>From</span><input type="date" value={fFrom} onChange={apply(setFFrom)} /></label>
        <label className="aud-advf"><span>To</span><input type="date" value={fTo} onChange={apply(setFTo)} /></label>
        {activeFilters > 0 && <button className="aud-clear" onClick={clearFilters}>Clear</button>}
      </div>

      <div className="aud-list">
        <div className="aud-list-head"><span>Timestamp</span><span>Event / target</span><span>Source</span><span>Actor</span><span>Severity</span><span></span></div>
        {loading && <div className="empty" style={{ padding: 32 }}><p>Loading immutable audit events…</p></div>}
        {!loading && events.map((event) => {
          const presentation = event.presentation || {}; const actor = event.actor || {}; const entity = event.entity || {};
          return <button className={`aud-card ${presentation.severity === "high" ? "err" : ""}`} key={event.id} onClick={() => openDetail(event)}>
            <span className="aud-ts"><span className="aud-ts-date">{timestamp(event.created_at)}</span></span>
            <span className="aud-event"><span className="aud-event-ic"><Icon name="history" size={14} stroke={2.2} /></span><span className="aud-event-tx"><span className="aud-event-act">{presentation.label || event.action}</span><span className="aud-event-tgt">{entity.label || event.event_summary || entity.type || "Recorded event"}</span></span></span>
            <span className="aud-src"><Icon name="shield" size={12} /> {presentation.source || "System"}</span>
            <span className="aud-actor"><span className="avatar sm">{initialsOf(actor.label || actor.type || "System")}</span><span className="aud-actor-nm">{actor.label || actor.type || "System"}</span></span>
            <span><span className={`pill ${severityClass[presentation.severity] || "neutral"}`} style={{ textTransform: "capitalize" }}>{presentation.severity || "low"}</span></span><span className="aud-info"><Icon name="chevron-right" size={16} /></span>
          </button>;
        })}
        {!loading && !error && events.length === 0 && <div className="empty" style={{ padding: 32 }}><div className="icon"><Icon name="history" size={24} /></div><h3>No audit events found</h3><p>This workspace has no persisted events matching the selected filters.</p></div>}
      </div>
      <div className="row" style={{ marginTop: 16, justifyContent: "space-between" }}><span className="muted" style={{ fontSize: 13 }}>Showing {events.length} of {count} events</span><span className="row" style={{ gap: 8 }}><button className="btn secondary sm" onClick={() => setPage(Math.max(1, page - 1))} disabled={page <= 1 || loading}>Previous</button><span className="muted">Page {page} of {pages}</span><button className="btn secondary sm" onClick={() => setPage(Math.min(pages, page + 1))} disabled={page >= pages || loading}>Next</button></span></div>

      {(detail || detailLoading) && <div className="aud-drawer-scrim" onMouseDown={(event) => { if (event.target === event.currentTarget) setDetail(null); }}><div className="aud-drawer" role="dialog" aria-label="Audit event detail"><div className="aud-drawer-head"><div className="aud-drawer-head-l"><span className="aud-drawer-ic"><Icon name="history" size={18} /></span><div><span className="aud-drawer-eyebrow">Immutable audit event</span><strong>{detailLoading ? "Loading…" : (detail.presentation && detail.presentation.label) || detail.action}</strong></div></div><button className="aud-drawer-x" onClick={() => setDetail(null)}><Icon name="x" size={18} /></button></div>{detail && <div className="aud-drawer-body"><div className="aud-drawer-tgt">{detail.entity_label || detail.event_summary}</div><div className="aud-drawer-grid"><div><span className="aud-dk">Actor</span><b>{detail.actor_label}</b></div><div><span className="aud-dk">Timestamp</span><b>{timestamp(detail.created_at)}</b></div><div><span className="aud-dk">IP address</span><b>{detail.ip || "—"}</b></div><div><span className="aud-dk">Request ID</span><b>{detail.request_id || "—"}</b></div></div><div className="aud-drawer-actions-h">Redacted change detail</div><pre className="aud-detail-json">{JSON.stringify({ before: detail.before, after: detail.after }, null, 2)}</pre></div>}<div className="aud-drawer-foot"><button className="btn secondary" onClick={downloadDetail} disabled={!detail}><Icon name="download" size={15} /> Download detail</button><button className="btn primary" onClick={() => setDetail(null)}>Close</button></div></div></div>}
    </div>
  );
}
function initialsOf(name) { return String(name || "System").split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase(); }