// MobileChrome — v07zz286 / v07zz288
// Mobile-only app chrome. window.useUiTier() is the shared hook every
// mobile-aware component reads to know if we're on the phone tier ("s").
function useUiTier() {
  const [tier, setTier] = React.useState(() => {
    try { return document.body.getAttribute("data-ui-tier") || ""; } catch (_) { return ""; }
  });
  React.useEffect(() => {
    const fn = () => { try { setTier(document.body.getAttribute("data-ui-tier") || ""); } catch (_) {} };
    window.addEventListener("paradise-ui-scale", fn);
    // body attr is also flipped by the scale script on plain resize, which
    // dispatches paradise-ui-scale — but back it up with a resize listener
    // for the emulated-viewport case.
    window.addEventListener("resize", fn);
    return () => { window.removeEventListener("paradise-ui-scale", fn); window.removeEventListener("resize", fn); };
  }, []);
  return tier;
}
window.useUiTier = useUiTier;

// Fixed bottom tab bar: the five primary destinations. "More" was dropped
// (v07zz288) — the top-left hamburger opens the drawer for everything else.
function MobileTabBar({ view, onNavigate }) {
  const tier = useUiTier();
  // v1090 — follow the left-menu preset (window.navPresets, src/Sidebar.jsx). Hooks first.
  const [, bumpPresets] = React.useReducer(x => x + 1, 0);
  React.useEffect(() => {
    const fn = () => bumpPresets();
    window.addEventListener("filmtracker:navpresets", fn);
    return () => window.removeEventListener("filmtracker:navpresets", fn);
  }, []);
  if (tier !== "s") return null;
  const hasPerm = (k) => !k || (window.hasPerm ? !!window.hasPerm(k) : true);
  const SB = window.SBIcon || {};
  const TABS = [
    { id: "overview",   label: "Overview", icon: "overview" },
    { id: "shots",      label: "Shots",    icon: "shots",      perm: "nav_shots" },
    { id: "characters", label: "Assets",   icon: "characters", perm: "nav_assets" },
    { id: "review",     label: "Review",   icon: "media",      perm: "nav_review" },
    { id: "schedule",   label: "Schedule", icon: "schedule",   perm: "nav_schedule" },
  ].filter(t => hasPerm(t.perm))
    .filter(t => !window.navPresets || window.navPresets.allows(t.id, null, view));
  return (
    <nav className="mtab-bar" role="tablist" aria-label="Primary">
      {TABS.map(t => (
        <button
          key={t.id}
          role="tab"
          aria-selected={view === t.id}
          className={"mtab" + (view === t.id ? " is-active" : "")}
          onClick={() => onNavigate(t.id)}
        >
          <span className="mtab-icon">{SB[t.icon] || null}</span>
          <span className="mtab-label">{t.label}</span>
        </button>
      ))}
    </nav>
  );
}
window.MobileTabBar = MobileTabBar;