/* ═══════════════════════════════════════════════════════════════════
   ReportsPage.jsx — Client Reports overview. v1.0.0 — ported from the
   Claude Design v2 package
   (_CLAUDE-DESIGN/_2026-06-12-v2-SaaS-Redesign/reports-page.jsx) —
   port, not redesign. Reuses Sessions 1–2 primitives via the app's
   namespaced ports: SeoStatCard + Seg ← WPSB.SeoTracker, Sparkline ←
   WPSB.SeoCharts, ToggleCard bare global (WizardPrimitives), plus
   WPSB.ReportsCharts / WPSB.ReportsData (bare-global design refs
   rewritten to the namespaces — the only port delta in this file).
   Load order: THIRD of the four Reports modules.
   Registers: window.WPSB.ReportsPage = { ReportsOverview,
   ReportContents, NextDeliveryCard, ReportRow }.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
const { useState: useStateRp } = React;
const { DeliveryPill, ScheduleChip, AvatarStack, ReportCoverPreview } = window.WPSB.ReportsCharts;
const { REPORTS, REPORT_STATS, REPORT_SECTIONS, COVER } = window.WPSB.ReportsData;
const { Seg, SeoStatCard } = window.WPSB.SeoTracker;
const Sparkline = window.WPSB.SeoCharts.Sparkline;

/* next-delivery stat — mirrors SeoStatCard shell, adds a sub line */
function NextDeliveryCard({ value, sub }) {
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: '16px 18px' } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 } },
      React.createElement('span', { style: { width: 28, height: 28, borderRadius: 'var(--r-sm)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'color-mix(in oklch, var(--viz-4) 14%, transparent)', color: 'var(--viz-4)', border: '1px solid color-mix(in oklch, var(--viz-4) 28%, transparent)' } },
        React.createElement(WIcon, { name: 'clock', size: 15 })),
      React.createElement('span', { className: 'wiz-eyebrow', style: { fontSize: '.58rem', flex: 1 } }, 'Next delivery')),
    React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 7 } },
      React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1.7rem', color: 'var(--text)', lineHeight: 1 } }, value)),
    React.createElement('div', { style: { marginTop: 7, fontFamily: 'var(--font-mono)', fontSize: '.7rem', color: 'var(--muted)' } }, sub));
}

