/* ═══════════════════════════════════════════════════════════════════
   SeoDetail.jsx — keyword detail drill-in + empty/first-run state. v1.0.0
   Ported verbatim from the Claude Design v2 package
   (_CLAUDE-DESIGN/_2026-06-12-v2-SaaS-Redesign/seo-detail.jsx).
   Load order: FOURTH (after SeoCharts/SeoData/SeoTracker).
   Registers: window.WPSB.SeoDetail = { SeoKeywordDetail, SeoEmptyState }.
   ═══════════════════════════════════════════════════════════════════ */
(function () {
const WIcon = window.WIcon;
const { RankTrendChart, Delta, OverlapBar } = window.WPSB.SeoCharts;
const { SerpFeatures, ClaudeChip } = window.WPSB.SeoData;
const { DailyUpsell, downloadReportPdf } = window.WPSB.SeoTracker;

/* honest "not served yet" panel for api-gap blocks (competitors, etc.) */
function PendingNote({ eyebrow, icon, text }) {
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px dashed var(--border-2)', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)' } },
    React.createElement('span', { className: 'wiz-eyebrow', style: { display: 'block', marginBottom: 'var(--sp-4)' } }, eyebrow),
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, color: 'var(--muted)' } },
      React.createElement(WIcon, { name: icon || 'clock', size: 16 }),
      React.createElement('span', { style: { fontSize: '.82rem', lineHeight: 1.45 } }, text)));
}

