// ════════════════════════════════════════════════════════════════
// /admin/cost — расходы API
// super_admin видит полную детализацию, admin — только итоги
// ════════════════════════════════════════════════════════════════

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

  const usdRate = 92; // RUB per USD (mock)
  const totalUsd = 4.23;
  const budgetUsd = A.settings.budget_monthly_usd;
  const pctUsed = totalUsd / budgetUsd;

  // Per service
  const services = isSuperAdmin ? [
    { id: 'glm',    label: 'LLM провайдер A', share: 0.80, calls: 11304, usd: totalUsd * 0.80, hue: 'purple' },
    { id: 'gemini', label: 'LLM провайдер B', share: 0.15, calls: 1872, usd: totalUsd * 0.15, hue: 'amber' },
    { id: 'voyage', label: 'эмбеддинги',      share: 0.05, calls: 5022, usd: totalUsd * 0.05, hue: 'info' },
  ] : null;

  // Per user
  const perUser = isSuperAdmin ? [
    { user: 'orlov',     role: 'super_admin',  usd: 1.23, share: 0.29 },
    { user: 'mcp-agent', role: 'agent',        usd: 2.45, share: 0.58 },
    { user: 'lida',      role: 'collaborator', usd: 0.55, share: 0.13 },
  ] : null;

  // 30-day series
  const daily = React.useMemo(() => {
    const out = [];
    let seed = 731;
    for (let i = 29; i >= 0; i--) {
      seed = (seed * 9301 + 49297) % 233280;
      const r = seed / 233280;
      out.push({
        date: new Date(new Date('2026-05-23T10:00:00Z').getTime() - i * 86400000).toISOString().slice(0, 10),
        usd: 0.06 + r * 0.18,
      });
    }
    return out;
  }, []);
  const dailyAvg = daily.reduce((s, d) => s + d.usd, 0) / daily.length;
  const projectedMonth = dailyAvg * 30;

  return (
    <div className="sdh-fade">
      <PageHeader
        section="управление"
        title="Расходы и бюджет"
        accent="бюджет"
        subtitle={isSuperAdmin
          ? 'Полная детализация LLM расходов. Бюджет настраивается в системных настройках; превышение по умолчанию останавливает cron.'
          : 'Видна общая сумма расходов. Детализация по сервисам и пользователям доступна super-admin.'}
      />

      <section className="sdh-container" style={{ paddingBottom: 'var(--space-16)' }}>
        {/* Top: budget gauge */}
        <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: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 'var(--space-6)', alignItems: 'center',
          }}>
            <div>
              <div className="sdh-mono-label" style={{ marginBottom: 4 }}>
                <InfoLabel
                  title="Месячные расходы"
                  what="Реальная стоимость всех LLM вызовов с начала месяца, в долларах. Бюджет настраивается в Settings."
                  why="Если расход быстрее бюджета — Budget guard остановит cron при превышении. Если намного ниже — можно пустить больше Phase 4.5 валидаций или увеличить частоту cron."
                >расходы в этом месяце</InfoLabel>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span className="sdh-metric-big">${totalUsd}</span>
                <span style={{ fontSize: 14, color: 'var(--text-tertiary)' }}>
                  / ${budgetUsd} ({Math.round(pctUsed * 100)}%)
                </span>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)', marginTop: 4 }}>
                ≈ {Math.round(totalUsd * usdRate).toLocaleString('ru-RU')} ₽ по курсу ЦБ
              </div>
              <div style={{ marginTop: 'var(--space-3)' }}>
                <UsageBar used={Math.round(totalUsd * 100)} total={budgetUsd * 100} showLabel={false} height={8} />
              </div>
            </div>

            <div>
              <div className="sdh-mono-label" style={{ marginBottom: 4 }}>
                <InfoLabel
                  title="Прогноз на конец месяца"
                  what="Экстраполяция текущего темпа расходов до конца месяца."
                  why="Если прогноз превышает бюджет — пора либо поднять лимит, либо снизить частоту cron. Лучше узнать сейчас, чем за 2 дня до конца месяца."
                >прогноз на конец месяца</InfoLabel>
              </div>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 26, fontWeight: 500,
                color: projectedMonth > budgetUsd ? 'var(--danger)' : 'var(--success)',
              }}>${projectedMonth.toFixed(2)}</span>
              <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 4 }}>
                {projectedMonth > budgetUsd
                  ? <span style={{ color: 'var(--danger)' }}>превысит бюджет на ${(projectedMonth - budgetUsd).toFixed(2)}</span>
                  : <span style={{ color: 'var(--success)' }}>в рамках бюджета · запас ${(budgetUsd - projectedMonth).toFixed(2)}</span>}
              </div>
            </div>

            <div>
              <div className="sdh-mono-label" style={{ marginBottom: 4 }}>средний день</div>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 26, fontWeight: 500, color: 'var(--brand-bronze-deep)' }}>
                ${dailyAvg.toFixed(2)}
              </span>
              <div style={{ fontSize: 12, color: 'var(--text-tertiary)', marginTop: 4 }}>
                за последние 30 дней
              </div>
            </div>
          </div>
        </div>

        {/* 30-day 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 }}>$/день за 30 дней</h3>
            <span className="sdh-mono-label" style={{ marginBottom: 0 }}>
              среднее: ${dailyAvg.toFixed(2)}
            </span>
          </div>
          <CostSparkline daily={daily} />
        </div>

        {/* Per service (super_admin only) */}
        {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)',
          }}>
            <h3 className="sdh-section-label" style={{ display: 'block', marginBottom: 'var(--space-4)' }}>
              <InfoLabel
                title="Распределение по сервисам"
                what="Доля расходов по поставщикам LLM и эмбеддингов."
                why="Если 80%+ на одном провайдере — у вас единая точка отказа. Стоит распределить нагрузку на 2-3 провайдера, чтобы при росте цен у одного просто переключиться."
              >распределение по сервисам</InfoLabel>
            </h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {services.map(s => (
                <div key={s.id} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 90px 110px', gap: 12, alignItems: 'center' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: `var(--hue-${s.hue})` }} />
                    <span style={{ fontSize: 13.5, color: 'var(--text-primary)' }}>{s.label}</span>
                  </div>
                  <div style={{ height: 8, background: 'var(--surface-sunken)', borderRadius: 4, overflow: 'hidden' }}>
                    <div style={{ width: `${s.share * 100}%`, height: '100%', background: `var(--hue-${s.hue})`, opacity: 0.65 }} />
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)', textAlign: 'right' }}>
                    {s.calls.toLocaleString('ru-RU')} вызовов
                  </span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
                    ${s.usd.toFixed(2)} · {Math.round(s.share * 100)}%
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Per user (super_admin only) */}
        {isSuperAdmin && (
          <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)' }}>
              <InfoLabel
                title="Расходы по пользователям"
                what="Сколько LLM-токенов потратил каждый пользователь с начала месяца."
                why="Если один пользователь генерит 80% расходов — стоит обсудить с ним, что он запускает. Может, ему нужен Pro tier, или там cron-задача в цикле застряла."
              >расходы по пользователям</InfoLabel>
            </h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {perUser.map(u => (
                <div key={u.user} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 90px', gap: 12, alignItems: 'center' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <UserAvatar name={u.user} role={u.role} size={26} />
                    <span style={{ fontSize: 13, color: 'var(--text-primary)' }}>{u.user}</span>
                    <RoleBadge role={u.role} size="sm" />
                  </div>
                  <div style={{ height: 8, background: 'var(--surface-sunken)', borderRadius: 4, overflow: 'hidden' }}>
                    <div style={{ width: `${u.share * 100}%`, height: '100%', background: 'var(--brand-bronze)', opacity: 0.65 }} />
                  </div>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-primary)', fontWeight: 500, textAlign: 'right' }}>
                    ${u.usd.toFixed(2)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        )}
      </section>
    </div>
  );
}

function CostSparkline({ daily }) {
  const max = Math.max(...daily.map(d => d.usd));
  return (
    <svg width="100%" viewBox="0 0 600 140" style={{ display: 'block' }}>
      {/* gridlines */}
      {[0, 0.25, 0.5, 0.75, 1].map(p => (
        <line key={p} x1="0" x2="600" y1={p * 120 + 10} y2={p * 120 + 10}
          stroke="var(--border-subtle)" strokeDasharray="2 4" />
      ))}
      {/* area */}
      <polygon points={[
        '0,130',
        ...daily.map((d, i) => `${(i / (daily.length - 1)) * 600},${130 - (d.usd / max) * 120}`),
        '600,130',
      ].join(' ')} fill="var(--brand-bronze)" fillOpacity="0.12" />
      {/* line */}
      <polyline points={daily.map((d, i) => `${(i / (daily.length - 1)) * 600},${130 - (d.usd / max) * 120}`).join(' ')}
        fill="none" stroke="var(--brand-bronze)" strokeWidth="1.5" />
      {/* points */}
      {daily.map((d, i) => (
        <circle key={i} cx={(i / (daily.length - 1)) * 600} cy={130 - (d.usd / max) * 120}
          r="2" fill="var(--brand-bronze)" />
      ))}
    </svg>
  );
}

window.CostBreakdown = CostBreakdown;