// OPT-GATE-13 · Gate exit — log
const ExitLogScreen = ({ t, go }) => {
  const { Btn, Toast, Pill } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.exitLog; // default | printerOffline | longDwell
  const longDwell = state === "longDwell";
  const [toast, setToast] = useState("");
  const ping = (msg) => { setToast(msg); setTimeout(() => setToast(""), 1800); };

  const rows = [
    ["GPN", <span className="op-gpn">GPN-20260516-0042</span>],
    ["Truck plate", "KCB 412G"],
    ["Driver", "Samuel Otieno"],
    ["Direction", "Inbound"],
    ["Entered at", "08:18 · 16 May 2026"],
    ["Exited at", longDwell ? "16:18 · 16 May 2026" : "10:48 · 16 May 2026"],
    ["Total dwell", longDwell ? "8h 00m" : "2h 30m"],
    ["Net received", FD.KG(4200)],
  ];

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-pad-lg" style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <div className="op-success-ring"><Ic.CheckCircle size={42}/></div>
        <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em" }}>Exit authorized</div>
        <div className="op-muted" style={{ fontSize: 14.5, marginTop: 6 }}>The truck is cleared to leave. GPN status → Completed.</div>

        <div className="op-card flush" style={{ width: 520, marginTop: 22 }}>
          {longDwell && <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 8 }}><Pill tone="pending" dot>Long dwell</Pill><span className="op-muted" style={{ fontSize: 12.5 }}>Captured for analytics — no action required.</span></div>}
          {rows.map(([k, v], i) => (
            <div key={i} className="op-srow"><span className="k">{k}</span><span className="v">{v}</span></div>
          ))}
        </div>
        <textarea className="op-textarea" placeholder="Final notes (optional) — unusual exit conditions" style={{ width: 520, marginTop: 14 }}/>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.Printer} disabled={state === "printerOffline"} onClick={() => ping("Exit slip sent to printer")}>Print exit slip</Btn>
        <Btn variant="outline" icon={Ic.Share} onClick={() => ping("Shared to driver")}>Share to driver</Btn>
        {state === "printerOffline" && <span className="op-hint" style={{ margin: 0 }}><Ic.Info size={12} style={{ verticalAlign: "-2px" }}/> Printer offline</span>}
        <div className="op-ab-grow"/>
        <Btn variant="primary" icon={Ic.Check} onClick={() => go("dashboard")}>Done</Btn>
      </div>
      <Toast show={!!toast}>{toast}</Toast>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  exitLog: { chrome: "flow", title: "Exit logged", sub: "GPN-20260516-0042", back: "exitVerify", render: (ctx) => <ExitLogScreen {...ctx}/> },
});