function DetailStat({ label, value, tone, sub }) {
  return React.createElement('div', { style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r)', padding: '12px 14px' } },
    React.createElement('div', { className: 'wiz-eyebrow', style: { fontSize: '.56rem', marginBottom: 6 } }, 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.4rem', color: tone || 'var(--text)' } }, value),
      sub && React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.7rem', color: 'var(--muted)' } }, sub)));
}

function SeoKeywordDetail({ row, plan, onBack, onUpsell, meta }) {
  // Real per-keyword position history only. Competitor overlays are an api-gap
  // (/seo/rank/* returns this account's rank, not competitors) — primary series only.
  const trend = row.trend || [];
  const n = trend.length;
  const labels = trend.map((v, i) => (i === n - 1 ? 'now' : (n - 1 - i) + 'w'));
  const series = [{ name: 'You', data: trend, color: 'var(--viz-1)', primary: true }];
  const aiMap = { cited: { c: 'var(--viz-up)', t: 'Cited #' + row.aiPos }, mentioned: { c: 'var(--viz-1)', t: 'Mentioned' }, absent: { c: 'var(--dim)', t: 'Absent' } };
  const ai = aiMap[row.ai] || null;
  const change = (row.prev != null && row.pos != null) ? (row.prev - row.pos) : null;
  const domain = (meta && meta.domain) || row._domain || 'your site';

  return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-5)' } },
    // breadcrumb back
    React.createElement('button', { type: 'button', onClick: onBack, className: 'wiz-btn wiz-btn-secondary wiz-focusable',
      style: { display: 'inline-flex', alignItems: 'center', gap: 6, alignSelf: 'flex-start', fontSize: '.74rem', padding: '7px 14px' } },
      React.createElement(WIcon, { name: 'chevron-left', size: 15 }), 'All keywords'),

    // 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 } }, 'Keyword detail'),
        React.createElement('h1', { className: 'wiz-title', style: { margin: 0, fontSize: '1.5rem' } }, row.kw),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginTop: 8, flexWrap: 'wrap' } },
          React.createElement(SerpFeatures, { features: row.serp }),
          React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: '.74rem' } },
            React.createElement('span', { style: { color: 'var(--muted)' } }, 'Site URL:'),
            React.createElement('span', { style: { color: 'var(--beam)' } }, domain + (row.url || ''))))),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' } },
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-tool wiz-focusable', style: { fontSize: '.74rem' },
          onClick: () => downloadReportPdf('keyword-' + row.kw.replace(/[^a-z0-9]+/gi, '-').toLowerCase() + '.pdf', 'WPSiteBeam — ' + row.kw, ['Site: ' + domain + (row.url || ''), 'Current position: ' + (row.pos == null ? 'pending' : '#' + row.pos), 'Best position: ' + (row.best == null ? 'n/a' : '#' + row.best), 'Search volume: not measured', 'AI visibility: not measured']) },
          React.createElement(WIcon, { name: 'download', size: 14 }), 'Export'),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-secondary wiz-focusable', style: { fontSize: '.74rem' },
          onClick: () => window.open('https://www.google.com/search?q=' + encodeURIComponent(row.kw), '_blank', 'noopener') },
          React.createElement(WIcon, { name: 'external', size: 14 }), 'View SERP'))),

    // stat strip
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px,1fr))', gap: 'var(--sp-3)' } },
      React.createElement(DetailStat, { label: 'Current position', value: row.pos == null ? 'pending' : '#' + row.pos, tone: row.pos == null ? 'var(--dim)' : row.pos <= 3 ? 'var(--viz-up)' : row.pos <= 10 ? 'var(--viz-1)' : 'var(--text)' }),
      React.createElement(DetailStat, { label: 'Change (7d)', value: change == null ? React.createElement('span', { style: { color: 'var(--dim)' } }, '—') : React.createElement(Delta, { value: change, size: '1.4rem', showZero: true }) }),
      React.createElement(DetailStat, { label: 'Best position', value: row.best == null ? '—' : '#' + row.best, sub: row.best == null ? null : 'peak' }),
      React.createElement(DetailStat, { label: 'Search volume', value: '—', sub: 'pending', tone: 'var(--dim)' }),
      React.createElement(DetailStat, { label: 'AI visibility', value: ai ? React.createElement('span', { style: { color: ai.c, fontSize: '1rem', whiteSpace: 'nowrap' } }, ai.t) : React.createElement('span', { style: { color: 'var(--dim)', fontSize: '1rem' } }, '—') })),

    // trend chart card
    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', gap: 10, flexWrap: 'wrap', marginBottom: 'var(--sp-4)' } },
        React.createElement('span', { className: 'wiz-eyebrow' }, 'Position trend'),
        React.createElement('div', { style: { display: 'flex', gap: 'var(--sp-4)', flexWrap: 'wrap' } },
          series.map((s, i) => React.createElement('span', { key: i, style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: '.7rem', color: 'var(--text-2)' } },
            React.createElement('span', { style: { width: 14, height: 0, borderTop: (s.primary ? '2.5px solid ' : '2px dashed ') + s.color } }), s.name)))),
      plan === 'daily'
        ? React.createElement(RankTrendChart, { series, labels })
        : React.createElement(WeeklyTrendNote, { series, labels, onUpsell, plan })),

    // local competitors — api-gap: /seo/rank/* returns this account's rank only
    React.createElement(PendingNote, { eyebrow: 'Local competitors', icon: 'users',
      text: 'Competitor positions and share-of-voice arrive with a later API increment — rank tracking returns your own positions only.' }),

    // SERP + history split
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px,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('span', { className: 'wiz-eyebrow', style: { display: 'block', marginBottom: 'var(--sp-4)' } }, 'Position history'),
        n === 0
          ? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, color: 'var(--muted)', fontSize: '.82rem' } }, React.createElement(WIcon, { name: 'clock', size: 14 }), 'No checks recorded yet — the first run is queued.')
          : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
            trend.slice().reverse().map((v, i) => { var rc = v <= 5 ? 'var(--viz-up)' : v <= 10 ? 'var(--v-warn)' : 'var(--v-poor)'; return React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '7px 0', borderBottom: i < n - 1 ? '1px solid var(--border)' : 'none' } },
              React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.74rem', color: 'var(--muted)' } }, labels.slice().reverse()[i]),
              React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.92rem', color: rc, fontWeight: 'var(--fw-bold)' } }, '#' + v)); }))),
      React.createElement(AiSuggestForKeyword, { row })));
}

