// Research module — Overview dashboard.
// One screen that pulls signals from all three streams.

const { useMemo: roUseMemo } = React;

function ROverview({ lang }) {
  const skuAlerts = TL_PRICE_ALERTS_LOG.filter(a => !a.ack && a.severity !== 'info');
  const newTenders = TL_TENDERS.filter(t => t.status === 'new');
  const totalNews = TL_NEWS_SOURCES_BREAKDOWN.reduce((s, x) => s + x.count, 0);

  return (
    <div style={{ height: '100%', overflow: 'auto', padding: '28px 32px 40px', background: '#FFFFFF' }}>
      {/* Hero */}
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#A0A0A0', marginBottom: 8 }}>
          {lang === 'zh' ? '2026 年 4 月 29 日 · 星期三' : 'Wednesday · April 29, 2026'}
        </div>
        <h1 style={{ fontFamily: TL_FONTS.serif, fontSize: 44, fontWeight: 500, margin: 0, letterSpacing: '-0.025em', lineHeight: 1.05, color: '#141414', maxWidth: 700 }}>
          {lang === 'zh'
            ? <>市場情報 · <em style={{ fontStyle: 'italic' }}>今早摘要。</em></>
            : <>Market intel · <em style={{ fontStyle: 'italic' }}>this morning's read.</em></>}
        </h1>
        <p style={{ fontFamily: TL_FONTS.sans, fontSize: 14, color: '#6B6B6B', marginTop: 12, maxWidth: 640, lineHeight: 1.55 }}>
          {lang === 'zh'
            ? 'AI 抓取 535 條公開來源，比對 6 個追蹤 SKU、抽取 8 條相關新聞、識別 4 份新學校招標。下方三條情報線同步更新到資料庫。'
            : 'AI ingested 535 public sources, compared 6 tracked SKUs, surfaced 8 relevant news items, and detected 4 new school tenders. All three streams persist to the database below.'}
        </p>
      </div>

      {/* KPI strip */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 28 }}>
        <RKPI
          label={lang === 'zh' ? '價格警報' : 'Price alerts'}
          value={skuAlerts.length}
          sub={lang === 'zh' ? '2 個嚴重 · 1 個警告 · 待處理' : '2 critical · 1 warning · unack\'d'}
          accent="#D81E1E"
        />
        <RKPI
          label={lang === 'zh' ? '24小時新聞訊號' : 'News signals · 24h'}
          value={totalNews}
          sub={lang === 'zh' ? '正面 78% · 負面 6%' : '78% positive · 6% negative'}
        />
        <RKPI
          label={lang === 'zh' ? '新學校招標' : 'New tenders'}
          value={newTenders.length}
          sub={lang === 'zh' ? `合計 HK$${(newTenders.reduce((s,t)=>s+t.estValue,0)/1e6).toFixed(2)}M` : `HK$${(newTenders.reduce((s,t)=>s+t.estValue,0)/1e6).toFixed(2)}M est. value`}
          accent="#141414"
        />
        <RKPI
          label={lang === 'zh' ? '已通知部門' : 'Stakeholders pinged'}
          value="6"
          sub={lang === 'zh' ? '今日推送 24 則' : '24 pushes today'}
        />
      </div>

      {/* Three columns — one per stream */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16 }}>
        {/* SKU alerts */}
        <div>
          <RSectionHead
            no="01"
            title={lang === 'zh' ? '價格訊號' : 'Price signals'}
            subtitle={lang === 'zh' ? '六個追蹤 SKU' : 'across 6 tracked SKUs'}
          />
          {skuAlerts.slice(0, 4).map(a => (
            <div key={a.id} style={{
              padding: '12px 14px', background: a.severity === 'critical' ? '#141414' : '#F8F8F8',
              color: a.severity === 'critical' ? '#F8F8F8' : '#141414',
              marginBottom: 8, border: a.severity === 'critical' ? 'none' : '1px solid rgba(20,20,20,0.08)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                <RDot tone={a.severity} />
                <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: a.severity === 'critical' ? '#FFE003' : '#A0A0A0' }}>{a.sku}</span>
                <span style={{ flex: 1 }} />
                <span style={{ fontFamily: TL_FONTS.mono, fontSize: 9, color: a.severity === 'critical' ? 'rgba(248,248,248,0.6)' : '#A0A0A0' }}>{a.ts.slice(11)}</span>
              </div>
              <div style={{ fontFamily: TL_FONTS.sans, fontSize: 12, lineHeight: 1.4 }}>{a.msg}</div>
              <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.08em', color: a.severity === 'critical' ? '#FFE003' : '#6B6B6B', marginTop: 6, textTransform: 'uppercase' }}>
                → {a.dept}
              </div>
            </div>
          ))}
        </div>

        {/* News pulse */}
        <div>
          <RSectionHead
            no="02"
            title={lang === 'zh' ? '輿情脈搏' : 'PR pulse'}
            subtitle={lang === 'zh' ? '本週熱門話題' : 'top trending this week'}
          />
          {TL_TRENDING_TOPICS.slice(0, 5).map(t => (
            <div key={t.rank} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 0', borderBottom: '1px solid rgba(20,20,20,0.06)',
            }}>
              <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#A0A0A0', width: 18 }}>{String(t.rank).padStart(2,'0')}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: TL_FONTS.sans, fontSize: 12.5, color: '#141414', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {lang === 'zh' ? t.topicZh : t.topic}
                </div>
                <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, color: '#6B6B6B', marginTop: 2 }}>
                  {t.mentions} {lang === 'zh' ? '提及' : 'mentions'}
                </div>
              </div>
              <span style={{
                fontFamily: TL_FONTS.mono, fontSize: 10, fontWeight: 500,
                color: t.change > 0.3 ? '#FFE003' : t.change > 0 ? '#1B5E20' : '#A0A0A0',
                background: t.change > 0.3 ? '#141414' : 'transparent',
                padding: t.change > 0.3 ? '3px 7px' : '3px 0',
              }}>
                {t.change > 0 ? '↑' : '↓'} {Math.abs(Math.round(t.change*100))}%
              </span>
            </div>
          ))}
        </div>

        {/* Tender pipeline */}
        <div>
          <RSectionHead
            no="03"
            title={lang === 'zh' ? '招標漏斗' : 'Tender pipeline'}
            subtitle={lang === 'zh' ? '本週新發現' : 'this week'}
          />
          {newTenders.slice(0, 3).map(t => (
            <div key={t.id} style={{
              padding: '12px 14px', background: '#F8F8F8',
              marginBottom: 8, border: '1px solid rgba(20,20,20,0.08)',
              borderLeft: t.priority === 'high' ? '3px solid #FFE003' : '3px solid transparent',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                <RPill tone={t.priority === 'high' ? 'critical' : 'neutral'}>
                  {lang === 'zh' ? (t.priority === 'high' ? '高' : '中') : t.priority}
                </RPill>
                <span style={{ flex: 1 }} />
                <span style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#141414', fontWeight: 600 }}>{t.estValueLabel}</span>
              </div>
              <div style={{ fontFamily: TL_FONTS.serif, fontSize: 14, color: '#141414', marginTop: 4 }}>{lang === 'zh' ? t.schoolZh : t.school}</div>
              <div style={{ fontFamily: TL_FONTS.sans, fontSize: 11.5, color: '#6B6B6B', marginTop: 2, lineHeight: 1.4, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                {lang === 'zh' ? t.titleZh : t.title}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontFamily: TL_FONTS.mono, fontSize: 9.5, color: '#A0A0A0', letterSpacing: '0.06em' }}>
                <span>{lang === 'zh' ? '截止' : 'DUE'} {t.deadline}</span>
                <span>{lang === 'zh' ? '匹配' : 'FIT'} {Math.round(t.fitScore*100)}%</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Coverage strip */}
      <div style={{ marginTop: 32, padding: '20px 24px', background: '#F8F8F8', border: '1px solid rgba(20,20,20,0.08)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
          <div>
            <div style={{ fontFamily: TL_FONTS.mono, fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#A0A0A0' }}>
              {lang === 'zh' ? '今日抓取覆蓋' : 'Today\'s crawl coverage'}
            </div>
            <div style={{ fontFamily: TL_FONTS.serif, fontSize: 22, fontWeight: 500, marginTop: 4, color: '#141414' }}>
              535 {lang === 'zh' ? '條來源 · 全部存入資料庫' : 'sources · all persisted to DB'}
            </div>
          </div>
          <div style={{ fontFamily: TL_FONTS.mono, fontSize: 10, color: '#6B6B6B', letterSpacing: '0.08em' }}>
            {lang === 'zh' ? '下次運行 14:00' : 'NEXT RUN 14:00'}
          </div>
        </div>
        <div style={{ display: 'flex', height: 8, background: 'rgba(20,20,20,0.04)' }}>
          {TL_NEWS_SOURCES_BREAKDOWN.map((s, i) => (
            <div key={i} style={{ flex: s.count, background: s.color }} />
          ))}
        </div>
        <div style={{ display: 'flex', gap: 24, marginTop: 12, fontFamily: TL_FONTS.mono, fontSize: 10, color: '#6B6B6B' }}>
          {TL_NEWS_SOURCES_BREAKDOWN.map((s, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 8, height: 8, background: s.color }} />
              <span style={{ color: '#141414', fontWeight: 500 }}>{s.count}</span>
              <span style={{ letterSpacing: '0.08em', textTransform: 'uppercase' }}>{s.kind}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ROverview = ROverview;