window.FB = window.FB || {};
FB.App = function App() {
  const { useState, useEffect } = React;
  const [lang, setLang] = useState(() => localStorage.getItem("fb_lang") || "vi");
  const [user, setUser] = useState(null);
  const [ready, setReady] = useState(false);
  const [tab, setTab] = useState("stock");
  const [menu, setMenu] = useState(false);
  const [staffPages, setStaffPages] = useState(null);
  const [adminNav, setAdminNav] = useState(null);
  // 每页把「精华」(进度/摘要) 发到 header 第二行, 滚到哪都看得见
  const [pageInfo, setPageInfo] = useState(null);
  useEffect(() => { FB.setPageInfo = setPageInfo; return () => { FB.setPageInfo = null; }; }, []);
  const t = FB.makeT(lang);

  // admin 落地页 = 自选导航第 1 个, 所以进入前先把 admin_nav 读回来
  async function homeOf(u) {
    if (u.role !== "admin") return FB.NAV_BOTTOM[u.role][0];
    const nav = await FB.api.adminNav();
    setAdminNav(nav);
    return nav[0] || FB.NAV_BOTTOM.admin[0];
  }
  useEffect(() => {
    FB.api.currentUser().then(async (u) => {
      if (u) { setUser(u); setTab(await homeOf(u)); if (!localStorage.getItem("fb_lang")) setLang(u.defaultLang || "vi"); }
      setReady(true);
    });
  }, []);
  useEffect(() => { localStorage.setItem("fb_lang", lang); }, [lang]);
  useEffect(() => { FB.api.staffPages().then(setStaffPages); }, []);
  // 设置页改了导航 → 马上生效, 不用刷新
  useEffect(() => {
    const onCfg = (e) => { if (Array.isArray(e.detail) && e.detail.length) setAdminNav(e.detail.slice(0, 5)); };
    window.addEventListener("fb-admin-nav", onCfg);
    return () => window.removeEventListener("fb-admin-nav", onCfg);
  }, []);

  async function onLogin(u) { setUser(u); setTab(await homeOf(u)); setLang(u.defaultLang || "vi"); }
  async function logout() { await FB.api.signOut(); setUser(null); setMenu(false); }

  // ── 导航栈: 手机/浏览器 back 键退回上一页, 不再直接跳出 app ──
  // 有弹窗打开时 (菜单) back 先关弹窗
  function go(id) {
    setMenu(false);
    if (id === tab) return;
    setPageInfo(null);
    try { history.pushState({ fbTab: id }, ""); } catch (e) {}
    setTab(id);
  }
  useEffect(() => {
    if (!user) return;
    const home = user.role === "admin"
      ? ((adminNav || FB.NAV_BOTTOM.admin)[0])
      : (FB.NAV_BOTTOM[user.role] || FB.NAV_BOTTOM.staff)[0];
    try { history.replaceState({ fbTab: tab || home }, ""); } catch (e) {}
    const onPop = (e) => {
      if (menu) { setMenu(false); try { history.pushState({ fbTab: tab }, ""); } catch (err) {} return; }
      const s = (e && e.state) || {};
      setPageInfo(null);
      setTab(s.fbTab || home);
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, [user, tab, menu, adminNav]);

  // 页面内跳转 (如驾驶舱「去建单」→ 订货页): window.dispatchEvent(new CustomEvent("fbnav",{detail:"ordering"}))
  useEffect(() => {
    const onNav = (e) => { if (e && e.detail && PAGES[e.detail]) go(e.detail); };
    window.addEventListener("fbnav", onNav);
    return () => window.removeEventListener("fbnav", onNav);
  });

  if (!ready) return <div className="min-h-screen flex items-center justify-center text-stone-300 text-2xl">🍔</div>;
  if (!user) return <FB.Login lang={lang} setLang={setLang} onLogin={onLogin} />;

  const allowed = user.role === "admin" ? null : (staffPages || FB.NAV_BOTTOM.staff);
  const bottom = user.role === "admin"
    ? (adminNav || FB.NAV_BOTTOM.admin).slice(0, 5)
    : (allowed ? allowed.slice(0, 5) : (FB.NAV_BOTTOM[user.role] || FB.NAV_BOTTOM.staff));
  // 没进底部的 admin 页面全部自动进 ☰ (顺序按 ADMIN_PAGES)
  const extra = user.role === "admin"
    ? FB.ADMIN_PAGES.filter((id) => !bottom.includes(id))
    : (allowed || []).slice(5);
  const langs = FB.LANGS[user.role] || ["vi", "zh", "en"];
  const LANG_LABEL = { vi: "VN", zh: "中", en: "EN" };

  const PAGES = {
    dashboard: () => <FB.Dashboard lang={lang} />,
    ordering:  () => <FB.OrderTab lang={lang} user={user} />,
    today:     () => <FB.TodayTab lang={lang} user={user} />,
    baseline:  () => <FB.BaselineTab lang={lang} user={user} />,
    shipping:  () => <FB.ShipTab lang={lang} user={user} />,
    stock:     () => <FB.StockTab lang={lang} user={user} />,
    production:() => <FB.ProductionTab lang={lang} user={user} />,
    task:      () => <FB.TaskTab lang={lang} user={user} />,
    receive:   () => <FB.ReceiveTab lang={lang} user={user} />,
    review:    () => <FB.ReviewTab lang={lang} user={user} />,
    clockin:   () => <FB.ClockTab lang={lang} user={user} />,
    settings:  () => <FB.SettingsTab lang={lang} user={user} />,
    attendance:() => <FB.AttendanceTab lang={lang} user={user} />,
    sop:       () => <FB.SopTab lang={lang} />,
  };

  return (
    <div className="min-h-screen flex flex-col" style={{ background: "#FAFAF9" }}>
      {/* h-16: 精华文字 + 进度条都住 header, 滚到哪都在 */}
      <header className="sticky top-0 z-20 bg-white/90 backdrop-blur border-b border-stone-200/80 px-2 h-16 flex items-center gap-1">
        {/* ☰ 永远显示: 登出键住在菜单里, 之前 extra 为空的员工打不开 → 无法登出 */}
        <button onClick={() => setMenu(true)} aria-label={t("menu")}
          className="w-10 h-10 flex items-center justify-center text-stone-500 active:bg-stone-100 rounded-xl">
          <FB.UI.Icon name="menu" size={19} />
        </button>
        <div className="flex-1 min-w-0">
          <p className="text-[13px] font-semibold text-stone-800 leading-tight truncate">{t(tab)}</p>
          {(() => {
            const info = pageInfo == null ? null : (typeof pageInfo === "string" ? { text: pageInfo } : pageInfo);
            if (!info) return <p className="text-[10px] text-stone-400 leading-tight truncate">{user.name}</p>;
            return (
              <>
                <p className="text-[11.5px] font-semibold leading-tight truncate tabular-nums mt-0.5" style={{ color: "#B91C1C" }}>{info.text}</p>
                {info.den > 0 ? (
                  <div className="h-[3px] rounded-full bg-stone-200 overflow-hidden mt-1" style={{ maxWidth: 190 }}>
                    <i className="block h-full rounded-full transition-all"
                      style={{ width: Math.min(100, ((info.num || 0) / info.den) * 100) + "%", background: info.color || "#B91C1C" }} />
                  </div>
                ) : null}
              </>
            );
          })()}
        </div>
        <div className="flex items-center gap-0.5 bg-stone-100 rounded-full p-0.5">
          {langs.map((l) => (
            <button key={l} onClick={() => setLang(l)}
              className={"text-[11px] px-2.5 py-1 rounded-full transition-colors " + (lang === l ? "bg-white text-stone-800 font-medium shadow-sm" : "text-stone-400")}>
              {LANG_LABEL[l]}
            </button>
          ))}
        </div>
      </header>

      <main className="flex-1">{(PAGES[tab] || PAGES[bottom[0]])()}</main>

      {menu && (
        <div className="fixed inset-0 z-40 flex" onClick={() => setMenu(false)}>
          <div className="absolute inset-0 bg-stone-900/30" />
          <div className="relative bg-white w-64 h-full p-3 shadow-xl" onClick={(e) => e.stopPropagation()}>
            <div className="px-3 py-3 border-b border-stone-100 mb-1">
              <p className="text-[14px] font-medium text-stone-800 leading-tight">{user.name}</p>
              <p className="text-[10px] text-stone-400 leading-tight mt-0.5">{user.role === "admin" ? "Admin" : "Staff"}</p>
            </div>
            {extra.length > 0 && <p className="text-[10px] uppercase tracking-widest text-stone-400 px-2 py-2">{t("menu")}</p>}
            {extra.map((id) => (
              <button key={id} onClick={() => go(id)}
                className={"w-full flex items-center gap-3 px-3 h-12 rounded-xl text-sm active:bg-stone-100 " + (tab === id ? "text-red-700 font-medium bg-red-50" : "text-stone-600")}>
                <span className={tab === id ? "text-red-700" : "text-stone-400"}><FB.UI.Icon name={id} size={17} /></span>{t(id)}
              </button>
            ))}
            <div className="border-t border-stone-100 mt-2 pt-2">
              <button onClick={logout} className="w-full flex items-center gap-3 px-3 h-12 rounded-xl text-sm text-stone-500 active:bg-stone-100">
                <span className="text-stone-300"><FB.UI.Icon name="logout" size={17} /></span>{t("signOut")}
              </button>
            </div>
          </div>
        </div>
      )}

      <nav className="sticky bottom-0 z-20 bg-white/95 backdrop-blur border-t border-stone-200/80 flex pb-safe">
        {bottom.map((id) => {
          const on = tab === id;
          return (
            <button key={id} onClick={() => go(id)}
              className="flex-1 pt-1.5 pb-2 flex flex-col items-center gap-1 transition-colors relative"
              style={{ color: on ? "#B91C1C" : "#A8A29E" }}>
              {/* 当前页顶部小横条 */}
              <span className="absolute top-0 rounded-b" style={{ width: 18, height: 3, background: on ? "#B91C1C" : "transparent" }} />
              <FB.UI.Icon name={id} size={20} />
              <span className={"text-[10px] leading-none " + (on ? "font-semibold" : "")}>{t(id)}</span>
            </button>
          );
        })}
      </nav>
    </div>
  );
};
ReactDOM.createRoot(document.getElementById("root")).render(<FB.App />);