// VMAX POS — the order screen: menu grid, ticket, variant (hot/cold + size) sheet,
// member attach + recall view + new-member enrol, and the low-stock nudge.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { MenuItemCard, CategoryChip, TempSelector, SizeSelector, TempTag, SegmentedControl, QtyStepper, Button, Badge } = DS;
  const { Icon, Cup, Sheet, Overline } = window.VMAXUI;
  const { Avatar, EmptyState, TextInput, Field, pushToast } = window.VMAXW;
  const { K, categories, sizes } = window.VMAXP;
  const { useVMAX, lowStock } = window.VMAXStore;
  const { PaymentSheet, OrdersSheet } = window.VMAXPAY;
  const { RequestStockSheet } = window.VMAXEXTRA;

  const sizeLabel = (s) => ({ reg: 'Regular', lg: 'Large', jumbo: 'Jumbo' }[s] || '');
  const hasVariants = (m) => m.hotcold || m.sizes;

  // ---------- Variant sheet ----------
  function VariantSheet({ item, onClose, onAdd }) {
    const [temp, setTemp] = React.useState('cold');
    const [size, setSize] = React.useState('reg');
    React.useEffect(() => { if (item) { setTemp(item.defaultTemp || 'cold'); setSize('reg'); } }, [item]);
    if (!item) return null;
    const up = (sizes.find((s) => s.value === size) || {}).upcharge || 0;
    const price = item.price + up, member = item.member + up;
    return (
      <Sheet open={!!item} onClose={onClose} width={440}>
        <div style={{ padding: '22px 24px 8px', display: 'flex', gap: 15, alignItems: 'center' }}>
          <div style={{ width: 60, height: 60, borderRadius: 16, background: item.tint, display: 'grid', placeItems: 'center' }}><Cup c1={item.c1} c2={item.c2} /></div>
          <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, lineHeight: 1.1 }}>{item.name}</div></div>
        </div>
        <div style={{ padding: '0 24px 8px' }}>
          {item.hotcold && <React.Fragment><Overline style={{ margin: '10px 0 11px' }}>Served</Overline><TempSelector value={temp} onChange={setTemp} style={{ marginBottom: 22 }} /></React.Fragment>}
          {item.sizes && <React.Fragment><Overline style={{ margin: '6px 0 11px' }}>Size</Overline><SizeSelector options={sizes} value={size} onChange={setSize} /></React.Fragment>}
        </div>
        <div style={{ padding: '18px 24px 24px', display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, flex: 'none' }}>{K(price)}</div>
          <Button variant="primary" fullWidth onClick={() => onAdd({ ...item, temp: item.hotcold ? temp : null, size: item.sizes ? size : null, price, member })}>Add to order</Button>
        </div>
      </Sheet>
    );
  }

  // ---------- Member: search → recall view → attach; or enrol new ----------
  function MemberSheet({ open, onClose }) {
    const [s, a] = useVMAX();
    const [q, setQ] = React.useState('');
    const [view, setView] = React.useState(null); // a member object (recall view)
    const [enrol, setEnrol] = React.useState(false);
    const [form, setForm] = React.useState({ name: '', phone: '' });
    React.useEffect(() => { if (open) { setQ(''); setView(null); setEnrol(false); setForm({ name: '', phone: '' }); } }, [open]);
    const list = s.members.filter((m) => (m.name + m.phone).toLowerCase().includes(q.toLowerCase()));

    if (view) {
      const fav = [...view.history].sort((x, y) => y.times - x.times);
      return (
        <Sheet open={open} onClose={onClose} width={440}>
          <div style={{ padding: '20px 24px 12px', display: 'flex', alignItems: 'center', gap: 13 }}>
            <Avatar name={view.name} size={48} />
            <div style={{ flex: 1 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>{view.name}</div><div style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)' }}>{view.phone} · member since {view.since}</div></div>
            <Badge tone="amber">Member</Badge>
          </div>
          <div style={{ padding: '6px 24px 4px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 13px', borderRadius: 'var(--radius-md)', background: 'var(--vmax-mint)', color: 'var(--vmax-red-deep)', fontSize: 12, fontWeight: 600, marginBottom: 14 }}><Icon name="info" size={15} color="var(--vmax-red-deep)" />Recognition only — ring the order at the counter as usual.</div>
            <Overline style={{ marginBottom: 10 }}>{fav.length ? 'Their usuals' : 'No history yet'}</Overline>
            {fav.length ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7, maxHeight: 240, overflowY: 'auto' }}>
                {fav.map((h, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 12px', borderRadius: 'var(--radius-md)', background: 'var(--surface-ground)' }}>
                    {i === 0 && <Icon name="star" size={16} color="var(--vmax-amber)" />}
                    <div style={{ flex: 1 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{h.name}{h.temp && <span style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', marginLeft: 7 }}>{h.temp}</span>}</div>{h.zh && <div style={{ fontSize: 11, color: 'var(--vmax-ink-soft)' }}>{h.zh}</div>}</div>
                    <span style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>×{h.times}</span>
                  </div>
                ))}
              </div>
            ) : <p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', lineHeight: 1.5 }}>Just joined — nothing here yet. Their next orders will start building their usuals.</p>}
          </div>
          <div style={{ padding: '16px 24px 24px', display: 'flex', gap: 10 }}>
            <Button variant="ghost" onClick={() => setView(null)}>Back</Button>
            <Button variant="primary" fullWidth onClick={() => { a.attachMember(view); pushToast(view.name.split(' ')[0] + ' attached — members pricing on'); onClose(); }}>Attach to order</Button>
          </div>
        </Sheet>
      );
    }

    if (enrol) {
      return (
        <Sheet open={open} onClose={onClose} width={420}>
          <div style={{ padding: '22px 24px 24px' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>New member</div>
            <div style={{ display: 'flex', gap: 16, marginTop: 16, alignItems: 'center' }}>
              <div style={{ width: 104, height: 104, borderRadius: 'var(--radius-lg)', background: 'var(--surface-ground)', border: '1.5px solid var(--vmax-line)', display: 'grid', placeItems: 'center', flex: 'none' }}><Icon name="qr" size={56} color="var(--vmax-ink)" /></div>
              <p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', lineHeight: 1.55 }}>The customer scans this and enters their own details on their phone. For the demo, enter them here:</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16 }}>
              <Field label="Name"><TextInput value={form.name} onChange={(v) => setForm({ ...form, name: v })} placeholder="Full name" autoFocus /></Field>
              <Field label="Phone"><TextInput value={form.phone} onChange={(v) => setForm({ ...form, phone: v })} placeholder="097 000 0000" /></Field>
            </div>
            <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
              <Button variant="ghost" onClick={() => setEnrol(false)}>Back</Button>
              <Button variant="primary" fullWidth disabled={!form.name} onClick={() => { a.enrolMember(form); pushToast(form.name.split(' ')[0] + ' joined — members pricing on'); onClose(); }}>Join &amp; attach</Button>
            </div>
          </div>
        </Sheet>
      );
    }

    return (
      <Sheet open={open} onClose={onClose} width={420}>
        <div style={{ padding: '22px 24px 14px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>Member</div>
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-ground)', borderRadius: 'var(--radius-lg)', padding: '0 14px' }}>
            <Icon name="search" color="var(--vmax-ink-soft)" />
            <input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search name or phone…" style={{ border: 'none', background: 'transparent', padding: '13px 0', fontFamily: 'var(--font-body)', fontSize: 15, width: '100%', outline: 'none', color: 'var(--vmax-ink)' }} />
          </div>
        </div>
        <div style={{ padding: '0 16px 8px', maxHeight: 300, overflowY: 'auto' }}>
          {list.map((m) => (
            <button key={m.id} onClick={() => setView(m)} style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 12, padding: '12px', border: 'none', background: 'transparent', cursor: 'pointer', borderRadius: 'var(--radius-md)', textAlign: 'left' }}>
              <Avatar name={m.name} size={40} />
              <div style={{ flex: 1 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{m.name}</div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}>{m.phone} · {m.history.length ? m.history.length + ' usuals' : 'new'}</div></div>
              <Icon name="chevR" size={18} color="var(--vmax-ink-soft)" />
            </button>
          ))}
          {list.length === 0 && <div style={{ padding: '18px 12px', textAlign: 'center', color: 'var(--vmax-ink-soft)', fontSize: 13.5 }}>No member matches that.</div>}
        </div>
        <div style={{ padding: '8px 24px 24px', borderTop: '1px solid var(--vmax-line)' }}>
          <button onClick={() => setEnrol(true)} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9, padding: '12px', borderRadius: 'var(--radius-lg)', border: '1.5px dashed var(--vmax-line)', background: 'var(--surface-card)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--vmax-ink)' }}><Icon name="qr" size={18} />New member · scan QR</button>
        </div>
      </Sheet>
    );
  }

  // ---------- Order screen ----------
  function OrderSurface({ session }) {
    const [s, a] = useVMAX();
    const [cat, setCat] = React.useState('All');
    const [search, setSearch] = React.useState('');
    const [sheetItem, setSheetItem] = React.useState(null);
    const [memberOpen, setMemberOpen] = React.useState(false);
    const [payOpen, setPayOpen] = React.useState(false);
    const [ordersOpen, setOrdersOpen] = React.useState(false);
    const [nudge, setNudge] = React.useState(true);
    const [reqOpen, setReqOpen] = React.useState(false);
    const order = s.order;
    const member = order.member;
    const menu = s.menu;

    let list = menu.filter((m) => cat === 'All' || m.cat === cat);
    if (search) list = menu.filter((m) => m.name.toLowerCase().includes(search.toLowerCase()));
    const series = [...new Set(list.map((m) => m.series))];
    const sub = order.lines.reduce((acc, o) => acc + (member ? o.member : o.price) * o.qty, 0);
    const ordSub = order.lines.reduce((acc, o) => acc + o.price * o.qty, 0);
    const discount = member ? ordSub - order.lines.reduce((acc, o) => acc + o.member * o.qty, 0) : 0;
    const low = lowStock(s);
    const lowItem = low[0];

    const tap = (m) => { if (hasVariants(m)) setSheetItem(m); else a.addLine({ ...m, temp: null, size: null, price: m.price, member: m.member }); };

    return (
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 392px', height: '100%' }}>
        {/* MENU */}
        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0, height: '100%', position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '18px 28px 12px' }}>
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-lg)', padding: '0 14px' }}>
              <Icon name="search" color="var(--vmax-ink-soft)" />
              <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search drinks…" style={{ border: 'none', background: 'transparent', padding: '12px 0', fontFamily: 'var(--font-body)', fontSize: 15, width: '100%', outline: 'none', color: 'var(--vmax-ink)' }} />
            </div>
            <button onClick={() => setMemberOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 16px', height: 46, borderRadius: 'var(--radius-lg)', border: '1.5px solid ' + (member ? 'transparent' : 'var(--vmax-line)'), background: member ? 'var(--vmax-mint)' : 'var(--surface-card)', color: member ? 'var(--vmax-red-deep)' : 'var(--vmax-ink)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, whiteSpace: 'nowrap' }}>
              <Icon name="members" size={18} />{member ? member.name.split(' ')[0] : 'Member'}
            </button>
          </div>
          {menu.length > 0 && <div style={{ display: 'flex', gap: 9, padding: '4px 28px 14px', overflowX: 'auto', flex: 'none' }}>{categories.map((c) => <CategoryChip key={c} active={c === cat && !search} onClick={() => { setCat(c); setSearch(''); }}>{c}</CategoryChip>)}</div>}
          <div style={{ flex: 1, overflowY: 'auto', padding: '2px 28px 28px' }}>
            {menu.length === 0 && <EmptyState icon="recipe" title="No menu yet" text="Build the menu in the Store Manager — bulk-paste it, set prices and recipes, and it lands here ready to sell." />}
            {menu.length > 0 && series.length === 0 && <div style={{ padding: '60px 0', textAlign: 'center', color: 'var(--vmax-ink-soft)' }}>No drinks match that. Check the spelling or pick a category.</div>}
            {series.map((ser) => (
              <div key={ser}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, color: 'var(--vmax-ink-soft)', letterSpacing: '.04em', margin: '12px 2px 13px', display: 'flex', alignItems: 'center', gap: 9 }}>{ser}<span style={{ flex: 1, height: 1.5, background: 'var(--vmax-line)' }} /></div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 15 }}>
                  {list.filter((m) => m.series === ser).map((m) => <MenuItemCard key={m.id} item={{ ...m, member: member ? m.member : undefined, hotcold: m.hotcold }} onClick={() => tap(m)} />)}
                </div>
              </div>
            ))}
          </div>
          {nudge && lowItem && (
            <div style={{ position: 'absolute', left: 24, bottom: 18, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-lg)', padding: '10px 12px 10px 14px', boxShadow: 'var(--shadow-sm)', maxWidth: 340 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: lowItem.front === 0 ? 'var(--vmax-danger)' : 'var(--vmax-warn)', flex: 'none' }} />
              <span style={{ fontSize: 13, fontWeight: 600 }}>{lowItem.front === 0 ? 'Out of' : 'Running low on'} {lowItem.name.toLowerCase()}</span>
              <button onClick={() => setReqOpen(true)} style={{ border: 'none', background: 'var(--vmax-mint)', color: 'var(--vmax-red-deep)', borderRadius: 999, padding: '5px 12px', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12, marginLeft: 4 }}>Request</button>
              <button onClick={() => setNudge(false)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--vmax-ink-soft)', display: 'grid', placeItems: 'center', marginLeft: 2 }}><Icon name="x" size={16} /></button>
            </div>
          )}
        </div>

        {/* TICKET */}
        <div style={{ background: 'var(--surface-card)', borderLeft: '1.5px solid var(--vmax-line)', display: 'flex', flexDirection: 'column', height: '100%' }}>
          <div style={{ padding: '20px 24px 16px', borderBottom: '1.5px dashed var(--vmax-line)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18 }}>Order #A-0{s.orderNo}</div>
              <button onClick={() => setOrdersOpen(true)} style={{ display: 'flex', alignItems: 'center', gap: 6, border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 999, padding: '6px 11px', cursor: 'pointer', fontSize: 12, fontWeight: 600, color: 'var(--vmax-ink-soft)' }}><Icon name="undo" size={15} color="var(--vmax-ink-soft)" />Refund · remake</button>
            </div>
            <div style={{ marginTop: 14 }}><SegmentedControl options={['Dine-in', 'Takeaway']} value={order.mode} onChange={a.setMode} /></div>
          </div>
          {order.lines.length === 0 ? (
            <div style={{ flex: 1, display: 'grid', placeContent: 'center', justifyItems: 'center', gap: 14, color: 'var(--vmax-ink-soft)', textAlign: 'center', padding: 30 }}>
              <svg viewBox="0 0 32 32" fill="none" width="56" height="56" style={{ opacity: .5 }}><rect x="7" y="11" width="18" height="16" rx="2.5" stroke="#7A7068" strokeWidth="1.6" /><path d="M11 11V8a5 5 0 0 1 10 0v3" stroke="#7A7068" strokeWidth="1.6" /></svg>
              <p style={{ fontSize: 13.5, maxWidth: 200, lineHeight: 1.5 }}>Tap a drink to start the order. Hot or cold is chosen as you add it.</p>
            </div>
          ) : (
            <div style={{ flex: 1, overflowY: 'auto', padding: '8px 16px' }}>
              {order.lines.map((o, i) => (
                <div key={i} style={{ display: 'flex', gap: 13, padding: '13px 8px', borderBottom: '1px solid var(--vmax-line)' }}>
                  <div style={{ width: 46, height: 46, borderRadius: 12, flex: 'none', display: 'grid', placeItems: 'center', background: o.tint }}><Cup c1={o.c1} c2={o.c2} size={26} /></div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5, lineHeight: 1.2 }}>{o.name}</div>
                    <div style={{ display: 'flex', gap: 6, marginTop: 5, alignItems: 'center' }}>{o.temp && <TempTag temp={o.temp} />}{o.size && <span style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>{sizeLabel(o.size)}</span>}</div>
                    <div style={{ marginTop: 7 }}><QtyStepper value={o.qty} onChange={(v) => a.bumpLine(i, v)} min={0} /></div>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15, textAlign: 'right' }}>{K((member ? o.member : o.price) * o.qty)}</div>
                </div>
              ))}
            </div>
          )}
          {order.lines.length > 0 && (
            <div style={{ padding: '16px 24px 20px', borderTop: '1.5px dashed var(--vmax-line)', background: 'var(--surface-ground)' }}>
              <Row k="Subtotal" v={K(ordSub)} />
              {member && <Row k={`Member · ${member.name.split(' ')[0]}`} v={'–' + K(discount)} accent />}
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>Total</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24 }}>{K(sub)}</span>
              </div>
              <div style={{ marginTop: 14 }}><Button variant="primary" size="lg" fullWidth onClick={() => setPayOpen(true)}>Take payment</Button></div>
            </div>
          )}
        </div>

        <VariantSheet item={sheetItem} onClose={() => setSheetItem(null)} onAdd={(l) => { a.addLine(l); setSheetItem(null); }} />
        <MemberSheet open={memberOpen} onClose={() => setMemberOpen(false)} />
        <PaymentSheet open={payOpen} total={sub} session={session} onClose={() => setPayOpen(false)} />
        <OrdersSheet open={ordersOpen} onClose={() => setOrdersOpen(false)} session={session} />
        <RequestStockSheet open={reqOpen} onClose={() => setReqOpen(false)} who={session.active ? session.active.name : ''} preset={lowItem ? lowItem.id : null} />
      </div>
    );
  }
  function Row({ k, v, accent }) {
    return <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--vmax-ink-soft)', marginBottom: 7 }}><span>{k}</span><span style={accent ? { color: 'var(--vmax-red)', fontWeight: 600 } : {}}>{v}</span></div>;
  }

  window.VMAXORDER = { OrderSurface };
})();