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

  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: 27, fontWeight: 700, letterSpacing: "-0.02em" }}>QC passed</div>
        <div className="op-muted" style={{ fontSize: 14.5, marginTop: 6 }}>{E.who} · {E.gpn} · Dry matter test passed</div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, width: 720, marginTop: 22 }}>
          {/* Summary card */}
          <div className="op-card flush">
            <div className="op-card-head" style={{ paddingBottom: 8 }}><div className="op-card-title" style={{ fontSize: 14 }}>QC summary</div></div>
            <SRow k="Variety" v={E.variety}/>
            <SRow k="Net quantity" v={QD.KG(E.net)}/>
            <SRow k="Mean DM" v="22.97%"/>
            <SRow k="Mean FFA" v="0.483%"/>
            <SRow k="Decided" v="09:14 · 16 May 2026"/>
            <SRow k="Inspector" v={QD.INSPECTOR.name}/>
            {state === "breach" && <div style={{ padding: "11px 16px", borderTop: "1px solid var(--border)", background: "var(--status-pending-soft)", display: "flex", alignItems: "center", gap: 8 }}><Ic.Warning size={15} style={{ color: "var(--warning)" }}/><span style={{ fontSize: 12.5, fontWeight: 500 }}>Approved despite DM breach — supervisor {QD.SUPERVISOR.name}.</span></div>}
          </div>

          {/* Next steps card */}
          <div className="op-card op-card-pad" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="op-card-title" style={{ fontSize: 14 }}>Next steps</div>
            <div style={{ display: "flex", gap: 11, padding: 14, borderRadius: "var(--radius-lg)", background: "var(--avocado-soft)" }}>
              <Ic.Scale size={18} style={{ color: "var(--avocado-fg)", flexShrink: 0, marginTop: 1 }}/>
              <div style={{ fontSize: 13, lineHeight: 1.5 }}>Proceed to the <b>Weighbridge</b> for gross &amp; tare weight, then on to the warehouse.</div>
            </div>
            <div style={{ display: "flex", gap: 11, padding: 14, borderRadius: "var(--radius-lg)", background: "var(--surface)", border: "1px solid var(--border)" }}>
              <Ic.Truck size={18} style={{ color: "var(--avocado-fg)", flexShrink: 0, marginTop: 1 }}/>
              <div style={{ fontSize: 13, lineHeight: 1.5 }}>Then: <b>Warehouse — Receiving bay C</b>.</div>
            </div>
            {offline ? (
              <div style={{ display: "flex", gap: 11, padding: 14, borderRadius: "var(--radius-lg)", background: "var(--status-pending-soft)" }}>
                <Ic.WifiOff size={18} style={{ color: "var(--warning)", flexShrink: 0, marginTop: 1 }}/>
                <div style={{ fontSize: 13, lineHeight: 1.5 }}>GRN will be created when the network is restored. Truck status: <b>QC passed · GRN pending sync</b>.</div>
              </div>
            ) : (
              <div style={{ display: "flex", gap: 11, padding: 14, borderRadius: "var(--radius-lg)", background: "var(--success-soft)" }}>
                <Ic.CheckCircle size={18} style={{ color: "var(--success)", flexShrink: 0, marginTop: 1 }}/>
                <div style={{ fontSize: 13, lineHeight: 1.5 }}><b>GRN-20260516-0042</b> created automatically for warehouse receiving. <button className="op-sec-link" style={{ fontSize: 13 }} onClick={() => ping("Opening GRN…")}>View GRN →</button></div>
              </div>
            )}
            <div className="op-muted" style={{ fontSize: 11.5, lineHeight: 1.5, marginTop: "auto" }}>The QC certificate PDF is generated server-side and stored on the event for later retrieval.</div>
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.Printer} onClick={() => ping("QC certificate sent to printer")}>Print QC certificate</Btn>
        <Btn variant="outline" icon={Ic.FileText} disabled={offline} onClick={() => ping("Opening GRN…")}>View GRN</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 || {}, {
  pass: { chrome: "flow", title: "QC passed", sub: "GPN-…0041", back: "decision", render: (ctx) => <QcPass {...ctx}/> },
});