// ════════════════════════════════════════════════════════════════
// /pricing — публичная страница тарифов
// 4 публичных tier + Enterprise + token packs + FAQ
// ════════════════════════════════════════════════════════════════

function PricingPage({ currentUser, onContact, onGoBack }) {
  const B = window.SDH_BILLING;
  const publicTiers = B.TIERS.filter(t => t.isPublic && t.code !== 'enterprise');
  const enterprise = B.TIERS.find(t => t.code === 'enterprise');

  const [contactOpen, setContactOpen] = React.useState(false);
  const [contactTier, setContactTier] = React.useState(null);

  function startContact(tierCode) {
    setContactTier(tierCode);
    setContactOpen(true);
  }

  return (
    <div className="sdh-fade">
      {/* HERO */}
      <section style={{
        background: 'linear-gradient(180deg, var(--brand-bronze-subtle), var(--surface-canvas))',
        paddingBottom: 'var(--space-12)',
        borderBottom: '1px solid var(--border-subtle)',
      }}>
        <div className="sdh-container" style={{ paddingTop: 'var(--space-12)', textAlign: 'center' }}>
          <span className="sdh-section-label">тарифы</span>
          <h1 className="sdh-hero-h" style={{ marginBottom: 'var(--space-3)' }}>
            Выберите свой формат <em>симбиоза</em>
          </h1>
          <p className="sdh-quote" style={{ maxWidth: 640, margin: '0 auto' }}>
            Все цены в рублях, без скрытых надбавок. Перевод с одного tier'а на другой в любой момент с прорейтингом по дням. Внутренняя команда Symbiosis Lab — на бесплатном internal tier.
          </p>
          <p className="sdh-mono-label" style={{ marginTop: 'var(--space-3)', marginBottom: 0 }}>
            оплата сейчас через банковский перевод · автосписание добавится отдельной фазой
          </p>
        </div>
      </section>

      {/* Tier cards */}
      <section className="sdh-container" style={{ paddingTop: 'var(--space-12)', paddingBottom: 'var(--space-8)' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 'var(--space-4)',
          alignItems: 'stretch',
        }}>
          {publicTiers.map(tier => (
            <TierCard key={tier.code} tier={tier} onChoose={() => startContact(tier.code)} />
          ))}
        </div>

        {/* Enterprise */}
        <div style={{
          marginTop: 'var(--space-8)',
          background: `linear-gradient(135deg, var(--hue-amber-subtle), var(--surface-elevated))`,
          border: '1px solid var(--hue-amber)',
          borderRadius: 'var(--radius-2xl)',
          padding: 'var(--space-8)',
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-8)',
          alignItems: 'center',
        }}>
          <div>
            <CategoryPill hue="amber">{enterprise.name}</CategoryPill>
            <h2 style={{
              margin: 'var(--space-3) 0',
              fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em',
              color: 'var(--text-primary)',
            }}>
              Для крупных <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)' }}>организаций</em>
            </h2>
            <p className="sdh-quote" style={{ margin: '0 0 var(--space-4)', fontSize: 14 }}>
              {enterprise.tagline}. Без лимита токенов, изолированная инфраструктура, кастомные методологии под клиента, SLA 99.9 %.
            </p>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 28, fontWeight: 500, color: 'var(--brand-bronze-deep)' }}>
                от 50 000
              </span>
              <span style={{ fontSize: 14, color: 'var(--text-tertiary)' }}>₽/мес · по запросу</span>
            </div>
          </div>
          <div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 var(--space-4)' }}>
              {enterprise.features.slice(0, 5).map(f => (
                <li key={f} style={{
                  display: 'flex', gap: 8, padding: '6px 0',
                  fontSize: 13, color: 'var(--text-secondary)',
                }}>
                  <span style={{ color: 'var(--hue-amber)' }}>✓</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <button className="sdh-btn sdh-btn--bronze" onClick={() => startContact('enterprise')}>
              Связаться для расчёта
              <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>
      </section>

      {/* Token packs */}
      <section className="sdh-container" style={{ paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-12)' }}>
        <div style={{ marginBottom: 'var(--space-6)' }}>
          <span className="sdh-section-label">если базовых токенов не хватает</span>
          <h2 style={{
            margin: '0 0 var(--space-2)',
            fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em',
          }}>
            Доп. <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)' }}>пакеты</em> токенов
          </h2>
          <p className="sdh-quote" style={{ margin: 0, maxWidth: 600, fontSize: 13.5 }}>
            Сначала тратятся месячные токены подписки. Если они кончились — паки. Паки не сгорают в конце месяца, накапливаются.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 'var(--space-4)',
        }}>
          {B.PACKS.map(pack => (
            <div key={pack.code} className="sdh-warm-card" style={{
              '--bg-tint': 'var(--surface-elevated)',
              padding: 'var(--space-4) var(--space-6)',
              textAlign: 'center',
            }}>
              <div className="sdh-mono-label" style={{ marginBottom: 4 }}>{pack.label}</div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 500,
                color: 'var(--brand-bronze-deep)', marginBottom: 2,
              }}>
                {pack.tokens >= 1000000
                  ? `${pack.tokens / 1000000}M`
                  : `${pack.tokens / 1000}K`}
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginBottom: 'var(--space-3)' }}>
                токенов
              </div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 500,
                color: 'var(--text-primary)',
              }}>
                {pack.priceRub.toLocaleString('ru-RU')} ₽
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>
                ≈ {(pack.priceRub / pack.tokens * 1000).toFixed(2)} ₽ / 1K
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section style={{
        background: 'var(--surface-elevated)',
        borderTop: '1px solid var(--border-subtle)',
        paddingTop: 'var(--space-12)', paddingBottom: 'var(--space-16)',
      }}>
        <div className="sdh-container">
          <span className="sdh-section-label">часто спрашивают</span>
          <h2 style={{
            margin: '0 0 var(--space-6)',
            fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em',
          }}>
            Что нужно <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)' }}>знать</em>
          </h2>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 'var(--space-4)' }}>
            <FaqItem q="Что если я не использую все токены?"
              a="Месячные токены сгорают в конце периода (use it or lose it). Дополнительные паки не сгорают, накапливаются с подпиской. Сначала тратятся месячные, потом паки." />
            <FaqItem q="Могу ли я перейти на другой tier?"
              a="Да, в любой момент, с прорейтингом по дням. Если переходите с Pro на Business в середине месяца, доплачиваете разницу за оставшиеся дни." />
            <FaqItem q="Что считается токеном?"
              a="1 LLM-вызов классификации стартапа ≈ 500 токенов. 1 deep-dive отчёт ≈ 50 000. Просмотр UI и поиск по уже indexed корпусу — бесплатно." />
            <FaqItem q="Есть ли trial?"
              a="Free tier работает без trial-периода, всегда бесплатно. Если упрётесь в лимит, можете купить пак Small за 290 ₽ или перейти на Starter." />
            <FaqItem q="Как оплата происходит?"
              a="На текущем этапе manual: вы оставляете заявку через форму «Связаться», мы выставляем счёт на ваше ИП. Автосписание через Юкассу подключим, когда первая партия клиентов валидирует спрос." />
            <FaqItem q="Что если квота кончилась посередине работы?"
              a="Чтение существующих данных не блокируется. Только новые LLM-операции (deep-dive, cron, Phase 4.5) возвращают 402. Купите пак или подождите конца периода." />
          </div>
        </div>
      </section>

      {contactOpen && <ContactRequestModal tierCode={contactTier}
        onClose={() => setContactOpen(false)}
        onSubmitted={() => { setContactOpen(false); }} />}
    </div>
  );
}

