const AuditScreen = () => {
  const [selected, setSelected] = useStateS(AUDIT_EVENTS[0]);
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Audit log</h1>
          <p className="page-sub">Every action, every source, every environment. Immutable. Streamable to your SIEM.</p>
        </div>
        <div className="page-actions">
          <Btn variant="secondary" icon={<IDownload size={13}/>}>Export range</Btn>
          <Btn variant="secondary" icon={<IExternal size={13}/>}>Stream to SIEM</Btn>
        </div>
      </div>

      <div className="row" style={{ marginBottom: 16, gap: 8, flexWrap: "wrap" }}>
        <Segmented value="all" onChange={() => {}} options={[
          { value: "all", label: "All events" },
          { value: "high", label: "High severity" },
          { value: "system", label: "System" },
          { value: "human", label: "Human" },
        ]}/>
        <div style={{ flex: 1 }}/>
        <div className="search-trigger" style={{ minWidth: 300, height: 32 }}>
          <ISearch size={13}/>
          <span>who:lena action:rotated …</span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 20 }}>
        <Card bodyClass="pad-0">
          <table className="table">
            <thead>
              <tr>
                <th style={{ width: 90 }}>Time</th>
                <th>Actor</th>
                <th>Action</th>
                <th>Sev</th>
              </tr>
            </thead>
            <tbody>
              {AUDIT_EVENTS.map(e => (
                <tr key={e.id} onClick={() => setSelected(e)} style={{ cursor: "pointer", background: selected.id === e.id ? "color-mix(in oklch, var(--accent-soft) 50%, transparent)" : "transparent" }}>
                  <td className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{e.t}</td>
                  <td style={{ fontSize: 12.5 }}>
                    {e.who === "system" ? <span className="mono" style={{ fontSize: 11.5, color: "var(--ink-3)" }}>system</span> : e.who}
                  </td>
                  <td>
                    <div style={{ fontSize: 13 }}>{e.action}</div>
                    <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{e.target}</div>
                  </td>
                  <td>
                    <span className="status" style={{
                      background: e.sev === "high" ? "var(--danger-soft)" : e.sev === "med" ? "var(--warn-soft)" : "var(--bg-sunken)",
                      color: e.sev === "high" ? "oklch(from var(--danger) calc(l - 0.1) c h)" : e.sev === "med" ? "oklch(from var(--warn) calc(l - 0.18) c h)" : "var(--ink-3)",
                    }}>{e.sev}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <Card title="Event detail" sub={selected.id}>
          <div className="stack" style={{ gap: 0 }}>
            <KV k="When"><span className="mono" style={{ fontSize: 12 }}>Apr 17, 2026 · {selected.t} UTC</span></KV>
            <KV k="Actor">{selected.who}</KV>
            <KV k="Action">{selected.action}</KV>
            <KV k="Target"><span className="mono" style={{ fontSize: 12 }}>{selected.target}</span></KV>
            <KV k="Metadata"><span style={{ fontSize: 12.5, color: "var(--ink-2)" }}>{selected.meta}</span></KV>
            <KV k="Source IP"><span className="mono" style={{ fontSize: 12 }}>198.51.100.42</span></KV>
            <KV k="Request ID"><MonoId>req_01JN7Pq4zT</MonoId></KV>
          </div>
          <div className="hr"/>
          <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 6, letterSpacing: "0.04em", textTransform: "uppercase" }}>Payload</div>
          <div className="code" style={{ fontSize: 11.5 }}>
            <pre className="code-body" style={{ margin: 0, maxHeight: 200 }}>
              <Highlight code={`{\n  "event": "${selected.action.toLowerCase().replace(/ /g, "_")}",\n  "target": "${selected.target}",\n  "by": "${selected.who}",\n  "env": "prod",\n  "passkey_verified": true\n}`}/>
            </pre>
          </div>
        </Card>
      </div>
    </>
  );
};

Object.assign(window, { AuditScreen });