// VMAX Store Manager — Shift management: who worked, what they did (from the event ledger),
// and a full attributed audit log.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { Button, Badge, SegmentedControl } = DS;
  const { Icon, Overline } = window.VMAXUI;
  const { Avatar, EmptyState, pushToast } = window.VMAXW;
  const { K } = window.VMAXP;
  const { useVMAX } = window.VMAXStore;
  const { Panel } = window.VMAXMGRUI;

  const TYPE = {
    sale: { icon: 'register', c: 'var(--vmax-ink)', bg: 'var(--surface-ground)', label: 'Sale' },
    refund: { icon: 'undo', c: 'var(--vmax-red)', bg: 'var(--vmax-danger-tint)', label: 'Refund' },
    remake: { icon: 'repeat', c: 'var(--vmax-amber-deep)', bg: 'var(--vmax-warn-tint)', label: 'Remake' },
    transfer: { icon: 'swap', c: 'var(--vmax-red-deep)', bg: 'var(--vmax-mint)', label: 'Transfer' },
    receive: { icon: 'truck', c: 'var(--vmax-ink)', bg: 'var(--surface-ground)', label: 'Receive' },
    count: { icon: 'clipboard', c: 'var(--vmax-ink)', bg: 'var(--surface-ground)', label: 'Count' },
    close: { icon: 'check', c: 'var(--vmax-ok)', bg: 'var(--vmax-ok-tint)', label: 'Close' },
    cashup: { icon: 'cash', c: 'var(--vmax-ink)', bg: 'var(--surface-ground)', label: 'Cash-up' },
    people: { icon: 'members', c: 'var(--vmax-red-deep)', bg: 'var(--vmax-mint)', label: 'People' },
    price: { icon: 'edit', c: 'var(--vmax-ink)', bg: 'var(--surface-ground)', label: 'Catalogue' },
    claim: { icon: 'check', c: 'var(--vmax-red-deep)', bg: 'var(--vmax-mint)', label: 'Claim' },
    open: { icon: 'login', c: 'var(--vmax-ink-soft)', bg: 'var(--surface-ground)', label: 'Open' },
  };
  const typ = (t) => TYPE[t] || { icon: 'info', c: 'var(--vmax-ink-soft)', bg: 'var(--surface-ground)', label: t };

  function Shifts({ mobile, who }) {
    const [s, a] = useVMAX();
    const [filter, setFilter] = React.useState(null);
    const [typeFilter, setTypeFilter] = React.useState('all');
    const ledger = s.ledger;
    const names = [...new Set(ledger.map((e) => e.by).filter((n) => n && n !== '—'))];
    const roleOf = (n) => { const p = s.people.find((x) => x.name === n); return p ? p.roles.join(' + ') : 'past staff'; };
    const salesBy = (n) => s.sales.filter((x) => x.by === n);
    const countType = (n, t) => ledger.filter((e) => e.by === n && e.type === t && !e.reverted).length;
    const span = (n) => { const ts = ledger.filter((e) => e.by === n).map((e) => e.at).sort(); return ts.length ? ts[0] + ' – ' + ts[ts.length - 1] : '—'; };

    let log = filter ? ledger.filter((e) => e.by === filter) : ledger;
    if (typeFilter !== 'all') log = log.filter((e) => e.type === typeFilter);
    const revert = (e) => { if (e.type === 'count' && e.ref) a.revertCount(e.ref, who); else a.revertLedger(e.id, who); pushToast('Reverted · audit trail kept'); };

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 14 : 18 }}>
        <Panel mobile={mobile} title="On shift today" right={<span style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>{names.length} active · from the record</span>}>
          {names.length === 0 ? <EmptyState icon="clock" title="No activity yet" text="As people sign in and work, their attributed actions build each shift here." /> : (
            <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(auto-fill,minmax(240px,1fr))', gap: 12 }}>
              {names.map((n) => { const sb = salesBy(n); const val = sb.reduce((x, o) => x + o.amount, 0); const on = filter === n; return (
                <button key={n} onClick={() => setFilter(on ? null : n)} style={{ textAlign: 'left', cursor: 'pointer', border: '1.5px solid ' + (on ? 'var(--vmax-red)' : 'var(--vmax-line)'), background: on ? 'var(--vmax-mint)' : 'var(--surface-card)', borderRadius: 'var(--radius-lg)', padding: 15 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                    <Avatar name={n} size={36} />
                    <div style={{ minWidth: 0 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{n}</div><div style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', textTransform: 'capitalize' }}>{roleOf(n)}</div></div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--vmax-ink-soft)', marginBottom: 12 }}><Icon name="clock" size={14} color="var(--vmax-ink-soft)" />{span(n)}</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <Metric label="Sales" value={sb.length} sub={K(val)} />
                    <Metric label="Refunds" value={countType(n, 'refund')} />
                    <Metric label="Remakes" value={countType(n, 'remake')} />
                    <Metric label="Claims" value={countType(n, 'claim')} />
                  </div>
                  {on && <div style={{ marginTop: 10, fontSize: 11.5, fontWeight: 700, color: 'var(--vmax-red-deep)' }}>Filtering the log →</div>}
                </button>
              ); })}
            </div>
          )}
        </Panel>

        <Panel mobile={mobile} title="Activity log" right={<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>{filter && <button onClick={() => setFilter(null)} style={{ display: 'flex', alignItems: 'center', gap: 5, border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 999, padding: '5px 10px', cursor: 'pointer', fontSize: 12, fontWeight: 600 }}><Avatar name={filter} size={18} />{filter}<Icon name="x" size={13} /></button>}<div style={{ width: mobile ? 150 : 200 }}><SegmentedControl size="sm" options={[{ value: 'all', label: 'All' }, { value: 'sale', label: 'Sales' }, { value: 'refund', label: 'Refunds' }, { value: 'count', label: 'Counts' }]} value={typeFilter} onChange={setTypeFilter} /></div></div>}>
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column' }}>
            {log.length === 0 && <div style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', padding: '6px 2px' }}>No matching events.</div>}
            {log.map((e) => { const t = typ(e.type); return (
              <div key={e.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '11px 4px', borderBottom: '1px solid var(--vmax-line)', opacity: e.reverted ? 0.5 : 1 }}>
                <div style={{ width: 60, flex: 'none', fontSize: 12, color: 'var(--vmax-ink-soft)', fontWeight: 600, fontVariantNumeric: 'tabular-nums', paddingTop: 4 }}>{e.at}</div>
                <div style={{ width: 30, height: 30, borderRadius: 9, background: t.bg, display: 'grid', placeItems: 'center', flex: 'none' }}><Icon name={t.icon} size={16} color={t.c} /></div>
                <div style={{ flex: 1, minWidth: 0, paddingTop: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, lineHeight: 1.4, textDecoration: e.reverted ? 'line-through' : 'none' }}>{e.text}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 3, fontSize: 11.5, color: 'var(--vmax-ink-soft)' }}><Avatar name={e.by} size={16} />{e.by}{e.reason && <span>· {e.reason}</span>}</div>
                </div>
                {e.revertible && !e.reverted && !e.revertOf && <button onClick={() => revert(e)} style={{ flex: 'none', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', borderRadius: 999, padding: '5px 11px', cursor: 'pointer', fontSize: 12, fontWeight: 600, color: 'var(--vmax-ink-soft)' }}>Revert</button>}
              </div>
            ); })}
          </div>
        </Panel>
      </div>
    );
  }
  function Metric({ label, value, sub }) {
    return <div style={{ background: 'var(--surface-ground)', borderRadius: 'var(--radius-md)', padding: '9px 11px' }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, lineHeight: 1 }}>{value}{sub && <span style={{ fontSize: 11, fontWeight: 600, color: 'var(--vmax-ink-soft)', marginLeft: 6 }}>{sub}</span>}</div><div style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', marginTop: 3 }}>{label}</div></div>;
  }

  window.VMAXSHIFTS = { Shifts };
})();