// OPT-GATE-09 · Weighbridge — gross weight
const WeighGrossScreen = ({ t, go }) => {
  const { Btn, Banner, NumInput, ToggleRow, PhotoTile } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.weighGross; // empty | noPhoto | allSet | variance | outlier
  const order = FD.ORDER;

  const presets = { empty: [0, false, false], noPhoto: [16420, false, true], allSet: [16420, true, true], variance: [9800, true, true], outlier: [52000, true, true] };
  const [wt, setWt] = useState(presets[state][0]);
  const [photo, setPhoto] = useState(presets[state][1]);
  const [onBridge, setOnBridge] = useState(presets[state][2]);
  useEffect(() => { const p = presets[state]; setWt(p[0]); setPhoto(p[1]); setOnBridge(p[2]); }, [state]);

  const low = wt > 0 && wt < 11000;
  const outlier = wt > 50000 || (wt > 0 && wt < 5000);
  const canSave = wt > 0 && photo && onBridge;

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-pad" style={{ flex: 1 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, alignItems: "start" }}>
          {/* Weight entry */}
          <div>
            <div className="op-sec"><span className="op-sec-title">Gross weight (truck + cargo)</span></div>
            <div className="op-field">
              <NumInput value={wt} onChange={setWt} step={10} suffix="kg"/>
              <div className="op-hint">Min 1 · max 60,000 · step 10 kg. Large keypad on focus.</div>
            </div>
            {low && <div style={{ marginBottom: 14 }}><Banner tone="warning" icon={Ic.Warning} title="Gross appears low for expected quantity" desc={`Expected ~${FD.KG(order.qty)} net. Verify the truck is fully on the bridge.`}/></div>}
            {outlier && <div style={{ marginBottom: 14 }}><Banner tone="warning" icon={Ic.Warning} title="Unusual gross weight" desc="Outside the typical 5,000–50,000 kg range. Double-check the reading."/></div>}
            <div style={{ marginBottom: 14 }}>
              <ToggleRow on={onBridge} onChange={setOnBridge} icon={Ic.Truck} title="Truck is on the bridge" sub="Anti-fraud check — confirm before capturing the weight."/>
            </div>
            <div className="op-field">
              <div className="op-label">Notes</div>
              <textarea className="op-textarea" placeholder="e.g. axle anomaly (optional)"/>
            </div>
          </div>

          {/* Slip photo + order */}
          <div>
            <div className="op-sec"><span className="op-sec-title">Weight slip photo <span style={{ color: "var(--soil)" }}>*</span></span></div>
            <PhotoTile filled={photo} label="Photo of printed weight slip" hint="From the weighbridge scale — mandatory" tag="gross-slip.jpg" aspect="16 / 10" onTap={() => setPhoto(p => !p)}/>
            {!photo && wt > 0 && <div className="op-err" style={{ marginTop: 8 }}><Ic.Warning size={13}/><span>Photo of the weight slip is required — never bypassable.</span></div>}
            <div className="op-card flush" style={{ marginTop: 16 }}>
              <window.Op.SRow k="GPN" v={<span className="op-gpn">{order.gpn}</span>}/>
              <window.Op.SRow k="Supplier" v={order.who}/>
              <window.Op.SRow k="Product" v={order.product}/>
              <window.Op.SRow k="Expected" v={FD.KG(order.qty)}/>
            </div>
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <div className="op-muted" style={{ fontSize: 12.5 }}>{!canSave ? (wt === 0 ? "Enter gross weight" : !photo ? "Photo of weight slip required" : "Confirm truck is on bridge") : "Truck status → Awaiting unload"}</div>
        <div className="op-ab-grow"/>
        <Btn variant="primary" icon={Ic.Check} disabled={!canSave} onClick={() => go("dashboard")}>Save &amp; continue</Btn>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  weighGross: { chrome: "flow", title: "Weighbridge — gross weight", sub: "GPN-20260516-0042", back: "generatePass", render: (ctx) => <WeighGrossScreen {...ctx}/> },
});