// CyberX Battle Pass — Design tokens & shared primitives

const CX = {
  // Brand
  red: '#E63946',
  redDeep: '#B81E2C',
  // Surfaces
  black: '#0D0F14',
  card: '#1A1D24',
  cardHi: '#22262F',
  line: 'rgba(255,255,255,0.06)',
  lineHi: 'rgba(255,255,255,0.12)',
  // Text
  white: '#FFFFFF',
  textSec: '#B8B8C0',
  textMute: '#6C757D',
  // Tiers
  bronze: '#CD7F32',
  bronzeHi: '#E2A56B',
  silver: '#B8B8C0',
  silverHi: '#E6E8EE',
  gold: '#FFB627',
  goldHi: '#FFD700',
  legend: '#A855F7',
  legendHi: '#22D3EE',
  // Status
  green: '#22C55E',
  amber: '#F59E0B',
  premiumGold: '#FFD700',
  danger: '#EF4444',
};

const FONT_DISPLAY = '"Bebas Neue", "Oswald", "Anton", Impact, sans-serif';
const FONT_BODY = '"Inter", "Manrope", -apple-system, system-ui, sans-serif';
const FONT_MONO = '"JetBrains Mono", "Roboto Mono", "SF Mono", ui-monospace, monospace';

// ─────────────────────────────────────────────────────────────
// Mono number — XP-style with thousands sep
// ─────────────────────────────────────────────────────────────
function MonoNum({ n, sep = ' ', style }) {
  const s = (n || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, sep);
  return <span style={{ fontFamily: FONT_MONO, fontVariantNumeric: 'tabular-nums', ...style }}>{s}</span>;
}

// ─────────────────────────────────────────────────────────────
// Display text — condensed caps, letter-spacing
// ─────────────────────────────────────────────────────────────
function Display({ children, size = 28, color = CX.white, tracking = 0.06, weight = 700, style }) {
  return (
    <span style={{
      fontFamily: FONT_DISPLAY,
      fontWeight: weight,
      fontSize: size,
      lineHeight: 1,
      letterSpacing: `${tracking}em`,
      textTransform: 'uppercase',
      color, ...style,
    }}>{children}</span>
  );
}

// ─────────────────────────────────────────────────────────────
// XP progress bar — animated fill + sheen
// ─────────────────────────────────────────────────────────────
function XPBar({ value = 0, max = 100, color = CX.amber, glow = true, height = 8, label }) {
  const pct = Math.max(0, Math.min(100, (value / max) * 100));
  return (
    <div style={{ width: '100%' }}>
      {label && (
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 6, fontFamily: FONT_BODY, fontSize: 12, color: CX.textSec,
        }}>
          <span style={{ letterSpacing: 0.4, textTransform: 'uppercase' }}>{label}</span>
          <span style={{ fontFamily: FONT_MONO, fontSize: 12, color: CX.white }}>
            <MonoNum n={value} /> <span style={{ color: CX.textMute }}>/ <MonoNum n={max} /></span>
          </span>
        </div>
      )}
      <div style={{
        position: 'relative', height, borderRadius: height,
        background: 'rgba(255,255,255,0.06)',
        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.04)',
        overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', inset: 0, width: `${pct}%`,
          background: `linear-gradient(90deg, ${color}, ${color === CX.amber ? CX.gold : color})`,
          borderRadius: height,
          boxShadow: glow ? `0 0 12px ${color}88, inset 0 1px 0 rgba(255,255,255,0.4)` : 'inset 0 1px 0 rgba(255,255,255,0.3)',
        }}>
          {/* sheen */}
          <div style={{
            position: 'absolute', top: 0, bottom: 0, right: 0, width: 24,
            background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.5))',
            opacity: 0.6,
          }} />
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Tier helpers
// ─────────────────────────────────────────────────────────────
const TIERS = {
  recruit: { name: 'RECRUIT', color: CX.bronze, hi: CX.bronzeHi, range: [1, 10], grad: `linear-gradient(135deg, ${CX.bronze}, ${CX.bronzeHi})` },
  knight: { name: 'KNIGHT', color: CX.silver, hi: CX.silverHi, range: [11, 20], grad: `linear-gradient(135deg, #8a8a92, ${CX.silverHi})` },
  champion: { name: 'CHAMPION', color: CX.gold, hi: CX.goldHi, range: [21, 29], grad: `linear-gradient(135deg, ${CX.gold}, ${CX.goldHi})` },
  legend: { name: 'LEGEND', color: CX.legend, hi: CX.legendHi, range: [30, 30], grad: `linear-gradient(135deg, ${CX.legend} 0%, #6366F1 40%, ${CX.legendHi} 100%)` },
};

function tierFor(level) {
  if (level >= 30) return TIERS.legend;
  if (level >= 21) return TIERS.champion;
  if (level >= 11) return TIERS.knight;
  return TIERS.recruit;
}

// ─────────────────────────────────────────────────────────────
// CyberX logomark — chevron + X
// ─────────────────────────────────────────────────────────────
function CXMark({ size = 24, color = CX.red, glow = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{
      filter: glow ? `drop-shadow(0 0 8px ${color}aa)` : 'none',
    }}>
      <defs>
        <linearGradient id={`cxg-${size}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={color} />
          <stop offset="1" stopColor={color === CX.red ? CX.redDeep : color} />
        </linearGradient>
      </defs>
      {/* Chevron shield */}
      <path d="M16 2 L29 8 L29 18 Q29 24 16 30 Q3 24 3 18 L3 8 Z" fill={`url(#cxg-${size})`} />
      {/* Inset X */}
      <path d="M10 11 L16 17 L22 11 M10 23 L22 11 M22 23 L10 11" stroke="#0D0F14" strokeWidth="2.4" strokeLinecap="square" fill="none" opacity="0.92"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Premium star badge
// ─────────────────────────────────────────────────────────────
function PremiumStar({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ filter: `drop-shadow(0 0 4px ${CX.premiumGold}77)` }}>
      <defs>
        <linearGradient id={`pg-${size}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#FFE177" />
          <stop offset="1" stopColor={CX.premiumGold} />
        </linearGradient>
      </defs>
      <path d="M12 2 L14.5 8.5 L21 9.5 L16 14 L17.5 21 L12 17.5 L6.5 21 L8 14 L3 9.5 L9.5 8.5 Z"
        fill={`url(#pg-${size})`} stroke="#B8860B" strokeWidth="0.6"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Glow / chip
// ─────────────────────────────────────────────────────────────
function Chip({ children, color = CX.red, filled = false, size = 'sm', style }) {
  const sm = size === 'sm';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: sm ? '3px 7px' : '5px 10px',
      borderRadius: 4,
      fontFamily: FONT_DISPLAY,
      fontSize: sm ? 10 : 12,
      letterSpacing: '0.12em',
      fontWeight: 700,
      textTransform: 'uppercase',
      color: filled ? '#0D0F14' : color,
      background: filled ? color : `${color}1F`,
      border: filled ? 'none' : `1px solid ${color}66`,
      ...style,
    }}>{children}</span>
  );
}

Object.assign(window, {
  CX, FONT_DISPLAY, FONT_BODY, FONT_MONO,
  MonoNum, Display, XPBar, TIERS, tierFor, CXMark, PremiumStar, Chip,
});