// OPT-GATE-06 · Capture driver & truck
const CaptureDriverScreen = ({ t, go }) => {
  const { Btn, Banner, Stepper, PhotoTile } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.captureDriver; // empty | partial | filled | storageLow
  const order = FD.ORDER;

  const init = state === "filled" ? [true, true, true] : state === "partial" ? [true, false, false] : state === "storageLow" ? [true, true, false] : [false, false, false];
  const [shot, setShot] = useState(init);
  useEffect(() => { setShot(init); }, [state]);
  const toggle = (i) => setShot(s => s.map((v, j) => j === i ? !v : v));

  const tiles = [
    { label: "Driver photo (face)", hint: "Rear or front camera", tag: "driver.jpg", req: true },
    { label: "ID / license photo", hint: "Recommended", tag: "id.jpg", req: false },
    { label: "Truck front (plate visible)", hint: "Plate must be readable", tag: "truck.jpg", req: true },
  ];
  const ready = shot[0] && shot[2]; // required: driver + truck

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-pad" style={{ flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "center", margin: "4px 0 22px" }}>
          <Stepper steps={["Capture", "Verify"]} current={0}/>
        </div>

        {state === "storageLow" && <div style={{ marginBottom: 16 }}><Banner tone="warning" icon={Ic.Warning} title="Device storage low (412 MB free)" desc="Photos will be compressed more aggressively. Sync soon to free space."/></div>}

        <div className="op-grid-3" style={{ gap: 18, maxWidth: 980, margin: "0 auto" }}>
          {tiles.map((tile, i) => (
            <div key={i}>
              <PhotoTile filled={shot[i]} label={tile.label} hint={tile.hint} tag={tile.tag} required={tile.req} aspect="4 / 5" onTap={() => toggle(i)}/>
              <div style={{ marginTop: 8, textAlign: "center", fontSize: 12.5, fontWeight: 600, color: shot[i] ? "var(--success)" : tile.req ? "var(--foreground)" : "var(--muted-foreground)" }}>
                {shot[i] ? "Captured · tap to re-take" : tile.req ? "Required" : "Optional"}
              </div>
            </div>
          ))}
        </div>

        <div className="op-card flush" style={{ maxWidth: 980, margin: "22px auto 0" }}>
          <div className="op-card-head" style={{ paddingBottom: 6 }}><div className="op-card-title" style={{ fontSize: 13.5 }}>From the previous step</div></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", padding: "0 18px 16px", gap: 16 }}>
            <div><div className="op-muted" style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }}>Truck plate</div><div className="op-mono" style={{ fontSize: 15, fontWeight: 600, marginTop: 3 }}>{order.truck}</div></div>
            <div><div className="op-muted" style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }}>Driver</div><div style={{ fontSize: 15, fontWeight: 600, marginTop: 3 }}>{order.driver}</div></div>
            <div><div className="op-muted" style={{ fontSize: 11.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }}>Supplier</div><div style={{ fontSize: 15, fontWeight: 600, marginTop: 3 }}>{order.who}</div></div>
          </div>
        </div>
        <div className="op-muted" style={{ fontSize: 12, marginTop: 14, textAlign: "center" }}>Photos store locally first and sync when online · EXIF stripped except timestamp · ~200 KB each.</div>
      </div>

      <div className="op-actionbar">
        <Btn variant="outline" icon={Ic.ChevronLeft} onClick={() => go("manualEntry")}>Back</Btn>
        <div className="op-ab-grow"/>
        <Btn variant="primary" iconRight={Ic.ChevronRight} disabled={!ready} onClick={() => go("verify")}>Continue to verification</Btn>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  captureDriver: { chrome: "flow", title: "Capture driver & truck", sub: "Step 1 of 2", back: "scanMatch", render: (ctx) => <CaptureDriverScreen {...ctx}/> },
});