// VMAX Store Manager — Catalogue (single + functional bulk entry, correction/revert) and People.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { Button, Badge, SegmentedControl } = DS;
  const { Icon, Cup, Sheet, Overline } = window.VMAXUI;
  const { Avatar, Field, TextInput, Toggle, EmptyState, pushToast } = window.VMAXW;
  const { useVMAX } = window.VMAXStore;
  const { Panel } = window.VMAXMGRUI;

  const PALETTE = [['#D8B48A', '#A87C4F', '#F3E9DC'], ['#C5DCC0', '#6E9A6A', '#E8F0E4'], ['#F1B89A', '#D07B57', '#FBEAE0'], ['#B59AD0', '#7E5BA6', '#EEE7F4'], ['#C9A982', '#8A6440', '#F0E6D8'], ['#F2B45A', '#D38A1E', '#FCEFD8']];
  const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g, '').slice(0, 8);
  const splitRow = (line) => line.split(line.includes('\t') ? '\t' : line.includes('|') ? '|' : ',').map((x) => x.trim());

  const SAMPLE = {
    menu: 'Taro Milk Tea\tMilk Tea\t52\t50\nWinter Melon Tea\tTea\t30\t28\nMango Smoothie\tSmoothies\t64\t62\nMatcha Latte\tCoffee\t\t',
    ingredients: 'Taro paste\tpackets\t8\t3\t2\nWinter melon syrup\tbottles\t5\t2\t2\nMango puree\tpackets\t10\t4\t3\nMatcha powder\t\t\t\t',
  };

  function parseRows(kind, text) {
    const lines = text.split('\n').map((l) => l.trim()).filter(Boolean);
    return lines.filter((l, i) => !(i === 0 && /name/i.test(l) && /(price|unit)/i.test(l))).map((line) => {
      const c = splitRow(line);
      if (kind === 'menu') {
        const price = Number(c[2]); const member = c[3] === '' || c[3] == null ? price : Number(c[3]);
        const ok = !!c[0] && c[2] != null && c[2] !== '' && !isNaN(price);
        return { raw: line, ok, missing: ok ? null : 'price', obj: { id: slug(c[0]) + Math.floor(Math.random() * 99), name: c[0], cat: c[1] || 'New', series: (c[1] || 'New') + ' Series', price, member: isNaN(member) ? price : member, sizes: true } };
      }
      const ok = !!c[0] && !!c[1];
      return { raw: line, ok, missing: !c[1] ? 'unit' : null, obj: { id: slug(c[0]) + Math.floor(Math.random() * 99), name: c[0], kind: 'ingredient', unit: c[1] || '', buy: 'box', packSize: '—', back: Number(c[2]) || 0, front: Number(c[3]) || 0, warn: Number(c[4]) || 2, expiry: null } };
    });
  }

  // ============ Catalogue ============
  function Catalogue({ mobile, who }) {
    const [s, a] = useVMAX();
    const [kind, setKind] = React.useState('menu');
    const [text, setText] = React.useState('');
    const [rows, setRows] = React.useState(null);
    React.useEffect(() => { setRows(null); setText(''); }, [kind]);
    const valid = rows ? rows.filter((r) => r.ok) : [];
    const flagged = rows ? rows.filter((r) => !r.ok) : [];
    const commit = () => { rows.forEach((r) => { if (r.ok) PALETTE; }); const objs = valid.map((r, i) => kind === 'menu' ? { ...r.obj, ...{ c1: PALETTE[i % PALETTE.length][0], c2: PALETTE[i % PALETTE.length][1], tint: PALETTE[i % PALETTE.length][2] } } : r.obj); a.bulkCommit(kind, objs, who); pushToast(valid.length + ' ' + kind + ' added' + (flagged.length ? ' · ' + flagged.length + ' skipped' : '')); setRows(null); setText(''); };
    const changes = s.ledger.filter((e) => e.type === 'price' && !e.revertOf).slice(0, 4);

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 14 : 18 }}>
        <Panel mobile={mobile} title="Bulk entry" right={<Badge tone="ink">First-class</Badge>}>
          <p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', marginBottom: 12, lineHeight: 1.5 }}>Paste a table (tab, comma or | separated). It parses and validates before anything commits.</p>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12, flexWrap: 'wrap' }}>
            <div style={{ width: 230 }}><SegmentedControl size="sm" options={[{ value: 'menu', label: 'Menu items' }, { value: 'ingredients', label: 'Ingredients' }]} value={kind} onChange={setKind} /></div>
            <button onClick={() => setText(SAMPLE[kind])} style={{ border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 999, padding: '7px 13px', cursor: 'pointer', fontSize: 12.5, fontWeight: 600, color: 'var(--vmax-ink-soft)' }}>Paste sample</button>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)', marginBottom: 6, fontFamily: 'var(--font-body)' }}>{kind === 'menu' ? 'name · category · price · members' : 'name · unit · back · front · par'}</div>
          <textarea value={text} onChange={(e) => setText(e.target.value)} rows={5} placeholder={'Paste rows here…'} style={{ width: '100%', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '11px 13px', fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12.5, outline: 'none', resize: 'vertical', background: 'var(--surface-ground)', lineHeight: 1.6 }} />
          <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
            <Button variant="secondary" size="sm" disabled={!text.trim()} onClick={() => setRows(parseRows(kind, text))}>Run validation</Button>
            {rows && valid.length > 0 && <Button variant="primary" size="sm" onClick={commit}>Commit {valid.length} item{valid.length > 1 ? 's' : ''}</Button>}
          </div>
          {rows && (
            <div style={{ marginTop: 14 }}>
              <div style={{ display: 'flex', gap: 8, marginBottom: 10, flexWrap: 'wrap' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '7px 12px', borderRadius: 'var(--radius-md)', background: 'var(--vmax-ok-tint)', color: 'var(--vmax-ok)', fontWeight: 600, fontSize: 13 }}><Icon name="check" size={16} color="var(--vmax-ok)" />{valid.length} ready</span>
                {flagged.length > 0 && <span style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '7px 12px', borderRadius: 'var(--radius-md)', background: 'var(--vmax-warn-tint)', color: 'var(--vmax-amber-deep)', fontWeight: 600, fontSize: 13 }}><Icon name="alert" size={16} color="var(--vmax-amber-deep)" />{flagged.length} need a {flagged[0].missing}</span>}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 5, maxHeight: 200, overflowY: 'auto' }}>
                {rows.map((r, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', borderRadius: 'var(--radius-sm)', background: r.ok ? 'var(--surface-ground)' : 'var(--vmax-warn-tint)', fontSize: 13 }}>
                    <Icon name={r.ok ? 'check' : 'alert'} size={15} color={r.ok ? 'var(--vmax-ok)' : 'var(--vmax-amber-deep)'} />
                    <span style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 700 }}>{r.obj.name}</span>
                    <span style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}>{r.ok ? (kind === 'menu' ? 'K' + r.obj.price : r.obj.unit) : 'needs a ' + r.missing}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </Panel>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr 1fr', gap: 14 }}>
          <MiniCard icon="recipe" title="Menu items" sub={s.menu.length + ' items · two price tiers'} />
          <MiniCard icon="box" title="Ingredients & packaging" sub={s.ingredients.length + ' items · units & conversions'} />
          <MiniCard icon="members" title="Members" sub={s.members.length + ' members · member pricing'} />
        </div>

        <Panel mobile={mobile} title="Recent changes" right={<span style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>every edit is revertible</span>}>
          {changes.length === 0 ? <div style={{ fontSize: 13, color: 'var(--vmax-ink-soft)' }}>No catalogue changes yet. Edits land here with a revert option.</div> : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {changes.map((e) => (
                <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 12, border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '10px 13px', opacity: e.reverted ? 0.5 : 1 }}>
                  <Icon name="edit" size={16} color="var(--vmax-ink-soft)" />
                  <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 600 }}>{e.text}</div><div style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)' }}>{e.at} · {e.by}{e.reverted ? ' · reverted' : ''}</div></div>
                  {!e.reverted && <Button variant="ghost" size="sm" onClick={() => { a.revertLedger(e.id, who); pushToast('Change reverted'); }}>Revert</Button>}
                </div>
              ))}
            </div>
          )}
        </Panel>
      </div>
    );
  }
  function MiniCard({ icon, title, sub }) {
    return <div style={{ background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-lg)', padding: 18, boxShadow: 'var(--shadow-sm)' }}><div style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--vmax-mint)', display: 'grid', placeItems: 'center', marginBottom: 12 }}><Icon name={icon} color="var(--vmax-red-deep)" /></div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{title}</div><div style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', marginTop: 3 }}>{sub}</div></div>;
  }

  // ============ People ============
  const ALL_ROLES = ['cashier', 'maker', 'manager'];
  function People({ mobile, who }) {
    const [s, a] = useVMAX();
    const [sortBy, setSortBy] = React.useState('role');
    const [add, setAdd] = React.useState(false);
    const [detail, setDetail] = React.useState(null);
    const order = { owner: 0, manager: 1, cashier: 2, maker: 3 };
    let people = [...s.people];
    people.sort((x, y) => sortBy === 'name' ? x.name.localeCompare(y.name) : (order[x.roles[0]] - order[y.roles[0]]));
    const statusOf = (p) => p.resetPending ? { t: 'reset pending', tone: 'amber' } : p.pending ? { t: 'PIN pending', tone: 'amber' } : { t: 'active', tone: 'mint' };
    return (
      <Panel mobile={mobile} title="People" right={<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}><div style={{ width: 170 }}><SegmentedControl size="sm" options={[{ value: 'role', label: 'By role' }, { value: 'name', label: 'By name' }]} value={sortBy} onChange={setSortBy} /></div><Button variant="primary" size="sm" onClick={() => setAdd(true)}>+ Add person</Button></div>}>
        {s.people.length <= 1 && <EmptyState icon="userplus" title="Add the people who'll use the till" text="The owner is here already. Add cashiers and makers — they can set their own PIN on first sign-in." action={<Button variant="primary" size="sm" onClick={() => setAdd(true)}>+ Add person</Button>} />}
        {s.people.length > 1 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {people.map((p) => { const st = statusOf(p); return (
              <button key={p.id} onClick={() => setDetail(p)} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '12px 14px', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 'var(--radius-md)', cursor: 'pointer', textAlign: 'left' }}>
                <Avatar name={p.name} size={40} tone={p.root ? 'red' : 'mint'} />
                <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{p.name}{p.root && <span style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', marginLeft: 8 }}>· owner</span>}</div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', textTransform: 'capitalize' }}>{p.roles.join(' + ')}</div></div>
                <Badge tone={st.tone}>{st.t}</Badge>
                <Icon name="chevR" size={18} color="var(--vmax-ink-soft)" />
              </button>
            ); })}
          </div>
        )}
        {add && <AddPerson who={who} onClose={() => setAdd(false)} />}
        {detail && <PersonDetail person={detail} who={who} onClose={() => setDetail(null)} />}
      </Panel>
    );
  }

  function AddPerson({ onClose, who }) {
    const [, a] = useVMAX();
    const [name, setName] = React.useState('');
    const [roles, setRoles] = React.useState({ cashier: true, maker: true, manager: false });
    const [pinMode, setPinMode] = React.useState('first'); // 'first' | 'now'
    const [pin, setPin] = React.useState('');
    const chosen = ALL_ROLES.filter((r) => roles[r]);
    const valid = name.trim() && chosen.length && (pinMode === 'first' || pin.length === 4);
    return (
      <Sheet open onClose={onClose} width={420}>
        <div style={{ padding: '22px 24px 24px' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>Add a person</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 16 }}>
            <Field label="Name"><TextInput value={name} onChange={setName} placeholder="Full name" autoFocus /></Field>
            <Field label="Roles" hint="a person can hold more than one — the norm here">
              <div style={{ display: 'flex', gap: 8 }}>
                {ALL_ROLES.map((r) => <button key={r} onClick={() => setRoles({ ...roles, [r]: !roles[r] })} style={{ flex: 1, padding: '10px', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontWeight: 700, fontSize: 13, textTransform: 'capitalize', border: '2px solid ' + (roles[r] ? 'var(--vmax-red)' : 'var(--vmax-line)'), background: roles[r] ? 'var(--vmax-mint)' : 'var(--surface-card)', color: roles[r] ? 'var(--vmax-red-deep)' : 'var(--vmax-ink)' }}>{r}</button>)}
              </div>
            </Field>
            <Field label="PIN">
              <div style={{ width: 280, marginBottom: pinMode === 'now' ? 12 : 0 }}><SegmentedControl size="sm" options={[{ value: 'first', label: 'Set on first sign-in' }, { value: 'now', label: 'Set a starter PIN' }]} value={pinMode} onChange={setPinMode} /></div>
              {pinMode === 'now' && <TextInput value={pin} onChange={(v) => setPin(v.replace(/\D/g, '').slice(0, 4))} placeholder="4-digit starter PIN" />}
              {pinMode === 'first' && <p style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', marginTop: 4 }}>Account is issued; they choose their own PIN when they first open the app.</p>}
            </Field>
          </div>
          <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
            <Button variant="ghost" onClick={onClose}>Cancel</Button>
            <Button variant="primary" fullWidth disabled={!valid} onClick={() => { a.addPerson({ name: name.trim(), roles: chosen, pin: pinMode === 'now' ? pin : null, pending: pinMode === 'first' }, who); pushToast(name.split(' ')[0] + ' added' + (pinMode === 'first' ? ' · PIN pending' : '')); onClose(); }}>Add to roster</Button>
          </div>
        </div>
      </Sheet>
    );
  }

  function PersonDetail({ person, onClose, who }) {
    const [, a] = useVMAX();
    const [confirm, setConfirm] = React.useState(false);
    const [roles, setRoles] = React.useState(ALL_ROLES.reduce((o, r) => ({ ...o, [r]: person.roles.includes(r) }), {}));
    const chosen = ALL_ROLES.filter((r) => roles[r]);
    return (
      <Sheet open onClose={onClose} width={400}>
        <div style={{ padding: '22px 24px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 13, marginBottom: 18 }}>
            <Avatar name={person.name} size={48} tone={person.root ? 'red' : 'mint'} />
            <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19 }}>{person.name}</div><div style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)' }}>{person.root ? 'Owner · the root account' : person.pending ? 'PIN set on first sign-in' : person.resetPending ? 'PIN reset requested' : 'Active'}</div></div>
          </div>
          {!person.root && <Field label="Roles" style={{ marginBottom: 16 }}><div style={{ display: 'flex', gap: 8 }}>{ALL_ROLES.map((r) => <button key={r} onClick={() => setRoles({ ...roles, [r]: !roles[r] })} style={{ flex: 1, padding: '9px', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontWeight: 700, fontSize: 12.5, textTransform: 'capitalize', border: '2px solid ' + (roles[r] ? 'var(--vmax-red)' : 'var(--vmax-line)'), background: roles[r] ? 'var(--vmax-mint)' : 'var(--surface-card)', color: roles[r] ? 'var(--vmax-red-deep)' : 'var(--vmax-ink)' }}>{r}</button>)}</div></Field>}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {!person.root && chosen.join() !== person.roles.join() && <Button variant="secondary" fullWidth onClick={() => { a.editPerson(person.id, { roles: chosen }, who); pushToast('Roles updated — takes effect next sign-in'); onClose(); }}>Save roles</Button>}
            {!person.resetPending && <button onClick={() => { a.requestReset(person.id, who); pushToast('Reset requested — they set a new PIN next sign-in'); onClose(); }} style={rowBtn}><Icon name="key" size={18} color="var(--vmax-ink-soft)" />Reset PIN<span style={{ flex: 1 }} /><span style={{ fontSize: 11.5, color: 'var(--vmax-ink-soft)' }}>they set the new one</span></button>}
            {!person.root && (confirm ? (
              <div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '11px 13px', borderRadius: 'var(--radius-md)', background: 'var(--vmax-danger-tint)' }}>
                <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--vmax-red-deep)' }}>Remove access? History stays.</span>
                <Button variant="ghost" size="sm" onClick={() => setConfirm(false)}>No</Button>
                <button onClick={() => { a.removePerson(person.id, who); pushToast(person.name.split(' ')[0] + ' removed — records kept'); onClose(); }} style={{ border: 'none', background: 'var(--vmax-red)', color: '#fff', borderRadius: 'var(--radius-md)', padding: '8px 14px', fontWeight: 700, fontSize: 13, cursor: 'pointer' }}>Remove</button>
              </div>
            ) : <button onClick={() => setConfirm(true)} style={{ ...rowBtn, color: 'var(--vmax-red-deep)' }}><Icon name="trash" size={18} color="var(--vmax-red-deep)" />Remove person</button>)}
            {person.root && <p style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', lineHeight: 1.5 }}>The owner is the root account — it can't be removed.</p>}
          </div>
        </div>
      </Sheet>
    );
  }
  const rowBtn = { width: '100%', display: 'flex', alignItems: 'center', gap: 11, padding: '12px 13px', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 'var(--radius-md)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: 'var(--vmax-ink)' };

  window.VMAXMGR3 = { Catalogue, People };
})();