/* global React, Icon, useReveal */
const { useEffect, useState } = React;

/* ── Live Trends: TikTok + Reddit signal feed ──────────────── */
const TIKTOK_FEED = [
  { handle: '@nyc.foodie',     views: '8.4M',  likes: '912K', tag: 'Tried Buldak Carbonara so you don\'t have to',  spark: [3, 5, 6, 9, 12, 18, 24] },
  { handle: '@asian.snacks',   views: '4.1M',  likes: '480K', tag: 'Ranking every Buldak flavor',                    spark: [2, 3, 4, 6, 7, 11, 15] },
  { handle: '@spice.lab',      views: '2.8M',  likes: '310K', tag: 'Side-by-side: Carbonara vs Cream',               spark: [4, 5, 5, 8, 9, 10, 14] },
  { handle: '@samyang.usa',    views: '1.6M',  likes: '188K', tag: 'New: Buldak Cup launch — first taste',           spark: [1, 2, 3, 5, 8, 9, 12] },
];

const REDDIT_FEED = [
  { sub: 'r/snackexchange', up: '4.2k', comments: '312', title: 'Where to find Buldak Carbonara in the US right now', age: '2h' },
  { sub: 'r/ramen',         up: '2.8k', comments: '188', title: 'Buldak Carbonara is overrated — change my mind',     age: '6h' },
  { sub: 'r/AsianBeauty',   up: '1.9k', comments: '142', title: 'My Costco finally stocked it. Worth the wait?',     age: '11h' },
  { sub: 'r/IndianFood',    up: '1.2k', comments: '94',  title: 'Adapted Buldak Carbonara with desi spice — recipe', age: '1d' },
];

