// OPT-GATE-18 · Camera permission / hardware error  (full-screen)
const CameraErrorScreen = ({ t, go }) => {
  const { Btn } = window.Op;
  const Ic = window.Icons;
  const state = t.cameraError; // permission | busy | fault

  const copy = {
    permission: { title: "Camera permission needed", body: "The camera is blocked for this app. Enable camera access in device settings, then return to continue scanning.", primary: { label: "Open device settings", icon: Ic.Settings } },
    busy:       { title: "Camera is busy", body: "Another app is using the camera, or it hasn't released yet. Wait a moment and retry.", primary: { label: "Retry camera", icon: Ic.Refresh } },
    fault:      { title: "Camera unavailable", body: "The camera hardware isn't responding. This may be a hardware fault — report it so maintenance can check the tablet.", primary: { label: "Report this issue", icon: Ic.Flag } },
  }[state];

  return (
    <div style={{ flex: 1, position: "relative", minHeight: 0, display: "flex", flexDirection: "column" }}>
      <div className="op-scan-topbar" style={{ color: "var(--foreground)" }}>
        <button className="op-iconbtn ghost" aria-label="Back" onClick={() => go("dashboard")}><Ic.ChevronLeft size={22}/></button>
        <div className="op-scan-title" style={{ color: "var(--foreground)" }}>Scan QR / gate pass</div>
      </div>
      <div className="op-empty" style={{ justifyContent: "center" }}>
        <div className="op-empty-art" style={{ background: "var(--status-rejected-soft)", color: "var(--status-rejected-fg)", width: 112, height: 112 }}><Ic.CameraOff size={48}/></div>
        <div className="op-empty-title" style={{ fontSize: 24 }}>{copy.title}</div>
        <div className="op-empty-desc" style={{ fontSize: 15, maxWidth: 440 }}>{copy.body}</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 28, width: 360 }}>
          <Btn variant="primary" size="lg" block icon={copy.primary.icon} onClick={() => go(state === "fault" ? "dashboard" : "scan")}>{copy.primary.label}</Btn>
          <Btn variant="outline" size="lg" block icon={Ic.Edit} onClick={() => go("manualEntry")}>Continue with manual entry</Btn>
          {state !== "fault" && <button className="op-btn op-btn-ghost" style={{ color: "var(--muted-foreground)" }} onClick={() => go("dashboard")}><Ic.Flag size={16}/> Report this issue</button>}
        </div>
        <div className="op-muted" style={{ fontSize: 12, marginTop: 22, maxWidth: 380 }}>Manual entry is always available from any camera failure. Repeated permission denials notify the gate supervisor.</div>
      </div>
    </div>
  );
};

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