// VMAX POS app — PIN sign-in (multi-user), identity session (active user + idle/stale),
// chrome, routing between order + queue, Tweaks dock. Landscape touchscreen.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { SegmentedControl } = DS;
  const { Icon, NetBadge } = window.VMAXUI;
  const { Avatar, PinDialog, Toaster, pushToast, NotifBadge } = window.VMAXW;
  const { useVMAX, notifications } = window.VMAXStore;
  const { OrderSurface } = window.VMAXORDER;
  const { MakerQueueSurface } = window.VMAXQUEUE;
  const { RequestStockSheet, CashierClose } = window.VMAXEXTRA;
  const { TweakDock } = window.VMAXTWEAKS;
  const IDLE_MS = 180000;
  const SURFACE_LABEL = { pos: 'Point of sale', queue: 'Order queue' };

  function surfacesFor(p) {
    if (!p) return ['pos'];
    const r = p.roles, out = [];
    if (r.includes('cashier') || r.includes('owner') || r.includes('manager')) out.push('pos');
    if (r.includes('maker') || r.includes('owner') || r.includes('manager')) out.push('queue');
    return out.length ? out : ['pos'];
  }

  function useIdentity() {
    const [s, a] = useVMAX();
    const [signedIds, setSignedIds] = React.useState([]);
    const [activeId, setActiveId] = React.useState(null);
    const [stale, setStale] = React.useState(false);
    const lastRef = React.useRef(Date.now());
    const people = s.people;
    const signedIn = signedIds.map((id) => people.find((p) => p.id === id)).filter(Boolean);
    const active = people.find((p) => p.id === activeId) || signedIn[0] || null;
    React.useEffect(() => { const t = setInterval(() => { if (Date.now() - lastRef.current > IDLE_MS) setStale(true); }, 5000); return () => clearInterval(t); }, []);
    const markFresh = () => { lastRef.current = Date.now(); setStale(false); };
    return {
      signedIn, active, stale, people,
      verify: (id, pin) => a.verifyPin(id, pin),
      markFresh,
      signIn: (p) => { setSignedIds((ids) => (ids.includes(p.id) ? ids : [...ids, p.id])); setActiveId(p.id); markFresh(); },
      setActive: (p) => { setActiveId(p.id); markFresh(); },
      signOut: (id) => { setSignedIds((ids) => ids.filter((x) => x !== id)); if (activeId === id) setActiveId(null); },
      signOutAll: () => { setSignedIds([]); setActiveId(null); },
      simulateIdle: () => { lastRef.current = Date.now() - IDLE_MS - 1; setStale(true); pushToast('Till marked idle — next print will re-verify', 'warn'); },
    };
  }

  // ---------- Sign in (PIN) ----------
  function SignIn({ session }) {
    const [s, a] = useVMAX();
    const [pinFor, setPinFor] = React.useState(null);
    const roster = s.people.filter((p) => p.roles.some((r) => ['cashier', 'maker', 'owner', 'manager'].includes(r)));
    const setMode = pinFor && (pinFor.pin == null || pinFor.resetPending);
    return (
      <div style={{ height: '100%', display: 'grid', placeItems: 'center', background: 'var(--vmax-paper)' }}>
        <div style={{ width: 'min(680px,92vw)', 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: 26, lineHeight: 1, textAlign: 'left' }}>VMAX 365<small style={{ display: 'block', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 10, letterSpacing: '.22em', color: 'var(--vmax-ink-soft)', marginTop: 4 }}>POINT OF SALE</small></div>
          </div>
          <p style={{ color: 'var(--vmax-ink-soft)', fontSize: 14.5, marginBottom: 10 }}>Heritage Community Park · enter your PIN to start a shift</p>
          <p style={{ color: 'var(--vmax-ink-soft)', fontSize: 12, marginBottom: 24, opacity: .85 }}>Demo PINs — Clara 1111 · Joseph 2222 · Maria 3333 · Owner 2468 · Bright sets a new one. Or open Tweaks (⚙ lower-right) to jump in.</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))', gap: 14, maxWidth: 620, margin: '0 auto' }}>
            {roster.map((p) => (
              <button key={p.id} onClick={() => setPinFor(p)} style={{ background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-xl)', padding: '22px 14px', cursor: 'pointer', transition: '.16s' }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lift)'; e.currentTarget.style.borderColor = 'transparent'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--vmax-line)'; }}>
                <Avatar name={p.name} size={50} style={{ margin: '0 auto 12px' }} />
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16 }}>{p.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)', marginTop: 4, textTransform: 'capitalize' }}>{p.roles.join(' + ')}</div>
                {(p.pin == null || p.resetPending) && <div style={{ marginTop: 8, fontSize: 10.5, fontWeight: 700, color: 'var(--vmax-amber-deep)', background: 'var(--vmax-warn-tint)', padding: '3px 9px', borderRadius: 999, display: 'inline-block' }}>{p.resetPending ? 'reset — set new PIN' : 'set PIN'}</div>}
              </button>
            ))}
          </div>
        </div>
        <PinDialog person={pinFor} mode={setMode ? 'set' : 'verify'} title={pinFor && (setMode ? 'Set ' + pinFor.name + "'s PIN" : pinFor.name)} sub={setMode ? 'Choose a 4-digit PIN — it stays yours' : 'Enter your 4-digit PIN'}
          verify={(pin) => session.verify(pinFor.id, pin)} onClose={() => setPinFor(null)}
          onSuccess={(pin) => { if (setMode) a.setPin(pinFor.id, pin); const p = { ...pinFor, pin }; session.signIn(p); pushToast('Signed in · ' + pinFor.name.split(' ')[0]); setPinFor(null); }} />
      </div>
    );
  }

  // ---------- Chrome user cluster ----------
  function UserCluster({ session }) {
    const [open, setOpen] = React.useState(false);
    const [addOpen, setAddOpen] = React.useState(false);
    const [switchTo, setSwitchTo] = React.useState(null);
    const [reqOpen, setReqOpen] = React.useState(false);
    const [cashOpen, setCashOpen] = React.useState(false);
    const [s] = useVMAX();
    const active = session.active;
    const others = s.people.filter((p) => p.roles.some((r) => ['cashier', 'maker', 'owner', 'manager'].includes(r)) && p.pin && !session.signedIn.find((x) => x.id === p.id));
    return (
      <div style={{ position: 'relative' }}>
        <button onClick={() => setOpen((o) => !o)} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 10px 6px 8px', borderRadius: 999, border: '1.5px solid ' + (session.stale ? 'var(--vmax-warn)' : 'var(--vmax-line)'), background: 'var(--surface-card)', cursor: 'pointer' }}>
          <span style={{ position: 'relative' }}><Avatar name={active ? active.name : '?'} size={30} />{session.stale && <span style={{ position: 'absolute', right: -2, top: -2, width: 11, height: 11, borderRadius: '50%', background: 'var(--vmax-amber)', border: '2px solid var(--surface-card)' }} />}</span>
          <span style={{ textAlign: 'left' }}><span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, lineHeight: 1.1 }}>{active ? active.name : 'Signed out'}</span><span style={{ fontSize: 11, color: session.stale ? 'var(--vmax-amber-deep)' : 'var(--vmax-ink-soft)' }}>{session.stale ? 'idle — verify at print' : (active && active.roles[0])}</span></span>
          <Icon name="chevD" size={15} color="var(--vmax-ink-soft)" />
        </button>
        {open && (
          <React.Fragment>
            <div onClick={() => setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 79 }} />
            <div style={{ position: 'absolute', right: 0, top: 'calc(100% + 8px)', width: 250, background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-pop)', padding: 8, zIndex: 80 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--vmax-ink-soft)', padding: '6px 10px' }}>Signed in ({session.signedIn.length})</div>
              {session.signedIn.map((p) => { const isA = active && p.id === active.id; return (
                <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 'var(--radius-md)', background: isA ? 'var(--vmax-mint)' : 'transparent' }}>
                  <Avatar name={p.name} size={28} tone={isA ? 'mint' : 'ground'} />
                  <button onClick={() => { if (!isA) setSwitchTo(p); setOpen(false); }} style={{ flex: 1, border: 'none', background: 'transparent', textAlign: 'left', cursor: isA ? 'default' : 'pointer' }}><span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>{p.name}{isA && <span style={{ fontSize: 10, color: 'var(--vmax-red-deep)', marginLeft: 6 }}>· active</span>}</span><span style={{ fontSize: 11, color: 'var(--vmax-ink-soft)' }}>{isA ? 'on the till' : 'tap to take over'}</span></button>
                  <button onClick={() => session.signOut(p.id)} title="Sign out" style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--vmax-ink-soft)' }}><Icon name="logout" size={16} /></button>
                </div>
              ); })}
              <div style={{ borderTop: '1px solid var(--vmax-line)', marginTop: 6, paddingTop: 6, display: 'flex', flexDirection: 'column', gap: 2 }}>
                <button onClick={() => { setReqOpen(true); setOpen(false); }} style={menuRow}><Icon name="swap" size={17} />Request stock</button>
                <button onClick={() => { setAddOpen(true); setOpen(false); }} style={menuRow}><Icon name="userplus" size={17} />Add another user</button>
                <button onClick={() => { session.signOutAll(); setOpen(false); }} style={{ ...menuRow, color: 'var(--vmax-ink-soft)' }}><Icon name="logout" size={17} />Sign out everyone</button>
              </div>
              <div style={{ borderTop: '1px solid var(--vmax-line)', marginTop: 6, paddingTop: 6 }}>
                <button onClick={() => { setCashOpen(true); setOpen(false); }} style={menuRow}><Icon name="register" size={17} />Cash up · daily close</button>
              </div>
            </div>
          </React.Fragment>
        )}
        {/* switch active (PIN) */}
        <PinDialog person={switchTo} title={switchTo && ('Switch to ' + switchTo.name)} sub="Confirm your PIN to take over the till" verify={(pin) => session.verify(switchTo.id, pin)} onClose={() => setSwitchTo(null)} onSuccess={() => { session.setActive(switchTo); pushToast('Active user · ' + switchTo.name.split(' ')[0]); setSwitchTo(null); }} />
        {/* add another (name -> PIN) */}
        {addOpen && <AddUserFlow session={session} others={others} onClose={() => setAddOpen(false)} />}
        <RequestStockSheet open={reqOpen} onClose={() => setReqOpen(false)} who={active ? active.name : ''} />
        <CashierClose open={cashOpen} onClose={() => setCashOpen(false)} who={active ? active.name : ''} />
      </div>
    );
  }
  const menuRow = { width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: '9px 10px', border: 'none', background: 'transparent', cursor: 'pointer', borderRadius: 'var(--radius-md)', color: 'var(--vmax-ink)', fontWeight: 600, fontSize: 13, fontFamily: 'var(--font-body)' };

  function AddUserFlow({ session, others, onClose }) {
    const [pinFor, setPinFor] = React.useState(null);
    const { Sheet } = window.VMAXUI;
    if (pinFor) return <PinDialog person={pinFor} title={pinFor.name} sub="Enter PIN to sign in alongside" verify={(pin) => session.verify(pinFor.id, pin)} onClose={onClose} onSuccess={() => { session.signIn(pinFor); pushToast(pinFor.name.split(' ')[0] + ' signed in'); onClose(); }} />;
    return (
      <Sheet open onClose={onClose} width={360}>
        <div style={{ padding: '22px 20px 24px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, textAlign: 'center', marginBottom: 14 }}>Add another user</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            {others.map((p) => <button key={p.id} onClick={() => setPinFor(p)} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 'var(--radius-md)', cursor: 'pointer', textAlign: 'left' }}><Avatar name={p.name} size={32} /><span style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{p.name}</span><Icon name="lock" size={15} color="var(--vmax-ink-soft)" /></button>)}
            {others.length === 0 && <div style={{ textAlign: 'center', color: 'var(--vmax-ink-soft)', fontSize: 13, padding: 12 }}>Everyone's already signed in.</div>}
          </div>
        </div>
      </Sheet>
    );
  }

  function App() {
    const [s, a] = useVMAX();
    const session = useIdentity();
    const notif = notifications(s);
    const surfaces = surfacesFor(session.active);
    const [surface, setSurface] = React.useState('pos');
    React.useEffect(() => { if (!surfaces.includes(surface)) setSurface(surfaces[0]); }, [surfaces.join()]);
    const pick = (id) => s.people.find((p) => p.id === id);
    const roleJump = [
      pick('u_clara') && { label: 'Cashier', person: pick('u_clara') },
      pick('u_joseph') && { label: 'Maker', person: pick('u_joseph') },
      pick('u_owner') && { label: 'Owner', person: pick('u_owner') },
    ].filter(Boolean);

    const dock = <TweakDock app="pos" roles={roleJump} onJump={(p) => session.signIn(p)} onSimulateIdle={session.active ? session.simulateIdle : null} />;

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

    return (
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--vmax-paper)' }}>
        <header style={{ display: 'flex', alignItems: 'center', gap: 18, padding: '12px 24px', borderBottom: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', flex: 'none' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--vmax-red)', display: 'grid', placeItems: 'center', boxShadow: '0 6px 16px rgba(226,36,27,.28)' }}><img src="../../assets/panda-mark.svg" width="24" height="24" alt="" /></div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, 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 }}>POINT OF SALE</small></div>
          </div>
          {surfaces.length > 1 && <div style={{ position: 'relative', width: 300, marginLeft: 12 }}><SegmentedControl options={surfaces.map((x) => ({ value: x, label: SURFACE_LABEL[x] }))} value={surface} onChange={setSurface} />{surfaces.includes('queue') && surface !== 'queue' && notif.unclaimed > 0 && <NotifBadge count={notif.unclaimed} style={{ top: -7, right: -7 }} />}</div>}
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
            <NetBadge value={s.tweaks.net} onChange={(v) => a.setTweak('net', v)} />
            <UserCluster session={session} />
          </div>
        </header>
        <div style={{ flex: 1, minHeight: 0 }}>
          {surface === 'pos' && <OrderSurface session={session} />}
          {surface === 'queue' && <MakerQueueSurface session={session} />}
        </div>
        <Toaster />
        {dock}
      </div>
    );
  }

  window.VMAXPosApp = App;
})();