// ════════════════════════════════════════════════════════════════
// TrendsSection — кластеры идей с momentum + scatter plot
// ════════════════════════════════════════════════════════════════
const { useState: useStateTrends } = React;

function TrendsSection({ onOpenCluster }) {
  const D = window.SDH_DATA;
  const [filter, setFilter] = useStateTrends('all');
  const filtered = filter === 'all' ? D.TREND_CLUSTERS : D.TREND_CLUSTERS.filter(t => t.momentum === filter);
  const [active, setActive] = useStateTrends(null);
  const [scatterFocus, setScatterFocus] = useStateTrends(null);

  // Click on scatter dot → focus + scroll to card
  function handleScatterSelect(id) {
    setScatterFocus(id);
    setActive(id);
    setTimeout(() => {
      const el = document.querySelector(`[data-trend-card="${id}"]`);
      if (el) {
        const rect = el.getBoundingClientRect();
        const targetY = window.scrollY + rect.top - 120;
        window.scrollTo({ top: targetY, behavior: 'smooth' });
      }
    }, 50);
    setTimeout(() => setScatterFocus(null), 2200);
  }

  return (
    <div className="sdh-fade">
      {/* HERO */}
      <section className="sdh-container" style={{ paddingTop: 'var(--space-12)', paddingBottom: 'var(--space-6)' }}>
        <span className="sdh-section-label">тренды · semantic clusters</span>
        <h1 className="sdh-hero-h" style={{ marginBottom: 'var(--space-3)' }}>
          Что <em>растёт</em> в корпусе на этой неделе
        </h1>
        <p className="sdh-quote" style={{ maxWidth: 720, margin: 0 }}>
          Семантическая кластеризация {D.corpus.length.toLocaleString('ru-RU')} стартапов даёт {D.TREND_CLUSTERS.length} активных направлений. Размер точки = объём кластера, цвет = направление импульса, положение по горизонтали = темп прироста к прошлой неделе.
        </p>

        {/* Scatter */}
        <div className="sdh-warm-card" style={{ marginTop: 'var(--space-8)', padding: 'var(--space-6)', '--bg-tint': 'var(--surface-elevated)' }}>
          <NicheScatter clusters={D.TREND_CLUSTERS} onSelect={handleScatterSelect} activeId={scatterFocus} />
          {/* legend */}
          <div style={{ display: 'flex', gap: 'var(--space-6)', marginTop: 'var(--space-3)', flexWrap: 'wrap', alignItems: 'center' }}>
            <Legend dot="emerald" label="растёт" />
            <Legend dot="info" label="стабильно" />
            <Legend dot="rose" label="снижается" />
            <span style={{ height: 16, width: 1, background: 'var(--border-default)' }} />
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
              <InfoLabel {...window.METRIC_DICT.axisGrowth}>горизонталь: импульс</InfoLabel>
            </span>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
              <InfoLabel {...window.METRIC_DICT.axisVolume}>вертикаль: объём</InfoLabel>
            </span>
            <span className="sdh-mono-label" style={{ marginBottom: 0, marginLeft: 'auto', color: 'var(--brand-bronze-deep)' }}>
              наведите на точку или кликните для перехода к кластеру
            </span>
          </div>
        </div>
      </section>

      {/* FILTER */}
      <CommandBar
        left={
          <>
            <span className="sdh-mono-label" style={{ marginRight: 6 }}>импульс</span>
            {['all', 'rising', 'steady', 'cooling'].map(m => (
              <button key={m} className={`sdh-chip ${filter === m ? 'is-active' : ''}`} onClick={() => setFilter(m)}>
                {m === 'all' ? 'все' : m === 'rising' ? 'растёт' : m === 'steady' ? 'стабильно' : 'снижается'}{' '}
                <span className="chip-count">{m === 'all' ? D.TREND_CLUSTERS.length : D.TREND_CLUSTERS.filter(t => t.momentum === m).length}</span>
              </button>
            ))}
          </>
        }
        right={<span className="sdh-mono-label">обновлено: 23 мая 10:00</span>}
      />

      {/* GRID */}
      <section className="sdh-container" style={{ paddingTop: 'var(--space-6)', paddingBottom: 'var(--space-16)' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))',
          gap: 'var(--space-4)',
        }}>
          {filtered.map(t => (
            <TrendCard key={t.id} trend={t}
              onClick={() => setActive(t.id === active ? null : t.id)}
              expanded={active === t.id}
              flash={scatterFocus === t.id}
              onOpen={() => onOpenCluster && onOpenCluster(t)} />
          ))}
        </div>
      </section>
    </div>
  );
}

