// OPT-QC-10 · Incoming QC result submitted — awaiting procurement decision
// (Addendum B: QC no longer auto-creates the GRN. QC submits; procurement decides.)
const QcPass = ({ t, go }) => {
  const { Btn, Toast, SRow } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const E = QD.EVENT;
  const [toast, setToast] = useState("");
  const ping = (msg) => { setToast(msg); setTimeout(() => setToast(""), 1800); };

  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 style={{ width: 84, height: 84, borderRadius: "50%", background: "var(--info-soft)", color: "var(--info-fg)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
          <Ic.ClipboardList size={40}/>
        </div>
        <div style={{ fontSize: 27, fontWeight: 700, letterSpacing: "-0.02em" }}>Result submitted to procurement</div>
        <div className="op-muted" style={{ fontSize: 14.5, marginTop: 6, textAlign: "center", maxWidth: 460 }}>{E.who} · {E.gpn} · procurement now makes the buying decision. The truck holds until they decide.</div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16, width: 560, marginTop: 22 }}>
          <div className="op-card flush">
            <div className="op-card-head" style={{ paddingBottom: 8 }}><div className="op-card-title" style={{ fontSize: 14 }}>Submitted QC result</div></div>
            <SRow k="Variety" v={E.variety}/>
            <SRow k="Net quantity" v={QD.KG(E.net)}/>
            <SRow k="Mean DM" v="25.80%"/>
            <SRow k="Mean FFA" v="0.483%"/>
            <SRow k="Submitted" v="09:14 · 16 May 2026"/>
            <SRow k="Inspector" v={QD.INSPECTOR.name}/>
          </div>

          <div className="op-card op-card-pad" style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
            <span className="op-row-thumb" style={{ width: 36, height: 36, background: "var(--warning-soft)", color: "var(--warning-fg)" }}><Ic.Clock size={17}/></span>
            <div style={{ fontSize: 13, lineHeight: 1.55 }}>
              <b>Awaiting procurement decision.</b> If accepted, the truck proceeds to the weighbridge and a GRN is created from the weighed quantity. If rejected, it routes to gate exit. You'll be notified either way.
            </div>
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.ClipboardList} onClick={() => ping("QC result sheet sent to printer")}>Print result sheet</Btn>
        <div className="op-ab-grow"/>
        <Btn variant="primary" icon={Ic.Check} onClick={() => go("queue")}>Back to queue</Btn>
      </div>
      <Toast show={!!toast}>{toast}</Toast>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  pass: { chrome: "flow", title: "QC result submitted", sub: "GPN-…0041 · awaiting decision", back: "decision", render: (ctx) => <QcPass {...ctx}/> },
});