/* global React, Icons, Badge, Btn, Pill, Meter, Score, Stat, Eyebrow */
const { useState } = React;

/* =========================================================================
   PLATFORM STRATEGY — maintained database
   ========================================================================= */

// Numbers per Streams Charts Q1 2026 (hours-watched basis). The Q1 story
// flipped the "Twitch in decline" narrative: Twitch +4.46% QoQ, TikTok Live
// −11.92%. Shares normalised to 100; QoQ deltas explicit because the
// trajectory matters more than the snapshot.
const PLATFORMS = [
  {
    id: 'tiktok',
    name: 'TikTok Live',
    color: '#FF2D6F',
    share: '42%',
    qoq: '−11.92%',
    qoqTone: 'warn',
    icon: Icons.tiktok,
    bitrate: 'App-controlled',
    vertical: 'Native',
    monetize: 'Gifts + Subs',
    payout: '50/50',
    rev: 'Mid',
    irl: 7.6,
    notes: 'Still largest by hours watched, but contracting QoQ. Best treated as a discovery surface — not the default platform.',
    eligibility: '1,000 followers',
    updated: 'May 12 ’26',
    badge: 'updated',
  },
  {
    id: 'twitch',
    name: 'Twitch',
    color: '#9146FF',
    share: '32%',
    qoq: '+4.46%',
    qoqTone: 'good',
    icon: Icons.twitch,
    bitrate: '6 Mbps · 1080p60',
    vertical: 'Dual-format · 2026',
    monetize: 'Sub + Bits + Ads',
    payout: '50/50 → 70/30',
    rev: 'Mid–High',
    irl: 9.4,
    notes: 'Monetization-for-All (May ’26) + dual-format vertical + Rewind + March ’26 mobile disconnect buffer make Twitch the natural IRL default again.',
    eligibility: 'Affiliate at 50 followers / 8 hrs / 7 unique days',
    updated: 'May 14 ’26',
  },
  {
    id: 'youtube',
    name: 'YouTube Live',
    color: '#FF0033',
    share: '17%',
    qoq: '+1.20%',
    qoqTone: 'good',
    icon: Icons.youtube,
    bitrate: '8 Mbps · 1080p60',
    vertical: 'Yes',
    monetize: 'Super Chat + Ads + Members',
    payout: '55/45',
    rev: 'High',
    irl: 8.6,
    notes: 'Best long-tail VOD retention and clip-to-Shorts flywheel. Stable creator economy.',
    eligibility: '500 subs / 3,000 watch hrs',
    updated: 'May 09 ’26',
  },
  {
    id: 'kick',
    name: 'Kick',
    color: '#53FC18',
    share: '6%',
    qoq: '+9.10%',
    qoqTone: 'good',
    icon: Icons.kick,
    bitrate: '8 Mbps · 1080p60',
    vertical: 'Limited',
    monetize: 'Sub + Tip',
    payout: '95/5',
    rev: 'Mid',
    irl: 8.2,
    notes: '95/5 sub split, ~$4.40 net per $5 sub. Community guidelines rewrote 2026. Fastest-growing platform QoQ.',
    eligibility: 'Open',
    updated: 'May 06 ’26',
  },
  {
    id: 'fb',
    name: 'Facebook Live',
    color: '#1877F2',
    share: '2%',
    qoq: '−2.40%',
    qoqTone: 'warn',
    icon: Icons.globe,
    bitrate: '4 Mbps · 1080p',
    vertical: 'Yes',
    monetize: 'Stars + Ads',
    payout: '55/45',
    rev: 'Low',
    irl: 6.0,
    notes: 'Marginal for IRL. Useful for cross-posting to older audiences.',
    eligibility: '60K min watch / 60 days',
    updated: 'May 04 ’26',
  },
  {
    id: 'x',
    name: 'X Live',
    color: '#FFFFFF',
    share: '1%',
    qoq: '+0.10%',
    qoqTone: 'good',
    icon: Icons.globe,
    bitrate: 'Variable',
    vertical: 'Yes',
    monetize: 'Subscription · ads',
    payout: '—',
    rev: 'Low',
    irl: 5.4,
    notes: 'Experimental. Volatile policy. Payout rate variance $3–$12 per 1M impressions. Don’t depend on it.',
    eligibility: 'Premium account',
    updated: 'Apr 28 ’26',
  },
];