// ── TierCard ────────────────────────────────────────────────────
function TierCard({ tier, onChoose }) {
  const featured = tier.isFeatured;
  const hueVar = tier.hue === 'bronze' ? 'var(--brand-bronze)' : `var(--hue-${tier.hue})`;
  const subVar = tier.hue === 'bronze' ? 'var(--brand-bronze-subtle)' : `var(--hue-${tier.hue}-subtle)`;

  return (
    <div style={{
      background: 'var(--surface-elevated)',
      border: featured ? `2px solid ${hueVar}` : '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-2xl)',
      padding: 'var(--space-6)',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
      transform: featured ? 'translateY(-8px)' : 'none',
      boxShadow: featured ? 'var(--shadow-lg)' : 'var(--shadow-card)',
    }}>
      {featured && (
        <div style={{
          position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--brand-bronze)', color: '#fff',
          fontFamily: 'var(--font-display)', fontStyle: 'italic',
          fontSize: 11, fontWeight: 600,
          padding: '4px 12px', borderRadius: 'var(--radius-full)',
          letterSpacing: '0.04em',
        }}>★ рекомендуем</div>
      )}

      <CategoryPill hue={tier.hue}>{tier.name}</CategoryPill>
      <p style={{ margin: 'var(--space-3) 0 var(--space-2)', fontSize: 13, color: 'var(--text-tertiary)', fontStyle: 'italic', minHeight: 36 }}>
        {tier.tagline}
      </p>

      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 'var(--space-4)' }}>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 30, fontWeight: 500,
          color: 'var(--text-primary)', letterSpacing: '-0.02em',
        }}>{tier.priceRub === 0 ? 0 : tier.priceRub.toLocaleString('ru-RU')}</span>
        <span style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>₽/мес</span>
      </div>

      <div style={{
        padding: 'var(--space-3)', background: subVar,
        borderRadius: 'var(--radius-md)', marginBottom: 'var(--space-4)',
      }}>
        <div className="sdh-mono-label" style={{ marginBottom: 2, color: hueVar }}>включено токенов</div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 500, color: 'var(--text-primary)' }}>
          {tier.tokens === 0 ? 'без лимита' : tier.tokens >= 1000000 ? `${(tier.tokens / 1000000).toFixed(0)}M` : `${tier.tokens / 1000}K`}
        </span>
        {tier.tokens > 0 && (
          <span style={{ fontSize: 11, color: 'var(--text-tertiary)', marginLeft: 6 }}>
            ≈ {Math.floor(tier.tokens / 50000)} deep-dive
          </span>
        )}
      </div>

      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 var(--space-4)', flex: 1 }}>
        {tier.features.map(f => (
          <li key={f} style={{
            display: 'flex', gap: 8, padding: '4px 0',
            fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.4,
          }}>
            <span style={{ color: hueVar, fontWeight: 600 }}>✓</span>
            <span>{f}</span>
          </li>
        ))}
        {tier.notFeatures.map(f => (
          <li key={f} style={{
            display: 'flex', gap: 8, padding: '4px 0',
            fontSize: 12.5, color: 'var(--text-tertiary)', lineHeight: 1.4, opacity: 0.6,
            textDecoration: 'line-through',
          }}>
            <span>—</span><span>{f}</span>
          </li>
        ))}
      </ul>

      <button
        className={featured ? 'sdh-btn sdh-btn--bronze' : 'sdh-btn'}
        style={{ justifyContent: 'center', padding: '10px', fontWeight: 600 }}
        onClick={onChoose}>
        {tier.cta}
      </button>
    </div>
  );
}