function Legend({ dot, label }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: `var(--hue-${dot})` }} />
      <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{label}</span>
    </span>
  );
}

function TrendCard({ trend, onClick, expanded, flash, onOpen }) {
  const tintHue =
    trend.momentum === 'rising' ? 'emerald' :
    trend.momentum === 'cooling' ? 'rose' : 'info';

  // figure out italic accent in title (if title contains 'AI')
  const renderTitle = (title) => {
    if (/AI/.test(title)) {
      const parts = title.split(/(AI)/);
      return parts.map((p, i) => p === 'AI'
        ? <em key={i} style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)', fontWeight: 600 }}>AI</em>
        : <React.Fragment key={i}>{p}</React.Fragment>);
    }
    return title;
  };

  return (
    <div className="sdh-warm-card" data-trend-card={trend.id} style={{
      '--bg-tint': `var(--hue-${tintHue}-subtle)`,
      cursor: 'pointer',
      padding: 'var(--space-6)',
      boxShadow: flash ? '0 0 0 2px var(--brand-bronze), var(--shadow-lg)' : 'var(--shadow-card)',
      transition: 'box-shadow .25s var(--ease-card), transform .2s var(--ease-card)',
    }} onClick={onClick}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, marginBottom: 'var(--space-3)' }}>
        <h3 style={{
          margin: 0, fontSize: 17, fontWeight: 600, color: 'var(--text-primary)',
          lineHeight: 1.25, letterSpacing: '-0.01em', flex: 1, minWidth: 0,
        }}>{renderTitle(trend.title)}</h3>
        <MomentumPill momentum={trend.momentum} growth={trend.growth} />
      </div>

      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12, marginBottom: 'var(--space-4)' }}>
        <div>
          <span className="sdh-metric-big">{trend.count}</span>
          <span style={{ marginLeft: 8, fontSize: 12, color: 'var(--text-tertiary)' }}>стартапов</span>
        </div>
        <MicroSparkline data={trend.timeseries} width={120} height={28} color={`var(--hue-${tintHue})`} fill accentLast />
      </div>

      <p className="sdh-quote" style={{ margin: 0, paddingTop: 'var(--space-3)', borderTop: '1px solid var(--border-subtle)' }}>
        {trend.recommendation || 'Сила сигнала растёт. Следующий шаг: прототип на 3 пользовательских сценариях.'}
      </p>

      {expanded && (
        <div className="sdh-fade" style={{ marginTop: 'var(--space-4)', paddingTop: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)' }}>
          <div className="sdh-mono-label" style={{ marginBottom: 6 }}>горизонт активности (30 дней)</div>
          <IdeaHorizon series={trend.timeseries} width={300} height={36} hue={tintHue} />
          <button className="sdh-btn sdh-btn--bronze" style={{ marginTop: 'var(--space-4)' }}
            onClick={(e) => { e.stopPropagation(); onOpen && onOpen(); }}>
            Открыть стартапы кластера
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M3 6h6m-3-3 3 3-3 3" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </button>
        </div>
      )}
    </div>
  );
}

// Recommendations come from data — but if not, fall back
TrendsSection.recommendations = {
  rising:  'Сила сигнала растёт. Следующий шаг: прототип на трёх пользовательских сценариях.',
  steady:  'Сигнал устойчивый. Готовы к найму первого специалиста и пилоту с одним клиентом.',
  cooling: 'Снижение интереса. Рекомендуем пересобрать гипотезу или приостановить направление.',
};

window.TrendsSection = TrendsSection;