const PlatformsPage = () => {
  const [active, setActive] = useState('twitch');
  const a = PLATFORMS.find(p => p.id === active);

  return (
    <div className="page-fade">
      {/* HEADER */}
      <section style={{ padding: '40px 0 24px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between" style={{ alignItems: 'flex-end' }}>
            <div style={{ maxWidth: '70%' }}>
              <Eyebrow>Live database · Q1 2026 · Streams Charts</Eyebrow>
              <h1 className="mt-3" style={{ fontSize: 56 }}>Where you stream<br/>changes everything.</h1>
              <p className="lede mt-3" style={{ maxWidth: '60ch' }}>
                Six platforms, side by side. We re-verify monetization splits, bitrate caps,
                and eligibility every month. Static tables on other sites are already wrong.
              </p>
            </div>
            <div className="col gap-2" style={{ alignItems: 'flex-end' }}>
              <div className="row gap-2">
                <Badge kind="independent">Independent</Badge>
                <Badge kind="updated" dot>Monthly verify</Badge>
              </div>
              <LastVerified date="2026-05-14" />
            </div>
          </div>
        </div>
      </section>

      {/* MARKET SHARE STRIP */}
      <section style={{ padding: '32px 0', background: 'var(--bg-1)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="row between mb-4">
            <Eyebrow>Q1 ’26 · Hours-watched share · QoQ trajectory matters more than the snapshot</Eyebrow>
            <span className="mono fs-12 text-fg4">SOURCE · STREAMS CHARTS Q1 ’26</span>
          </div>
          <div style={{
            display: 'flex', height: 36,
            border: '1px solid var(--line-2)',
            borderRadius: 4, overflow: 'hidden',
          }}>
            {PLATFORMS.map(p => {
              const pct = parseFloat(p.share);
              return (
                <button key={p.id}
                        onClick={() => setActive(p.id)}
                        title={`${p.name} — ${p.share}`}
                        style={{
                          width: `${pct}%`,
                          background: active === p.id ? p.color : `${p.color}40`,
                          borderRight: '1px solid var(--bg-0)',
                          color: active === p.id ? (p.id === 'twitch' || p.id === 'fb' ? 'white' : 'black') : 'var(--fg-2)',
                          fontFamily: 'var(--font-mono)', fontSize: 11,
                          letterSpacing: '0.06em',
                          cursor: 'pointer',
                          transition: 'all 120ms',
                        }}>
                  {pct > 5 ? `${p.name.toUpperCase()} ${p.share}` : p.share}
                </button>
              );
            })}
          </div>
          <div className="row gap-4 mt-3 mono fs-12 text-fg4 wrap">
            {PLATFORMS.map(p => (
              <span key={p.id}>
                <span style={{ display: 'inline-block', width: 10, height: 10, background: p.color, marginRight: 6, verticalAlign: -1 }} />
                {p.name} · {p.share}
                <span className={p.qoqTone === 'good' ? 'text-accent' : 'text-warn'} style={{ marginLeft: 6 }}>{p.qoq} QoQ</span>
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* DETAIL */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 28 }}>
            {/* sidebar */}
            <div>
              <Eyebrow>Pick a platform</Eyebrow>
              <div className="col gap-1 mt-3">
                {PLATFORMS.map(p => {
                  const Icon = p.icon;
                  return (
                    <button key={p.id} onClick={() => setActive(p.id)}
                      className="row gap-3 between"
                      style={{
                        padding: '12px 14px',
                        background: active === p.id ? 'var(--bg-2)' : 'transparent',
                        border: '1px solid ' + (active === p.id ? 'var(--line-3)' : 'var(--line)'),
                        borderRadius: 6,
                        textAlign: 'left',
                        cursor: 'pointer',
                        position: 'relative',
                      }}>
                      {active === p.id && <span style={{
                        position: 'absolute', left: -1, top: 8, bottom: 8, width: 2,
                        background: p.color,
                      }} />}
                      <div className="row gap-3">
                        <span style={{ color: p.color }}><Icon size={16} /></span>
                        <span style={{ fontSize: 14, fontWeight: 500 }}>{p.name}</span>
                      </div>
                      <span className="mono fs-12 text-fg4">{p.share}</span>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* detail */}
            <div>
              <div className="card" style={{ overflow: 'hidden' }}>
                {/* hero */}
                <div style={{ padding: 32, background: `linear-gradient(180deg, ${a.color}18, transparent), var(--bg-1)`, borderBottom: '1px solid var(--line)' }}>
                  <div className="row between mb-3">
                    <div className="row gap-3">
                      <div style={{
                        width: 44, height: 44, borderRadius: 4,
                        background: 'var(--bg-2)', border: '1px solid var(--line-2)',
                        display: 'grid', placeItems: 'center',
                        color: a.color,
                      }}><a.icon size={22} /></div>
                      <div>
                        <h2 style={{ fontSize: 32, lineHeight: 1 }}>{a.name}</h2>
                        <div className="text-fg3 fs-13 mt-1">Updated {a.updated} · {a.share} market share</div>
                      </div>
                    </div>
                    <div className="row gap-2">
                      {a.badge && <Badge kind="updated">{a.badge}</Badge>}
                      <Badge kind="tested" dot>Live data</Badge>
                    </div>
                  </div>
                  <p className="text-fg2 mt-3">{a.notes}</p>
                </div>

                {/* facts */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
                  {[
                    { l: 'Bitrate cap',  v: a.bitrate },
                    { l: 'Vertical',     v: a.vertical },
                    { l: 'Monetization', v: a.monetize },
                    { l: 'Payout split', v: a.payout },
                  ].map((f, i) => (
                    <div key={i} style={{ padding: 20, borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
                      <div className="stat-label">{f.l}</div>
                      <div style={{ fontSize: 15, fontWeight: 500, marginTop: 6 }}>{f.v}</div>
                    </div>
                  ))}
                </div>

                {/* scoreboard */}
                <div style={{ padding: 24, borderTop: '1px solid var(--line)', background: 'var(--bg-2)' }}>
                  <div className="row between mb-3">
                    <Eyebrow>For IRL streamers</Eyebrow>
                    <Score value={a.irl} />
                  </div>
                  <div className="col gap-3">
                    {[
                      ['Discovery — gets you seen', a.id === 'tiktok' ? 9.5 : a.id === 'youtube' ? 8.4 : 7.2],
                      ['Monetization — pays you', a.id === 'youtube' ? 8.8 : a.id === 'twitch' ? 8.2 : 7.0],
                      ['IRL community fit', a.irl],
                      ['Stability — no surprise ToS', a.id === 'x' ? 4.0 : a.id === 'kick' ? 6.5 : 8.4],
                    ].map(([k, v]) => (
                      <div key={k}>
                        <div className="row between mb-1">
                          <span className="fs-13 text-fg2">{k}</span>
                          <span className="mono fs-12 text-fg2">{v.toFixed(1)}</span>
                        </div>
                        <Meter value={v * 10} tone={v >= 8 ? '' : v >= 6.5 ? 'warn' : 'bad'} />
                      </div>
                    ))}
                  </div>
                </div>

                {/* eligibility */}
                <div style={{ padding: 24, borderTop: '1px solid var(--line)' }}>
                  <div className="row between mb-3">
                    <Eyebrow>Eligibility · Monetization gate</Eyebrow>
                    <span className="mono fs-12 text-fg4">VERIFIED · {a.updated.toUpperCase()}</span>
                  </div>
                  <div className="row between">
                    <div style={{ fontSize: 18, fontWeight: 500 }}>{a.eligibility}</div>
                    {/* Eligibility tracker is in the Toolkit (Phase 3 calculator). */}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* COMPARE TABLE */}
      <section className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <Eyebrow>All six · One table</Eyebrow>
              <h2 className="mt-3">The cheatsheet.</h2>
            </div>
            {/* CSV export lands in Phase 2 once data lives in /src/data. */}
          </div>
          <div className="card" style={{ overflow: 'hidden' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>Platform</th>
                  <th>Share</th>
                  <th>Bitrate</th>
                  <th>Vertical</th>
                  <th>Monetization</th>
                  <th>Split</th>
                  <th>IRL score</th>
                  <th>Updated</th>
                </tr>
              </thead>
              <tbody>
                {PLATFORMS.map(p => (
                  <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => setActive(p.id)}>
                    <td>
                      <div className="row gap-3">
                        <span style={{ color: p.color }}><p.icon size={16} /></span>
                        <span style={{ fontWeight: 500 }}>{p.name}</span>
                      </div>
                    </td>
                    <td className="num">{p.share}</td>
                    <td className="num text-fg2">{p.bitrate}</td>
                    <td className="text-fg2">{p.vertical}</td>
                    <td className="text-fg2">{p.monetize}</td>
                    <td className="num text-fg2">{p.payout}</td>
                    <td><Score value={p.irl} /></td>
                    <td className="mono fs-12 text-fg4">{p.updated.toUpperCase()}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  );
};

window.PlatformsPage = PlatformsPage;