// AMOMS · Farmer Mobile — System / status screens.
// Registered into window.FarmerPages (chrome: no tab bar). Rendered inside the
// device frame by farmer-shell.jsx. Reuses window.Icons + window.Fm.Btn.
// Icons are rendered as button children (not via the `icon` prop) so no
// function-valued prop reaches the DOM.
(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, {
    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 FM_SYS = {
  sysNotFound: {
    tone: "neutral", icon: "Search", code: "404", title: "We can't find that",
    desc: "This screen may have moved or is no longer available. Head back to your home screen to keep going.",
    actions: [{ variant: "primary", icon: "Home", label: "Back to home", go: (nav) => nav.tab("home") }],
    supportNode: () => <>Trouble persists? Call support on <b>0800 720 000</b>.</>,
  },
  sysSessionExpired: {
    tone: "warn", icon: "Lock", code: "401", title: "You've been signed out",
    desc: "For your security we signed you out after a period of inactivity. Sign in again to continue.",
    actions: [{ variant: "primary", icon: "ArrowRight", label: "Sign in again", go: (nav) => nav.replace("login") }],
    supportNode: () => <>Your saved responses are kept — nothing was lost.</>,
  },
  sysForbidden: {
    tone: "danger", icon: "Shield", code: "403", title: "This isn't available to you",
    desc: "Your account doesn't have access to this section. If you think this is wrong, contact the plant procurement team.",
    actions: [
      { variant: "primary", icon: "Home", label: "Back to home", go: (nav) => nav.tab("home") },
      { variant: "outline", icon: "Phone", label: "Call support", go: () => { window.location.href = "tel:0800720000"; } },
    ],
  },
  sysServerError: {
    tone: "danger", icon: "Warning", code: "500", title: "Something went wrong",
    desc: "We hit an unexpected problem. Please try again in a moment — we've logged the issue.",
    actions: [{ variant: "primary", icon: "Refresh", label: "Try again", go: () => window.location.reload() }],
    refId: "ERR-7F3A2C91",
  },
  sysOffline: {
    tone: "neutral", pulse: true, icon: "WifiOff", eyebrow: "No connection",
    title: "You're offline",
    desc: "We can't reach the network right now. Your responses are saved on your phone and will sync automatically when you're back online.",
    actions: [{ variant: "primary", icon: "Refresh", label: "Retry connection", go: () => window.location.reload() }],
    supportNode: () => <>Move to an area with better signal and try again.</>,
  },
  sysMaintenance: {
    tone: "info", icon: "Maintenance", eyebrow: "Scheduled maintenance",
    title: "We'll be right back",
    desc: "AMOMS is being updated to serve you better. Please check back shortly — no action is needed from you.",
    note: [["Expected back", "26 Jul, 03:00"], ["Status", "In progress"]],
    actions: [{ variant: "outline", icon: "Refresh", label: "Check again", go: () => window.location.reload() }],
  },
  sysUpdate: {
    tone: "brand", icon: "Download", eyebrow: "Update required",
    title: "A new version is ready",
    desc: "To keep using AMOMS you'll need the latest version of the app. Update now — it only takes a moment.",
    note: [["Your version", "1.4.2"], ["Latest version", "1.6.0"]],
    actions: [
      { variant: "primary", icon: "Download", label: "Update now", go: () => {} },
      { variant: "outline", label: "What's new", go: () => {} },
    ],
    supportNode: () => <>Updating keeps your account secure and adds the newest buyer features.</>,
  },
};

const SysScreen = ({ kind, nav }) => {
  const Ic = window.Icons;
  const Btn = window.Fm.Btn;
  const s = FM_SYS[kind] || FM_SYS.sysNotFound;
  const Glyph = Ic[s.icon];
  return (
    <div className="sys-wrap">
      <div className="sys-card">
        <div className="sys-brand"><span className="m"><Ic.Leaf size={15}/></span> AMOMS · Farmer</div>
        <span className={`sys-badge ${s.tone} ${s.pulse ? "pulse" : ""}`}><Glyph size={38}/></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 stack">
          {s.actions.map((a, i) => {
            const AI = a.icon ? Ic[a.icon] : null;
            return <Btn key={i} variant={a.variant} onClick={() => a.go(nav)}>{AI ? <AI size={18}/> : null}{a.label}</Btn>;
          })}
        </div>
        {s.refId && <div className="sys-ref"><Ic.File size={13}/> Ref <b>{s.refId}</b></div>}
        {s.supportNode ? <div className="sys-support">{s.supportNode()}</div> : (s.support && <div className="sys-support">{s.support}</div>)}
      </div>
    </div>
  );
};

window.FarmerPages = Object.assign(window.FarmerPages || {}, Object.fromEntries(
  Object.keys(FM_SYS).map((kind) => [kind, { brandStatus: false, render: ({ nav }) => <SysScreen kind={kind} nav={nav}/> }])
));