// ── FAQ ─────────────────────────────────────────────────────────
function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{
      background: 'var(--surface-canvas)',
      border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-md)',
      padding: 'var(--space-4)',
    }}>
      <button onClick={() => setOpen(o => !o)} style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        width: '100%', textAlign: 'left',
        background: 'transparent', border: 'none', padding: 0, cursor: 'pointer',
        gap: 12,
      }}>
        <span style={{
          fontSize: 14, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.35,
        }}>{q}</span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 18,
          color: 'var(--brand-bronze)',
          transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
          transition: 'transform .15s',
          flexShrink: 0, lineHeight: 1,
        }}>+</span>
      </button>
      {open && (
        <p style={{
          margin: 'var(--space-3) 0 0', fontSize: 13, lineHeight: 1.5,
          color: 'var(--text-secondary)',
        }}>{a}</p>
      )}
    </div>
  );
}

// ── Contact modal (manual flow) ─────────────────────────────────
function ContactRequestModal({ tierCode, onClose, onSubmitted }) {
  const B = window.SDH_BILLING;
  const tier = B.getTier(tierCode);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [comment, setComment] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  function submit(e) {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => onSubmitted && onSubmitted(), 1800);
  }

  if (submitted) {
    return (
      <div onClick={onClose} style={window.modalShellStyle}>
        <div onClick={e => e.stopPropagation()} className="sdh-fade" style={{ ...window.modalCardStyle, textAlign: 'center', maxWidth: 460 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 38, color: 'var(--success)' }}>✓</span>
          <h3 style={{ margin: 'var(--space-3) 0 var(--space-2)', fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>
            Заявка <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)' }}>принята</em>
          </h3>
          <p className="sdh-quote" style={{ margin: 0 }}>
            Свяжемся с вами в течение рабочего дня через email или Telegram. Если хотите ускорить, напишите Орлову Е.В. напрямую.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div onClick={onClose} style={window.modalShellStyle}>
      <form onClick={e => e.stopPropagation()} onSubmit={submit} className="sdh-fade" style={window.modalCardStyle}>
        <button type="button" onClick={onClose} className="sdh-btn sdh-btn--ghost"
          style={{ position: 'absolute', top: 14, right: 14, padding: 6 }}>
          <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>

        <span className="sdh-section-label">оформление подписки</span>
        <h2 style={{ margin: '0 0 var(--space-2)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em' }}>
          Tier <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)' }}>{tier.name}</em>
        </h2>
        <p className="sdh-quote" style={{ margin: '0 0 var(--space-6)' }}>
          На этом этапе оплата проходит вручную: оставьте контакты, выставим счёт на ИП через банк. Подключение Юкассы добавим, когда первая партия клиентов подтвердит спрос.
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
          <AuthField label="Имя"><input required autoFocus value={name} onChange={e => setName(e.target.value)} style={authFieldStyle} placeholder="Иван Иванов" /></AuthField>
          <AuthField label="Email"><input required type="email" value={email} onChange={e => setEmail(e.target.value)} style={authFieldStyle} placeholder="вы@компания.ру" /></AuthField>
          <AuthField label="Комментарий (опционально)">
            <textarea value={comment} onChange={e => setComment(e.target.value)}
              placeholder={tier.code === 'enterprise' ? 'Размер команды, требования к интеграциям, особые условия' : 'Какие задачи планируете решать, нужна ли консультация'}
              style={{ ...authFieldStyle, minHeight: 80, fontFamily: 'var(--font-sans)', resize: 'vertical' }} />
          </AuthField>

          <div style={{
            padding: 'var(--space-3) var(--space-4)',
            background: 'var(--surface-sunken)',
            borderRadius: 'var(--radius-md)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>стоимость</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 500, color: 'var(--brand-bronze-deep)' }}>
              {tier.priceLabel ? `от ${tier.priceLabel}` : tier.priceRub.toLocaleString('ru-RU')} ₽/мес
            </span>
          </div>
        </div>

        <div style={{
          display: 'flex', justifyContent: 'flex-end', gap: 8,
          marginTop: 'var(--space-6)', paddingTop: 'var(--space-4)',
          borderTop: '1px solid var(--border-subtle)',
        }}>
          <button type="button" className="sdh-btn sdh-btn--ghost" onClick={onClose}>Отмена</button>
          <button type="submit" className="sdh-btn sdh-btn--bronze">Отправить заявку</button>
        </div>
      </form>
    </div>
  );
}

window.PricingPage = PricingPage;
window.TierCard = TierCard;
window.ContactRequestModal = ContactRequestModal;