// Helm — App orchestrator. 手機=底部分頁全螢幕;桌面=左側邊欄+內容置中加寬。
(function () {
  const NS = window.HelmDesignSystem_9613a7;
  const { TabBar, IconButton, SyncBadge, HelmMark, Toast, ToastViewport, Button } = NS;

  const TABS = [
    { key: "overview", label: "總覽", icon: "ph-compass" },
    { key: "detail", label: "明細", icon: "ph-list-bullets" },
    { key: "cashflow", label: "現金流", icon: "ph-arrows-left-right" },
    { key: "goals", label: "目標", icon: "ph-target" },
    { key: "tools", label: "理財工具", icon: "ph-toolbox" },
  ];

  function systemTheme() {
    return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  }

  function App() {
    const [unlocked, setUnlocked] = React.useState(true);   // DEMO:直接解鎖,免密碼
    const [tab, setTab] = React.useState("overview");
    const [sheet, setSheet] = React.useState(null);
    const [fxOpen, setFxOpen] = React.useState(false);
    const [toast, setToast] = React.useState(null);
    const [sync, setSync] = React.useState("synced");
    const [themePref, setThemePref] = React.useState(() => {
      try { return localStorage.getItem("helm-theme-pref") || "system"; } catch (e) { return "system"; }
    });
    const [sysDark, setSysDark] = React.useState(() => !!(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches));
    const theme = themePref === "system" ? (sysDark ? "dark" : "light") : themePref;
    const [rev, setRev] = React.useState(0);
    const [isDesktop, setIsDesktop] = React.useState(window.matchMedia("(min-width: 760px)").matches);

    React.useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
    React.useEffect(() => { try { localStorage.setItem("helm-theme-pref", themePref); } catch (e) {} }, [themePref]);
    React.useEffect(() => {
      const mq = window.matchMedia("(prefers-color-scheme: dark)");
      const fn = (e) => setSysDark(e.matches);
      mq.addEventListener("change", fn); return () => mq.removeEventListener("change", fn);
    }, []);
    React.useEffect(() => {
      const mq = window.matchMedia("(min-width: 760px)");
      const fn = () => setIsDesktop(mq.matches);
      mq.addEventListener("change", fn); return () => mq.removeEventListener("change", fn);
    }, []);
    React.useEffect(() => {
      if (window.HelmData.getPw()) {
        window.HelmData.refresh().then((ok) => { if (ok) { setUnlocked(true); setRev((r) => r + 1); } });
      }
    }, []);

    // 全螢幕頁(.fpage:新增/編輯、換匯)開啟時:只允許頁內捲動區(.fpage__scroll)捲動,
    // 其餘 touchmove 一律擋掉 → 背景不會跟著上下跑/回彈漏出。不改 body CSS,底欄不跳。
    React.useEffect(() => {
      if (!sheet && !fxOpen) return;
      function lockBg(e) {
        if (!(e.target && e.target.closest && e.target.closest(".fpage__scroll"))) e.preventDefault();
      }
      document.addEventListener("touchmove", lockBg, { passive: false });
      return () => document.removeEventListener("touchmove", lockBg);
    }, [sheet, fxOpen]);


    function showToast(msg, tone = "success") {
      setToast({ msg, tone });
      clearTimeout(showToast._t);
      showToast._t = setTimeout(() => setToast(null), 2600);
    }
    function openNew() { setSheet({ item: null }); }
    function openEdit(item) { setSheet({ item }); }
    function closeSheet() { setSheet(null); }
    function afterWrite(msg) { setSheet(null); showToast(msg); setSync("syncing"); setRev((r) => r + 1); setTimeout(() => setSync("synced"), 700); }
    function manualRefresh() { setSync("syncing"); window.HelmData.refresh().then(() => { setRev((r) => r + 1); setSync("synced"); }); }

    function changeTab(k) { const t = TABS.find((x) => x.key === k); if (t && !t.soon) setTab(k); }
    function screen() {
      if (tab === "settings") return React.createElement(window.Settings, { themePref: themePref, setThemePref: setThemePref });
      if (tab === "detail") return React.createElement(window.Detail, { key: "dt" + rev, onEdit: openEdit });
      if (tab === "cashflow") return React.createElement(window.Cashflow, { key: "cf" + rev, onChanged: function () { setRev(function (r) { return r + 1; }); } });
      if (tab === "goals") return React.createElement(window.Goals, { key: "gl" + rev, onChanged: function () { setRev(function (r) { return r + 1; }); } });
      if (tab === "tools") return React.createElement(window.Tools, { key: "tl" + rev, onOpenFx: function () { setFxOpen(true); } });
      return React.createElement(window.Overview, { key: "ov" + rev });
    }

    return (
      <div className="helm-root">
        {!unlocked && <window.Lock onUnlock={() => { setUnlocked(true); setRev((r) => r + 1); }} />}

        {/* ---- 手機 ---- */}
        {unlocked && !isDesktop && (
          <div className="mobile-shell">
            <header className="app-header">
              <div className="app-header__brand"><HelmMark size={20} /><span className="app-header__word">Helm</span></div>
              <div className="app-header__right">
                <IconButton icon="ph-gear-six" label="設定" onClick={() => setTab("settings")} />
                <SyncBadge state={sync} time="剛剛" onRetry={manualRefresh} />
              </div>
            </header>
            <div className="app-scroll">{screen()}</div>
            <div className="app-fab"><IconButton icon="ph-plus" variant="fab" label="新增項目" onClick={openNew} /></div>
            <div className="app-tabbar"><TabBar items={TABS} active={tab} onChange={changeTab} /></div>
          </div>
        )}

        {/* ---- 桌面:側邊欄 + 主內容 ---- */}
        {unlocked && isDesktop && (
          <div className="desktop-shell">
            <nav className="helm-sidebar">
              <div className="helm-sidebar__brand">
                <span className="helm-sidebar__brand-mark"><HelmMark size={26} /></span>
                <span className="helm-sidebar__brand-name">Helm</span>
              </div>
              <div className="helm-sidebar__add">
                <Button variant="primary" block iconLeft="ph-plus" onClick={openNew}>新增項目</Button>
              </div>
              {TABS.map((t) => (
                <button key={t.key} type="button"
                  className={"helm-navitem" + (t.soon ? " helm-navitem--soon" : "")}
                  aria-current={tab === t.key ? "page" : undefined}
                  onClick={() => !t.soon && setTab(t.key)}>
                  <i className={"ph " + t.icon} aria-hidden="true" />{t.label}
                  {t.soon && <span className="helm-navitem__soon">即將推出</span>}
                </button>
              ))}
              <button type="button" className="helm-navitem"
                aria-current={tab === "settings" ? "page" : undefined}
                onClick={() => setTab("settings")}>
                <i className="ph ph-gear-six" aria-hidden="true" />設定
              </button>
              <div className="helm-sidebar__foot"><SyncBadge state={sync} time="剛剛" onRetry={manualRefresh} /></div>
            </nav>
            <main className="app-main"><div className="app-main__inner">{screen()}</div></main>
          </div>
        )}

        {sheet && (
          <window.AddEditSheet item={sheet.item} onClose={closeSheet} onSaved={afterWrite} onDeleted={afterWrite} />
        )}
        {fxOpen && (
          <window.FxScreen key={"fx" + rev} onClose={function () { setFxOpen(false); }} onChanged={function () { setRev(function (r) { return r + 1; }); }} />
        )}
        {toast && (<ToastViewport><Toast tone={toast.tone}>{toast.msg}</Toast></ToastViewport>)}
      </div>
    );
  }

  window.HelmApp = App;
})();