// OPT-GATE-04 · Scan result — mismatch alert
const ScanMismatchScreen = ({ t, go }) => {
  const { Btn, Strip, Modal } = window.Op;
  const Ic = window.Icons;
  const state = t.scanMismatch; // generic | window | facility | closed
  const [reject, setReject] = useState(false);
  const [expand, setExpand] = useState(false);

  const cause = {
    generic:  { title: "This QR doesn't match any open delivery", desc: "No procurement or dispatch order is linked to this code in today's window or the 48-hour cache." },
    window:   { title: "This delivery was scheduled for 12 May 2026", desc: "The slot is too far in the past. Contact procurement to reschedule before admitting the truck." },
    facility: { title: "This pass is for Thika Plant", desc: "The GPN was generated at a different facility. Redirect the driver to the correct site." },
    closed:   { title: "This delivery is marked completed", desc: "The order already closed at 14:20 on 15 May. Re-entry on this pass is not permitted." },
  }[state];

  const payload = "MVG://slot/9f3a-7c21-44e8-bd09 · v2 · iss 2026-05-12T06:40Z";

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <Strip tone="danger" icon={Ic.Warning} title="No match found" sub="This pass was not accepted — choose how to proceed"/>
      <div className="op-pad" style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <div className="op-card op-card-pad" style={{ maxWidth: 560, width: "100%", textAlign: "center", padding: 28 }}>
          <span className="op-empty-art" style={{ background: "var(--status-rejected-soft)", color: "var(--status-rejected-fg)", width: 76, height: 76, borderRadius: 22 }}><Ic.XCircle size={36}/></span>
          <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em", marginTop: 16 }}>{cause.title}</div>
          <div className="op-muted" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 8 }}>{cause.desc}</div>

          <button onClick={() => setExpand(!expand)} style={{ marginTop: 18, background: "var(--muted)", border: "none", borderRadius: "var(--radius-md)", padding: "10px 14px", width: "100%", textAlign: "left", cursor: "pointer", display: "flex", alignItems: "center", gap: 8 }}>
            <Ic.QR size={15} style={{ color: "var(--muted-foreground)" }}/>
            <span style={{ fontSize: 12, fontWeight: 600, color: "var(--muted-foreground)" }}>Decoded payload (audit)</span>
            <Ic.ChevronDown size={15} style={{ marginLeft: "auto", color: "var(--muted-foreground)", transform: expand ? "rotate(180deg)" : "none", transition: "transform .15s" }}/>
          </button>
          {expand && <div className="op-mono" style={{ fontSize: 11.5, color: "var(--muted-foreground)", textAlign: "left", marginTop: 8, padding: "0 4px", wordBreak: "break-all", lineHeight: 1.5 }}>{payload}</div>}

          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 22 }}>
            <Btn variant="primary" size="lg" block icon={Ic.Refresh} onClick={() => go("scan")}>Try again</Btn>
            <Btn variant="outline" size="lg" block icon={Ic.Edit} onClick={() => go("manualEntry")}>Enter manually</Btn>
            <Btn variant="destructive" block icon={Ic.X} onClick={() => setReject(true)}>Reject this truck</Btn>
          </div>
        </div>
        <div className="op-muted" style={{ fontSize: 12, marginTop: 16, maxWidth: 460, textAlign: "center" }}>All mismatches are logged. Three in 5 minutes raises a soft alert to the gate supervisor.</div>
      </div>

      <Modal open={reject} onClose={() => setReject(false)} title="Reject this truck?" desc="Select a reason — required. The incident is logged and the truck is turned away."
        actions={<><Btn variant="ghost" block onClick={() => setReject(false)}>Cancel</Btn><Btn variant="destructive" block onClick={() => { setReject(false); go("dashboard"); }}>Confirm reject</Btn></>}>
        <div className="op-field"><div className="op-label">Reason <span className="req">*</span></div>
          <div className="op-select-wrap"><select className="op-select"><option>Wrong document</option><option>Out of slot</option><option>No order linked</option><option>Driver / vehicle suspect</option><option>Other</option></select><span className="op-select-chev"><Ic.ChevronDown size={18}/></span></div>
        </div>
      </Modal>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  scanMismatch: { chrome: "flow", title: "Scan result", sub: "No match", back: "scan", render: (ctx) => <ScanMismatchScreen {...ctx}/> },
});