// ════════════════════════════════════════════════════════════════
// /admin/billing — выручка, подписки, заявки на оформление
// super_admin only (admin видит totals)
// ════════════════════════════════════════════════════════════════

function AdminBillingPage({ currentUser }) {
  const A = window.SDH_ADMIN;
  const B = window.SDH_BILLING;
  const isSuperAdmin = currentUser.role === 'super_admin';

  const summary = B.adminSummary();
  const newReqs = B.paymentRequests.filter(r => r.status === 'new');
  const inProgress = B.paymentRequests.filter(r => r.status === 'in_progress' || r.status === 'invoiced');
  const completed = B.paymentRequests.filter(r => r.status === 'completed');

  // Per-tier breakdown
  const tierBreakdown = B.TIERS.filter(t => t.isPublic).map(t => {
    const subs = Object.values(B.SUBSCRIPTIONS_BY_USER).filter(s => s.tierCode === t.code && !s.isInternal);
    return {
      tier: t,
      count: subs.length,
      revenue: subs.length * t.priceRub,
    };
  });

  if (!isSuperAdmin && currentUser.role !== 'admin') {
    return <AccessDenied requiredRole="admin" currentRole={currentUser.role} />;
  }

  return (
    <div className="sdh-fade">
      <PageHeader
        section="управление"
        title="Биллинг и подписки"
        accent="биллинг"
        subtitle={isSuperAdmin
          ? `Выручка, маржа, активные подписки. ${newReqs.length} заявок на оформление ждут ручной обработки.`
          : 'Видны общие суммы. Детализация по конкретным подпискам доступна super-admin.'}
      />

      <section className="sdh-container" style={{ paddingBottom: 'var(--space-16)' }}>
        {/* Top tiles */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
          gap: 'var(--space-4)', marginBottom: 'var(--space-6)',
        }}>
          <MetricTile label="выручка месяц" value={`${summary.monthRevenue.toLocaleString('ru-RU')} ₽`}
            hue="emerald"
            help={{
              title: 'Месячная выручка',
              what: 'Сумма всех активных подписок (по их tier) плюс оплаченные паки за текущий месяц.',
              why: 'Главная цифра здоровья продукта. Если растёт быстрее cost — модель работает. Если стагнирует при росте пользователей — значит привлекаете не тех или не тот tier.',
            }} />
          <MetricTile label="маржа" value={`${Math.round(summary.monthMargin * 100)}%`}
            hue="bronze"
            help={{
              title: 'Маржа',
              what: 'Разница между выручкой и реальной стоимостью LLM расходов на пользователей.',
              why: 'Целевая маржа 85-95%. Ниже 80% — кто-то ест больше токенов, чем платит, проверьте через cost breakdown. Выше 95% — может, цены завышены и можно дать промокод для роста.',
            }} />
          <MetricTile label="активных подписок" value={summary.activeSubsCount}
            hue="purple"
            footer={`+ ${summary.freeCount} free · ${summary.internalCount} internal`} />
          <MetricTile label="заявок новых" value={newReqs.length}
            hue={newReqs.length > 0 ? 'amber' : 'info'}
            footer={newReqs.length > 0 ? 'ждут оформления' : 'все обработаны'} />
          {isSuperAdmin && (
            <MetricTile label="расходы LLM" value={`${summary.monthCostRub.toLocaleString('ru-RU')} ₽`}
              hue="rose"
              footer="реальная себестоимость" />
          )}
        </div>

        {/* Revenue chart */}
        <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-3)' }}>
            <h3 className="sdh-section-label" style={{ marginBottom: 0 }}>выручка vs расходы · 12 месяцев</h3>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>в рублях</span>
          </div>
          <RevenueChart data={summary.revenue12m} />
        </div>

        {/* Manual payment requests */}
        {isSuperAdmin && (
          <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="Запросы от потенциальных клиентов, оставленные через форму «Связаться» на странице тарифов. Manual flow до подключения Юкассы."
                  why="Скорость обработки = впечатление о продукте. Цель: ответить в течение рабочего дня. Старые заявки в new статусе показывают, где провисает процесс."
                >ручные заявки</InfoLabel>
              </h3>
              <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
                {newReqs.length} новых · {inProgress.length} в работе · {completed.length} завершено
              </span>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[...newReqs, ...inProgress, ...completed].map(req => <PaymentRequestRow key={req.id} req={req} />)}
            </div>
          </div>
        )}

        {/* Subscriptions breakdown */}
        <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)' }}>
            <InfoLabel
              title="Распределение по tier'ам"
              what="Сколько активных пользователей в каждом плане и сколько они приносят выручки."
              why="Если 80% выручки от одного tier — попробуйте подвинуть конверсию в более дорогой. Если 80% на самом дешёвом — может, между ним и следующим слишком большая разница в цене или фичах."
            >активные подписки по tier'ам</InfoLabel>
          </h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {tierBreakdown.filter(b => b.count > 0).map(b => (
              <div key={b.tier.code} style={{
                display: 'grid', gridTemplateColumns: '160px 1fr 100px 130px',
                gap: 12, alignItems: 'center',
                padding: '10px 14px',
                background: 'var(--surface-canvas)',
                borderRadius: 'var(--radius-md)',
              }}>
                <CategoryPill hue={b.tier.hue}>{b.tier.name}</CategoryPill>
                <div style={{ height: 8, background: 'var(--surface-sunken)', borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{
                    width: `${(b.revenue / summary.monthRevenue) * 100}%`, height: '100%',
                    background: b.tier.hue === 'bronze' ? 'var(--brand-bronze)' : `var(--hue-${b.tier.hue})`,
                    opacity: 0.65,
                  }} />
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-secondary)' }}>
                  {b.count} {b.count === 1 ? 'подписка' : 'подписок'}
                </span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
                  {b.revenue.toLocaleString('ru-RU')} ₽
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Internal tier grant */}
        {isSuperAdmin && (
          <div style={{
            background: 'var(--hue-emerald-subtle)',
            border: '1px solid var(--hue-emerald)',
            borderRadius: 'var(--radius-xl)',
            padding: 'var(--space-6)',
          }}>
            <h3 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-2)', color: 'var(--hue-emerald)' }}>
              выдать internal tier
            </h3>
            <p className="sdh-quote" style={{ margin: '0 0 var(--space-4)', fontSize: 13 }}>
              Бесплатный безлимитный tier для членов команды Symbiosis Lab. Только super-admin может выдавать. Действие логируется.
            </p>
            <button className="sdh-btn">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M6 2v8M2 6h8" strokeLinecap="round" />
              </svg>
              Выдать internal пользователю
            </button>
          </div>
        )}
      </section>
    </div>
  );
}