/* reports zebra table */
const REP_COLS = 'minmax(190px,1.7fr) minmax(132px,1.1fr) 118px 102px 92px 154px 40px';
function ReportsHead() {
  return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: REP_COLS, gap: 'var(--sp-3)', minWidth: 880,
    padding: '11px var(--sp-5)', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' } },
    ['Report', 'Client', 'Schedule', 'Recipients', 'Last sent', 'Status', ''].map((h, i) => React.createElement('span', { key: i, className: 'wiz-eyebrow', style: { fontSize: '.56rem', letterSpacing: '.1em' } }, h)));
}
function ReportRow({ row, idx, onToast }) {
  const [hover, setHover] = useStateRp(false);
  const zebra = idx % 2 === 1;
  const bg = hover ? 'var(--surface-3)' : (zebra ? 'var(--surface-2)' : 'var(--surface)');
  const cell = { display: 'flex', alignItems: 'center', minWidth: 0 };
  return React.createElement('div', { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false),
    style: { display: 'grid', gridTemplateColumns: REP_COLS, gap: 'var(--sp-3)', minWidth: 880, alignItems: 'center',
      padding: '12px var(--sp-5)', background: bg, borderBottom: '1px solid var(--border)' } },
    // report name + doc icon (clickable — opens the report)
    React.createElement('div', { style: { ...cell, gap: 11, cursor: 'pointer' }, role: 'button', tabIndex: 0,
      onClick: () => onToast({ kind: 'success', text: 'Opening “' + row.name + '”…' }),
      onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToast({ kind: 'success', text: 'Opening “' + row.name + '”…' }); } } },
      React.createElement('span', { style: { width: 30, height: 30, borderRadius: 'var(--r-sm)', flex: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'var(--beam-dim)', color: 'var(--beam)', border: '1px solid color-mix(in oklch, var(--beam) 24%, transparent)' } },
        React.createElement(WIcon, { name: 'file-text', size: 15 })),
      React.createElement('span', { style: { fontWeight: 'var(--fw-medium)', fontSize: '.86rem', color: hover ? 'var(--beam)' : 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', transition: 'color 140ms ease' } }, row.name)),
    // client + brand dot
    React.createElement('div', { style: { ...cell, gap: 8 } },
      React.createElement('span', { style: { width: 8, height: 8, borderRadius: 2, background: row.dot, flex: 'none' } }),
      React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.78rem', color: 'var(--text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, row.client)),
    // schedule
    React.createElement('div', { style: cell }, React.createElement(ScheduleChip, { value: row.schedule })),
    // recipients
    React.createElement('div', { style: cell }, React.createElement(AvatarStack, { people: row.recipients })),
    // last sent
    React.createElement('div', { style: cell },
      React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.76rem', color: row.last === '—' ? 'var(--dim)' : 'var(--text-2)' } }, row.last)),
    // status
    React.createElement('div', { style: cell }, React.createElement(DeliveryPill, { status: row.status, size: 'sm' })),
    // row action
    React.createElement('div', { style: { ...cell, justifyContent: 'flex-end' } },
      React.createElement('button', { type: 'button', className: 'wiz-focusable',
        'aria-label': 'Open ' + row.name,
        onClick: () => onToast({ kind: 'success', text: 'Opening “' + row.name + '”…' }),
        style: { width: 28, height: 28, borderRadius: 'var(--r-sm)', border: '1px solid transparent', background: 'transparent',
          color: hover ? 'var(--beam)' : 'var(--dim)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'color 140ms ease' } },
        React.createElement(WIcon, { name: 'arrow-up-right', size: 16 }))));
}

/* report-contents panel — ToggleCard composition (reuses §5 primitive) */
function ReportContents({ lockStyle, onToast }) {
  const [on, setOn] = useStateRp(() => Object.fromEntries(REPORT_SECTIONS.map(s => [s.key, !!s.enabled])));
  const toggle = (k) => setOn(o => ({ ...o, [k]: !o[k] }));
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)', padding: 'var(--sp-5)' } },
    React.createElement('div', { style: { marginBottom: 'var(--sp-4)' } },
      React.createElement('div', { style: { fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } }, 'Report contents'),
      React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)', marginTop: 3 } }, 'Sections pulled into every send for this client')),
    React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-3)' } },
      REPORT_SECTIONS.map(s => React.createElement(window.ToggleCard, {
        key: s.key, icon: s.icon, title: s.title, benefit: s.benefit, recommended: s.recommended,
        enabled: !!on[s.key], onToggle: () => toggle(s.key),
        lockStyle,
        locked: s.addon ? {
          reason: 'AI visibility insights are part of the AI Add-on. Enable it to include answer-engine share-of-voice in client reports.',
          cta: { label: 'Add AI insights', kind: 'addon' },
          onCta: () => onToast({ kind: 'upsell', text: '→ Routing to checkout: AI Add-on' }),
        } : null,
      })))
  );
}

