// ════════════════════════════════════════════════════════════════
// /account/billing — детальная панель подписки пользователя
// usage progress + packs + history
// ════════════════════════════════════════════════════════════════

function BillingPage({ currentUser, onChangeRoute, onContactUpgrade }) {
  const B = window.SDH_BILLING;
  const sub = B.getSub(currentUser.id);
  const tier = sub ? B.getTier(sub.tierCode) : null;
  const usage = sub ? B.buildUsage(currentUser.id, sub.tierCode) : null;
  const packs = B.userPacks[currentUser.id] || [];
  const userPayments = B.payments.filter(p => p.userId === currentUser.id).sort((a, b) => new Date(b.date) - new Date(a.date));

  if (!sub || !tier) {
    return (
      <div className="sdh-fade">
        <PageHeader
          section="личный кабинет"
          title="Подписка не активна"
          accent="не активна"
          subtitle="Выберите подходящий tier на странице тарифов."
        />
        <section className="sdh-container">
          <button className="sdh-btn sdh-btn--bronze" onClick={() => onChangeRoute('pricing')}>
            Перейти к тарифам
          </button>
        </section>
      </div>
    );
  }

  const daysLeft = sub.expiresAt ? Math.round((new Date(sub.expiresAt) - new Date('2026-05-23T10:00:00Z')) / 86400000) : null;

  return (
    <div className="sdh-fade">
      <PageHeader
        section="личный кабинет"
        title="Подписка и расходы"
        accent="подписка"
        subtitle="Ваш tier, использование токенов, история платежей. Изменения tier доступны в любой момент с прорейтингом по дням."
        right={
          <button className="sdh-btn" onClick={() => onChangeRoute('account')}>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
              <path d="M7.5 2 4 6l3.5 4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
            В профиль
          </button>
        }
      />

      <section className="sdh-container" style={{ paddingBottom: 'var(--space-16)' }}>
        {/* Active subscription hero */}
        <div style={{
          background: `linear-gradient(135deg, ${tier.hue === 'bronze' ? 'var(--brand-bronze-subtle)' : `var(--hue-${tier.hue}-subtle)`}, var(--surface-elevated))`,
          border: `1px solid ${tier.hue === 'bronze' ? 'var(--brand-bronze)' : `var(--hue-${tier.hue})`}`,
          borderRadius: 'var(--radius-2xl)',
          padding: 'var(--space-6)',
          marginBottom: 'var(--space-6)',
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)', alignItems: 'center' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--space-3)' }}>
                <CategoryPill hue={tier.hue}>{tier.name}</CategoryPill>
                {sub.isInternal && <CategoryPill hue="emerald" small>internal</CategoryPill>}
                <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
                  активна
                </span>
              </div>
              <h2 style={{ margin: '0 0 var(--space-2)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--text-primary)' }}>
                {sub.isInternal
                  ? <React.Fragment>Внутренний <em style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', color: 'var(--brand-bronze-deep)' }}>tier</em> команды</React.Fragment>
                  : `${tier.priceRub.toLocaleString('ru-RU')} ₽/мес`}
              </h2>
              <p className="sdh-quote" style={{ margin: 0, fontSize: 13.5 }}>
                {sub.isInternal
                  ? 'Бессрочный доступ ко всем функциям без оплаты. Назначается super-admin вручную членам команды Symbiosis Lab.'
                  : `Активна до ${new Date(sub.expiresAt).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' })} · ${sub.autoRenew ? 'автопродление включено' : 'автопродление отключено'}`}
              </p>
            </div>
            {!sub.isInternal && (
              <div style={{
                background: 'var(--surface-elevated)',
                borderRadius: 'var(--radius-md)',
                padding: 'var(--space-3)',
                textAlign: 'center',
              }}>
                <div className="sdh-mono-label" style={{ marginBottom: 4 }}>осталось</div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 32, fontWeight: 500,
                  color: daysLeft < 7 ? 'var(--warning)' : 'var(--text-primary)',
                }}>{daysLeft}</div>
                <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>дней до продления</div>
              </div>
            )}
          </div>
        </div>

        {/* Usage section */}
        {tier.tokens > 0 && (
          <div style={{
            background: 'var(--surface-elevated)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 'var(--radius-xl)',
            padding: 'var(--space-6)',
            marginBottom: 'var(--space-6)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--space-4)' }}>
              <h3 className="sdh-section-label" style={{ marginBottom: 0 }}>
                <InfoLabel
                  title="Использование за месяц"
                  what="Сколько токенов LLM вы потратили с начала текущего месячного периода."
                  why="Если приближаетесь к лимиту в середине месяца, варианты: купить пак за 290 ₽ (100K токенов), повысить tier (прорейтинг), либо подождать конца периода."
                >использование в этом периоде</InfoLabel>
              </h3>
              <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
                {new Date(usage.periodStartedAt).toLocaleDateString('ru-RU')} → {new Date(usage.periodEndsAt).toLocaleDateString('ru-RU')}
              </span>
            </div>

            <UsageBar used={usage.tokensUsed} total={usage.tokensIncluded} />

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-3)', marginTop: 'var(--space-4)' }}>
              <UsageMini label="осталось" value={Math.max(0, usage.tokensIncluded - usage.tokensUsed).toLocaleString('ru-RU')} hue="emerald" suffix="токенов" />
              <UsageMini label="средний день"
                value={(usage.tokensUsed / 22).toLocaleString('ru-RU', { maximumFractionDigits: 0 })}
                hue="info" suffix="токенов" />
              <UsageMini label="прогноз на конец"
                value={usage.forecast.toLocaleString('ru-RU')}
                hue={usage.forecast > usage.tokensIncluded ? 'rose' : 'amber'}
                suffix={usage.forecast > usage.tokensIncluded ? 'превышение' : 'в рамках'} />
            </div>

            <div style={{ marginTop: 'var(--space-6)' }}>
              <h4 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-3)' }}>
                <InfoLabel
                  title="Расход по операциям"
                  what="Какие функции съели больше всего токенов."
                  why="Если 80% уходит на одну операцию — попробуйте другую методологию. Например, Phase 4.5 дорогая, но даёт больше за один прогон. Cron можно сделать реже, чтобы сэкономить."
                >на что ушло</InfoLabel>
              </h4>
              <UsageByOp byOp={usage.byOperation} total={usage.tokensUsed} />
            </div>
          </div>
        )}

        {/* Packs */}
        <div style={{
          background: 'var(--surface-elevated)',
          border: '1px solid var(--border-subtle)',
          borderRadius: 'var(--radius-xl)',
          padding: 'var(--space-6)',
          marginBottom: 'var(--space-6)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--space-4)' }}>
            <h3 className="sdh-section-label" style={{ marginBottom: 0 }}>
              <InfoLabel
                title="Дополнительные пакеты"
                what="Купленные сверх tier'а паки токенов. Тратятся после исчерпания месячных и не сгорают."
                why="Если регулярно покупаете 2+ small пака — стоит перейти на следующий tier, выйдет дешевле и без необходимости думать о расходе."
              >доп. пакеты токенов</InfoLabel>
            </h3>
            <button className="sdh-btn sdh-btn--bronze" onClick={() => onContactUpgrade && onContactUpgrade('pack')}>
              Купить пак
            </button>
          </div>

          {packs.length === 0 ? (
            <EmptyState title="Паков пока нет"
              hint="Когда базовых токенов tier'а перестанет хватать, докупите пак. Цена начинается с 290 ₽." />
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {packs.map(p => (
                <div key={p.id} style={{
                  display: 'grid', gridTemplateColumns: '90px 1fr 130px 120px',
                  gap: 'var(--space-4)', alignItems: 'center',
                  padding: '10px 14px',
                  background: 'var(--brand-bronze-subtle)',
                  borderRadius: 'var(--radius-md)',
                  border: '1px solid var(--brand-bronze)',
                }}>
                  <CategoryPill hue="bronze" small>{p.code}</CategoryPill>
                  <UsageBar used={p.tokensTotal - p.tokensRemaining} total={p.tokensTotal} showLabel={true} height={8} />
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)' }}>
                    куплен {new Date(p.purchasedAt).toLocaleDateString('ru-RU')}
                  </span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
                    {p.priceRub.toLocaleString('ru-RU')} ₽
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Payment history */}
        <div style={{
          background: 'var(--surface-elevated)',
          border: '1px solid var(--border-subtle)',
          borderRadius: 'var(--radius-xl)',
          padding: 'var(--space-6)',
          marginBottom: 'var(--space-6)',
        }}>
          <h3 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-4)' }}>
            история платежей
          </h3>
          {userPayments.length === 0 ? (
            <EmptyState title="Платежей пока нет" hint="" />
          ) : (
            <div>
              <div style={{
                display: 'grid', gridTemplateColumns: '120px 1fr 130px 100px 80px',
                gap: 12, padding: '6px 0',
                borderBottom: '1px solid var(--border-default)', marginBottom: 4,
              }}>
                <div className="sdh-mono-label">дата</div>
                <div className="sdh-mono-label">что</div>
                <div className="sdh-mono-label">метод</div>
                <div className="sdh-mono-label" style={{ textAlign: 'right' }}>сумма</div>
                <div className="sdh-mono-label" style={{ textAlign: 'right' }}>статус</div>
              </div>
              {userPayments.map(p => (
                <div key={p.id} style={{
                  display: 'grid', gridTemplateColumns: '120px 1fr 130px 100px 80px',
                  gap: 12, padding: '10px 0',
                  borderBottom: '1px dashed var(--border-subtle)',
                  alignItems: 'center',
                }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>
                    {new Date(p.date).toLocaleDateString('ru-RU')}
                  </span>
                  <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>
                    {p.type === 'subscription_renewal' ? `Подписка ${tier.name}` : p.type === 'token_pack' ? 'Пакет токенов' : p.type}
                  </span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11.5, color: 'var(--text-tertiary)' }}>
                    {p.method === 'manual' ? 'банк (счёт)' : p.method}
                  </span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
                    {p.amountRub.toLocaleString('ru-RU')} ₽
                  </span>
                  <span style={{ textAlign: 'right' }}>
                    <StatusDot status={p.status === 'succeeded' ? 'success' : p.status} />
                  </span>
                </div>
              ))}
              <div style={{ marginTop: 'var(--space-3)', textAlign: 'right' }}>
                <button className="sdh-btn sdh-btn--ghost" style={{ fontSize: 12 }}>
                  Экспорт счетов в PDF
                </button>
              </div>
            </div>
          )}
        </div>

        {/* Actions */}
        {!sub.isInternal && (
          <div style={{
            background: 'var(--surface-elevated)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 'var(--radius-xl)',
            padding: 'var(--space-6)',
          }}>
            <h3 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-4)' }}>действия</h3>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <button className="sdh-btn sdh-btn--bronze" onClick={() => onChangeRoute('pricing')}>Изменить tier</button>
              <button className="sdh-btn">{sub.autoRenew ? 'Отключить автопродление' : 'Включить автопродление'}</button>
              <button className="sdh-btn" style={{ marginLeft: 'auto', border: '1px solid var(--hue-rose)', color: 'var(--hue-rose)' }}>
                Отменить подписку
              </button>
            </div>
          </div>
        )}
      </section>
    </div>
  );
}

