// AMOMS · Operator Tablet — System / status screens.
// Registered into window.OptPages (chrome: "bare" — no app bar, no tab bar).
// Rendered inside the 1280×800 tablet frame by op-shell.jsx. Reuses
// window.Icons + window.Op.Btn (hero size for touch targets).
(function () {
  const I = ({ children, size = 16, ...rest }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
         {...rest}>{children}</svg>
  );
  Object.assign(window.Icons, {
    Lock:   window.Icons.Lock   || ((p)=> <I {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></I>),
    Shield: window.Icons.Shield || ((p)=> <I {...p}><path d="M12 2l8 3v6c0 5-3.5 8.5-8 11-4.5-2.5-8-6-8-11V5z"/></I>),
  });
})();

const DASH = "../gate-logistics/OPT-GATE-01.html";
const goDash = () => { window.location.href = DASH; };
const reload = () => window.location.reload();

const OP_SYS = {
  sysNotFound: {
    tone: "neutral", icon: "Search", code: "404", title: "We can't find that screen",
    desc: "This screen may have been moved or is no longer part of gate operations. Return to the gate dashboard to continue.",
    actions: [{ variant: "primary", icon: "Gate", label: "Back to gate dashboard", onClick: goDash }],
    support: "If a workflow link keeps failing, notify your gate supervisor.",
  },
  sysSessionExpired: {
    tone: "warn", icon: "Lock", code: "401", title: "This shift session has expired",
    desc: "For security, the tablet signed out after a period of inactivity. Sign in again to resume gate operations.",
    actions: [{ variant: "primary", icon: "ArrowRight", label: "Sign in again", onClick: reload }],
    support: "Any scans in progress were saved locally and will sync once you sign in.",
  },
  sysForbidden: {
    tone: "danger", icon: "Shield", code: "403", title: "You don't have access here",
    desc: "This tablet's operator role doesn't include this area. Ask a supervisor to unlock it or switch to an authorised device.",
    actions: [{ variant: "primary", icon: "Gate", label: "Back to gate dashboard", onClick: goDash }],
    supportNode: (Ic) => <>Signed in as <b>Gatekeeper</b> · Murang'a Plant, Gate 1.</>,
  },
  sysServerError: {
    tone: "danger", icon: "Warning", code: "500", title: "Something went wrong",
    desc: "An unexpected error interrupted this screen. The issue has been logged — retry, or work offline and sync later.",
    actions: [
      { variant: "primary", icon: "Refresh", label: "Try again", onClick: reload },
      { variant: "outline", icon: "Gate", label: "Gate dashboard", onClick: goDash },
    ],
    refId: "ERR-7F3A2C91",
  },
  sysOffline: {
    tone: "neutral", pulse: true, icon: "WifiOff", eyebrow: "No connection",
    title: "The tablet is offline",
    desc: "The gate network is unreachable. You can keep admitting trucks — scans and entries queue on the tablet and sync automatically when the connection returns.",
    actions: [
      { variant: "primary", icon: "Refresh", label: "Retry connection", onClick: reload },
      { variant: "outline", icon: "Gate", label: "Continue offline", onClick: goDash },
    ],
    support: "Cached orders remain valid for 48 hours.",
  },
  sysMaintenance: {
    tone: "info", icon: "Settings", eyebrow: "Scheduled maintenance",
    title: "AMOMS is being upgraded",
    desc: "The platform is undergoing scheduled maintenance. Gate operations will resume automatically — no action needed on this tablet.",
    note: [["Started", "26 Jul 2026, 01:00"], ["Expected back", "26 Jul 2026, 03:00 EAT"], ["Offline mode", "Available"]],
    actions: [
      { variant: "primary", icon: "Refresh", label: "Check again", onClick: reload },
      { variant: "outline", icon: "Gate", label: "Work offline", onClick: goDash },
    ],
    supportNode: (Ic) => <>Urgent? Call the operations desk at <b>ops@amoms.co.ke</b>.</>,
  },
};

const OpSysScreen = ({ kind }) => {
  const Ic = window.Icons;
  const { Btn } = window.Op;
  const s = OP_SYS[kind] || OP_SYS.sysNotFound;
  const Glyph = Ic[s.icon];
  return (
    <div className="op-body sys-wrap">
      <div className="sys-card">
        <div className="sys-brand"><span className="m"><Ic.Leaf size={15}/></span> AMOMS · Gate operations</div>
        <span className={`sys-badge ${s.tone} ${s.pulse ? "pulse" : ""}`}><Glyph size={40}/></span>
        {s.code && <div className="sys-code">{s.code}</div>}
        {s.eyebrow && <div className="sys-eyebrow">{s.eyebrow}</div>}
        <div className="sys-title">{s.title}</div>
        <div className="sys-desc">{s.desc}</div>
        {s.note && (
          <div className="sys-note">
            {s.note.map(([k, v]) => (
              <div className="sys-note-row" key={k}><span className="k">{k}</span><span className="v">{v}</span></div>
            ))}
          </div>
        )}
        <div className="sys-actions">
          {s.actions.map((a, i) => {
            const AI = Ic[a.icon];
            return <Btn key={i} variant={a.variant} size="hero" onClick={a.onClick}><AI size={22}/>{a.label}</Btn>;
          })}
        </div>
        {s.refId && <div className="sys-ref"><Ic.FileText size={13}/> Reference <b>{s.refId}</b></div>}
        {s.supportNode ? <div className="sys-support">{s.supportNode(Ic)}</div> : (s.support && <div className="sys-support">{s.support}</div>)}
      </div>
    </div>
  );
};

window.OptPages = Object.assign(window.OptPages || {}, Object.fromEntries(
  Object.keys(OP_SYS).map((kind) => [kind, { chrome: "bare", render: () => <OpSysScreen kind={kind}/> }])
));