// OPT-QC-11 · QC reject — confirmation
const QcReject = ({ t, go }) => {
  const { Btn, Toast, SRow } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const state = t.reject; // default | offline
  const E = QD.EVENT;
  const offline = state === "offline";
  const [toast, setToast] = useState("");
  const ping = (msg) => { setToast(msg); setTimeout(() => setToast(""), 1800); };

  const notified = [
    { who: "Procurement", icon: Ic.ClipboardList, note: "Always notified" },
    { who: "Gatekeeper", icon: Ic.Truck, note: "Always notified — return via gate exit" },
    { who: "Farmer (opt-in)", icon: Ic.Phone, note: "SMS / app · respectful tone" },
  ];

  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" }}>
        {/* Calm, not alarming — neutral surface, clipboard-X icon */}
        <div style={{ width: 84, height: 84, borderRadius: "50%", background: "var(--muted)", color: "var(--muted-foreground)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
          <Ic.ClipboardList size={40}/>
        </div>
        <div style={{ fontSize: 27, fontWeight: 700, letterSpacing: "-0.02em" }}>QC rejected</div>
        <div className="op-muted" style={{ fontSize: 14.5, marginTop: 6 }}>{E.who} · {E.gpn} · Dry matter test failed</div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, width: 720, marginTop: 22 }}>
          <div className="op-card flush">
            <div className="op-card-head" style={{ paddingBottom: 8 }}><div className="op-card-title" style={{ fontSize: 14 }}>Decision summary</div></div>
            <SRow k="Variety" v={E.variety}/>
            <SRow k="Net quantity" v={QD.KG(E.net)}/>
            <SRow k="Decided" v="08:31 · 16 May 2026"/>
            <SRow k="Inspector" v={QD.INSPECTOR.name}/>
            <div style={{ padding: "12px 16px", borderTop: "1px solid var(--border)" }}>
              <div className="op-muted" style={{ fontSize: 11.5, fontWeight: 600, marginBottom: 4 }}>REASON</div>
              <div style={{ fontSize: 13, lineHeight: 1.5 }}>All DM samples below the 21% minimum — immature fruit, oil content too low for intake.</div>
            </div>
          </div>

          <div className="op-card op-card-pad" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <div className="op-card-title" style={{ fontSize: 14 }}>What happens next</div>
            <div style={{ display: "flex", gap: 11, padding: 14, borderRadius: "var(--radius-lg)", background: "var(--soil-soft)" }}>
              <Ic.Truck size={18} style={{ color: "var(--soil-fg)", flexShrink: 0, marginTop: 1 }}/>
              <div style={{ fontSize: 13, lineHeight: 1.5 }}>Dry matter test failed — the truck <b>does not continue</b> to the weighbridge or warehouse. Direct to <b>Gate exit (OPT-GATE-12)</b>; it must leave the facility. A new GPN is required for any re-entry attempt.</div>
            </div>
            <div>
              <div className="op-muted" style={{ fontSize: 11.5, fontWeight: 600, marginBottom: 8 }}>{offline ? "QUEUED — WILL SEND ON RECONNECT" : "AUTO-NOTIFIED"}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {notified.map(n => (
                  <div key={n.who} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <span className="op-row-thumb" style={{ width: 32, height: 32 }}><n.icon size={15}/></span>
                    <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600 }}>{n.who}</div><div className="op-muted" style={{ fontSize: 11.5 }}>{n.note}</div></div>
                    {offline ? <Ic.Clock size={15} style={{ color: "var(--warning)" }}/> : <Ic.CheckCircle size={15} style={{ color: "var(--success)" }}/>}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.Printer} onClick={() => ping("Reject report sent to printer")}>Print reject report</Btn>
        <Btn variant="outline" icon={Ic.Truck} onClick={() => ping("Opening gate exit…")}>Open gate exit</Btn>
        <div className="op-ab-grow"/>
        <Btn variant="primary" icon={Ic.Check} onClick={() => go("queue")}>Done</Btn>
      </div>
      <Toast show={!!toast}>{toast}</Toast>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  reject: { chrome: "flow", title: "QC rejected", sub: "GPN-…0041", back: "decision", render: (ctx) => <QcReject {...ctx}/> },
});