// ════════════════════════════════════════════════════════════════
// StartupCard — детальная карточка компании из реестра
// Открывается при клике на строку CorpusPage
// ════════════════════════════════════════════════════════════════
const { useMemo: useMemoStartup } = React;

function StartupCard({ startup, onClose }) {
  const D = window.SDH_DATA;
  const s = startup;

  // generate deterministic mock detail data from id
  const seed = s.id;
  function pr(n) { return ((seed * 9301 + n * 49297) % 233280) / 233280; }

  const fundingRound = s.funding_usd ? (pr(1) < 0.4 ? 'Seed' : pr(1) < 0.7 ? 'Series A' : 'Series B') : 'pre-seed';
  const teamSize = 3 + Math.floor(pr(2) * 28);
  const founded = 2018 + Math.floor(pr(3) * 7);
  const website = `${s.name.toLowerCase().replace(/\s+/g, '')}.com`;

  // related ideas (5 from corpus seed)
  const relatedIdeas = useMemoStartup(() => {
    return Array.from({ length: 3 }).map((_, k) => {
      const idx = Math.floor(pr(10 + k) * D.ideas.length);
      return D.ideas[idx];
    });
  }, [seed]);

  // mention timeseries (28 days)
  const timeseries = useMemoStartup(() => {
    return Array.from({ length: 28 }).map((_, t) => ({
      value: Math.max(0, Math.round((pr(t + 50) * 8) + (t === 27 ? 6 : 0))),
    }));
  }, [seed]);

  const totalMentions = timeseries.reduce((sum, p) => sum + p.value, 0);

  // signal tags
  const tags = useMemoStartup(() => {
    const all = ['B2B', 'B2C', 'enterprise', 'SaaS', 'open-source', 'API-first', 'on-prem', 'compliance', 'мобильное', 'edge'];
    return all.filter((_, i) => pr(100 + i) > 0.65).slice(0, 4);
  }, [seed]);

  const similarityZone =
    s.similarity < 0.5 ? { hue: 'rose',    label: 'низкая' } :
    s.similarity < 0.75 ? { hue: 'amber',   label: 'средняя' } :
                          { hue: 'emerald', label: 'высокая' };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'var(--surface-overlay)', zIndex: 100,
      display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
      padding: 'var(--space-8) var(--space-4)',
      overflowY: 'auto',
      backdropFilter: 'blur(2px)',
    }}>
      <div onClick={e => e.stopPropagation()} className="sdh-fade" style={{
        background: 'var(--surface-elevated)',
        borderRadius: 'var(--radius-2xl)',
        border: '1px solid var(--border-subtle)',
        maxWidth: 980, width: '100%',
        boxShadow: 'var(--shadow-xl)',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {/* close */}
        <button className="sdh-btn sdh-btn--ghost" onClick={onClose}
          style={{ position: 'absolute', top: 14, right: 14, padding: 6, zIndex: 2 }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5">
            <path d="M3 3l8 8m0-8l-8 8" strokeLinecap="round" />
          </svg>
        </button>

        {/* HERO — tinted by niche hue */}
        <div style={{
          padding: 'var(--space-8) var(--space-8) var(--space-6)',
          background: `linear-gradient(180deg, var(--hue-${s.nicheHue}-subtle), var(--surface-elevated))`,
          borderBottom: '1px solid var(--border-subtle)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--space-3)' }}>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>стартап № {s.id}</span>
            <span style={{ color: 'var(--text-tertiary)' }}>·</span>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>{s.first_seen_at}</span>
          </div>

          <h2 style={{
            margin: 0, fontSize: 32, fontWeight: 600, letterSpacing: '-0.025em',
            color: 'var(--text-primary)', lineHeight: 1.1,
            fontFamily: 'var(--font-sans)',
          }}>
            {s.name}
          </h2>
          <p style={{
            margin: 'var(--space-2) 0 var(--space-4)',
            fontSize: 15, color: 'var(--text-secondary)', maxWidth: 640, lineHeight: 1.5,
          }}>
            {s.desc}
          </p>

          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <CategoryPill hue={s.nicheHue}>{s.nicheLabel}</CategoryPill>
            <CategoryPill hue={s.sourceHue}>{s.sourceLabel}</CategoryPill>
            <span className="sdh-pill"><span style={{ fontFamily: 'var(--font-mono)' }}>{s.geo}</span></span>
            {s.funding_usd && (
              <span className="sdh-pill">
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--brand-bronze-deep)' }}>
                  ${(s.funding_usd / 1000000).toFixed(1)}M
                </span>
                <span style={{ color: 'var(--text-tertiary)' }}>{fundingRound}</span>
              </span>
            )}
          </div>
        </div>

        {/* BODY — 2-column grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 'var(--space-8)',
          padding: 'var(--space-8)',
        }}>
          {/* LEFT */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            {/* Quick facts */}
            <section>
              <h4 className="sdh-section-label">факты</h4>
              <div style={{
                display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-3)',
              }}>
                <Fact label="команда"   value={`${teamSize} человек`} />
                <Fact label="основан"   value={String(founded)} />
                <Fact label="география" value={s.geo} />
                <Fact label="сайт"      value={website} link />
                <Fact label="источник"  value={s.sourceLabel} />
                <Fact label="ниша"      value={s.nicheLabel} />
              </div>
            </section>

            {/* Mentions timeline */}
            <section>
              <h4 className="sdh-section-label">
                <InfoLabel
                  title="Упоминания за 28 дней"
                  what="Количество публикаций о стартапе во всех источниках за последний месяц."
                  why="Видно резонанс компании сейчас. Резкий всплеск без новостей о раунде = сигнал органического интереса.">
                  упоминания за 28 дней
                </InfoLabel>
              </h4>
              <div className="sdh-warm-card" style={{
                padding: 'var(--space-4)',
                '--bg-tint': 'var(--surface-elevated)',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 'var(--space-3)' }}>
                  <div>
                    <span className="sdh-metric-big">{totalMentions}</span>
                    <span style={{ marginLeft: 8, fontSize: 12, color: 'var(--text-tertiary)' }}>всего упоминаний</span>
                  </div>
                  <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
                    последнее: {s.daysAgo === 0 ? 'сегодня' : `${s.daysAgo}д назад`}
                  </span>
                </div>
                <IdeaHorizon series={timeseries} width={520} height={36} hue={s.nicheHue} />
              </div>
            </section>

            {/* Signals / tags */}
            <section>
              <h4 className="sdh-section-label">сигнальные теги</h4>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {tags.length === 0 && <span className="sdh-mono-label" style={{ marginBottom: 0 }}>нет распознанных тегов</span>}
                {tags.map(t => <span key={t} className="sdh-chip" style={{ cursor: 'default' }}>{t}</span>)}
              </div>
            </section>
          </div>

          {/* RIGHT */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            {/* Similarity */}
            <section>
              <h4 className="sdh-section-label">
                <InfoLabel {...window.METRIC_DICT.similarity}>релевантность исследованию</InfoLabel>
              </h4>
              <div className="sdh-warm-card" style={{
                padding: 'var(--space-4)',
                '--bg-tint': `var(--hue-${similarityZone.hue}-subtle)`,
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 'var(--space-3)' }}>
                  <span className="sdh-metric-big">{s.similarity.toFixed(2)}</span>
                  <span style={{ fontSize: 12, color: `var(--hue-${similarityZone.hue})`, fontWeight: 600 }}>
                    {similarityZone.label}
                  </span>
                </div>
                <MicroSimDot value={s.similarity} width={300} height={14} />
                <div className="sdh-mono-label" style={{ marginTop: 6, marginBottom: 0 }}>
                  пороги: 0.50 · 0.75
                </div>
              </div>
            </section>

            {/* Related ideas */}
            <section>
              <h4 className="sdh-section-label">связанные идеи стартапзавода</h4>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {relatedIdeas.map((idea, k) => (
                  <button key={k} style={{
                    display: 'grid', gridTemplateColumns: '34px 1fr auto',
                    gap: 10, alignItems: 'center',
                    padding: '10px 12px',
                    background: 'var(--surface-elevated)',
                    border: '1px solid var(--border-subtle)',
                    borderRadius: 'var(--radius-md)',
                    cursor: 'pointer',
                    textAlign: 'left',
                  }}
                  onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--brand-bronze)'}
                  onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-subtle)'}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11,
                      color: 'var(--text-tertiary)',
                    }}>№{String(idea.number).padStart(2, '0')}</span>
                    <span style={{ fontSize: 13, color: 'var(--text-primary)', lineHeight: 1.3 }}>
                      {idea.title.length > 50 ? idea.title.slice(0, 48) + '…' : idea.title}
                    </span>
                    <CategoryPill hue={idea.familyHue} small>{idea.familyLabel}</CategoryPill>
                  </button>
                ))}
              </div>
            </section>

            {/* Status / next action */}
            <section>
              <h4 className="sdh-section-label">статус наблюдения</h4>
              <div style={{
                padding: 'var(--space-4)',
                background: 'var(--surface-sunken)',
                borderRadius: 'var(--radius-md)',
                borderLeft: '2px solid var(--brand-bronze)',
              }}>
                <p className="sdh-quote" style={{ margin: 0 }}>
                  {s.similarity >= 0.75
                    ? 'Высокая близость к фокусу исследования. Рекомендуем поставить на еженедельный мониторинг.'
                    : s.similarity >= 0.5
                      ? 'Средняя релевантность. Дополнительный сигнал нужен для принятия решения.'
                      : 'Низкая близость. Включён в корпус как контекстная единица.'}
                </p>
              </div>
            </section>
          </div>
        </div>

        {/* FOOTER actions */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: 'var(--space-4) var(--space-8)',
          borderTop: '1px solid var(--border-subtle)',
          background: 'var(--surface-sunken)',
        }}>
          <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
            <span className="sdh-kbd">esc</span> закрыть · <span className="sdh-kbd">j</span>/<span className="sdh-kbd">k</span> между карточками
          </span>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="sdh-btn sdh-btn--ghost" onClick={onClose}>Закрыть</button>
            <button className="sdh-btn">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M5 1v6m0 0L2.5 4.5M5 7l2.5-2.5M2 9v1a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              Экспорт CSV
            </button>
            <button className="sdh-btn sdh-btn--bronze">
              Открыть в синтез-сессии
              <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>
      </div>
    </div>
  );
}

function Fact({ label, value, link }) {
  return (
    <div>
      <div className="sdh-mono-label" style={{ marginBottom: 2 }}>{label}</div>
      <div style={{
        fontSize: 14, color: 'var(--text-primary)',
        fontFamily: link ? 'var(--font-mono)' : 'var(--font-sans)',
        ...(link ? { color: 'var(--brand-bronze-deep)' } : null),
      }}>
        {value}
      </div>
    </div>
  );
}

window.StartupCard = StartupCard;