function MetricTile({ label, value, hue, footer, help }) {
  return (
    <div className="sdh-warm-card" style={{
      '--bg-tint': hue === 'bronze' ? 'var(--brand-bronze-subtle)' : `var(--hue-${hue}-subtle)`,
      padding: 'var(--space-4)',
    }}>
      <div className="sdh-mono-label" style={{ marginBottom: 4 }}>
        {help ? <InfoLabel {...help}>{label}</InfoLabel> : label}
      </div>
      <span className="sdh-metric-big">{value}</span>
      {footer && (
        <div style={{ fontSize: 11, color: 'var(--text-tertiary)', marginTop: 4 }}>{footer}</div>
      )}
    </div>
  );
}

function RevenueChart({ data }) {
  const maxRev = Math.max(...data.map(d => d.revenue));
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-end', height: 180 }}>
      {data.map((m, i) => {
        const revH = (m.revenue / maxRev) * 140;
        const costH = (m.cost / maxRev) * 140;
        return (
          <div key={m.month} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-tertiary)' }}>
              {Math.round(m.revenue / 1000)}K
            </span>
            <div style={{ width: '100%', position: 'relative', height: 140, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', gap: 2 }}>
              <div style={{
                width: '40%', height: revH,
                background: 'var(--brand-bronze)', opacity: 0.7,
                borderRadius: '4px 4px 0 0',
                minHeight: 2,
              }} />
              <div style={{
                width: '40%', height: costH,
                background: 'var(--hue-rose)', opacity: 0.5,
                borderRadius: '4px 4px 0 0',
                minHeight: 2,
              }} />
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-tertiary)' }}>
              {m.month.slice(5)}
            </span>
          </div>
        );
      })}
      <div style={{
        position: 'absolute', right: 'var(--space-8)',
        display: 'flex', flexDirection: 'column', gap: 6,
        fontSize: 11, color: 'var(--text-tertiary)',
      }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 10, height: 10, background: 'var(--brand-bronze)', opacity: 0.7 }} /> выручка
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 10, height: 10, background: 'var(--hue-rose)', opacity: 0.5 }} /> расходы
        </span>
      </div>
    </div>
  );
}

function PaymentRequestRow({ req }) {
  const B = window.SDH_BILLING;
  const tier = B.getTier(req.tierCode);
  const statusMap = {
    new:         { hue: 'amber',   label: 'новая' },
    in_progress: { hue: 'purple',  label: 'в работе' },
    invoiced:    { hue: 'info',    label: 'счёт выставлен' },
    completed:   { hue: 'emerald', label: 'завершена' },
  };
  const s = statusMap[req.status];
  const minsAgo = Math.round((new Date('2026-05-23T10:00:00Z') - new Date(req.createdAt)) / 60000);
  const timeAgo = minsAgo < 60 ? `${minsAgo} мин назад` : minsAgo < 60 * 24 ? `${Math.round(minsAgo / 60)} ч назад` : `${Math.round(minsAgo / 60 / 24)} д назад`;

  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1.6fr 120px 100px 120px 110px',
      gap: 12, alignItems: 'center',
      padding: '12px 14px',
      background: req.status === 'new' ? 'var(--hue-amber-subtle)' : 'var(--surface-canvas)',
      border: '1px solid ' + (req.status === 'new' ? 'var(--hue-amber)' : 'var(--border-subtle)'),
      borderRadius: 'var(--radius-md)',
    }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--text-primary)' }}>{req.name}</div>
        <div style={{ fontSize: 11.5, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)' }}>{req.email}</div>
        {req.comment && (
          <div style={{ fontSize: 11.5, color: 'var(--text-secondary)', marginTop: 4, fontStyle: 'italic' }}>
            «{req.comment.length > 80 ? req.comment.slice(0, 78) + '…' : req.comment}»
          </div>
        )}
      </div>
      <CategoryPill hue={tier.hue} small>{tier.name}</CategoryPill>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-primary)' }}>
        {tier.priceRub ? `${tier.priceRub.toLocaleString('ru-RU')} ₽` : 'по запросу'}
      </span>
      <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>{timeAgo}</span>
      <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
        <CategoryPill hue={s.hue} small>{s.label}</CategoryPill>
        {req.status === 'new' && (
          <button className="sdh-btn sdh-btn--bronze" style={{ fontSize: 10.5, padding: '3px 8px' }}>
            оформить
          </button>
        )}
      </div>
    </div>
  );
}

window.AdminBillingPage = AdminBillingPage;