// VMAX Store Manager — Receiving, Counts, Catalogue (functional bulk entry + correction/revert), People.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { Button, Badge, SegmentedControl, StockBadge } = DS;
  const { Icon, Sheet, Overline } = window.VMAXUI;
  const { Avatar, Field, TextInput, NumberInput, Select, Toggle, EmptyState, pushToast } = window.VMAXW;
  const { K, reasonCodes } = window.VMAXP;
  const { useVMAX, statusOf } = window.VMAXStore;
  const { Panel } = window.VMAXMGRUI;
  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' };

  // ============ Receiving (receive-and-note, not a PO match) ============
  function Receiving({ mobile, who }) {
    const [s, a] = useVMAX();
    const inv = s.ingredients;
    const name = (id) => (inv.find((x) => x.id === id) || {}).name;
    const [picked, setPicked] = React.useState([]);
    const [note, setNote] = React.useState('');
    const [addId, setAddId] = React.useState(inv[0] && inv[0].id);
    const add = () => setPicked((p) => p.find((x) => x.id === addId) ? p : [...p, { id: addId, qty: 6 }]);
    const confirm = () => { a.receiveStock(picked, note, who); setPicked([]); setNote(''); pushToast('Received · added to back store'); };
    return (
      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.1fr 1fr', gap: mobile ? 14 : 18, alignItems: 'start' }}>
        <Panel mobile={mobile} title="Receive a delivery" right={<Badge tone="mint">Back store</Badge>}>
          <p style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', marginBottom: 14, lineHeight: 1.5 }}>Enter what physically arrived from the warehouse — this isn't matched against an order. If something's off, note it.</p>
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            <Select value={addId} onChange={setAddId} options={inv.map((i) => ({ value: i.id, label: i.name }))} style={{ flex: 1 }} />
            <Button variant="secondary" size="sm" onClick={add}>Add</Button>
          </div>
          <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: 22, 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>
                <span style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', width: 44 }}>{(inv.find((x) => x.id === p.id) || {}).unit}</span>
                <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)' }}>Add the items on the dispatch note.</div>}
          </div>
          <Field label="Note" hint="optional — shortfall, substitution, damage"><textarea value={note} onChange={(e) => setNote(e.target.value)} placeholder="e.g. one syrup bottle leaked in transit" rows={2} style={{ width: '100%', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '10px 12px', fontFamily: 'var(--font-body)', fontSize: 14, outline: 'none', resize: 'vertical', background: 'var(--surface-card)' }} /></Field>
          <div style={{ marginTop: 14 }}><Button variant="primary" fullWidth disabled={picked.length === 0} onClick={confirm}>Confirm received</Button></div>
        </Panel>
        <Panel mobile={mobile} title="Recent deliveries">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {s.receipts.length === 0 && <div style={{ fontSize: 13, color: 'var(--vmax-ink-soft)' }}>No deliveries logged yet.</div>}
            {s.receipts.map((r) => (
              <div key={r.id} style={{ border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '12px 14px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>#{r.id}</div><span style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)' }}>{r.when} · {r.by}</span></div>
                <div style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', margin: '6px 0' }}>{r.items.map((it) => `${it.qty}× ${name(it.id)}`).join(' · ')}</div>
                {r.note && <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', padding: '9px 11px', borderRadius: 'var(--radius-sm)', background: 'var(--vmax-warn-tint)', fontSize: 12, color: 'var(--vmax-amber-deep)', fontWeight: 500, lineHeight: 1.4 }}><Icon name="info" size={15} color="var(--vmax-amber-deep)" style={{ marginTop: 1 }} />{r.note}</div>}
              </div>
            ))}
          </div>
        </Panel>
      </div>
    );
  }

  // ============ Counts (spot + full) ============
  function Counts({ mobile, who }) {
    const [s, a] = useVMAX();
    const [kind, setKind] = React.useState('spot');
    const [loc, setLoc] = React.useState('front');
    const [picked, setPicked] = React.useState(['coldcup', 'choc']);
    const [vals, setVals] = React.useState({});
    const [reasons, setReasons] = React.useState({});
    const inv = s.ingredients;
    const level = (it) => (loc === 'back' ? it.back : it.front);
    const items = kind === 'full' ? inv : inv.filter((i) => picked.includes(i.id));
    const lines = items.map((it) => { const counted = vals[it.id]; return { id: it.id, expected: level(it), counted: counted === '' || counted == null ? null : Number(counted), reason: reasons[it.id] || '' }; });
    const varianced = lines.filter((l) => l.counted != null && l.counted !== l.expected);
    const openV = varianced.filter((l) => !l.reason);
    const save = () => { a.saveCount(kind, loc, lines.filter((l) => l.counted != null), who); setVals({}); setReasons({}); pushToast((kind === 'spot' ? 'Spot check' : 'Full count') + ' saved · ' + varianced.length + ' variance' + (varianced.length === 1 ? '' : 's')); };
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 14 : 18 }}>
        <Panel mobile={mobile} title={kind === 'spot' ? 'Spot check' : 'Full count'} right={<div style={{ display: 'flex', gap: 8 }}><div style={{ width: 150 }}><SegmentedControl size="sm" options={[{ value: 'spot', label: 'Spot' }, { value: 'full', label: 'Full' }]} value={kind} onChange={setKind} /></div><div style={{ width: 150 }}><SegmentedControl size="sm" options={[{ value: 'front', label: 'Front' }, { value: 'back', label: 'Back' }]} value={loc} onChange={setLoc} /></div></div>}>
          <p style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', marginBottom: 14, lineHeight: 1.5 }}>Enter what you count. A gap doesn't overwrite silently — it's raised as a variance with a reason, the same logic as the close.</p>
          {kind === 'spot' && (
            <React.Fragment>
              <Overline style={{ marginBottom: 9 }}>Items to verify</Overline>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
                {inv.map((i) => { const on = picked.includes(i.id); return <button key={i.id} onClick={() => setPicked((p) => on ? p.filter((x) => x !== i.id) : [...p, i.id])} style={{ padding: '8px 13px', borderRadius: 999, cursor: 'pointer', fontWeight: 600, fontSize: 12.5, border: '1.5px solid ' + (on ? 'var(--vmax-red)' : 'var(--vmax-line)'), background: on ? 'var(--vmax-mint)' : 'var(--surface-card)', color: on ? 'var(--vmax-red-deep)' : 'var(--vmax-ink)' }}>{i.name}</button>; })}
              </div>
            </React.Fragment>
          )}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {items.length === 0 && <div style={{ fontSize: 13, color: 'var(--vmax-ink-soft)' }}>Pick items above to verify.</div>}
            {items.map((it) => {
              const counted = vals[it.id]; const exp = level(it);
              const diff = counted === '' || counted == null ? null : Number(counted) - exp;
              return (
                <div key={it.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', borderRadius: 'var(--radius-md)', background: 'var(--surface-ground)', flexWrap: 'wrap' }}>
                  <div style={{ flex: 1, minWidth: 120 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{it.name}</div><div style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)' }}>System expects {exp} {it.unit}</div></div>
                  <NumberInput value={counted == null ? '' : counted} onChange={(v) => setVals({ ...vals, [it.id]: v })} suffix={it.unit} width={50} />
                  {diff != null && (diff === 0 ? <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--vmax-ok)' }}>✓ Matches</span> : (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--vmax-amber-deep)' }}>{diff > 0 ? '+' : ''}{diff}</span>
                      <Select value={reasons[it.id] || ''} onChange={(v) => setReasons({ ...reasons, [it.id]: v })} options={[{ value: '', label: 'Reason…' }, ...reasonCodes.map((r) => ({ value: r, label: r }))]} style={{ padding: '7px 10px', fontSize: 12.5, border: '1.5px solid ' + (reasons[it.id] ? 'var(--vmax-line)' : 'var(--vmax-warn)'), background: reasons[it.id] ? 'var(--surface-card)' : 'var(--vmax-warn-tint)' }} />
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 12.5, color: openV.length ? 'var(--vmax-amber-deep)' : 'var(--vmax-ink-soft)' }}>{lines.filter((l) => l.counted != null).length} entered · {varianced.length} variance{varianced.length === 1 ? '' : 's'}{openV.length ? ` · ${openV.length} need a reason` : ''}</span>
            <Button variant="primary" disabled={lines.filter((l) => l.counted != null).length === 0 || openV.length > 0} onClick={save}>Save count</Button>
          </div>
        </Panel>
        <Panel mobile={mobile} title="Recent counts">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {s.counts.length === 0 && <div style={{ fontSize: 13, color: 'var(--vmax-ink-soft)' }}>No counts yet today.</div>}
            {s.counts.map((c) => (
              <div key={c.id} style={{ display: 'flex', alignItems: 'center', gap: 12, border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '11px 13px', opacity: c.reverted ? 0.55 : 1 }}>
                <Icon name="clipboard" size={18} color="var(--vmax-ink-soft)" />
                <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13.5 }}>#{c.id} · {c.kind === 'spot' ? 'Spot' : 'Full'} · {c.location}</div><div style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)' }}>{c.when} · {c.by} · {c.lines.length} items{c.reverted ? ' · reverted' : ''}</div></div>
                <Badge tone={c.resolved ? 'mint' : 'amber'}>{c.resolved ? 'matched' : 'variance'}</Badge>
                {!c.reverted && <Button variant="ghost" size="sm" onClick={() => { a.revertCount(c.id, who); pushToast('Count reverted · levels restored'); }}>Revert</Button>}
              </div>
            ))}
          </div>
        </Panel>
      </div>
    );
  }

  window.VMAXMGR2 = { Receiving, Counts };
})();