// OPT-GATE-08 · Generate digital gate pass
const GeneratePassScreen = ({ t, go }) => {
  const { Btn, QR, OrderCard, Pill, Toast, Banner } = window.Op;
  const Ic = window.Icons, FD = window.OD;
  const state = t.generatePass; // success | noPrinter | noPhone
  const order = FD.ORDER;
  const [toast, setToast] = useState("");
  const ping = (msg) => { setToast(msg); setTimeout(() => setToast(""), 1800); };

  return (
    <div className="op-body" style={{ display: "flex", flexDirection: "column" }}>
      <div className="op-strip success" style={{ flexShrink: 0 }}>
        <span className="op-strip-ic"><Ic.CheckCircle size={22}/></span>
        <div><div className="op-strip-title">Gate pass generated — manual entry</div><div className="op-strip-sub">Single ID across QC · weighbridge · warehouse · exit</div></div>
      </div>

      <div className="op-pad-lg" style={{ flex: 1 }}>
        <div style={{ maxWidth: 940, margin: "0 auto 16px" }}>
          <Banner tone="warning" icon={Ic.Edit} title="Manual entry — GNP generated at the gate" desc="No farmer-app gate pass was found, so this pass was created here. OPT-GATE-08 is used only for manual entries — app passes are verified and reused, never regenerated."/>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "center", maxWidth: 940, margin: "0 auto" }}>
          {/* QR + GPN */}
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>
            <QR value={order.gpn} size={208}/>
            <div className="op-gpn" style={{ fontSize: 22, marginTop: 16, letterSpacing: "0.02em" }}>{order.gpn}</div>
            <div className="op-muted" style={{ fontSize: 13, marginTop: 2 }}>Pass number <b style={{ color: "var(--foreground)" }}>4 5 2 1</b> — read aloud to the driver</div>
            <div className="op-card" style={{ marginTop: 16, padding: "12px 18px", display: "inline-flex", alignItems: "center", gap: 10, background: "var(--avocado-soft)", border: "none" }}>
              <Ic.ArrowRight size={18} style={{ color: "var(--avocado-fg)" }}/>
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--avocado-fg)" }}>Direct to: QC — dry matter test</span>
            </div>
          </div>

          {/* Summary + actions */}
          <div>
            <OrderCard order={order} compact/>
            <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
              <Btn variant="outline" block icon={Ic.Printer} disabled={state === "noPrinter"} onClick={() => ping("Sent to gate printer")}>Print pass</Btn>
              <Btn variant="outline" block icon={Ic.Share} disabled={state === "noPhone"} onClick={() => ping("Shared via SMS")}>Share to driver</Btn>
            </div>
            {state === "noPrinter" && <div className="op-hint" style={{ marginTop: 8 }}><Ic.Info size={12} style={{ verticalAlign: "-2px" }}/> Printer offline — share via SMS instead.</div>}
            {state === "noPhone" && <div className="op-hint" style={{ marginTop: 8 }}><Ic.Info size={12} style={{ verticalAlign: "-2px" }}/> No driver phone on file — print instead.</div>}
          </div>
        </div>
      </div>

      <div className="op-actionbar">
        <Btn variant="ghost" onClick={() => go("dashboard")}>Done</Btn>
        <div className="op-ab-grow"/>
        <Btn variant="primary" icon={Ic.ClipboardList} onClick={() => go("dashboard")}>Truck directed to QC</Btn>
      </div>
      <Toast show={!!toast}>{toast}</Toast>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  generatePass: { chrome: "flow", title: "Manual gate pass", sub: "GPN-20260516-0042", back: "verify", render: (ctx) => <GeneratePassScreen {...ctx}/> },
});