// OPT-GATE-02 · Scan QR / gate pass  (full-screen camera)
const ScanScreen = ({ t, go }) => {
  const { Btn } = window.Op;
  const Ic = window.Icons;
  const state = t.scan; // scanning | poorFocus | offline
  const [torch, setTorch] = useState(false);

  return (
    <div style={{ flex: 1, position: "relative", minHeight: 0 }}>
      <div className="op-scanner">
        <div className="op-scanner-feed"/>
        <div className="op-scanner-overlay">
          <div className="op-scan-topbar">
            <button className="op-scan-iconbtn" aria-label="Back" onClick={() => go("dashboard")}><Ic.ChevronLeft size={22}/></button>
            <div className="op-scan-title">Scan QR / gate pass</div>
            <button className={`op-scan-iconbtn ${torch ? "on" : ""}`} aria-label="Torch" onClick={() => setTorch(!torch)}><Ic.Flash size={20}/></button>
          </div>

          {state === "offline" && (
            <div style={{ margin: "0 22px", background: "var(--system-offline)", color: "var(--system-offline-fg)", borderRadius: "var(--radius-lg)", padding: "11px 15px", display: "flex", gap: 10, alignItems: "center", fontSize: 13, fontWeight: 500 }}>
              <Ic.WifiOff size={16}/> Offline — last sync 08:50. Lookup will use cached orders (valid 48h).
            </div>
          )}

          <div className="op-scan-center">
            <button className="op-scan-frame" aria-label="Simulate detection" onClick={() => go("scanMatch")} style={{ border: "none", background: "transparent", cursor: "pointer", padding: 0 }}>
              <span className="op-scan-corner tl"/><span className="op-scan-corner tr"/>
              <span className="op-scan-corner bl"/><span className="op-scan-corner br"/>
              <span className="op-scan-laser"/>
            </button>
            <div className="op-scan-hint">
              {state === "poorFocus"
                ? "Move closer or adjust the angle. Try the torch in low light."
                : "Hold the gate pass steady inside the frame"}
            </div>
          </div>

          <div className="op-scan-bottom">
            <span className="op-scan-status"><span className="op-spin"/> Scanning…</span>
            <button className="op-scan-link" onClick={() => go("manualEntry")}>Enter manually instead</button>
            <div style={{ color: "oklch(0.72 0.02 130)", fontSize: 12 }}>Tap inside the frame to simulate a detected pass</div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, {
  scan: { chrome: "bare", render: (ctx) => <ScanScreen {...ctx}/> },
});