// OPT-QC-16 · Goods Received Note (GRN) — created after an accepted load clears the weighbridge
const QcGrn = ({ t, go }) => {
  const { Btn, Pill, SRow, Toast } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const E = QD.EVENT, g = E.grn, b = E.batch;
  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" }}>
      {/* GRN header strip */}
      <div style={{ display: "flex", alignItems: "center", gap: 16, padding: "13px 24px", borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <span className="op-row-thumb" style={{ width: 44, height: 44, background: "var(--avocado-soft)", color: "var(--avocado-fg)" }}><Ic.FileText size={21}/></span>
        <div>
          <div style={{ fontSize: 17, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{g.no}</div>
          <div className="op-muted" style={{ fontSize: 12.5 }}>Goods Received Note · {QD.TODAY}</div>
        </div>
        <div className="op-ab-spacer" style={{ flex: 1 }}/>
        <Pill tone="pending">Draft</Pill>
        <div style={{ textAlign: "right" }}>
          <div className="op-muted" style={{ fontSize: 11.5 }}>Weight slip</div>
          <div style={{ fontSize: 14, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{g.rst}</div>
        </div>
      </div>

      <div className="op-pad" style={{ flex: 1 }}>
        {/* Delivery + supplier */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 16 }}>
          <div className="op-card flush">
            <div className="op-card-head" style={{ paddingBottom: 8 }}><div className="op-card-title" style={{ fontSize: 13.5 }}>Delivery information</div></div>
            <SRow k="Delivery note" v={g.deliveryNote}/>
            <SRow k="Delivery date" v={QD.TODAY}/>
            <SRow k="Carrier / driver" v={`${E.plate} · ${E.driver}`}/>
            <SRow k="Linked GPN" v={E.gpn}/>
          </div>
          <div className="op-card flush">
            <div className="op-card-head" style={{ paddingBottom: 8 }}><div className="op-card-title" style={{ fontSize: 13.5 }}>Supplier information</div></div>
            <div className="op-srow"><span className="k">Supplier</span><span className="v" style={{ display: "flex", alignItems: "center", gap: 8 }}>{E.who} <Pill tone={E.tier === "A" ? "approved" : "closed"}>Tier {E.tier}</Pill></span></div>
            <SRow k="Source order" v={E.po}/>
            <SRow k="Origin" v={E.location}/>
            <SRow k="Variety" v={E.variety}/>
          </div>
        </div>

        {/* Received items */}
        <div className="op-sec" style={{ margin: 0 }}><span className="op-sec-title">Received items</span></div>
        <div className="op-card flush" style={{ marginTop: 10, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 100px 110px 1fr 130px", gap: 12, padding: "11px 18px", background: "var(--surface)", borderBottom: "1px solid var(--border)" }}>
            {["ITEM / TYPE", "DM %", "OIL %", "QTY RECEIVED", "TOTAL"].map(h => <span key={h} className="op-muted" style={{ fontSize: 11, fontWeight: 700, letterSpacing: ".04em" }}>{h}</span>)}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 100px 110px 1fr 130px", gap: 12, padding: "15px 18px", alignItems: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span className="op-row-thumb" style={{ width: 36, height: 36 }}><Ic.Leaf size={17}/></span>
              <div><div style={{ fontSize: 14, fontWeight: 600 }}>Avocado</div><div className="op-muted" style={{ fontSize: 12 }}>{E.variety}</div></div>
            </div>
            <span style={{ fontSize: 15, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{dmStat.mean.toFixed(1)}</span>
            <span style={{ fontSize: 15, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{oilStat.mean.toFixed(1)}</span>
            <span style={{ fontSize: 15, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{QD.KG(net)}</span>
            <span style={{ fontSize: 15, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{QD.KG(net)}</span>
          </div>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 32, padding: "13px 18px", borderTop: "1px solid var(--border)", background: "var(--surface)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}><span className="op-muted" style={{ fontSize: 12.5, fontWeight: 600 }}>TOTAL QTY</span><span style={{ fontSize: 18, fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>{QD.KG(net)}</span></div>
          </div>
        </div>

        {/* Received condition + signatures */}
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 16, marginTop: 16 }}>
          <div>
            <div className="op-sec" style={{ margin: 0 }}><span className="op-sec-title">Received condition</span></div>
            <div className="op-card op-card-pad" style={{ marginTop: 10 }}>
              <div style={{ fontSize: 13.5, lineHeight: 1.55 }}>{g.condition}</div>
              <div className="op-divider"/>
              <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12.5 }}>
                <Ic.Scale size={15} style={{ color: "var(--muted-foreground)" }}/>
                <span className="op-muted">Gross {QD.KG(b.grossWt)} · Tare {QD.KG(b.tareWt)} · Net <b style={{ color: "var(--foreground)" }}>{QD.KG(net)}</b></span>
              </div>
            </div>
          </div>
          <div>
            <div className="op-sec" style={{ margin: 0 }}><span className="op-sec-title">Sign-off</span></div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10, marginTop: 10 }}>
              {[["Prepared", g.preparedBy], ["Checked", g.checkedBy], ["Approved", g.approvedBy]].map(([role, name]) => (
                <div key={role} className="op-card op-card-pad" style={{ padding: 13, textAlign: "center" }}>
                  <div className="op-muted" style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: ".04em", textTransform: "uppercase" }}>{role}</div>
                  <span className="avatar avatar-avocado" style={{ margin: "9px auto 7px" }}>{name.split(" ").map(w => w[0]).join("")}</span>
                  <div style={{ fontSize: 12.5, fontWeight: 600 }}>{name}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.Printer} onClick={() => ping("GRN sent to printer")}>Print GRN</Btn>
        <div className="op-ab-grow"/>
        <Btn variant="ghost" onClick={() => go("queue")}>Save &amp; close</Btn>
        <Btn variant="primary" icon={Ic.Box} iconRight={Ic.ArrowRight} onClick={() => go("batch")}>Create warehouse batch</Btn>
      </div>
      <Toast show={!!toast}>{toast}</Toast>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  grn: { chrome: "flow", title: "Goods Received Note", sub: "GPN-…0041 · post-weighbridge", back: "pass", render: (ctx) => <QcGrn {...ctx}/> },
});