function ReportsOverview({ filter, setFilter, branded, lockStyle, onToast, onNew }) {
  const rows = filter === 'scheduled' ? REPORTS.filter(r => r.status === 'scheduled')
            : filter === 'drafts'    ? REPORTS.filter(r => r.status === 'draft')
            : REPORTS;
  const s = REPORT_STATS;
  return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-5)' } },
    // header
    React.createElement('div', { style: { display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--sp-4)', flexWrap: 'wrap' } },
      React.createElement('div', null,
        React.createElement('div', { className: 'wiz-eyebrow', style: { marginBottom: 6 } }, 'Clients · Reporting'),
        React.createElement('h1', { className: 'wiz-title', style: { margin: 0, fontSize: '1.6rem' } }, 'Client Reports'),
        React.createElement('p', { style: { margin: '6px 0 0', color: 'var(--text-2)', fontSize: '.9rem' } }, 'Branded SEO & performance reports, delivered to your clients on schedule')),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', flexWrap: 'wrap' } },
        React.createElement(Seg, { options: [{ key: 'all', label: 'All' }, { key: 'scheduled', label: 'Scheduled' }, { key: 'drafts', label: 'Drafts' }], value: filter, onChange: setFilter }),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-primary wiz-focusable', style: { fontSize: '.74rem' },
          onClick: () => (onNew ? onNew() : onToast({ kind: 'success', text: 'New report — opening the builder…' })) },
          React.createElement(WIcon, { name: 'plus', size: 15 }), 'New report'))),

    // stat row
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px,1fr))', gap: 'var(--sp-4)' } },
      React.createElement(SeoStatCard, { icon: 'send', label: 'Sent this month', value: s.sent.value, delta: s.sent.delta, accent: 'var(--viz-1)', spark: React.createElement(Sparkline, { data: s.sent.spark, color: 'var(--viz-1)' }) }),
      React.createElement(SeoStatCard, { icon: 'calendar', label: 'Scheduled', value: s.scheduled.value, accent: 'var(--viz-3)', spark: React.createElement(Sparkline, { data: s.scheduled.spark, color: 'var(--viz-3)', area: true }) }),
      React.createElement(SeoStatCard, { icon: 'eye', label: 'Avg. open rate', value: s.openRate.value, delta: s.openRate.delta, accent: 'var(--viz-2)', spark: React.createElement(Sparkline, { data: s.openRate.spark, color: 'var(--viz-2)' }) }),
      React.createElement(NextDeliveryCard, { value: s.next.value, sub: s.next.sub })),

    // reports table
    React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)', overflow: 'hidden' } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--sp-4)', flexWrap: 'wrap', padding: 'var(--sp-5) var(--sp-5) var(--sp-4)' } },
        React.createElement('div', null,
          React.createElement('div', { style: { fontWeight: 'var(--fw-label)', fontSize: '1rem', color: 'var(--text)' } }, 'Reports'),
          React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)', marginTop: 3 } }, rows.length + ' report' + (rows.length === 1 ? '' : 's') + ' · ' + (filter === 'all' ? 'all clients' : filter))),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-tool wiz-focusable', style: { fontSize: '.74rem' },
          onClick: () => onToast({ kind: 'success', text: 'Exporting report index (CSV)…' }) },
          React.createElement(WIcon, { name: 'download', size: 14 }), 'Export')),
      React.createElement('div', { style: { overflowX: 'auto' } },
        React.createElement(ReportsHead),
        rows.length
          ? React.createElement('div', null, rows.map((r, i) => React.createElement(ReportRow, { key: r.id, row: r, idx: i, onToast })))
          : React.createElement('div', { style: { padding: 'var(--sp-7)', textAlign: 'center', color: 'var(--muted)', fontSize: '.86rem' } }, 'No ' + filter + ' reports right now.'))),

    // contents + cover preview split
    React.createElement('div', { style: { display: 'flex', gap: 'var(--sp-5)', flexWrap: 'wrap', alignItems: 'flex-start' } },
      React.createElement('div', { style: { flex: '1.5 1 360px', minWidth: 320 } },
        React.createElement(ReportContents, { lockStyle, onToast })),
      React.createElement('div', { style: { flex: '1 1 300px', minWidth: 280, maxWidth: 440, display: 'flex', flexDirection: 'column', gap: 'var(--sp-3)' } },
        React.createElement('div', { className: 'wiz-eyebrow', style: { color: 'var(--muted)' } }, 'Cover preview' + (branded ? ' · white-label' : '')),
        React.createElement(ReportCoverPreview, { cover: COVER, branded }),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-tool wiz-focusable', style: { fontSize: '.74rem', alignSelf: 'flex-start' },
          onClick: () => onToast({ kind: 'success', text: 'Generating PDF preview…' }) },
          React.createElement(WIcon, { name: 'download', size: 14 }), 'Preview PDF')))
  );
}

window.WPSB = window.WPSB || {};
window.WPSB.ReportsPage = { ReportsOverview, ReportContents, NextDeliveryCard, ReportRow };
console.log('[WPSB] ReportsPage v1.0.0 loaded');
})();