/* ═══════════════════════════════════════════════════════════════════
   PerfPage.jsx — Performance / CWV overview. v1.0.0 — ported from the
   Claude Design v2 package
   (_CLAUDE-DESIGN/_2026-06-12-v2-SaaS-Redesign/perf-page.jsx) — port,
   not redesign. Reuses Session 1 primitives via the app's namespaced
   ports: Seg ← WPSB.SeoTracker, Sparkline ← WPSB.SeoCharts, plus
   WPSB.PerfCharts / WPSB.PerfData (bare-global design refs rewritten
   to the namespaces — the only port delta in this file).
   Load order: THIRD of the four Perf modules (after PerfCharts +
   PerfData, which it destructures at IIFE top).
   Registers: window.WPSB.PerfPage = { PerfOverview, PerfStat,
   ThresholdLegend, UptimeLegend }.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
const { useState: useStatePf } = React;
const { VERDICT, VerdictChip, MetricCell, ThresholdMeter, UptimeStrip, EndpointBar } = window.WPSB.PerfCharts;
const { CWV_THRESHOLDS, cwvVerdict, siteVerdict, PERF_SITES, perfAverages, PERF_SPARKS, PERF_ENDPOINTS } = window.WPSB.PerfData;
const Seg = window.WPSB.SeoTracker.Seg;
const Sparkline = window.WPSB.SeoCharts.Sparkline;

/* stat card reused from Session 1 vocabulary, with verdict accent + target */
function PerfStat({ metric, value, display, spark }) {
  const t = CWV_THRESHOLDS[metric];
  const verdict = metric === 'uptime' ? 'good' : cwvVerdict(metric, value);
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: '16px 18px', overflow: 'hidden' } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 12 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
        React.createElement('span', { className: 'wiz-eyebrow', style: { fontSize: '.58rem' } }, t ? t.name : 'Uptime'),
        t && React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.58rem', color: 'var(--dim)' } }, 'target ' + t.target)),
      metric !== 'uptime' && React.createElement(VerdictChip, { verdict, size: 'sm' })),
    React.createElement('div', { style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 10 } },
      React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1.7rem', color: 'var(--text)', lineHeight: 1, fontVariantNumeric: 'tabular-nums', flex: 'none' } }, display),
      spark && React.createElement('div', { style: { flex: '0 1 auto', minWidth: 0, overflow: 'hidden' } }, spark)));
}

/* CWV-by-site table (zebra) */
const PERF_COLS = 'minmax(160px,1.4fr) 150px 150px 150px 130px';
function PerfHead() {
  return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: PERF_COLS, gap: 'var(--sp-3)', minWidth: 760,
    padding: '11px var(--sp-5)', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' } },
    ['Site', 'LCP', 'INP', 'CLS', 'Verdict'].map((h, i) => React.createElement('span', { key: i, className: 'wiz-eyebrow', style: { fontSize: '.56rem', letterSpacing: '.1em' } }, h)));
}
function PerfRow({ row, idx, device }) {
  const [hover, setHover] = useStatePf(false);
  const m = row[device];
  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: PERF_COLS, gap: 'var(--sp-3)', minWidth: 760, alignItems: 'center',
      padding: '13px var(--sp-5)', background: bg, borderBottom: '1px solid var(--border)' } },
    React.createElement('div', { style: { ...cell, gap: 8 } },
      React.createElement('span', { style: { width: 8, height: 8, borderRadius: 2, background: VERDICT[siteVerdict(m)].cf, flex: 'none' } }),
      React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.82rem', color: 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, row.site)),
    React.createElement('div', { style: cell }, React.createElement(MetricCell, { value: m.lcp.toFixed(1), unit: 's', verdict: cwvVerdict('lcp', m.lcp) })),
    React.createElement('div', { style: cell }, React.createElement(MetricCell, { value: m.inp, unit: 'ms', verdict: cwvVerdict('inp', m.inp) })),
    React.createElement('div', { style: cell }, React.createElement(MetricCell, { value: m.cls.toFixed(2), verdict: cwvVerdict('cls', m.cls) })),
    React.createElement('div', { style: cell }, React.createElement(VerdictChip, { verdict: siteVerdict(m), size: 'sm' })));
}

/* threshold legend strip (the 3 metrics with their meters) */
function ThresholdLegend({ device }) {
  const avg = perfAverages(device);
  return React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px,1fr))', gap: 'var(--sp-5)' } },
    ['lcp', 'inp', 'cls'].map(k => {
      const t = CWV_THRESHOLDS[k];
      const val = avg[k];
      const verdict = cwvVerdict(k, val);
      const disp = k === 'lcp' ? val.toFixed(1) + 's' : k === 'inp' ? val + 'ms' : val.toFixed(2);
      return React.createElement('div', { key: k, className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)' } },
        // header: abbreviation (left) + verdict pill (top-right) — matches the row above
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 2 } },
          React.createElement('span', { style: { fontWeight: 'var(--fw-label)', fontSize: '.95rem', color: 'var(--text)' } }, t.name),
          React.createElement(VerdictChip, { verdict, size: 'sm' })),
        // full metric name under the abbreviation
        React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.7rem', color: 'var(--muted)', marginBottom: 'var(--sp-4)' } }, t.full),
        // value
        React.createElement('div', { style: { marginBottom: 'var(--sp-4)' } },
          React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1.5rem', color: 'var(--text)' } }, disp)),
        React.createElement(ThresholdMeter, { value: val, display: disp, goodMax: t.goodMax, niMax: t.niMax, scaleMax: t.scaleMax, verdict, labelGood: 'good ≤ ' + t.labelGood, labelNi: t.labelNi }));
    }));
}