/* local competitor ranking for the keyword (top results in the site area) */
function LocalCompetitors({ row }) {
  const rc = function (v) { return v <= 5 ? 'var(--viz-up)' : v <= 10 ? 'var(--v-warn)' : 'var(--v-poor)'; };
  const rows = [
    { domain: 'hostpro.example', pos: 2, prev: 3, sov: 28 },
    { domain: 'siteforge.example', pos: 5, prev: 4, sov: 19 },
    { domain: 'agencysite.com', pos: row.pos, prev: row.prev, sov: 16, you: true },
    { domain: 'cloudnine.example', pos: 7, prev: 9, sov: 12 },
    { domain: 'wpscale.example', pos: 9, prev: 7, sov: 9 }
  ].sort(function (a, b) { return a.pos - b.pos; });
  const header = React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', marginBottom: 'var(--sp-4)' } },
    React.createElement('span', { className: 'wiz-eyebrow' }, 'Local competitors'),
    React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: '.66rem', color: 'var(--muted)' } },
      React.createElement(WIcon, { name: 'map-pin', size: 12 }), 'Top results · your area'));
  const list = rows.map(function (c, i) {
    const rowStyle = { display: 'grid', gridTemplateColumns: '48px minmax(120px,1.4fr) 90px minmax(120px,1fr)', gap: 'var(--sp-3)', alignItems: 'center', padding: '10px var(--sp-2)', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none', background: c.you ? 'color-mix(in oklch, var(--beam) 8%, transparent)' : 'transparent', borderRadius: c.you ? 'var(--r-sm)' : 0 };
    const youTag = c.you ? React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.54rem', letterSpacing: '.06em', color: 'var(--beam)', background: 'var(--beam-dim)', border: '1px solid color-mix(in oklch, var(--beam) 30%, transparent)', borderRadius: 999, padding: '1px 6px' } }, 'YOU') : null;
    return React.createElement('div', { key: i, style: rowStyle },
      React.createElement('span', { style: { fontFamily: 'var(--font-brand)', fontWeight: 'var(--fw-bold)', fontSize: '1rem', color: rc(c.pos) } }, '#' + c.pos),
      React.createElement('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0 } },
        React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.8rem', color: c.you ? 'var(--beam)' : 'var(--text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, c.domain),
        youTag),
      React.createElement('div', { style: { display: 'flex', alignItems: 'center' } }, React.createElement(Delta, { value: c.prev - c.pos, size: '.74rem' })),
      React.createElement(OverlapBar, { value: c.sov, color: c.you ? 'var(--viz-1)' : 'var(--viz-2)' }));
  });
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)' } },
    header,
    React.createElement('div', { style: { display: 'flex', flexDirection: 'column' } }, list));
}

function WeeklyTrendNote({ series, labels, onUpsell, plan }) {
  return React.createElement('div', { style: { position: 'relative' } },
    React.createElement('div', { style: { filter: 'saturate(.5) opacity(.5)', pointerEvents: 'none' } },
      React.createElement(RankTrendChart, { series: [series[0]], labels })),
    React.createElement('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
      React.createElement('div', { style: { textAlign: 'center', background: 'color-mix(in oklch, var(--surface) 86%, transparent)', backdropFilter: 'blur(2px)',
        border: '1px solid color-mix(in oklch, var(--wiz-upsell) 30%, transparent)', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5) var(--sp-6)', maxWidth: 360 } },
        React.createElement('div', { style: { display: 'inline-flex', marginBottom: 10, color: 'var(--wiz-upsell)' } }, React.createElement(WIcon, { name: 'zap', size: 24 })),
        React.createElement('div', { style: { fontWeight: 'var(--fw-label)', color: 'var(--text)', marginBottom: 4 } }, 'Fresher trend lines on daily'),
        React.createElement('p', { style: { margin: '0 0 var(--sp-4)', fontSize: '.82rem', color: 'var(--text-2)', lineHeight: 1.45 } },
          plan === 'solo' ? 'Weekly trend shown. Daily updates are available on Starter and above.' : 'You’re seeing weekly snapshots. Upgrade for daily points and competitor overlays.'),
        plan === 'solo'
          ? React.createElement('span', { style: { fontFamily: 'var(--font-mono)', fontSize: '.74rem', color: 'var(--muted)' } }, 'Available on Starter and above')
          : React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-upsell wiz-focusable', onClick: onUpsell, style: { fontSize: '.74rem' } },
              React.createElement(WIcon, { name: 'arrow-up-right', size: 14 }), 'Upgrade to Daily Tracking'))));
}

