// OPT-QC-17 · Warehouse batch created — confirmation
const QcBatch = ({ t, go }) => {
  const { Btn, Pill, SRow, Toast } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const E = QD.EVENT, b = E.batch, g = E.grn;
  const [toast, setToast] = useState("");
  const ping = (m) => { setToast(m); setTimeout(() => setToast(""), 1700); };

  const dmStat = QD.stats(E.samples.map(s => s.dm));
  const oilStat = QD.stats(E.oils);
  const net = b.grossWt - b.tareWt;

  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.Box size={40}/></div>
        <div style={{ fontSize: 27, fontWeight: 700, letterSpacing: "-0.02em" }}>Batch created</div>
        <div className="op-muted" style={{ fontSize: 14.5, marginTop: 6 }}>{E.who} · {E.variety} · stored to {b.bay}</div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, width: 760, marginTop: 22 }}>
          {/* Batch summary */}
          <div className="op-card flush">
            <div className="op-card-head" style={{ paddingBottom: 8 }}><div className="op-card-title" style={{ fontSize: 14 }}>Batch summary</div></div>
            <div className="op-srow"><span className="k">Batch code</span><span className="v" style={{ fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{b.code}</span></div>
            <SRow k="Lot" v={b.lot}/>
            <SRow k="Variety" v={E.variety}/>
            <SRow k="Net quantity" v={QD.KG(net)}/>
            <SRow k="Avg DM" v={`${dmStat.mean.toFixed(2)}%`}/>
            <SRow k="Avg oil content" v={`${oilStat.mean.toFixed(2)}%`}/>
            <SRow k="Storage location" v={b.bay}/>
          </div>

          {/* Label + traceability */}
          <div className="op-card op-card-pad" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="op-card-title" style={{ fontSize: 14 }}>Batch label</div>
            <div style={{ display: "flex", gap: 14, alignItems: "center", padding: 14, borderRadius: "var(--radius-lg)", border: "1px solid var(--border)", background: "var(--surface)" }}>
              <span style={{ width: 76, height: 76, borderRadius: 10, flexShrink: 0, display: "grid", placeItems: "center", background: "var(--card)", border: "1px solid var(--border)" }}><Ic.QR size={52}/></span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{b.code}</div>
                <div className="op-muted" style={{ fontSize: 12, marginTop: 2 }}>Scan at any warehouse station to trace this batch back to QC, GRN and the source GPN.</div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
              <div style={{ display: "flex", gap: 11, padding: 12, borderRadius: "var(--radius-lg)", background: "var(--success-soft)" }}>
                <Ic.CheckCircle size={17} style={{ color: "var(--success)", flexShrink: 0, marginTop: 1 }}/>
                <div style={{ fontSize: 12.5, lineHeight: 1.5 }}>Linked to <b>{g.no}</b> and <b>{E.gpn}</b>.</div>
              </div>
              <div style={{ display: "flex", gap: 11, padding: 12, borderRadius: "var(--radius-lg)", background: "var(--avocado-soft)" }}>
                <Ic.Drop size={17} style={{ color: "var(--avocado-fg)", flexShrink: 0, marginTop: 1 }}/>
                <div style={{ fontSize: 12.5, lineHeight: 1.5 }}>FFA is tested per batch during <b>production</b>.</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.Printer} onClick={() => ping("Batch label sent to printer")}>Print label</Btn>
        <Btn variant="outline" icon={Ic.FileText} onClick={() => go("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 || {}, {
  batch: { chrome: "flow", title: "Batch created", sub: "Warehouse receiving", back: "grn", render: (ctx) => <QcBatch {...ctx}/> },
});