function PerfOverview({ device, setDevice }) {
  const avg = perfAverages(device);
  const maxMs = Math.max(...PERF_ENDPOINTS.map(e => e.ms));
  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 } }, 'SEO · Performance'),
        React.createElement('h1', { className: 'wiz-title', style: { margin: 0, fontSize: '1.6rem' } }, 'Core Web Vitals'),
        React.createElement('p', { style: { margin: '6px 0 0', color: 'var(--text-2)', fontSize: '.9rem' } }, 'Field performance + uptime across ' + PERF_SITES.length + ' sites · last 28 days')),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', flexWrap: 'wrap' } },
        React.createElement(Seg, { options: [{ key: 'mobile', label: 'Mobile' }, { key: 'desktop', label: 'Desktop' }], value: device, onChange: setDevice }),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-tool wiz-focusable', style: { fontSize: '.74rem' } }, React.createElement(WIcon, { name: 'refresh', size: 14 }), 'Re-run'))),

    // stat row
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px,1fr))', gap: 'var(--sp-4)' } },
      React.createElement(PerfStat, { metric: 'lcp', value: avg.lcp, display: avg.lcp.toFixed(1) + 's', spark: React.createElement(Sparkline, { data: PERF_SPARKS.lcp, invert: true, color: 'var(--viz-1)', w: 76 }) }),
      React.createElement(PerfStat, { metric: 'inp', value: avg.inp, display: avg.inp + 'ms', spark: React.createElement(Sparkline, { data: PERF_SPARKS.inp, invert: true, color: 'var(--viz-1)', w: 76 }) }),
      React.createElement(PerfStat, { metric: 'cls', value: avg.cls, display: avg.cls.toFixed(2), spark: React.createElement(Sparkline, { data: PERF_SPARKS.cls, invert: true, color: 'var(--viz-1)', w: 76 }) }),
      React.createElement(PerfStat, { metric: 'uptime', value: avg.uptime, display: avg.uptime + '%', spark: React.createElement(Sparkline, { data: PERF_SPARKS.uptime, color: 'var(--viz-3)', area: true, w: 62 }) })),

    // threshold meters
    React.createElement(ThresholdLegend, { device }),

    // CWV-by-site 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)' } }, 'Core Web Vitals by site'),
          React.createElement('div', { style: { fontFamily: 'var(--font-mono)', fontSize: '.72rem', color: 'var(--muted)', marginTop: 3 } }, PERF_SITES.length + ' sites · ' + device + ' · field data (p75)')),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-tool wiz-focusable', style: { fontSize: '.74rem' } }, React.createElement(WIcon, { name: 'download', size: 14 }), 'Export')),
      React.createElement('div', { style: { overflowX: 'auto' } },
        React.createElement(PerfHead),
        React.createElement('div', null, PERF_SITES.map((r, i) => React.createElement(PerfRow, { key: i, row: r, idx: i, device }))))),

    // slowest endpoints + uptime strip split
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px,1fr))', gap: 'var(--sp-5)' } },
      React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--sp-5)' } },
          React.createElement('span', { className: 'wiz-eyebrow' }, 'Slowest pages'),
          React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.66rem', color: 'var(--muted)' } }, 'load time')),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-4)' } },
          PERF_ENDPOINTS.map((e, i) => React.createElement(EndpointBar, { key: i, path: e.path, ms: e.ms, max: maxMs, reason: e.reason, verdict: e.verdict })))),
      React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)' } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--sp-5)', gap: 10, flexWrap: 'wrap' } },
          React.createElement('span', { className: 'wiz-eyebrow' }, 'Uptime · last 30 days'),
          React.createElement(UptimeLegend)),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-4)' } },
          PERF_SITES.slice(0, 4).map((s, i) => React.createElement(UptimeStrip, { key: i, days: s.days, label: s.site, pct: s.uptime })))))
  );
}

function UptimeLegend() {
  const items = [['var(--v-good)', 'Operational'], ['var(--v-warn)', 'Degraded'], ['var(--v-poor)', 'Outage']];
  return React.createElement('div', { style: { display: 'flex', gap: 'var(--sp-3)', flexWrap: 'wrap' } },
    items.map(([c, t], i) => React.createElement('span', { key: i, style: { display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: 'var(--font-mono)', fontSize: '.62rem', color: 'var(--muted)' } },
      React.createElement('span', { style: { width: 9, height: 9, borderRadius: 2, background: c } }), t)));
}

window.WPSB = window.WPSB || {};
window.WPSB.PerfPage = { PerfOverview, PerfStat, ThresholdLegend, UptimeLegend };
console.log('[WPSB] PerfPage v1.0.0 loaded');
})();