// ─────────────────────────────────────────────────────────────────────────────
// Farmer Mobile — app shell. Renders the device frame (scaled), iOS status bar,
// bottom tab bar, a stack router over window.FarmerPages, the offline system
// banner + sync-queue sheet, and the Tweaks panel. Loads LAST. Reuses the React
// hooks + components declared in farmer-ui.jsx (window.Fm, global hooks).
// ─────────────────────────────────────────────────────────────────────────────

const ShIc = window.Icons;

// Bottom tab bar config.
const TABS = [
  { key: "home",          label: "Home",      icon: ShIc.Home },
  { key: "myResponses",   label: "Responses", icon: ShIc.ClipboardList },
  { key: "notifications", label: "Alerts",    icon: ShIc.Bell },
  { key: "profile",       label: "Profile",   icon: ShIc.User },
];
const TAB_KEYS = TABS.map(t => t.key);

// FRM → screen key (drives the Tweaks "jump to screen" select).
const SCREENS = [
  ["FRM-PROC-01 · Register",           "register"],
  ["FRM-PROC-02 · Login",              "login"],
  ["FRM-PROC-03 · Home",               "home"],
  ["FRM-PROC-04 · Requirement detail", "reqDetail"],
  ["FRM-PROC-05 · Submit response",    "submitResponse"],
  ["FRM-PROC-06 · My responses",       "myResponses"],
  ["FRM-PROC-07 · Response pending",   "responsePending"],
  ["FRM-PROC-08 · Response accepted",  "responseAccepted"],
  ["FRM-PROC-09 · Response rejected",  "responseRejected"],
  ["FRM-PROC-10 · Sign agreement",     "signAgreement"],
  ["FRM-PROC-11 · Reschedule",         "reschedule"],
  ["FRM-PROC-12 · Delivery slot",      "deliverySlot"],
  ["FRM-PROC-13 · Notifications",      "notifications"],
  ["FRM-PROC-14 · Profile",            "profile"],
  ["FRM-PROC-15 · Home empty",         "homeEmpty"],
  ["FRM-PROC-16 · Offline",            "offline"],
];

// ── Offline system banner ──
const OfflineBanner = ({ sync, onOpen }) => {
  const map = {
    banner:   { cls: "",          ic: ShIc.WifiOff, text: "You're offline. Some actions will sync later." },
    syncing:  { cls: "syncing",   ic: ShIc.Refresh, text: "Syncing 2 items…" },
    complete: { cls: "reconnect", ic: ShIc.Wifi,    text: "Back online — all changes synced." },
    failure:  { cls: "",          ic: ShIc.Warning, text: "1 item failed to sync. Tap to retry." },
  };
  const s = map[sync] || map.banner;
  return (
    <div className={`fm-offline-banner ${s.cls}`} onClick={onOpen}>
      <s.ic size={15}/>
      <span>{s.text}</span>
      <ShIc.ChevronRight size={15} className="fm-ob-chev"/>
    </div>
  );
};

// ── Sync-queue sheet (FRM-16) ──
const SyncQueueSheet = ({ open, onClose, sync }) => {
  const { Sheet, Btn } = window.Fm;
  const items = [
    { id: "q1", icon: ShIc.Handshake, title: "Response to PR-2026-0183", sub: "Fuerte · 4,000 kg @ KSh 76", state: sync === "complete" ? "done" : sync === "failure" ? "fail" : "pending" },
    { id: "q2", icon: ShIc.Pen,       title: "Agreement signature",       sub: "PO-2026-0461",                state: sync === "complete" ? "done" : "pending" },
  ];
  return (
    <Sheet open={open} onClose={onClose} title="Sync queue">
      <div className="fm-sheet-text" style={{ marginBottom: 14 }}>
        Saved on your phone — these upload automatically the moment you're back online.
      </div>
      {items.map(it => (
        <div className="fm-queue-item" key={it.id}>
          <span className={`fm-queue-ic ${it.state === "done" ? "done" : it.state === "fail" ? "fail" : ""}`}>
            {it.state === "done" ? <ShIc.Check size={17}/> : it.state === "fail" ? <ShIc.Warning size={16}/> : <it.icon size={16}/>}
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>{it.title}</div>
            <div className="muted" style={{ fontSize: 12 }}>{it.sub}</div>
          </div>
          <span style={{ fontSize: 11.5, fontWeight: 600, color: it.state === "done" ? "var(--success)" : it.state === "fail" ? "var(--destructive)" : "var(--muted-foreground)" }}>
            {it.state === "done" ? "Synced" : it.state === "fail" ? "Failed" : "Queued"}
          </span>
        </div>
      ))}
      <div style={{ marginTop: 10 }}>
        {sync === "failure"
          ? <Btn variant="primary" icon={ShIc.Refresh}>Retry all</Btn>
          : <Btn variant="outline" onClick={onClose}>Close</Btn>}
      </div>
    </Sheet>
  );
};

