// OPT-GATE-16 · Audit / exception report
const ExceptionsScreen = ({ t, go }) => {
  const { Btn, Banner, Kpi, Severity, Pill } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.exceptions; // default | urgent | empty
  const [range, setRange] = useState(false);

  const rows = state === "empty" ? [] : FD.EXCEPTIONS;
  const S = FD.EXC_STATS;
  const statusPill = { open: ["pending", "Open"], review: ["in-progress", "Under review"], resolved: ["approved", "Resolved"], dismissed: ["closed", "Dismissed"] };

  return (
    <div className="op-body">
      <div className="op-pad">
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14, flexWrap: "wrap" }}>
          <div>
            <div style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em" }}>Gate exceptions</div>
            <div className="op-muted" style={{ fontSize: 12.5 }}>Mismatches · overrides · disputes · long dwells</div>
          </div>
          <div className="op-ab-grow"/>
          <button className="op-chip" style={{ height: 44 }} onClick={() => setRange(!range)}><Ic.Calendar size={16}/> Last 7 days <Ic.ChevronDown size={15}/></button>
          <Btn variant="outline" size="sm" icon={Ic.Download}>Export</Btn>
        </div>

        {state === "urgent" && <div style={{ marginBottom: 14 }}><Banner tone="danger" icon={Ic.Warning} title="1 critical exception unresolved" desc="Critical items auto-escalate after 24h. A wrong-facility pass needs a decision."/></div>}

        {/* KPI strip */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, marginBottom: 16 }}>
          <Kpi label="Mismatches" icon={Ic.XCircle} value={S.mismatches}/>
          <Kpi label="Overrides" icon={Ic.HelpCircle} value={S.overrides}/>
          <Kpi label="Disputes" icon={Ic.Flag} value={S.disputes}/>
          <Kpi label="Long dwells" icon={Ic.Clock} value={S.dwells}/>
          <Kpi label="Unresolved" icon={Ic.Warning} value={S.unresolved} warn/>
        </div>

        {/* Filter chips */}
        <div className="op-chips" style={{ marginBottom: 14 }}>
          {["All types", "Mismatch", "Override", "Dispute", "Long dwell", "Manual entry"].map((c, i) => <span key={c} className={`op-chip ${i === 0 ? "on" : ""}`}>{c}</span>)}
        </div>

        {rows.length === 0 ? (
          <div className="op-card"><div className="op-empty" style={{ padding: "56px 24px" }}>
            <div className="op-empty-art" style={{ background: "var(--success-soft)", color: "var(--success)" }}><Ic.CheckCircle size={42}/></div>
            <div className="op-empty-title">No exceptions in range</div>
            <div className="op-empty-desc">Clean run — no mismatches, overrides, or disputes in the selected window.</div>
          </div></div>
        ) : (
          <div className="op-tbl-wrap">
            <table className="op-tbl">
              <thead><tr><th>When</th><th>GPN</th><th>Type</th><th>Description</th><th>Actor</th><th>Severity</th><th>Status</th><th></th></tr></thead>
              <tbody>
                {rows.map(r => (
                  <tr key={r.id} onClick={() => go("movementLog")}>
                    <td className="op-muted num">{r.when}</td>
                    <td><span className="op-gpn">{r.gpn.replace("GPN-2026", "…")}</span></td>
                    <td style={{ fontWeight: 600 }}>{r.type}</td>
                    <td className="op-muted" style={{ whiteSpace: "normal", maxWidth: 280 }}>{r.desc}</td>
                    <td>{r.actor}</td>
                    <td><Severity level={r.sev}/></td>
                    <td><Pill tone={statusPill[r.status][0]}>{statusPill[r.status][1]}</Pill></td>
                    <td className="num"><Ic.ChevronRight size={16} style={{ color: "var(--muted-foreground)" }}/></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
        <div className="op-muted" style={{ fontSize: 11.5, marginTop: 14, lineHeight: 1.5 }}>Resolutions require an action note for audit. High-severity items auto-create incidents in the Maintenance module.</div>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  exceptions: { chrome: "tabs", tab: "Exceptions", render: (ctx) => <ExceptionsScreen {...ctx}/> },
});