// ════════════════════════════════════════════════════════════════
// QuotaBanner — баннер 75% / 90% / 100% использования
// показывается под Header если usage > 75%
// ════════════════════════════════════════════════════════════════

function QuotaBanner({ currentUser, onRoute }) {
  const B = window.SDH_BILLING;
  const sub = B.getSub(currentUser.id);
  if (!sub || sub.isInternal) return null;

  const tier = B.getTier(sub.tierCode);
  if (!tier.tokens || tier.tokens === 0) return null;

  const usage = B.buildUsage(currentUser.id, sub.tierCode);
  if (usage.pct < 0.75) return null;

  const isCritical = usage.pct >= 1;
  const isHigh = usage.pct >= 0.9;
  const hue = isCritical ? 'rose' : isHigh ? 'rose' : 'amber';
  const left = Math.max(0, usage.tokensIncluded - usage.tokensUsed);
  const pctRound = Math.round(usage.pct * 100);

  // Sticky right below header
  return (
    <div style={{
      background: `var(--hue-${hue}-subtle)`,
      borderBottom: `1px solid var(--hue-${hue})`,
      padding: '10px 0',
    }}>
      <div className="sdh-container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', minWidth: 0 }}>
          <span style={{
            width: 10, height: 10, borderRadius: '50%',
            background: `var(--hue-${hue})`,
            boxShadow: `0 0 0 3px var(--hue-${hue}-subtle)`,
            animation: 'sdhPulse 1.8s ease-in-out infinite',
            flexShrink: 0,
          }} />
          <div style={{ fontSize: 13, color: `var(--hue-${hue})`, lineHeight: 1.4 }}>
            <strong>{pctRound}%</strong> токенов tier{' '}
            <strong style={{ fontFamily: 'var(--font-mono)' }}>{tier.name}</strong> использовано.{' '}
            {isCritical
              ? 'Новые LLM-операции возвращают 402. Купите пак или повысьте tier чтобы продолжить.'
              : isHigh
                ? `Осталось ${left.toLocaleString('ru-RU')} токенов до конца периода. Рекомендуем купить пак или повысить tier.`
                : `Осталось ${left.toLocaleString('ru-RU')} токенов. Следите за расходом, чтобы не упереться.`}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
          <button className="sdh-btn" style={{ fontSize: 12, padding: '4px 10px' }}
            onClick={() => onRoute('account.billing')}>
            Детали
          </button>
          <button className="sdh-btn sdh-btn--bronze" style={{ fontSize: 12, padding: '4px 12px' }}
            onClick={() => onRoute('pricing')}>
            {isCritical ? 'Купить пак' : 'Повысить tier'}
          </button>
        </div>
      </div>
    </div>
  );
}

window.QuotaBanner = QuotaBanner;