function UsageMini({ label, value, hue, suffix }) {
  return (
    <div style={{
      padding: 'var(--space-3)',
      background: `var(--hue-${hue}-subtle)`,
      borderRadius: 'var(--radius-md)',
    }}>
      <div className="sdh-mono-label" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 500, color: `var(--hue-${hue})` }}>
        {value}
      </div>
      {suffix && <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 2 }}>{suffix}</div>}
    </div>
  );
}

function UsageByOp({ byOp, total }) {
  const opLabels = {
    deep_dive: 'Deep-dive отчёты',
    cron_pipeline: 'Cron pipeline',
    phase45: 'Phase 4.5 валидация',
    mcp_call: 'MCP API вызовы',
    classify: 'Классификация стартапов',
    embed: 'Эмбеддинги',
  };
  const opHues = {
    deep_dive: 'purple',
    cron_pipeline: 'amber',
    phase45: 'rose',
    mcp_call: 'info',
    classify: 'emerald',
    embed: 'info',
  };
  const sorted = Object.entries(byOp).sort((a, b) => b[1] - a[1]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {sorted.map(([op, tokens]) => {
        const pct = tokens / total;
        if (tokens === 0) return null;
        return (
          <div key={op} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 110px', gap: 12, alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 7, height: 7, borderRadius: '50%', background: `var(--hue-${opHues[op]})` }} />
              <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>{opLabels[op]}</span>
            </div>
            <div style={{ height: 6, background: 'var(--surface-sunken)', borderRadius: 3, overflow: 'hidden' }}>
              <div style={{ width: `${pct * 100}%`, height: '100%', background: `var(--hue-${opHues[op]})`, opacity: 0.6 }} />
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)', textAlign: 'right' }}>
              {tokens.toLocaleString('ru-RU')} · {Math.round(pct * 100)}%
            </span>
          </div>
        );
      })}
    </div>
  );
}

window.BillingPage = BillingPage;