function AiSuggestForKeyword({ row }) {
  return React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid color-mix(in oklch, var(--beam) 22%, var(--border))', borderRadius: 'var(--r-lg)', padding: 'var(--sp-5)' } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--sp-4)', gap: 8, flexWrap: 'wrap' } },
      React.createElement('span', { className: 'wiz-eyebrow' }, 'AI suggestions'), React.createElement(ClaudeChip)),
    React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-3)' } },
      ['Add a comparison table targeting this term — a strong tactic for competitive queries.',
       'Expand the intro to answer the query in the first 40 words for snippet capture.',
       'Keep a concise definition block fresh to qualify for AI answer citations.'
      ].map((t, i) => React.createElement('div', { key: i, style: { display: 'flex', gap: 10, alignItems: 'flex-start' } },
        React.createElement('span', { style: { color: 'var(--beam)', flex: 'none', marginTop: 1 } }, React.createElement(WIcon, { name: 'sparkles', size: 14 })),
        React.createElement('span', { style: { fontSize: '.82rem', color: 'var(--text-2)', lineHeight: 1.45 } }, t)))));
}

/* ── empty / first-run state ────────────────────────────────────────── */
function SeoEmptyState({ plan, onUpsell }) {
  return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 'var(--sp-5)' } },
    React.createElement('div', null,
      React.createElement('div', { className: 'wiz-eyebrow', style: { marginBottom: 6 } }, 'SEO · Rank tracking'),
      React.createElement('h1', { className: 'wiz-title', style: { margin: 0, fontSize: '1.6rem' } }, 'SEO Tracker')),

    // primary empty card
    React.createElement('div', { className: 'wiz-card', style: { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-xl)',
      padding: 'var(--sp-7)', textAlign: 'center' } },
      React.createElement('div', { style: { width: 60, height: 60, margin: '0 auto var(--sp-4)', borderRadius: 'var(--r-lg)', background: 'var(--beam-dim)', color: 'var(--beam)',
        display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(WIcon, { name: 'search', size: 30 })),
      React.createElement('h2', { className: 'wiz-title', style: { margin: '0 0 8px', fontSize: '1.25rem' } }, 'Track your first keyword'),
      React.createElement('p', { style: { margin: '0 auto var(--sp-5)', maxWidth: 440, color: 'var(--text-2)', lineHeight: 1.5, fontSize: '.9rem' } },
        'Add the search terms you want to rank for. We’ll check positions ' + (plan === 'daily' ? 'every day' : 'every week') + ', track movement, and surface AI content suggestions.'),
      React.createElement('div', { style: { display: 'flex', gap: 'var(--sp-3)', justifyContent: 'center', flexWrap: 'wrap', maxWidth: 460, margin: '0 auto' } },
        React.createElement('div', { style: { position: 'relative', flex: 1, minWidth: 220 } },
          React.createElement('span', { style: { position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--dim)', display: 'flex' } }, React.createElement(WIcon, { name: 'search', size: 15 })),
          React.createElement('input', { placeholder: 'e.g. managed wordpress hosting', className: 'wiz-focusable',
            style: { width: '100%', boxSizing: 'border-box', padding: '11px 12px 11px 34px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border-2)',
              background: 'var(--surface-2)', color: 'var(--text)', fontFamily: 'var(--font-body)', fontSize: '.88rem', outline: 'none' } })),
        React.createElement('button', { type: 'button', className: 'wiz-btn wiz-btn-primary wiz-focusable', style: { padding: '11px 20px' } }, 'Add keyword')),
      React.createElement('div', { style: { marginTop: 'var(--sp-5)', display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap' } },
        ['Import from a scan', 'Bulk add (CSV)', 'Suggest from my content'].map((t, i) => React.createElement('button', { key: i, type: 'button', className: 'wiz-btn wiz-btn-secondary wiz-focusable', style: { fontSize: '.72rem' } }, t)))),

    // the daily upsell still shown in first-run for free plans
    plan !== 'daily' && React.createElement(DailyUpsell, { plan: plan === 'solo' ? 'solo' : 'starter-eligible', onCta: onUpsell }));
}

window.WPSB = window.WPSB || {};
window.WPSB.SeoDetail = { SeoKeywordDetail, SeoEmptyState };
console.log('[WPSB] SeoDetail v1.0.0 loaded');
})();