// VMAX Store Manager — Reports: sales & operations read derived from the day's records.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { StatTile, Badge, SegmentedControl } = DS;
  const { Icon, Overline } = window.VMAXUI;
  const { Avatar } = window.VMAXW;
  const { K, dashboard } = window.VMAXP;
  const { useVMAX } = window.VMAXStore;
  const { Panel } = window.VMAXMGRUI;

  function ReportsPage({ mobile }) {
    const [s] = useVMAX();
    const [range, setRange] = React.useState('today');
    const t = s.tally;
    const mobileTotal = Object.values(t.mobile).reduce((a, b) => a + b, 0);
    const turnover = t.cash + mobileTotal;
    const cashPct = turnover ? Math.round((t.cash / turnover) * 100) : 0;
    const mobPct = turnover ? Math.round((mobileTotal / turnover) * 100) : 0;
    const cups = t.coldCups + t.hotCups;
    const coldPct = cups ? Math.round((t.coldCups / cups) * 100) : 0;
    const members = new Set(s.sales.filter((x) => x.member).map((x) => x.member)).size;
    const refunds = s.ledger.filter((e) => e.type === 'refund' && !e.reverted).length;
    const remakes = s.ledger.filter((e) => e.type === 'remake' && !e.reverted).length;

    const byCashier = {};
    s.sales.forEach((o) => { byCashier[o.by] = byCashier[o.by] || { name: o.by, count: 0, value: 0 }; byCashier[o.by].count += 1; byCashier[o.by].value += o.amount; });
    const cashiers = Object.values(byCashier).sort((a, b) => b.value - a.value);
    const maxVal = Math.max(1, ...cashiers.map((c) => c.value));

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 14 : 18 }}>
        <div style={{ display: 'flex', justifyContent: 'flex-end' }}><div style={{ width: 260 }}><SegmentedControl size="sm" options={[{ value: 'today', label: 'Today' }, { value: '7d', label: '7 days' }, { value: '30d', label: '30 days' }]} value={range} onChange={setRange} /></div></div>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: mobile ? 10 : 14 }}>
          <StatTile label="Turnover" value={K(turnover)} delta="6%" deltaDir="up" sub="vs yest." />
          <StatTile label="Dishes sold" value={t.dishes} sub={cups + ' cups'} />
          <StatTile label="Avg ticket" value={K(t.dishes ? Math.round(turnover / t.dishes) : 0)} sub={'cash ~' + cashPct + '%'} />
          <StatTile label="Members served" value={members} sub="this period" />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 14 : 18 }}>
          <Panel mobile={mobile} title="Payment mix">
            <Bar label="Cash" pct={cashPct} value={K(t.cash)} tone="red" />
            <Bar label="Mobile money" pct={mobPct} value={K(mobileTotal)} tone="mint" />
            <Bar label="Card / other" pct={Math.max(0, 100 - cashPct - mobPct)} value={'—'} tone="ink" />
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--vmax-line)', display: 'flex', gap: 14 }}>
              {Object.keys(t.mobile).map((ch) => <div key={ch} style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}><span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--vmax-ink)' }}>{K(t.mobile[ch])}</span> {ch}</div>)}
            </div>
          </Panel>
          <Panel mobile={mobile} title="Hot vs cold" right={<span style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>{cups} cups</span>}>
            <div style={{ display: 'flex', height: 22, borderRadius: 999, overflow: 'hidden', marginBottom: 14 }}>
              <div style={{ width: coldPct + '%', background: 'var(--vmax-cold)' }} /><div style={{ width: (100 - coldPct) + '%', background: 'var(--vmax-hot)' }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--vmax-cold-deep)' }}>{t.coldCups}</div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}>cold · {coldPct}%</div></div>
              <div style={{ textAlign: 'right' }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--vmax-hot-deep)' }}>{t.hotCups}</div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}>hot · {100 - coldPct}%</div></div>
            </div>
          </Panel>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.4fr 1fr', gap: mobile ? 14 : 18, alignItems: 'start' }}>
          <Panel mobile={mobile} title="Sales by cashier" right={<span style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>attributed at print</span>}>
            {cashiers.length === 0 ? <div style={{ fontSize: 13, color: 'var(--vmax-ink-soft)' }}>No sales recorded yet.</div> : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {cashiers.map((c) => (
                  <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <Avatar name={c.name} size={32} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}><span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{c.name}</span><span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14 }}>{K(c.value)}</span></div>
                      <div style={{ height: 8, borderRadius: 5, background: 'var(--surface-ground)', overflow: 'hidden' }}><div style={{ width: (c.value / maxVal) * 100 + '%', height: '100%', background: 'var(--vmax-amber)' }} /></div>
                    </div>
                    <span style={{ fontSize: 12, color: 'var(--vmax-ink-soft)', width: 56, textAlign: 'right' }}>{c.count} order{c.count > 1 ? 's' : ''}</span>
                  </div>
                ))}
              </div>
            )}
            <div style={{ display: 'flex', gap: 12, marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--vmax-line)' }}>
              <Pill icon="undo" label="Refunds" value={refunds} tone="red" />
              <Pill icon="repeat" label="Remakes" value={remakes} tone="amber" />
            </div>
          </Panel>
          <Panel mobile={mobile} title="Top drinks">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {dashboard.ranking.slice(0, 6).map((d, i) => (
                <div key={d.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '7px 2px' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, color: 'var(--vmax-ink-soft)', width: 14 }}>{i + 1}</span>
                  <span style={{ flex: 1, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800 }}>{d.qty}</span>
                </div>
              ))}
            </div>
          </Panel>
        </div>
      </div>
    );
  }
  function Bar({ label, pct, value, tone }) {
    const c = tone === 'red' ? 'var(--vmax-red)' : tone === 'mint' ? 'var(--vmax-mint-deep)' : 'var(--vmax-ink)';
    return (
      <div style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, marginBottom: 5 }}><span style={{ color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>{label}</span><span style={{ fontFamily: 'var(--font-display)', fontWeight: 700 }}>{value} · {pct}%</span></div>
        <div style={{ height: 8, borderRadius: 5, background: 'var(--surface-ground)', overflow: 'hidden' }}><div style={{ width: pct + '%', height: '100%', background: c }} /></div>
      </div>
    );
  }
  function Pill({ icon, label, value, tone }) {
    const c = tone === 'red' ? 'var(--vmax-red)' : 'var(--vmax-amber-deep)';
    return <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 9, padding: '10px 12px', borderRadius: 'var(--radius-md)', background: 'var(--surface-ground)' }}><Icon name={icon} size={17} color={c} /><div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, lineHeight: 1 }}>{value}</div><div style={{ fontSize: 11, color: 'var(--vmax-ink-soft)', marginTop: 2 }}>{label}</div></div></div>;
  }

  window.VMAXREPORTS = { ReportsPage };
})();