// Research module — News & PR aggregation.

const { useState: rnUseState } = React;

function RNews({ lang }) {
  const [filter, setFilter] = rnUseState('all');
  const filters = [
    { id: 'all', en: 'All', zh: '全部', count: TL_NEWS_FEED.length },
    { id: 'news', en: 'News', zh: '新聞', count: TL_NEWS_FEED.filter(n => n.sourceKind === 'news').length },
    { id: 'social', en: 'Social', zh: '社交', count: TL_NEWS_FEED.filter(n => n.sourceKind === 'social').length },
    { id: 'video', en: 'Video', zh: '影片', count: TL_NEWS_FEED.filter(n => n.sourceKind === 'video').length },
  ];
  const items = filter === 'all' ? TL_NEWS_FEED : TL_NEWS_FEED.filter(n => n.sourceKind === filter);

  return (
    <div style={{ height: '100%', overflow: 'auto', padding: '24px 32px 32px', background: '#FFFFFF' }}>
      {/* Header */}
      <div style={{ marginBottom: 20 }}>
        <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#A0A0A0', marginBottom: 6 }}>
          {lang === 'zh' ? '新聞輿情聚合 · 24 小時' : 'News & PR aggregation · last 24h'}
        </div>
        <h1 style={{ fontFamily: TL_FONTS.serif, fontSize: 32, fontWeight: 500, margin: 0, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
          {lang === 'zh'
            ? <>本週音樂市場 · <em style={{ fontStyle: 'italic' }}>正面氣勢延續。</em></>
            : <>Music market this week · <em style={{ fontStyle: 'italic' }}>positive momentum holds.</em></>}
        </h1>
      </div>

      {/* Top row: trending + brand sentiment + instruments */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 16, marginBottom: 28 }}>
        {/* Trending topics */}
        <div style={{ padding: 20, background: '#141414', color: '#F8F8F8' }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.16em', color: '#FFE003', marginBottom: 12 }}>
            {lang === 'zh' ? '本週熱門話題' : 'TRENDING THIS WEEK'}
          </div>
          {TL_TRENDING_TOPICS.slice(0, 5).map(t => (
            <div key={t.rank} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
              <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#FFE003', width: 18 }}>{String(t.rank).padStart(2,'0')}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: TL_FONTS.serif, fontSize: 14, color: '#F8F8F8' }}>{lang === 'zh' ? t.topicZh : t.topic}</div>
                <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, color: '#A0A0A0', marginTop: 2 }}>{t.mentions} {lang === 'zh' ? '提及' : 'mentions'}</div>
              </div>
              <span style={{
                fontFamily: TL_FONTS.mono, fontSize: 10, fontWeight: 600,
                color: t.change > 0.5 ? '#141414' : '#FFE003',
                background: t.change > 0.5 ? '#FFE003' : 'transparent',
                padding: t.change > 0.5 ? '3px 7px' : '3px 0',
              }}>↑ {Math.round(t.change*100)}%</span>
            </div>
          ))}
        </div>

        {/* Brand mentions */}
        <div style={{ padding: 20, background: '#F8F8F8', border: '1px solid rgba(20,20,20,0.08)' }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.16em', color: '#A0A0A0', marginBottom: 12, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '品牌提及與情感' : 'Brand mentions & sentiment'}
          </div>
          {TL_BRAND_MENTIONS.map((b, i) => (
            <div key={i} style={{ marginBottom: 10 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                <span style={{ fontFamily: TL_FONTS.sans, fontSize: 12, color: '#141414', fontWeight: b.brand === 'Tom Lee Music' ? 600 : 400 }}>
                  {b.brand}{b.brand === 'Tom Lee Music' && <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9, color: '#FFE003', background: '#141414', padding: '1px 5px', marginLeft: 6 }}>US</span>}
                </span>
                <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10.5, color: '#141414' }}>{b.mentions}</span>
              </div>
              <div style={{ height: 4, background: 'rgba(20,20,20,0.08)' }}>
                <div style={{ width: `${b.sentiment*100}%`, height: '100%', background: b.brand === 'Tom Lee Music' ? '#FFE003' : '#141414' }} />
              </div>
              <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9, color: '#6B6B6B', marginTop: 2 }}>
                {Math.round(b.sentiment*100)}% {lang === 'zh' ? '正面' : 'positive'} · {b.change >= 0 ? '+' : ''}{Math.round(b.change*100)}% WoW
              </div>
            </div>
          ))}
        </div>

        {/* Trending instruments */}
        <div style={{ padding: 20, background: '#F8F8F8', border: '1px solid rgba(20,20,20,0.08)' }}>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.16em', color: '#A0A0A0', marginBottom: 12, textTransform: 'uppercase' }}>
            {lang === 'zh' ? '樂器熱度分佈' : 'Top instruments share-of-voice'}
          </div>
          <div style={{ display: 'flex', height: 18, marginBottom: 14, overflow: 'hidden' }}>
            {TL_TRENDING_INSTRUMENTS.map((it, i) => (
              <div key={i} style={{
                flex: it.share, background: i === 0 ? '#FFE003' : i === 1 ? '#141414' : `rgba(20,20,20,${0.6 - i*0.08})`,
              }} />
            ))}
          </div>
          {TL_TRENDING_INSTRUMENTS.slice(0, 5).map((it, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', fontFamily: TL_FONTS.sans, fontSize: 11.5 }}>
              <span style={{ width: 10, height: 10, background: i === 0 ? '#FFE003' : i === 1 ? '#141414' : `rgba(20,20,20,${0.6 - i*0.08})` }} />
              <span style={{ flex: 1, color: '#141414' }}>{it.name}</span>
              <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#141414' }}>{Math.round(it.share*100)}%</span>
              <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, color: it.change >= 0 ? '#1B5E20' : '#D81E1E', width: 28, textAlign: 'right' }}>
                {it.change >= 0 ? '+' : ''}{Math.round(it.change*100)}%
              </span>
            </div>
          ))}
        </div>
      </div>

      {/* Filters + feed */}
      <RSectionHead no="04" title={lang === 'zh' ? '訊號流' : 'Signal feed'} subtitle={lang === 'zh' ? 'AI 摘要 · 識別品牌、情感、樂器類別' : 'AI-summarised · brand, sentiment, instrument tags'} right={
        <div style={{ display: 'flex', gap: 4 }}>
          {filters.map(f => (
            <button key={f.id} onClick={() => setFilter(f.id)} style={{
              padding: '6px 10px', cursor: 'pointer', border: 'none',
              background: filter === f.id ? '#141414' : 'transparent',
              color: filter === f.id ? '#F8F8F8' : '#6B6B6B',
              fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>{lang === 'zh' ? f.zh : f.en} <span style={{ opacity: 0.6, marginLeft: 4 }}>{f.count}</span></button>
          ))}
        </div>
      } />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {items.map(n => (
          <article key={n.id} style={{
            padding: '16px 18px', background: '#FFFFFF', border: '1px solid rgba(20,20,20,0.08)',
            borderLeft: n.mentions.includes('Tom Lee Music') ? '3px solid #FFE003' : '3px solid transparent',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span style={{ fontSize: 14 }}>{n.favicon}</span>
              <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#141414', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{n.source}</span>
              <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9, color: '#A0A0A0' }}>· {n.publishedAt.slice(5)}</span>
              <span style={{ flex: 1 }} />
              <RPill tone={n.sentiment === 'pos' ? 'ok' : n.sentiment === 'neg' ? 'critical' : 'neutral'}>
                {n.sentiment === 'pos' ? (lang === 'zh' ? '正面' : '+') : n.sentiment === 'neg' ? (lang === 'zh' ? '負面' : '−') : (lang === 'zh' ? '中性' : '·')}
              </RPill>
            </div>
            <h4 style={{ fontFamily: TL_FONTS.serif, fontSize: 15, fontWeight: 500, margin: '0 0 8px', lineHeight: 1.3, color: '#141414', letterSpacing: '-0.01em' }}>{n.title}</h4>
            <p style={{ fontFamily: TL_FONTS.sans, fontSize: 12, color: '#6B6B6B', margin: 0, lineHeight: 1.5 }}>{n.summary}</p>
            <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
              {n.mentions.map((m, i) => <RPill key={'m'+i} tone={m === 'Tom Lee Music' ? 'critical' : 'neutral'}>{m}</RPill>)}
              {n.instrument && n.instrument !== 'Multi' && <RPill tone="info">{n.instrument}</RPill>}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

window.RNews = RNews;