// VMAX POS — extras: stock-request sheet (front → back) and the cashier cash-up.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { Button, Badge } = DS;
  const { Icon, Sheet, Overline } = window.VMAXUI;
  const { NumberInput, Field, Toggle, pushToast, EmptyState } = window.VMAXW;
  const { K, mobileChannels } = window.VMAXP;
  const { useVMAX, lowStock, statusOf } = window.VMAXStore;
  const qbtn = { width: 28, height: 28, borderRadius: 7, border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', cursor: 'pointer', fontWeight: 700, color: 'var(--vmax-ink-soft)', display: 'grid', placeItems: 'center' };

  // ---------- Stock request (front staff ask the back store) ----------
  function RequestStockSheet({ open, onClose, who, preset }) {
    const [s, a] = useVMAX();
    const inv = s.ingredients;
    const name = (id) => (inv.find((x) => x.id === id) || {}).name;
    const [picked, setPicked] = React.useState([]);
    const [urgent, setUrgent] = React.useState(false);
    React.useEffect(() => { if (open) { setPicked(preset ? [{ id: preset, qty: 1 }] : []); setUrgent(false); } }, [open, preset]);
    // quick-add: the low or out front items first, then common ones
    const low = lowStock(s).map((i) => i.id);
    const quick = [...new Set([...low, 'choc', 'coldcup', 'syrup', 'coconut', 'beans'])].filter((id) => inv.find((x) => x.id === id)).slice(0, 6);
    const submit = () => { a.submitRequest(picked, urgent, who); pushToast('Request sent to back store'); onClose(); };
    return (
      <Sheet open={open} onClose={onClose} width={420}>
        <div style={{ padding: '22px 24px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>Request stock</div>
            <Badge tone="mint">front → back</Badge>
          </div>
          <p style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', margin: '6px 0 14px', lineHeight: 1.5 }}>Ask the back store to top up the counter. Fewest taps — it replaces a WhatsApp message.</p>
          <Overline style={{ marginBottom: 9 }}>Quick add</Overline>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
            {quick.map((id) => { const it = inv.find((x) => x.id === id); const st = statusOf(it); return <button key={id} onClick={() => setPicked((p) => p.find((x) => x.id === id) ? p : [...p, { id, qty: 1 }])} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '9px 13px', borderRadius: 999, border: '1.5px solid ' + (st !== 'ok' ? 'var(--vmax-warn)' : 'var(--vmax-line)'), background: st !== 'ok' ? 'var(--vmax-warn-tint)' : 'var(--surface-card)', cursor: 'pointer', fontWeight: 600, fontSize: 13 }}>{st !== 'ok' && <span style={{ width: 7, height: 7, borderRadius: '50%', background: st === 'out' ? 'var(--vmax-danger)' : 'var(--vmax-warn)' }} />}+ {name(id)}</button>; })}
          </div>
          <Overline style={{ marginBottom: 9 }}>Requesting</Overline>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
            {picked.map((p, idx) => (
              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', borderRadius: 'var(--radius-md)', background: 'var(--surface-ground)' }}>
                <span style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{name(p.id)}</span>
                <button onClick={() => setPicked((arr) => arr.map((x, i) => i === idx ? { ...x, qty: Math.max(1, x.qty - 1) } : x))} style={qbtn}>−</button>
                <span style={{ fontWeight: 700, minWidth: 18, textAlign: 'center', fontFamily: 'var(--font-display)' }}>{p.qty}</span>
                <button onClick={() => setPicked((arr) => arr.map((x, i) => i === idx ? { ...x, qty: x.qty + 1 } : x))} style={qbtn}>+</button>
                <button onClick={() => setPicked((arr) => arr.filter((_, i) => i !== idx))} style={{ ...qbtn, border: 'none', color: 'var(--vmax-ink-soft)' }}><Icon name="x" size={15} /></button>
              </div>
            ))}
            {picked.length === 0 && <div style={{ fontSize: 13, color: 'var(--vmax-ink-soft)' }}>Tap an item above to add it.</div>}
          </div>
          <div style={{ marginBottom: 16 }}><Toggle on={urgent} onChange={setUrgent} label="Mark urgent" /></div>
          <Button variant="primary" fullWidth disabled={picked.length === 0} onClick={submit}>Send request</Button>
        </div>
      </Sheet>
    );
  }

  // ---------- Cashier cash-up (shift handover record; not the manager's accountable close) ----------
  function CashierClose({ open, onClose, who }) {
    const [s, a] = useVMAX();
    const exp = s.tally.cash;
    const expMobile = s.tally.mobile || {};
    const [counted, setCounted] = React.useState('');
    const [cm, setCm] = React.useState({});
    const [note, setNote] = React.useState('');
    const [done, setDone] = React.useState(false);
    React.useEffect(() => { if (open) { setCounted(''); setCm(mobileChannels.reduce((o, ch) => ({ ...o, [ch]: (s.tally.mobile || {})[ch] || 0 }), {})); setNote(''); setDone(false); } }, [open]);
    const diff = counted === '' ? null : Number(counted) - exp;
    const mobileTotal = mobileChannels.reduce((acc, ch) => acc + (Number(cm[ch]) || 0), 0);
    if (!open) return null;
    if (done) return (
      <Sheet open onClose={onClose} width={400}>
        <div style={{ padding: '36px 26px', textAlign: 'center' }}>
          <div style={{ width: 66, height: 66, borderRadius: '50%', background: 'var(--vmax-ok-tint)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><Icon name="check" size={34} color="var(--vmax-ok)" strokeWidth={2.4} /></div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22 }}>Cash-up recorded</div>
          <p style={{ color: 'var(--vmax-ink-soft)', fontSize: 13.5, marginTop: 8, lineHeight: 1.5 }}>Counted {K(Number(counted) || 0)} cash · {K(mobileTotal)} mobile. Attributed to {who} — the manager runs the accountable end-of-day close.</p>
          <div style={{ marginTop: 20 }}><Button variant="primary" fullWidth onClick={onClose}>Done</Button></div>
        </div>
      </Sheet>
    );
    return (
      <Sheet open onClose={onClose} width={420}>
        <div style={{ padding: '22px 24px 24px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>Cash up · your shift</div>
          <p style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', margin: '6px 0 16px', lineHeight: 1.5 }}>Count the drawer at handover. This is a record, not the day's close — the manager reconciles the full day.</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderRadius: 'var(--radius-md)', background: 'var(--surface-ground)' }}>
              <div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>System expects (cash sales)</div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, marginTop: 2 }}>{K(exp)}</div></div>
              <Icon name="cash" size={26} color="var(--vmax-ink-soft)" />
            </div>
            <Field label="Counted in the drawer"><NumberInput value={counted} onChange={setCounted} prefix="K" width={120} /></Field>
            {diff != null && <div style={{ fontSize: 13.5, fontWeight: 700, color: diff === 0 ? 'var(--vmax-ok)' : 'var(--vmax-amber-deep)' }}>{diff === 0 ? '✓ Matches the recorded sales' : `${diff < 0 ? '−' : '+'}${K(Math.abs(diff))} vs recorded — the close will ask for a reason`}</div>}
            <div>
              <Overline style={{ marginBottom: 9 }}>Mobile money</Overline>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {mobileChannels.map((ch) => { const e = expMobile[ch] || 0; const cv = cm[ch]; const d = cv == null || cv === '' ? null : Number(cv) - e; return (
                  <div key={ch} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
                    <div><div style={{ fontWeight: 600, fontSize: 14 }}>{ch}</div><div style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)' }}>expects {K(e)}</div></div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      {d === 0 && <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--vmax-ok)' }}>✓</span>}
                      {d != null && d !== 0 && <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--vmax-amber-deep)' }}>{d < 0 ? '−' : '+'}{K(Math.abs(d))}</span>}
                      <NumberInput value={cm[ch] == null ? '' : cm[ch]} onChange={(v) => setCm({ ...cm, [ch]: v })} prefix="K" width={68} />
                    </div>
                  </div>
                ); })}
              </div>
            </div>
            <Field label="Note" hint="optional"><input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Anything to flag for the manager" style={{ width: '100%', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '11px 13px', fontFamily: 'var(--font-body)', fontSize: 14.5, outline: 'none', background: 'var(--surface-card)' }} /></Field>
          </div>
          <div style={{ marginTop: 18 }}><Button variant="primary" fullWidth disabled={counted === ''} onClick={() => { a.cashUp(who, Number(counted), cm, note); setDone(true); }}>Record cash-up</Button></div>
        </div>
      </Sheet>
    );
  }

  window.VMAXEXTRA = { RequestStockSheet, CashierClose };
})();