// VMAX POS — the maker side: shared order queue, one-tap claim (first-tap-wins), mark done.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { SegmentedControl, Button, Badge, TempTag } = DS;
  const { Avatar, EmptyState, PinDialog, pushToast } = window.VMAXW;
  const { useVMAX } = window.VMAXStore;

  function MakerQueueSurface({ session }) {
    const [s, a] = useVMAX();
    const [order, setOrder] = React.useState('new');
    const me = session.active ? session.active.name : 'Maker';
    const [claimFor, setClaimFor] = React.useState(null);
    const doClaim = (o) => { if (s.settings && s.settings.pinForClaim) setClaimFor(o); else { a.claim(o.id, me); pushToast('Claimed #' + o.id); } };
    let q = s.queue.filter((o) => o.status !== 'done');
    const unclaimed = q.filter((o) => !o.maker).length;
    q = order === 'new' ? q : [...q].reverse();
    return (
      <div style={{ height: '100%', overflowY: 'auto', padding: '24px 32px 40px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
          <div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26 }}>Order queue</h1>
            <p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', marginTop: 5 }}>{q.length} active · shared pool · making as <strong style={{ color: 'var(--vmax-ink)' }}>{me}</strong></p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            {unclaimed > 0 && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 13px', borderRadius: 999, background: 'var(--vmax-red)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, boxShadow: 'var(--shadow-red)' }}>{unclaimed} to claim</span>}
            <div style={{ width: 220 }}><SegmentedControl options={[{ value: 'new', label: 'Newest first' }, { value: 'old', label: 'Oldest first' }]} value={order} onChange={setOrder} /></div>
          </div>
        </div>
        {q.length === 0 ? (
          <EmptyState icon="register" title="No orders waiting" text="New orders appear here the moment they're rung up. Tap one to claim it." />
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px,1fr))', gap: 16 }}>
            {q.map((o) => {
              const claimed = !!o.maker;
              const mine = claimed && o.maker === me;
              return (
                <div key={o.id} style={{ background: 'var(--surface-card)', border: '1.5px solid ' + (claimed ? 'var(--vmax-line)' : 'var(--vmax-amber)'), borderRadius: 'var(--radius-lg)', padding: 18, boxShadow: claimed ? 'none' : 'var(--shadow-sm)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>#{o.id}</div>
                    <Badge tone={o.mode === 'Dine-in' ? 'mint' : 'ink'}>{o.mode}</Badge>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
                    {o.lines.map((l, i) => (
                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 14 }}>
                        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--vmax-ink-soft)', minWidth: 18 }}>{l.qty}×</span>
                        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700 }}>{l.name}</span>
                        {l.temp && <TempTag temp={l.temp} />}
                      </div>
                    ))}
                  </div>
                  {claimed ? (
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--vmax-ink-soft)' }}>
                        <Avatar name={o.maker} size={26} />{mine ? 'You' : o.maker}
                      </div>
                      <Button variant="ghost" size="sm" onClick={() => a.markDone(o.id)}>Done</Button>
                    </div>
                  ) : (
                    <Button variant="primary" fullWidth onClick={() => doClaim(o)}>Claim order</Button>
                  )}
                </div>
              );
            })}
          </div>
        )}
        <PinDialog person={claimFor ? session.active : null} title="Confirm to claim" sub={claimFor ? 'Enter your PIN to take #' + claimFor.id : ''} verify={(pin) => session.verify(session.active.id, pin)} onClose={() => setClaimFor(null)} onSuccess={() => { a.claim(claimFor.id, me); pushToast('Claimed #' + claimFor.id); setClaimFor(null); }} />
      </div>
    );
  }

  window.VMAXQUEUE = { MakerQueueSurface };
})();