function LiveTrends() {
  const ref = useReveal();
  const [tab, setTab] = useState('tiktok');

  return (
    <section className="section trends" id="trends" ref={ref}>
      <div className="container-wide">
        <div className="trends-head">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" />Live Trends</span>
            <h2 className="heading-l trends-h">
              The web, <em>scraped &amp; structured.</em>
            </h2>
          </div>
          <p className="lede reveal reveal-delay-1" style={{ maxWidth: 480 }}>
            Apify scrapers pull fresh signals from TikTok and Reddit in parallel, hand them to Claude for
            summary, and stream structured JSON back. We poll every 2 seconds. You see it land.
          </p>
        </div>

        <div className="trends-grid reveal reveal-delay-2">
          {/* Left — terminal-style job */}
          <div className="trends-pipe">
            <div className="trends-pipe-hd">
              <div className="row gap">
                <span className="chrome-dot" style={{ background: '#ff5f56' }} />
                <span className="chrome-dot" style={{ background: '#ffbd2e' }} />
                <span className="chrome-dot" style={{ background: '#27c93f' }} />
              </div>
              <span className="mono subtle" style={{ fontSize: 11 }}>
                POST /api/live-trends
              </span>
              <span className="chip mono" style={{ fontSize: 10 }}>
                <span className="dot" style={{ background: 'var(--success)' }} />
                LIVE
              </span>
            </div>
            <div className="trends-pipe-body mono">
              <div className="trends-line"><span className="trends-line-time">14:08:12</span><span className="trends-line-tag" style={{ color: 'var(--info)' }}>queued</span><span>job_91f3 · "Buldak Carbonara, Asia, week"</span></div>
              <div className="trends-line"><span className="trends-line-time">14:08:13</span><span className="trends-line-tag" style={{ color: 'var(--info)' }}>dispatch</span><span>apify · tiktok + reddit scrapers</span></div>
              <div className="trends-line"><span className="trends-line-time">14:08:14</span><span className="trends-line-tag" style={{ color: 'var(--text-muted)' }}>scrape</span><span>tiktok.com/discover · 240 results</span></div>
              <div className="trends-line"><span className="trends-line-time">14:08:17</span><span className="trends-line-tag" style={{ color: 'var(--text-muted)' }}>scrape</span><span>reddit.com/search · 86 threads</span></div>
              <div className="trends-line"><span className="trends-line-time">14:08:21</span><span className="trends-line-tag" style={{ color: 'var(--accent)' }}>claude</span><span>summarizing · sonnet-4-6</span></div>
              <div className="trends-line"><span className="trends-line-time">14:08:27</span><span className="trends-line-tag" style={{ color: 'var(--success)' }}>callback</span><span>job_91f3 · 6.2KB · schema-valid</span></div>
              <div className="trends-line trends-line-active">
                <span className="trends-line-time">14:08:27</span>
                <span className="trends-line-tag" style={{ color: 'var(--success)' }}>done</span>
                <span>15.4s end-to-end</span>
                <span className="trends-caret" />
              </div>
            </div>

            <div className="trends-pipe-foot">
              <div className="eyebrow">Callback payload</div>
              <pre className="trends-payload mono">{`{
  "jobId": "91f3-...",
  "answer": "Peak hype, expanding..."
}`}</pre>
            </div>
          </div>

          {/* Right — social feed visualisation */}
          <div className="trends-feed">
            <div className="trends-tabs">
              <button
                className={'trends-tab ' + (tab === 'tiktok' ? 'is-active' : '')}
                onClick={() => setTab('tiktok')}
              >
                <span className="trends-tab-icon">▶</span>
                TikTok
                <span className="mono subtle" style={{ fontSize: 11 }}>16.9M views · 30d</span>
              </button>
              <button
                className={'trends-tab ' + (tab === 'reddit' ? 'is-active' : '')}
                onClick={() => setTab('reddit')}
              >
                <span className="trends-tab-icon" style={{ background: '#ff4500' }}>r/</span>
                Reddit
                <span className="mono subtle" style={{ fontSize: 11 }}>4.1k mentions · 7d</span>
              </button>
            </div>

            <div className="trends-list">
              {tab === 'tiktok' && TIKTOK_FEED.map((p, i) => (
                <div key={p.handle} className="trends-item" style={{ animationDelay: `${i * 80}ms` }}>
                  <div className="trends-avatar" />
                  <div className="trends-item-body">
                    <div className="row gap">
                      <span className="mono" style={{ fontSize: 12 }}>{p.handle}</span>
                      <span className="mono subtle" style={{ fontSize: 11 }}>·</span>
                      <span className="mono subtle" style={{ fontSize: 11 }}>{p.views} views</span>
                    </div>
                    <div style={{ fontSize: 14, marginTop: 2, lineHeight: 1.4 }}>{p.tag}</div>
                  </div>
                  <Sparkline data={p.spark} />
                </div>
              ))}
              {tab === 'reddit' && REDDIT_FEED.map((p, i) => (
                <div key={p.title} className="trends-item" style={{ animationDelay: `${i * 80}ms` }}>
                  <div className="trends-avatar trends-avatar-reddit">r/</div>
                  <div className="trends-item-body">
                    <div className="row gap">
                      <span className="mono" style={{ fontSize: 12 }}>{p.sub}</span>
                      <span className="mono subtle" style={{ fontSize: 11 }}>·</span>
                      <span className="mono subtle" style={{ fontSize: 11 }}>{p.age}</span>
                    </div>
                    <div style={{ fontSize: 14, marginTop: 2, lineHeight: 1.4 }}>{p.title}</div>
                  </div>
                  <div className="col" style={{ alignItems: 'flex-end', gap: 2 }}>
                    <span className="mono" style={{ fontSize: 13, color: 'var(--accent)' }}>↑ {p.up}</span>
                    <span className="mono subtle" style={{ fontSize: 11 }}>{p.comments} cmts</span>
                  </div>
                </div>
              ))}
            </div>

            <div className="trends-feed-foot">
              <span className="mono subtle" style={{ fontSize: 11 }}>
                Polling /api/live-trends/status · every 2s
              </span>
              <span className="chip mono" style={{ fontSize: 10 }}>
                <span className="dot" style={{ background: 'var(--success)' }} />
                Synced 4s ago
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Sparkline({ data }) {
  const max = Math.max(...data);
  const min = Math.min(...data);
  const w = 60, h = 28;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - ((v - min) / (max - min || 1)) * h;
    return `${x},${y}`;
  }).join(' ');

  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} aria-hidden="true">
      <polyline
        points={pts}
        fill="none"
        stroke="var(--accent)"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <circle
        cx={(data.length - 1) / (data.length - 1) * w}
        cy={h - ((data[data.length - 1] - min) / (max - min || 1)) * h}
        r="2.5"
        fill="var(--accent)"
      />
    </svg>
  );
}

window.LiveTrends = LiveTrends;