// VMAX Store Manager — the daily close (trust ceremony), variance reports, and the day banner.
(function () {
  const DS = window.VMAX365DesignSystem_0f78b2;
  const { Button, SegmentedControl, Badge } = DS;
  const { Icon, Overline } = window.VMAXUI;
  const { NumberInput, Select } = window.VMAXW;
  const { K, reasonCodes, mobileChannels } = window.VMAXP;
  const { useVMAX } = window.VMAXStore;
  const { Panel } = window.VMAXMGRUI;

  // ---- The day banner (open / closing / closed; next-morning overlap) ----
  function TheDay({ mobile }) {
    const [s] = useVMAX();
    const d = s.day;
    const closed = d.status === 'closed';
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: mobile ? '11px 14px' : '12px 18px', borderRadius: 'var(--radius-lg)', background: closed ? 'var(--vmax-ok-tint)' : 'var(--surface-card)', border: '1.5px solid ' + (closed ? 'transparent' : 'var(--vmax-line)'), marginBottom: mobile ? 14 : 18 }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: closed ? 'var(--vmax-ok)' : 'var(--vmax-red)', flex: 'none' }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{closed ? 'Day closed' : 'Day open · trading'}</div>
          <div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}>{closed ? `Signed off by ${d.closedBy} at ${d.closedAt} · balances carried to tomorrow` : `${s.day.date} · opened by ${d.openedBy || '—'} · close at end of shift or tomorrow morning`}</div>
        </div>
        {!closed && <Badge tone="mint">Continuous</Badge>}
      </div>
    );
  }

  // ---- Daily close ----
  function DailyClose({ mobile, who }) {
    const [s, a] = useVMAX();
    const t = s.tally;
    const c = s.close.counted || {};
    const reasons = s.close.reasons || {};
    const exp = { cash: t.cash, cold: t.coldCups, hot: t.hotCups, choc: 250 };
    const setC = (patch) => a.setCounted(patch);
    const setR = (k, v) => a.setReason(k, v);

    const rows = [
      { id: 'cash', exp: exp.cash, act: c.cash, tol: 5, unit: 'K' },
      { id: 'cold', exp: exp.cold, act: c.cold, tol: 0 },
      { id: 'hot', exp: exp.hot, act: c.hot, tol: 0 },
      { id: 'choc', exp: exp.choc, act: c.choc, tol: 10 },
    ];
    const entered = rows.filter((r) => r.act != null && r.act !== '');
    const variances = entered.map((r) => ({ ...r, diff: Number(r.act) - r.exp })).filter((r) => Math.abs(r.diff) > r.tol);
    const openV = variances.filter((r) => !reasons[r.id]);
    const allEntered = rows.every((r) => r.act != null && r.act !== '');

    if (s.close.signed || s.day.status === 'closed') return (
      <div style={{ display: 'grid', placeItems: 'center', minHeight: 360 }}>
        <div style={{ textAlign: 'center', padding: 20 }}>
          <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--vmax-ok-tint)', display: 'grid', placeItems: 'center', margin: '0 auto 18px' }}><Icon name="check" size={38} color="var(--vmax-ok)" strokeWidth={2.4} /></div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26 }}>Day closed</div>
          <p style={{ color: 'var(--vmax-ink-soft)', fontSize: 14, marginTop: 8, maxWidth: 340, lineHeight: 1.5 }}>Signed off by {s.day.closedBy}. Every variance was recorded with a reason — balances become tomorrow's opening truth.</p>
          <div style={{ marginTop: 20 }}><Button variant="ghost" onClick={() => a.reopenDay()}>Reopen to review</Button></div>
        </div>
      </div>
    );

    return (
      <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: mobile ? 12 : 16 }}>
        <CloseSection n="1" title="Cash" mobile={mobile}>
          <CountRow label="Notes & coins counted" expected={K(exp.cash)} mobile={mobile}><NumberInput value={c.cash == null ? '' : c.cash} onChange={(v) => setC({ cash: v })} prefix="K" width={84} /></CountRow>
          <DiffLine act={c.cash} exp={exp.cash} tol={5} unit="K" reasons={reasonCodes} reason={reasons.cash} onReason={(r) => setR('cash', r)} />
        </CloseSection>
        <CloseSection n="2" title="Mobile money" subtitle="Per channel — should match the recorded takings." mobile={mobile}>
          {mobileChannels.map((ch) => <CountRow key={ch} label={ch} expected={K(t.mobile[ch] || 0)} mobile={mobile}><NumberInput value={(c.mobile && c.mobile[ch] != null) ? c.mobile[ch] : (t.mobile[ch] || 0)} onChange={(v) => setC({ mobile: { ...(c.mobile || t.mobile), [ch]: v } })} prefix="K" width={70} /></CountRow>)}
          <div style={{ fontSize: 12.5, color: 'var(--vmax-ok)', fontWeight: 600, marginTop: 2 }}>✓ Matched</div>
        </CloseSection>
        <CloseSection n="3" title="Cups by hot / cold" subtitle="Expected from variant-tagged sales — the figure Clara used to reconstruct by hand." mobile={mobile}>
          <CountRow label="Cold cups used" expected={exp.cold + ' expected'} mobile={mobile}><NumberInput value={c.cold == null ? '' : c.cold} onChange={(v) => setC({ cold: v })} width={56} /></CountRow>
          <DiffLine act={c.cold} exp={exp.cold} tol={0} reasons={reasonCodes} reason={reasons.cold} onReason={(r) => setR('cold', r)} />
          <CountRow label="Hot cups used" expected={exp.hot + ' expected'} mobile={mobile}><NumberInput value={c.hot == null ? '' : c.hot} onChange={(v) => setC({ hot: v })} width={56} /></CountRow>
          <DiffLine act={c.hot} exp={exp.hot} tol={0} reasons={reasonCodes} reason={reasons.hot} onReason={(r) => setR('hot', r)} />
        </CloseSection>
        <CloseSection n="4" title="Key ingredients" mobile={mobile}>
          <CountRow label="Chocolate sauce (ml used)" expected={exp.choc + ' expected'} mobile={mobile}><NumberInput value={c.choc == null ? '' : c.choc} onChange={(v) => setC({ choc: v })} width={56} /></CountRow>
          <DiffLine act={c.choc} exp={exp.choc} tol={10} reasons={reasonCodes} reason={reasons.choc} onReason={(r) => setR('choc', r)} note="over tolerance" />
        </CloseSection>
        <div style={{ background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-lg)', padding: 20, boxShadow: 'var(--shadow-sm)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, flexWrap: 'wrap' }}>
          <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18 }}>{!allEntered ? 'Count still in progress' : variances.length === 0 ? 'Everything balanced' : `${variances.length} variance${variances.length > 1 ? 's' : ''} to confirm`}</div><div style={{ fontSize: 13, color: openV.length || !allEntered ? 'var(--vmax-amber-deep)' : 'var(--vmax-ink-soft)', marginTop: 4 }}>{!allEntered ? 'Enter each counted figure above to finish.' : openV.length ? `${openV.length} still need a reason — a variance without one stays open.` : 'Every variance has a reason. Ready to sign off.'}</div></div>
          <Button variant="primary" size="lg" disabled={!allEntered || openV.length > 0} onClick={() => { a.signOff(who); }}>Sign off &amp; close</Button>
        </div>
      </div>
    );
  }
  function CloseSection({ n, title, subtitle, children, mobile }) {
    return (
      <div style={{ background: 'var(--surface-card)', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-lg)', padding: mobile ? 16 : 20, boxShadow: 'var(--shadow-sm)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: subtitle ? 4 : 12 }}><span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--vmax-ink)', color: '#fff', display: 'grid', placeItems: 'center', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12 }}>{n}</span><h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17 }}>{title}</h3></div>
        {subtitle && <p style={{ fontSize: 12.5, color: 'var(--vmax-ink-soft)', margin: '0 0 12px 34px', lineHeight: 1.5 }}>{subtitle}</p>}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>{children}</div>
      </div>
    );
  }
  function CountRow({ label, expected, children }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14 }}>
        <div><div style={{ fontWeight: 600, fontSize: 14 }}>{label}</div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}>System expects {expected}</div></div>
        {children}
      </div>
    );
  }
  function DiffLine({ act, exp, tol, unit = '', reasons, onReason, reason, note }) {
    if (act == null || act === '') return null;
    const diff = Number(act) - exp;
    const within = Math.abs(diff) <= tol;
    const shown = unit === 'K' ? `${diff < 0 ? '−' : '+'}K${Math.abs(diff)}` : `${diff > 0 ? '+' : ''}${diff}`;
    if (diff === 0) return <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--vmax-ok)', paddingLeft: 2 }}>✓ Matches</div>;
    if (within) return <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--vmax-ink-soft)', paddingLeft: 2 }}>{shown} · within tolerance</div>;
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingLeft: 2, flexWrap: 'wrap' }}>
        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--vmax-amber-deep)' }}>{shown} {note || 'difference'}</span>
        <Select value={reason || ''} onChange={onReason} options={[{ value: '', label: 'Pick a reason…' }, ...reasons.map((r) => ({ value: r, label: r }))]} style={{ padding: '7px 11px', fontSize: 13, border: '1.5px solid ' + (reason ? 'var(--vmax-line)' : 'var(--vmax-warn)'), background: reason ? 'var(--surface-card)' : 'var(--vmax-warn-tint)', width: 'auto' }} />
      </div>
    );
  }

  // ---- Variance reports ----
  function Reports({ mobile }) {
    const rows = [{ name: 'Cold cups', state: 'clean', note: 'Flat, within band' }, { name: 'Chocolate sauce', state: 'drift', note: 'Trending slightly high, within tolerance' }, { name: 'Brown sugar syrup', state: 'problem', note: 'Repeated unexplained gap' }];
    const col = { clean: 'var(--vmax-ok)', drift: 'var(--vmax-amber)', problem: 'var(--vmax-danger)' };
    return (
      <Panel mobile={mobile} title="Variance over time" right={!mobile && <div style={{ width: 240 }}><SegmentedControl size="sm" options={['7 days', '30 days', 'Custom']} value="7 days" onChange={() => {}} /></div>}>
        <p style={{ fontSize: 13, color: 'var(--vmax-ink-soft)', marginBottom: 16, lineHeight: 1.5 }}>Direction, not surveillance. Tolerance bands show where drift is normal and where a gap is real.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {rows.map((r) => (
            <div key={r.name} style={{ display: 'flex', alignItems: 'center', gap: mobile ? 12 : 16, padding: '12px 14px', borderRadius: 'var(--radius-md)', background: 'var(--surface-ground)' }}>
              <span style={{ width: 9, height: 9, borderRadius: '50%', background: col[r.state], flex: 'none' }} />
              <div style={{ flex: 1, minWidth: 0 }}><div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5 }}>{r.name}</div><div style={{ fontSize: 12, color: 'var(--vmax-ink-soft)' }}>{r.note}</div></div>
              {!mobile && <Sparkband state={r.state} />}
              <span style={{ fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.06em', color: col[r.state], textAlign: 'right' }}>{r.state === 'clean' ? 'Clean' : r.state === 'drift' ? 'In band' : 'Attention'}</span>
            </div>
          ))}
        </div>
      </Panel>
    );
  }
  function Sparkband({ state }) {
    const pts = state === 'clean' ? [10, 11, 10, 12, 10, 11] : state === 'drift' ? [10, 12, 13, 14, 15, 16] : [10, 18, 9, 20, 8, 22];
    return (
      <div style={{ position: 'relative', width: 110, height: 34, background: 'var(--surface-card)', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--vmax-line)', flex: 'none' }}>
        <div style={{ position: 'absolute', left: 0, right: 0, top: 8, height: 13, background: 'var(--vmax-mint)', opacity: .5 }} />
        <svg viewBox="0 0 120 36" style={{ position: 'absolute', inset: 0 }}><polyline fill="none" stroke={state === 'problem' ? 'var(--vmax-danger)' : state === 'drift' ? 'var(--vmax-amber)' : 'var(--vmax-ok)'} strokeWidth="2" points={pts.map((p, i) => `${i * 24},${36 - (p / 24) * 32}`).join(' ')} /></svg>
      </div>
    );
  }

  window.VMAXCLOSE = { DailyClose, Reports, TheDay };
})();