// VMAX Store Manager app — PIN sign-in, responsive shell (bottom tabs / side rail),
// nav + routing across all back-office views, the day banner, Tweaks dock.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { Icon, Sheet, Overline, NetBadge, useViewport } = window.VMAXUI;
  const { Avatar, PinDialog, Toaster, pushToast, NotifBadge } = window.VMAXW;
  const { useVMAX, notifications } = window.VMAXStore;
  const { Dashboard, Inventory, Transfers, Recipes } = window.VMAXMGR1;
  const { Receiving, Counts } = window.VMAXMGR2;
  const { Catalogue, People } = window.VMAXMGR3;
  const { DailyClose, Reports, TheDay } = window.VMAXCLOSE;
  const { Onboarding } = window.VMAXONBOARD;
  const { Settings } = window.VMAXSETTINGS;
  const { Shifts } = window.VMAXSHIFTS;
  const { ReportsPage } = window.VMAXREPORTS;
  const { TweakDock } = window.VMAXTWEAKS;

  const NAV = [
    { key: 'setup', label: 'Setup', icon: 'home', group: 'Setup' },
    { key: 'dash', label: 'Dashboard', icon: 'dash', group: 'Today', primary: true },
    { key: 'close', label: 'Daily close', icon: 'register', group: 'Today', primary: true },
    { key: 'reports', label: 'Reports', icon: 'chart', group: 'Today' },
    { key: 'variance', label: 'Variance', icon: 'alert', group: 'Today' },
    { key: 'shifts', label: 'Shifts', icon: 'clock', group: 'Today' },
    { key: 'inv', label: 'Inventory', icon: 'box', group: 'Stock', primary: true },
    { key: 'transfers', label: 'Transfers', icon: 'swap', group: 'Stock' },
    { key: 'receiving', label: 'Receiving', icon: 'truck', group: 'Stock' },
    { key: 'counts', label: 'Counts', icon: 'clipboard', group: 'Stock' },
    { key: 'recipes', label: 'Recipes', icon: 'recipe', group: 'Catalogue' },
    { key: 'catalogue', label: 'Catalogue', icon: 'edit', group: 'Catalogue' },
    { key: 'people', label: 'People', icon: 'members', group: 'Catalogue' },
    { key: 'settings', label: 'Settings', icon: 'settings', group: 'Setup' },
  ];
  const GROUPS = ['Today', 'Stock', 'Catalogue', 'Setup'];

  function ViewBody({ view, who, mobile, go }) {
    switch (view) {
      case 'setup': return <Onboarding mobile={mobile} go={go} />;
      case 'dash': return <Dashboard mobile={mobile} go={go} />;
      case 'inv': return <Inventory mobile={mobile} who={who} />;
      case 'transfers': return <Transfers mobile={mobile} who={who} />;
      case 'receiving': return <Receiving mobile={mobile} who={who} />;
      case 'counts': return <Counts mobile={mobile} who={who} />;
      case 'recipes': return <Recipes mobile={mobile} who={who} />;
      case 'close': return <DailyClose mobile={mobile} who={who} />;
      case 'reports': return <ReportsPage mobile={mobile} />;
      case 'variance': return <Reports mobile={mobile} />;
      case 'shifts': return <Shifts mobile={mobile} who={who} />;
      case 'catalogue': return <Catalogue mobile={mobile} who={who} />;
      case 'people': return <People mobile={mobile} who={who} />;
      case 'settings': return <Settings mobile={mobile} who={who} />;
      default: return null;
    }
  }

  function SignIn({ onPick, session }) {
    const [s] = useVMAX();
    const [pinFor, setPinFor] = React.useState(null);
    const roster = s.people.filter((p) => p.roles.includes('manager') || p.roles.includes('owner'));
    return (
      <div style={{ minHeight: '100%', display: 'grid', placeItems: 'center', padding: 24, background: 'var(--vmax-paper)' }}>
        <div style={{ width: 'min(420px,100%)', textAlign: 'center' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 13, marginBottom: 8 }}>
            <div style={{ width: 52, height: 52, borderRadius: 16, background: 'var(--vmax-red)', display: 'grid', placeItems: 'center', boxShadow: '0 6px 16px rgba(226,36,27,.28)' }}><img src="../../assets/panda-mark.svg" width="34" height="34" alt="" /></div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, lineHeight: 1, textAlign: 'left' }}>VMAX 365<small style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 9.5, letterSpacing: '.2em', color: 'var(--vmax-ink-soft)', marginTop: 4 }}>STORE MANAGER</small></div>
          </div>
          <p style={{ color: 'var(--vmax-ink-soft)', fontSize: 14, marginBottom: 8 }}>Enter your PIN to open the back office</p>
          <p style={{ color: 'var(--vmax-ink-soft)', fontSize: 12, marginBottom: 22, opacity: .85 }}>Demo PINs — Manager (Daniel) 1357 · Owner 2468. Or open Tweaks (⚙ lower-right) to jump in.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {roster.map((r) => (
              <button key={r.id} onClick={() => setPinFor(r)} style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-xl)', padding: 16, cursor: 'pointer', textAlign: 'left' }}>
                <Avatar name={r.name} size={46} tone={r.root ? 'red' : 'mint'} />
                <div style={{ flex: 1 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, textTransform: 'capitalize' }}>{r.roles[0]} · {r.name}</div><div style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', marginTop: 2 }}>{r.roles.includes('owner') ? 'Everything, all variance' : 'Stock, recipes, the close'}</div></div>
                <Icon name="lock" size={17} color="var(--vmax-ink-soft)" />
              </button>
            ))}
          </div>
        </div>
        <PinDialog person={pinFor} title={pinFor && pinFor.name} sub="Enter your 4-digit PIN" verify={(pin) => session.verify(pinFor.id, pin)} onClose={() => setPinFor(null)} onSuccess={() => { onPick(pinFor); pushToast('Signed in · ' + pinFor.name.split(' ')[0]); setPinFor(null); }} />
      </div>
    );
  }

  function App() {
    const [s, a] = useVMAX();
    const { mobile } = useViewport();
    const notif = notifications(s);
    const navCount = (k) => (k === 'inv' ? notif.front : k === 'transfers' ? notif.pendingReq : 0);
    const [active, setActive] = React.useState(null);
    const [switchTo, setSwitchTo] = React.useState(null);
    const session = { verify: (id, pin) => a.verifyPin(id, pin) };
    const [view, setView] = React.useState(s.mode === 'firstrun' ? 'setup' : 'dash');
    const [moreOpen, setMoreOpen] = React.useState(false);
    const cur = NAV.find((n) => n.key === view) || NAV[1];
    const go = (k) => { setView(k); setMoreOpen(false); };
    const who = active ? active.name : '—';
    const pick = (id) => s.people.find((p) => p.id === id);
    const roleJump = [pick('u_mgr') && { label: 'Manager', person: pick('u_mgr') }, pick('u_owner') && { label: 'Owner', person: pick('u_owner') }].filter(Boolean);
    const dock = <TweakDock app="manager" roles={roleJump} onJump={(p) => { setActive(p); }} />;

    if (!active) return <React.Fragment><SignIn onPick={setActive} session={session} /><Toaster />{dock}</React.Fragment>;

    const others = s.people.filter((p) => (p.roles.includes('manager') || p.roles.includes('owner')) && p.id !== active.id && p.pin);
    const Header = () => (
      <header style={{ display: 'flex', alignItems: 'center', gap: 14, padding: mobile ? '12px 16px' : '12px 24px', borderBottom: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', flex: 'none' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 11, background: 'var(--vmax-red)', display: 'grid', placeItems: 'center', boxShadow: '0 6px 16px rgba(226,36,27,.28)' }}><img src="../../assets/panda-mark.svg" width="22" height="22" alt="" /></div>
          {!mobile && <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, lineHeight: 1 }}>VMAX 365<small style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 8, letterSpacing: '.2em', color: 'var(--vmax-ink-soft)', marginTop: 2 }}>STORE MANAGER</small></div>}
          {mobile && <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>{cur.label}</div>}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
          <NetBadge compact={mobile} value={s.tweaks.net} onChange={(v) => a.setTweak('net', v)} />
          <button onClick={() => setMoreOpen(true)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', padding: 0 }}><Avatar name={active.name} size={34} tone={active.root ? 'red' : 'mint'} /></button>
        </div>
      </header>
    );

    const showDay = view === 'dash' || view === 'close';
    const userSheet = (
      <Sheet open={moreOpen} onClose={() => setMoreOpen(false)} width={360}>
        <div style={{ padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingBottom: 14, borderBottom: '1px solid var(--vmax-line)', marginBottom: 10 }}>
            <Avatar name={active.name} size={40} tone={active.root ? 'red' : 'mint'} />
            <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700 }}>{active.name}</div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', textTransform: 'capitalize' }}>{active.roles[0]}</div></div>
          </div>
          {mobile && <React.Fragment><Overline style={{ marginBottom: 6 }}>Sections</Overline>{NAV.filter((n) => !n.primary).map((n) => <Row key={n.key} icon={n.icon} label={n.label} active={view === n.key} badge={navCount(n.key)} onClick={() => go(n.key)} />)}<div style={{ height: 8 }} /></React.Fragment>}
          <Overline style={{ marginBottom: 6 }}>Switch user</Overline>
          {others.map((r) => <Row key={r.id} avatar={r.name} label={(r.roles[0] === 'owner' ? 'Owner' : 'Manager') + ' · ' + r.name} onClick={() => { setMoreOpen(false); setSwitchTo(r); }} />)}
          <div style={{ borderTop: '1px solid var(--vmax-line)', marginTop: 8, paddingTop: 8 }}><Row icon="logout" label="Sign out" onClick={() => { setActive(null); setMoreOpen(false); }} /></div>
        </div>
      </Sheet>
    );

    const main = (
      <React.Fragment>
        {showDay && <TheDay mobile={mobile} />}
        <ViewBody view={view} who={who} mobile={mobile} go={go} />
      </React.Fragment>
    );

    if (mobile) {
      return (
        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', background: 'var(--vmax-paper)' }}>
          {Header()}
          <main style={{ flex: 1, padding: '16px 16px 92px' }}>
            <p style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', margin: '0 0 14px' }}>{s.day.date} · Heritage Park</p>
            {main}
          </main>
          <nav style={{ position: 'fixed', left: 0, right: 0, bottom: 0, display: 'flex', background: 'var(--surface-card)', borderTop: '1.5px solid var(--vmax-line)', padding: '6px 4px 8px', zIndex: 40 }}>
            {NAV.filter((n) => n.primary).map((n) => <Tab key={n.key} icon={n.icon} label={n.label} active={view === n.key} badge={navCount(n.key)} onClick={() => go(n.key)} />)}
            <Tab icon="dots" label="More" active={moreOpen || !cur.primary} badge={notif.pendingReq} onClick={() => setMoreOpen(true)} />
          </nav>
          {userSheet}
          <Toaster />{dock}
          <SwitchDialog switchTo={switchTo} session={session} onClose={() => setSwitchTo(null)} onDone={(p) => { setActive(p); setSwitchTo(null); }} />
        </div>
      );
    }
    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', background: 'var(--vmax-paper)' }}>
        {Header()}
        <div style={{ display: 'grid', gridTemplateColumns: '236px 1fr', flex: 1, minHeight: 0 }}>
          <aside style={{ background: 'var(--surface-card)', borderRight: '1.5px solid var(--vmax-line)', padding: '16px 14px', overflowY: 'auto' }}>
            {GROUPS.map((g) => (
              <div key={g} style={{ marginBottom: 14 }}>
                <Overline style={{ margin: '4px 10px 8px' }}>{g}</Overline>
                <nav style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  {NAV.filter((n) => n.group === g).map((n) => { const on = view === n.key; return (
                    <button key={n.key} onClick={() => setView(n.key)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', border: 'none', cursor: 'pointer', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, background: on ? 'var(--vmax-mint)' : 'transparent', color: on ? 'var(--vmax-ink)' : 'var(--vmax-ink-soft)' }}><Icon name={n.icon} size={19} color={on ? 'var(--vmax-red-deep)' : 'var(--vmax-ink-soft)'} />{n.label}{navCount(n.key) > 0 && <span style={{ marginLeft: 'auto', minWidth: 18, height: 18, padding: '0 5px', borderRadius: 999, background: 'var(--vmax-red)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, display: 'grid', placeItems: 'center' }}>{navCount(n.key)}</span>}</button>
                  ); })}
                </nav>
              </div>
            ))}
          </aside>
          <main style={{ overflowY: 'auto', padding: '24px 32px 48px' }}>
            <header style={{ marginBottom: 20 }}><h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, lineHeight: 1 }}>{cur.label}</h1><p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', marginTop: 6 }}>{s.day.date} · Heritage Community Park</p></header>
            {main}
          </main>
        </div>
        {userSheet}
        <Toaster />{dock}
        <SwitchDialog switchTo={switchTo} session={session} onClose={() => setSwitchTo(null)} onDone={(p) => { setActive(p); setSwitchTo(null); }} />
      </div>
    );
  }

  function SwitchDialog({ switchTo, session, onClose, onDone }) {
    return <PinDialog person={switchTo} title={switchTo && ('Switch to ' + switchTo.name)} sub="Confirm PIN to switch user" verify={(pin) => session.verify(switchTo.id, pin)} onClose={onClose} onSuccess={() => { onDone(switchTo); pushToast('Switched · ' + switchTo.name.split(' ')[0]); }} />;
  }
  function Tab({ icon, label, active, onClick, badge }) {
    return (
      <button onClick={onClick} style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, padding: '6px 2px', border: 'none', background: 'transparent', cursor: 'pointer', color: active ? 'var(--vmax-red-deep)' : 'var(--vmax-ink-soft)' }}>
        <span style={{ position: 'relative' }}><Icon name={icon} size={22} color={active ? 'var(--vmax-red-deep)' : 'var(--vmax-ink-soft)'} />{badge > 0 && <NotifBadge count={badge} style={{ top: -6, right: -10 }} />}</span>
        <span style={{ fontSize: 10.5, fontWeight: 600 }}>{label}</span>
      </button>
    );
  }
  function Row({ icon, avatar, label, active, onClick, badge }) {
    return (
      <button onClick={onClick} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '11px 10px', border: 'none', background: active ? 'var(--vmax-mint)' : 'transparent', cursor: 'pointer', borderRadius: 'var(--radius-md)', textAlign: 'left' }}>
        {icon && <Icon name={icon} size={19} color={active ? 'var(--vmax-red-deep)' : 'var(--vmax-ink-soft)'} />}
        {avatar && <Avatar name={avatar} size={28} tone="ground" />}
        <span style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{label}</span>
        {badge > 0 && <span style={{ minWidth: 18, height: 18, padding: '0 5px', borderRadius: 999, background: 'var(--vmax-red)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, display: 'grid', placeItems: 'center' }}>{badge}</span>}
      </button>
    );
  }

  window.VMAXMgrApp = App;
})();