/* ═══════════════════════════════════════════════════════════════════════════
   THEMES INDEX
   Import all themes here and export the theme manager utilities
   ═══════════════════════════════════════════════════════════════════════════ */

import './cyberpunk.css';
import './tactical.css';
import './esports.css';
import './minimal.css';
import '../animations.css';

/* ─── Available Themes ──────────────────────────────────────────────────────── */
export const THEMES = {
  default: {
    id: 'default',
    name: 'Dark Default',
    description: 'Original dark theme'
  },
  cyberpunk: {
    id: 'cyberpunk',
    name: 'Midnight Cyberpunk',
    description: 'Neon cyberpunk with glowing accents',
    accent: '#00f0ff'
  },
  tactical: {
    id: 'tactical',
    name: 'Tactical Operations',
    description: 'Military/operator aesthetic',
    accent: '#d4a84b'
  },
  esports: {
    id: 'esports',
    name: 'Neon Esports',
    description: 'Vibrant gaming energy',
    accent: '#ec4899'
  },
  minimal: {
    id: 'minimal',
    name: 'Clean Minimal',
    description: 'Premium minimalist light theme',
    accent: '#2563eb'
  }
};

/* ─── Theme Manager ─────────────────────────────────────────────────────────── */
const THEME_KEY = 'radarTheme';

/**
 * Load theme from localStorage and apply it
 */
export const loadTheme = () => {
  const savedTheme = localStorage.getItem(THEME_KEY) || 'default';
  applyTheme(savedTheme);
  return savedTheme;
};

/**
 * Apply a theme to the document
 * @param {string} themeId - The theme ID to apply
 */
export const applyTheme = (themeId) => {
  // Remove all theme attributes
  document.documentElement.removeAttribute('data-theme');

  // Apply the new theme
  if (themeId !== 'default') {
    document.documentElement.setAttribute('data-theme', themeId);
  }

  // Save to localStorage
  localStorage.setItem(THEME_KEY, themeId);
};

/**
 * Get all available themes
 */
export const getThemes = () => Object.values(THEMES);

/**
 * Get a specific theme by ID
 */
export const getTheme = (themeId) => THEMES[themeId] || THEMES.default;