// Woodbury Operator — Audit Log / activity trail. Registers window.AuditLogScreen.
(function () {
  const NS = window.WoodburyPropertiesDesignSystem_7290ca;
  const { Card, CardHeader, Button, Badge, Avatar, Input, SegmentedControl } = NS;

  const CATS = ["All", "Access", "Screening", "Maintenance", "Security", "Documents", "Comms"];
  const catTone = { Access: "brand", Screening: "success", Maintenance: "accent", Security: "danger", Documents: "neutral", Comms: "warning" };

  function AuditLogScreen() {
    const [cat, setCat] = React.useState("All");
    const [q, setQ] = React.useState("");
    const rows = window.WB_AUDIT.filter((r) => (cat === "All" || r.cat === cat) && (!q || (r.who + r.action + r.target).toLowerCase().includes(q.toLowerCase())));
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 24, padding: "36px 40px", maxWidth: 1200 }}>
        <window.WBPageHeader eyebrow="Compliance" title="Audit Log"
          sub="A complete trail of actions taken across the portfolio."
          actions={<Button variant="secondary" icon="download" onClick={() => window.WBToast("Audit log exported")}>Export</Button>} />
        <div style={{ display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap" }}>
          <Input icon="search" placeholder="Search actions, people, targets..." value={q} onChange={(e) => setQ(e.target.value)} containerStyle={{ flex: 1, minWidth: 240 }} />
          <SegmentedControl options={CATS} value={cat} onChange={setCat} />
        </div>
        <Card>
          <CardHeader title="Activity" action={<Badge tone="neutral">{rows.length} events</Badge>} />
          {rows.map((r, i) => (
            <div key={i} style={{ display: "flex", gap: 14, alignItems: "center", padding: "16px 24px", borderTop: i ? "1px solid var(--border)" : "none" }}>
              <Avatar src={r.avatar} name={r.who} size={38} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, color: "var(--text-heading)" }}><strong>{r.who}</strong> <span style={{ color: "var(--text-body)" }}>{r.action}</span> <strong>{r.target}</strong></div>
                <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 2 }}>{r.time}</div>
              </div>
              <Badge tone={catTone[r.cat] || "neutral"}>{r.cat}</Badge>
            </div>
          ))}
          {rows.length === 0 && <div style={{ padding: 32, textAlign: "center", color: "var(--text-muted)", fontSize: 14 }}>No events match your filters.</div>}
        </Card>
      </div>
    );
  }
  window.AuditLogScreen = AuditLogScreen;
})();