// CORE-12 · Audit log viewer  (route: auditLog)  — Admin Web
// Admin view of system events with filters.
const AuditLogPage = ({ tweaks }) => {
  const Ic = window.Icons;
  const toast = useToast();
  const MD = window.MD;
  const state = (tweaks && tweaks.auditState) || "default";
  const loading = state === "loading";

  const CATS = ["all", "auth", "procurement", "qc", "users", "orders", "logistics", "maintenance", "system"];
  const [cat, setCat] = useState(state === "filtered" ? "auth" : "all");
  const [search, setSearch] = useState("");
  const [sort, setSort] = useState({ key: "ts", dir: "desc" });
  useEffect(() => { setCat(state === "filtered" ? "auth" : "all"); }, [state]);

  const rows = useMemo(() => {
    return MD.AUDIT.filter(e => {
      if (cat !== "all" && e.cat !== cat) return false;
      if (search && !`${e.actor} ${e.action} ${e.target} ${e.detail}`.toLowerCase().includes(search.toLowerCase())) return false;
      return true;
    });
  }, [cat, search]);

  const catLabel = (c) => c === "all" ? "All events" : c.charAt(0).toUpperCase() + c.slice(1);

  return (
    <div className="page" style={{ maxWidth: 1380 }}>
      <div className="page-head">
        <div><h1 className="page-title">Audit log</h1><div className="page-sub">Immutable record of system events · append-only</div></div>
        <div className="page-actions">
          <button className="btn btn-outline"><Ic.Calendar size={15}/> Last 7 days <Ic.ChevronDown size={14} style={{ opacity: 0.6 }}/></button>
          <Button variant="outline" icon={Ic.Download} onClick={()=> toast({ title: "Export started", desc: `${rows.length} events → CSV` })}>Export</Button>
        </div>
      </div>

      <div className="proc-toolbar">
        <div className="proc-search"><Ic.Search size={15}/><input className="input" placeholder="Search actor, action, target or detail" value={search} onChange={(e)=> setSearch(e.target.value)}/></div>
        <div className="proc-chips">
          {CATS.slice(0, 6).map(c => <button key={c} className={`proc-chip${cat === c ? " on" : ""}`} onClick={()=> setCat(c)}>{catLabel(c)}</button>)}
        </div>
      </div>

      <Card>
        <div className="card-body flush">
          <div className="tbl-wrap">
            <table className="tbl">
              <thead><tr><SortableTh label="Timestamp" col="ts" sort={sort} setSort={setSort}/><SortableTh label="Actor" col="actor" sort={sort} setSort={setSort}/><SortableTh label="Action" col="action" sort={sort} setSort={setSort}/><SortableTh label="Target" col="target" sort={sort} setSort={setSort}/><th>Detail</th><th>IP</th></tr></thead>
              {loading ? (
                <tbody>{Array.from({ length: 8 }).map((_, i) => (
                  <tr key={i}><td><div className="core-sk" style={{ width: 110 }}/></td><td><div className="core-sk" style={{ width: 120 }}/></td><td><div className="core-sk" style={{ width: 90 }}/></td><td><div className="core-sk" style={{ width: 100 }}/></td><td><div className="core-sk" style={{ width: 180 }}/></td><td><div className="core-sk" style={{ width: 80 }}/></td></tr>
                ))}</tbody>
              ) : (
                <tbody>
                  {rows.length === 0 ? (
                    <tr><td colSpan={6}><div className="proc-inline-empty" style={{ justifyContent: "center" }}><Ic.Search size={20}/><div><div style={{ fontWeight: 600, fontSize: 13.5, color: "var(--foreground)" }}>No events match these filters</div><div className="muted" style={{ fontSize: 12.5 }}>Try a broader category or clear the search.</div></div><Button size="sm" variant="outline" onClick={()=> { setSearch(""); setCat("all"); }} style={{ marginLeft: 8 }}>Clear</Button></div></td></tr>
                  ) : sortRows(rows, sort, ["ts"]).map(e => (
                    <tr key={e.id}>
                      <td style={{ whiteSpace: "nowrap" }}><div className="mono" style={{ fontSize: 12 }}>{window.AMDATE(e.ts)}</div><div className="muted mono" style={{ fontSize: 11 }}>{window.AMTIME(e.ts)}</div></td>
                      <td>
                        <div className="core-user-cell">
                          {e.actor === "System" || e.actor === "Unknown"
                            ? <span className="core-session-ic" style={{ width: 30, height: 30 }}>{e.actor === "System" ? <Ic.Settings size={14}/> : <Ic.HelpCircle size={14}/>}</span>
                            : <Avatar initials={e.actor.split(" ").map(w => w[0]).join("").slice(0, 2)} size="sm"/>}
                          <div><div style={{ fontSize: 13, fontWeight: 600 }}>{e.actor}</div><div className="muted" style={{ fontSize: 11 }}>{e.role}</div></div>
                        </div>
                      </td>
                      <td><span className={`audit-act audit-cat-${e.cat}`}>{e.action}</span></td>
                      <td className="mono" style={{ fontSize: 12 }}>{e.target}</td>
                      <td className="audit-detail" style={{ maxWidth: 320, whiteSpace: "normal" }}>{e.detail}</td>
                      <td className="audit-ip">{e.ip}</td>
                    </tr>
                  ))}
                </tbody>
              )}
            </table>
          </div>
        </div>
      </Card>
      {!loading && rows.length > 0 && <div className="muted" style={{ fontSize: 12.5, marginTop: 14, display: "flex", alignItems: "center", gap: 7 }}><Ic.Lock size={13}/> Audit entries are immutable and retained for 7 years for compliance.</div>}
    </div>
  );
};

window.Pages = Object.assign(window.Pages || {}, { auditLog: AuditLogPage });