// OPT-QC-03 · Sampling — capture
const QcSampling = ({ t, go }) => {
  const { Btn, Stepper, Banner, PhotoTile } = window.Op;
  const Ic = window.Icons, QD = window.QD;
  const state = t.sampling; // ruleMet | empty | partial | over
  const E = QD.EVENT;

  const baseRows = E.samples.map(s => ({ ...s, photo: true }));
  let rows = baseRows;
  if (state === "empty") rows = baseRows.map(s => ({ ...s, pos: "", weight: "", photo: false, blank: true }));
  if (state === "partial") rows = [{ ...baseRows[0] }, { ...baseRows[1], pos: "", weight: "", photo: false, blank: true }, { ...baseRows[2], pos: "", weight: "", photo: false, blank: true }];
  if (state === "over") rows = [...baseRows, { id: "S4", pos: "Extra — bin 11", weight: 255, condition: "Sound", photo: true, extra: true }];

  const filled = rows.filter(r => !r.blank).length;
  const min = 3;
  const ruleMet = filled >= min;
  const extra = Math.max(0, filled - min);

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-pad" style={{ flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "center", margin: "2px 0 16px" }}>
          <Stepper steps={["Start", "Sampling", "Parameters", "Decision"]} current={1}/>
        </div>

        {/* Rule reminder strip */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, padding: "12px 16px", borderRadius: "var(--radius-lg)", background: "var(--avocado-soft)", marginBottom: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <Ic.ClipboardList size={18} style={{ color: "var(--avocado-fg)" }}/>
            <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--avocado-fg)" }}>3 pieces required · random selection from the load</span>
          </div>
          {extra > 0 && <span className="badge badge-soil">{extra} extra sample{extra > 1 ? "s" : ""}</span>}
        </div>

        {state === "empty" && <div style={{ marginBottom: 14 }}><Banner tone="warning" icon={Ic.Warning} title="Capture at least 3 samples" desc="Identify each fruit, then continue to parameters. Photos are recommended for variance defence."/></div>}

        {/* Sample list */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {rows.map((s, i) => (
            <div key={s.id} className="op-card op-card-pad" style={{ display: "grid", gridTemplateColumns: "108px 1fr 150px 170px", gap: 16, alignItems: "end" }}>
              <PhotoTile filled={s.photo} label="Photo" hint="Tap to capture" tag={s.id} onTap={() => {}} aspect="1 / 1"/>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 7 }}>
                  <span className="op-check-num" style={{ background: s.extra ? "var(--soil)" : "var(--foreground)" }}>{i + 1}</span>
                  <span style={{ fontSize: 14.5, fontWeight: 600 }}>Sample {s.id}</span>
                  {s.extra && <span className="badge badge-soil">Extra</span>}
                </div>
                <div className="op-label" style={{ fontSize: 12, marginBottom: 5 }}>Position in load</div>
                <input className="op-input" style={{ height: 44, fontSize: 14 }} defaultValue={s.pos} placeholder="e.g. Top of bin 2"/>
              </div>
              <div>
                <div className="op-label" style={{ fontSize: 12, marginBottom: 5 }}>Weight (g)</div>
                <input className="op-input" style={{ height: 44, fontSize: 14, textAlign: "center", fontVariantNumeric: "tabular-nums" }} defaultValue={s.weight} placeholder="optional"/>
              </div>
              <div>
                <div className="op-label" style={{ fontSize: 12, marginBottom: 5 }}>Visual condition</div>
                <div className="op-select-wrap">
                  <select className="op-select" style={{ height: 44, fontSize: 14 }} defaultValue={s.condition || "Sound"}>
                    {QD.VISUAL.map(v => <option key={v}>{v}</option>)}
                  </select>
                  <Ic.ChevronDown size={16} className="op-select-chev"/>
                </div>
              </div>
            </div>
          ))}
        </div>

        <button className="op-btn op-btn-ghost" style={{ marginTop: 14, width: "100%", border: "1.5px dashed var(--border)", height: 52 }}><Ic.Plus size={18}/> Add extra sample</button>
      </div>

      <div className="op-actionbar">
        <Btn variant="ghost" onClick={() => go("queue")}>Save &amp; exit</Btn>
        <div className="op-ab-grow"/>
        {!ruleMet && <span className="op-hint" style={{ margin: 0 }}><Ic.Info size={12} style={{ verticalAlign: "-2px" }}/> {filled} of {min} samples captured</span>}
        <Btn variant="primary" icon={Ic.ArrowRight} disabled={!ruleMet} onClick={() => go("dmParam")}>Continue to parameters</Btn>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  sampling: { chrome: "flow", title: "Sampling — GPN-…0041", sub: "Step 2 of 4 · Sampling", back: "entry", render: (ctx) => <QcSampling {...ctx}/> },
});