// MobileNav.jsx — phone bottom tab bar + "More" sheet. Visible only <1100px
// (CSS-gated in responsive.css). Registered on window; rendered by PageShell.
// Mirrors Sidebar.jsx's item list and respects the Settings → sidebar order pref.
const MobileNav = ({ active = 'shipments' }) => {
  const [, , t] = useLang();
  const [prefs] = usePrefs();
  const [moreOpen, setMoreOpen] = React.useState(false);
  const [settingsOpen, setSettingsOpen] = React.useState(false);

  // Keep in sync with Sidebar.jsx itemsRaw (no-modules MPA — intentionally duplicated).
  const itemsRaw = [
    { id: 'dash',      key: 'nav.dashboard', icon: 'chart',  href: 'index.html' },
    { id: 'shipments', key: 'nav.shipments', icon: 'ship',   href: 'Cases.html' },
    { id: 'stock',     key: 'nav.stock',     icon: 'boxes',  href: 'Stock List.html' },
    { id: 'customs',   key: 'nav.customs',   icon: 'customs',href: 'Customs.html' },
    { id: 'docs',      key: 'nav.docs',      icon: 'file',   href: 'Delivery Notes.html' },
    { id: 'invoices',  key: 'nav.invoices',  icon: 'inbox',  href: 'Invoices.html' },
    { id: 'vat',       key: 'nav.vat',       icon: 'file',   href: 'VAT Exemption.html' },
  ];
  const order = effectiveSidebarOrder(prefs, itemsRaw.map(i => i.id));
  const byId = Object.fromEntries(itemsRaw.map(i => [i.id, i]));
  const ordered = order.map(id => byId[id]).filter(Boolean);
  const primary = ordered.slice(0, 4);
  const rest = ordered.slice(4);

  const openSettings = (e) => { e.preventDefault(); setMoreOpen(false); setSettingsOpen(true); };

  return (
    <>
      <nav className="mnav" aria-label={t('mnav.menu')}>
        {primary.map(it => (
          <a key={it.id} href={it.href}
             className={`mnav-item${active === it.id ? ' active' : ''}`}>
            <Icon name={it.icon} size={18} />
            <span>{t(it.key)}</span>
          </a>
        ))}
        <button type="button"
                className={`mnav-item mnav-more${moreOpen ? ' active' : ''}`}
                aria-expanded={moreOpen}
                onClick={() => setMoreOpen(v => !v)}>
          <Icon name="grip" size={18} />
          <span>{t('mnav.more')}</span>
        </button>
      </nav>

      {moreOpen ? (
        <div className="mnav-sheet-mask" onClick={() => setMoreOpen(false)}>
          <div className="mnav-sheet" role="dialog" aria-modal="true"
               aria-label={t('mnav.more')} onClick={e => e.stopPropagation()}>
            <div className="mnav-sheet-grip" aria-hidden="true" />
            {rest.map(it => (
              <a key={it.id} href={it.href}
                 className={`mnav-sheet-row${active === it.id ? ' active' : ''}`}>
                <Icon name={it.icon} size={16} />
                <span>{t(it.key)}</span>
              </a>
            ))}
            <a href="#" className="mnav-sheet-row" onClick={openSettings}>
              <Icon name="cog" size={16} />
              <span>{t('nav.settings')}</span>
            </a>
            <div className="mnav-sheet-user">
              <span className="avt">JN</span>
              <div><span>Jordan Naka</span><span className="sub">Ocean ops · LAX</span></div>
            </div>
          </div>
        </div>
      ) : null}

      {settingsOpen && window.SettingsModal
        ? <SettingsModal onClose={() => setSettingsOpen(false)} />
        : null}
    </>
  );
};
window.MobileNav = MobileNav;