// ── Tweak defaults ──
const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "offline": false,
  "offlineSync": "banner",
  "regStep": "phone",
  "regOtp": "default",
  "loginStep": "phone",
  "loginState": "default",
  "homeState": "default",
  "homeEmptyState": "quiet",
  "detailState": "open",
  "submitState": "empty",
  "responsesState": "has",
  "pendingState": "open",
  "acceptedState": "pendingAccept",
  "rejectedState": "reason",
  "signStep": "read",
  "rescheduleState": "form",
  "slotState": "dayof",
  "notifState": "has",
  "profileState": "view"
}/*EDITMODE-END*/;

// ── Root ──
const FarmerApp = () => {
  const startScreen = window.FM_START || "home";
  const [stack, setStack] = useState([{ screen: startScreen, params: {} }]);
  const top = stack[stack.length - 1];
  const [queueOpen, setQueueOpen] = useState(startScreen === "offline");
  const [scale, setScale] = useState(1);

  const [t, setTweak] = window.useTweaks ? window.useTweaks(TWEAKS_DEFAULTS) : [TWEAKS_DEFAULTS, () => {}];
  const offline = !!t.offline || top.screen === "offline";

  useEffect(() => { document.documentElement.classList.toggle("dark", !!t.dark); }, [t.dark]);

  useEffect(() => {
    const fit = () => {
      const pad = 20;
      const s = Math.min((window.innerWidth - pad) / 422, (window.innerHeight - pad) / 876, 1);
      setScale(s);
    };
    fit();
    window.addEventListener("resize", fit);
    return () => window.removeEventListener("resize", fit);
  }, []);

  const nav = useMemo(() => ({
    go: (screen, params = {}) => setStack(s => [...s, { screen, params }]),
    replace: (screen, params = {}) => setStack(s => [...s.slice(0, -1), { screen, params }]),
    back: () => setStack(s => s.length > 1 ? s.slice(0, -1) : s),
    tab: (screen) => setStack([{ screen, params: {} }]),
    jump: (screen) => setStack([{ screen, params: {} }]),
  }), []);
  const canBack = stack.length > 1;

  const screenKey = (top.screen === "offline" || top.screen === "homeEmpty") ? "home" : top.screen;
  const activeTab = TAB_KEYS.includes(screenKey) ? screenKey : null;
  const showTabs = activeTab != null;
  const page = window.FarmerPages?.[top.screen];
  const brandStatus = page?.brandStatus;

  return (
    <div className="fm-stage">
      <div className="fm-scaler" style={{ transform: `scale(${scale})` }}>
        <div className="fm-device">
          <div className="fm-notch"/>
          <div className="fm-screen">
            {offline && <OfflineBanner sync={t.offlineSync} onOpen={() => setQueueOpen(true)}/>}

            <div className={`fm-status ${brandStatus ? "on-brand" : ""}`}>
              <span className="fm-time">9:12</span>
              <span className="fm-status-r">
                <ShIc.Signal size={16}/>
                {offline ? <ShIc.WifiOff size={16}/> : <ShIc.Wifi size={16}/>}
                <ShIc.Battery size={20}/>
              </span>
            </div>

            <div className="fm-pagewrap" style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
              {page
                ? page.render({ nav, t, setTweak, params: top.params, offline, canBack })
                : <div className="fm-empty"><div className="fm-empty-title">Screen not found</div></div>}
            </div>

            {showTabs && (
              <div className="fm-tabbar-wrap">
                <nav className="fm-tabbar">
                  {TABS.map(tab => {
                    const on = activeTab === tab.key;
                    const badge = tab.key === "notifications" ? 2 : null;
                    return (
                      <button key={tab.key} className={`fm-tab ${on ? "on" : ""}`} onClick={() => nav.tab(tab.key)}>
                        {badge != null && <span className="fm-tab-badge">{badge}</span>}
                        <tab.icon size={22}/>
                        <span className="fm-tab-label">{tab.label}</span>
                      </button>
                    );
                  })}
                </nav>
              </div>
            )}

            <SyncQueueSheet open={queueOpen} onClose={() => setQueueOpen(false)} sync={t.offlineSync}/>
          </div>
        </div>
      </div>

      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection label="Device">
            <window.TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)}/>
            <window.TweakToggle label="Offline" value={t.offline} onChange={(v) => setTweak("offline", v)}/>
          </window.TweakSection>

          <window.TweakSection label="Go to screen">
            <window.TweakSelect label="Screen" value={top.screen}
              onChange={(v) => nav.jump(v)}
              options={SCREENS.map(([label, value]) => ({ value, label }))}/>
          </window.TweakSection>

          {offline && (
            <window.TweakSection label="Offline / sync (FRM-16)">
              <window.TweakSelect label="Sync state" value={t.offlineSync} onChange={(v) => setTweak("offlineSync", v)}
                options={[
                  { value: "banner",   label: "Offline — banner only" },
                  { value: "syncing",  label: "Reconnected — syncing" },
                  { value: "complete", label: "Sync complete" },
                  { value: "failure",  label: "Sync failure" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "register" && (
            <window.TweakSection label="Register (FRM-01)">
              <window.TweakSelect label="Step" value={t.regStep} onChange={(v) => setTweak("regStep", v)}
                options={[
                  { value: "phone",   label: "1 · Phone entry" },
                  { value: "otp",     label: "2 · OTP verify" },
                  { value: "profile", label: "3 · Profile setup" },
                  { value: "done",    label: "Welcome / success" },
                ]}/>
              {t.regStep === "otp" && (
                <window.TweakRadio label="OTP state" value={t.regOtp} onChange={(v) => setTweak("regOtp", v)}
                  options={[{ value: "default", label: "Typing" }, { value: "wrong", label: "Wrong" }, { value: "expired", label: "Expired" }]}/>
              )}
            </window.TweakSection>
          )}

          {top.screen === "login" && (
            <window.TweakSection label="Login (FRM-02)">
              <window.TweakRadio label="Step" value={t.loginStep} onChange={(v) => setTweak("loginStep", v)}
                options={[{ value: "phone", label: "Phone" }, { value: "otp", label: "OTP" }]}/>
              <window.TweakSelect label="State" value={t.loginState} onChange={(v) => setTweak("loginState", v)}
                options={[
                  { value: "default", label: "Default" },
                  { value: "invalid", label: "No account found" },
                  { value: "wrong",   label: "Wrong OTP" },
                  { value: "locked",  label: "Locked out" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "home" && (
            <window.TweakSection label="Home (FRM-03)">
              <window.TweakSelect label="State" value={t.homeState} onChange={(v) => setTweak("homeState", v)}
                options={[
                  { value: "default",   label: "Default — populated" },
                  { value: "loading",   label: "Loading (skeleton)" },
                  { value: "noresults", label: "Filter — no match" },
                  { value: "empty",     label: "No requirements" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "homeEmpty" && (
            <window.TweakSection label="Home empty (FRM-15)">
              <window.TweakRadio label="Variant" value={t.homeEmptyState} onChange={(v) => setTweak("homeEmptyState", v)}
                options={[{ value: "quiet", label: "Quiet period" }, { value: "firstrun", label: "First-time" }]}/>
            </window.TweakSection>
          )}

          {top.screen === "reqDetail" && (
            <window.TweakSection label="Requirement detail (FRM-04)">
              <window.TweakSelect label="State" value={t.detailState} onChange={(v) => setTweak("detailState", v)}
                options={[
                  { value: "open",      label: "Open for response" },
                  { value: "responded", label: "Already responded" },
                  { value: "deadline",  label: "Deadline passed" },
                  { value: "cancelled", label: "Cancelled" },
                  { value: "version",   label: "Updated (new version)" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "submitResponse" && (
            <window.TweakSection label="Submit response (FRM-05)">
              <window.TweakSelect label="State" value={t.submitState} onChange={(v) => setTweak("submitState", v)}
                options={[
                  { value: "empty",        label: "Empty form" },
                  { value: "editing",      label: "Editing existing" },
                  { value: "aboveCeiling", label: "Rate above ceiling" },
                  { value: "outOfWindow",  label: "Date outside window" },
                  { value: "submitting",   label: "Submitting" },
                  { value: "submitted",    label: "Submitted" },
                  { value: "offline",      label: "Offline (queue)" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "myResponses" && (
            <window.TweakSection label="My responses (FRM-06)">
              <window.TweakSelect label="State" value={t.responsesState} onChange={(v) => setTweak("responsesState", v)}
                options={[
                  { value: "has",           label: "Has responses" },
                  { value: "loading",       label: "Loading" },
                  { value: "filteredEmpty", label: "Filter — empty" },
                  { value: "empty",         label: "No responses" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "responsePending" && (
            <window.TweakSection label="Pending (FRM-07)">
              <window.TweakRadio label="State" value={t.pendingState} onChange={(v) => setTweak("pendingState", v)}
                options={[{ value: "open", label: "Open" }, { value: "deadline", label: "Deadline" }]}/>
            </window.TweakSection>
          )}

          {top.screen === "responseAccepted" && (
            <window.TweakSection label="Accepted (FRM-08)">
              <window.TweakSelect label="State" value={t.acceptedState} onChange={(v) => setTweak("acceptedState", v)}
                options={[
                  { value: "pendingAccept", label: "Confirm gate-in" },
                  { value: "accepted",      label: "Gate-in confirmed (QR)" },
                  { value: "reschedule",    label: "Reschedule pending" },
                  { value: "completed",     label: "Delivery completed" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "responseRejected" && (
            <window.TweakSection label="Rejected (FRM-09)">
              <window.TweakRadio label="State" value={t.rejectedState} onChange={(v) => setTweak("rejectedState", v)}
                options={[{ value: "reason", label: "With reason" }, { value: "noreason", label: "No reason" }]}/>
            </window.TweakSection>
          )}

          {top.screen === "signAgreement" && (
            <window.TweakSection label="Sign agreement (FRM-10)">
              <window.TweakRadio label="Step" value={t.signStep} onChange={(v) => setTweak("signStep", v)}
                options={[{ value: "read", label: "1 Read" }, { value: "sign", label: "2 Sign" }, { value: "confirm", label: "3 Confirm" }]}/>
            </window.TweakSection>
          )}

          {top.screen === "reschedule" && (
            <window.TweakSection label="Reschedule (FRM-11)">
              <window.TweakSelect label="State" value={t.rescheduleState} onChange={(v) => setTweak("rescheduleState", v)}
                options={[
                  { value: "form",      label: "Form" },
                  { value: "noslot",    label: "No slots available" },
                  { value: "submitted", label: "Request sent" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "deliverySlot" && (
            <window.TweakSection label="Delivery slot (FRM-12)">
              <window.TweakSelect label="State" value={t.slotState} onChange={(v) => setTweak("slotState", v)}
                options={[
                  { value: "daybefore",  label: "Day before" },
                  { value: "dayof",      label: "Day of delivery" },
                  { value: "inprogress", label: "Truck verified at gate" },
                  { value: "past",       label: "Slot window closed" },
                ]}/>
            </window.TweakSection>
          )}

          {top.screen === "notifications" && (
            <window.TweakSection label="Notifications (FRM-13)">
              <window.TweakRadio label="State" value={t.notifState} onChange={(v) => setTweak("notifState", v)}
                options={[{ value: "has", label: "Has items" }, { value: "empty", label: "Empty" }, { value: "loading", label: "Loading" }]}/>
            </window.TweakSection>
          )}

          {top.screen === "profile" && (
            <window.TweakSection label="Profile (FRM-14)">
              <window.TweakRadio label="State" value={t.profileState} onChange={(v) => setTweak("profileState", v)}
                options={[{ value: "view", label: "View" }, { value: "logout", label: "Logout confirm" }]}/>
            </window.TweakSection>
          )}
        </window.TweaksPanel>
      )}
    </div>
  );
};

const fmRoot = ReactDOM.createRoot(document.getElementById("root"));
fmRoot.render(<FarmerApp/>);