/* ═══════════════════════════════════════════════════════════════════
   ReportsCharts.jsx — net-new presentational bits for Client Reports.
   v1.0.0 — ported from the Claude Design v2 package
   (_CLAUDE-DESIGN/_2026-06-12-v2-SaaS-Redesign/reports-charts.jsx) —
   port, not redesign. Delivery-status pill, schedule chip, recipient
   avatar stack, and the branded report-cover preview. Verdict/status
   reads by ICON + LABEL + color (never color alone, per WCAG 2.1 AA).
   All colors via tokens. Bare-global design refs (DELIVERY, Delta)
   rewritten to the app namespaces — the only port delta in this file.
   Load order: SECOND of the four Reports modules (after ReportsData).
   Registers: window.WPSB.ReportsCharts = { DeliveryPill, ScheduleChip,
   AvatarStack, ReportCoverPreview }.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
const { DELIVERY } = window.WPSB.ReportsData;
const Delta = window.WPSB.SeoCharts.Delta;

/* delivery-status pill — dot/icon + label + color */
function DeliveryPill({ status, size = 'md' }) {
  const v = DELIVERY[status];
  const sm = size === 'sm';
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: sm ? 5 : 6,
    padding: sm ? '3px 9px 3px 8px' : '4px 11px 4px 9px', borderRadius: 999, whiteSpace: 'nowrap',
    background: 'color-mix(in oklch, ' + v.cf + ' 13%, transparent)', color: v.c,
    border: '1px solid color-mix(in oklch, ' + v.cf + ' 34%, transparent)',
    fontFamily: 'var(--font-mono)', fontWeight: 'var(--fw-tag)', fontSize: sm ? '.58rem' : '.64rem', letterSpacing: '.04em' } },
    React.createElement(WIcon, { name: v.icon, size: sm ? 12 : 13 }), v.label);
}

/* schedule chip — calendar icon + cadence, neutral */
function ScheduleChip({ value }) {
  const oneOff = value === 'One-off';
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
    fontFamily: 'var(--font-mono)', fontSize: '.72rem', fontWeight: 'var(--fw-mono-small)', color: 'var(--text-2)' } },
    React.createElement(WIcon, { name: oneOff ? 'zap' : 'calendar', size: 13, style: { color: 'var(--muted)' } }),
    value);
}

/* recipient avatar stack — overlapping initial chips + optional +N */
function AvatarStack({ people, max = 3 }) {
  const shown = people.slice(0, max);
  const extra = people.length - shown.length;
  const tints = ['var(--viz-1)', 'var(--viz-2)', 'var(--viz-3)', 'var(--viz-5)'];
  return React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center' },
    title: people.length + ' recipient' + (people.length === 1 ? '' : 's') },
    shown.map((p, i) => React.createElement('span', { key: i,
      style: { width: 24, height: 24, borderRadius: '50%', marginLeft: i ? -7 : 0, flex: 'none',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        background: 'color-mix(in oklch, ' + tints[i % tints.length] + ' 20%, var(--surface))',
        border: '1.5px solid var(--surface)', boxShadow: '0 0 0 1px var(--border)',
        fontFamily: 'var(--font-mono)', fontSize: '.56rem', fontWeight: 'var(--fw-bold)',
        color: 'var(--text-2)', zIndex: max - i } }, p)),
    extra > 0 && React.createElement('span', { style: { marginLeft: 6, fontFamily: 'var(--font-mono)', fontSize: '.7rem', color: 'var(--muted)' } }, '+' + extra),
    React.createElement('span', { className: 'sr-only' }, people.length + ' recipients'));
}

/* ── branded report-cover preview ──────────────────────────────────────
   `branded` = white-label active → agency mark + the agency's accent color;
   otherwise the default WPSiteBeam cover with a "Powered by" footer. */
function ReportCoverPreview({ cover, agency = 'Beacon Digital', branded = false }) {
  const accent = branded ? 'var(--viz-2)' : 'var(--beam)';
  const accentBg = branded ? 'color-mix(in oklch, var(--viz-2) 12%, transparent)' : 'var(--beam-dim)';
  return React.createElement('div', { className: 'wiz-card', role: 'img',
    'aria-label': 'Report cover preview for ' + cover.client + ', ' + cover.range,
    style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)',
      overflow: 'hidden', boxShadow: 'var(--shadow-md)', display: 'flex', flexDirection: 'column' } },
    // accent spine
    React.createElement('div', { style: { height: 5, background: accent } }),
    React.createElement('div', { style: { padding: 'var(--sp-5)', display: 'flex', flexDirection: 'column', gap: 'var(--sp-4)' } },
      // brand row
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 } },
        React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 9 } },
          React.createElement('span', { style: { width: 30, height: 30, borderRadius: 'var(--r-sm)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: accentBg, color: accent, border: '1px solid color-mix(in oklch, ' + accent + ' 30%, transparent)' } },
            React.createElement(WIcon, { name: branded ? 'palette' : 'zap', size: 16 })),
          React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontSize: '.74rem', letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text)' } },
            branded ? agency : 'WPSiteBeam')),
        React.createElement('span', { className: 'wiz-eyebrow', style: { fontSize: '.56rem', color: 'var(--muted)' } }, 'Monthly report')),
      // client title
      React.createElement('div', null,
        React.createElement('div', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1.5rem', color: 'var(--text)', letterSpacing: '.01em', lineHeight: 1.1 } }, cover.client),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 6, fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)' } },
          React.createElement('span', null, cover.site),
          React.createElement('span', { style: { color: 'var(--dim)' } }, '·'),
          React.createElement('span', null, cover.range))),
      // metric grid
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-3)' } },
        cover.metrics.map((m, i) => React.createElement('div', { key: i, style: { background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', padding: '10px 12px' } },
          React.createElement('div', { className: 'wiz-eyebrow', style: { fontSize: '.52rem', marginBottom: 5 } }, m.label),
          React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 6 } },
            React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1.1rem', color: 'var(--text)' } }, m.value),
            m.delta != null && React.createElement(Delta, { value: m.delta, size: '.66rem' }))))),
      // footer
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
        paddingTop: 'var(--sp-3)', borderTop: '1px solid var(--border)', fontFamily: 'var(--font-mono)', fontSize: '.62rem', color: 'var(--dim)' } },
        React.createElement('span', null, branded ? 'Prepared by ' + agency : 'Powered by WPSiteBeam'),
        React.createElement('span', null, 'p.1 / 6')))
  );
}

window.WPSB = window.WPSB || {};
window.WPSB.ReportsCharts = { DeliveryPill, ScheduleChip, AvatarStack, ReportCoverPreview };
console.log('[WPSB] ReportsCharts v1.0.0 loaded');
})();