// shared/theming/ThemeManager.js
export class ThemeManager {
  constructor() {
    this.themes = new Map();
    this.currentTheme = 'light';
    this.userPreferences = this.loadPreferences();

    this.registerBuiltInThemes();
    this.detectSystemPreferences();
    this.applyTheme(this.userPreferences.theme || this.getSystemTheme());
  }

  registerBuiltInThemes() {
    this.themes.set('light', {
      name: 'Light',
      description: 'Clean and bright theme',
      category: 'default',
      cssFile: 'themes/light.css'
    });

    this.themes.set('dark', {
      name: 'Dark',
      description: 'Easy on the eyes for low light',
      category: 'default',
      cssFile: 'themes/dark.css'
    });

    this.themes.set('high-contrast', {
      name: 'High Contrast',
      description: 'Maximum contrast for accessibility',
      category: 'accessibility',
      cssFile: 'themes/high-contrast.css'
    });

    this.themes.set('wood', {
      name: 'Classic Wood',
      description: 'Traditional wooden chess board',
      category: 'classic',
      cssFile: 'themes/wood.css'
    });

    this.themes.set('neon', {
      name: 'Neon',
      description: 'Futuristic glowing theme',
      category: 'fun',
      cssFile: 'themes/neon.css'
    });
  }

  detectSystemPreferences() {
    // Detect dark mode preference
    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
    darkModeQuery.addEventListener('change', (e) => {
      if (!this.userPreferences.theme) {
        this.applyTheme(e.matches ? 'dark' : 'light');
      }
    });

    // Detect high contrast preference
    const highContrastQuery = window.matchMedia('(prefers-contrast: high)');
    highContrastQuery.addEventListener('change', (e) => {
      if (e.matches && !this.userPreferences.theme) {
        this.applyTheme('high-contrast');
      }
    });

    // Detect reduced motion preference
    const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    reducedMotionQuery.addEventListener('change', (e) => {
      document.documentElement.style.setProperty(
        '--transition-fast',
        e.matches ? '0ms' : '150ms ease'
      );
      document.documentElement.style.setProperty(
        '--transition-normal',
        e.matches ? '0ms' : '250ms ease'
      );
      document.documentElement.style.setProperty(
        '--transition-slow',
        e.matches ? '0ms' : '400ms ease'
      );
    });
  }

  getSystemTheme() {
    if (window.matchMedia('(prefers-contrast: high)').matches) {
      return 'high-contrast';
    }

    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }

    return 'light';
  }

  async applyTheme(themeId) {
    if (!this.themes.has(themeId)) {
      console.warn(`Theme "${themeId}" not found`);
      return;
    }

    const theme = this.themes.get(themeId);

    // Remove existing theme classes
    this.themes.forEach((_, id) => {
      document.documentElement.removeAttribute('data-theme');
    });

    // Apply new theme
    document.documentElement.setAttribute('data-theme', themeId);

    // Load theme CSS if not already loaded
    await this.loadThemeCSS(theme.cssFile);

    this.currentTheme = themeId;
    this.userPreferences.theme = themeId;
    this.savePreferences();

    // Emit theme change event
    this.emitThemeChange(themeId, theme);
  }

  async loadThemeCSS(cssFile) {
    const linkId = `theme-css-${cssFile.replace(/[^a-zA-Z0-9]/g, '-')}`;

    if (document.getElementById(linkId)) {
      return; // Already loaded
    }

    return new Promise((resolve, reject) => {
      const link = document.createElement('link');
      link.id = linkId;
      link.rel = 'stylesheet';
      link.href = cssFile;
      link.onload = resolve;
      link.onerror = reject;
      document.head.appendChild(link);
    });
  }

  registerCustomTheme(id, themeConfig) {
    this.themes.set(id, {
      name: themeConfig.name,
      description: themeConfig.description,
      category: themeConfig.category || 'custom',
      cssFile: themeConfig.cssFile,
      variables: themeConfig.variables
    });

    // If variables are provided, inject them directly
    if (themeConfig.variables) {
      this.injectThemeVariables(id, themeConfig.variables);
    }
  }

  injectThemeVariables(themeId, variables) {
    const styleId = `theme-variables-${themeId}`;
    let styleElement = document.getElementById(styleId);

    if (!styleElement) {
      styleElement = document.createElement('style');
      styleElement.id = styleId;
      document.head.appendChild(styleElement);
    }

    const cssText = `[data-theme="${themeId}"] {\n${
      Object.entries(variables)
        .map(([key, value]) => `  ${key}: ${value};`)
        .join('\n')
    }\n}`;

    styleElement.textContent = cssText;
  }

  getAvailableThemes() {
    return Array.from(this.themes.entries()).map(([id, theme]) => ({
      id,
      ...theme
    }));
  }

  getCurrentTheme() {
    return this.currentTheme;
  }

  getThemesByCategory() {
    const categories = {};

    this.themes.forEach((theme, id) => {
      const category = theme.category || 'default';
      if (!categories[category]) {
        categories[category] = [];
      }
      categories[category].push({ id, ...theme });
    });

    return categories;
  }

  // Custom theme builder
  createCustomTheme(baseThemeId, overrides) {
    const baseTheme = this.themes.get(baseThemeId);
    if (!baseTheme) {
      throw new Error(`Base theme "${baseThemeId}" not found`);
    }

    const customId = `custom-${Date.now()}`;
    const customTheme = {
      name: overrides.name || `Custom ${baseTheme.name}`,
      description: overrides.description || 'User-created custom theme',
      category: 'custom',
      variables: { ...overrides.variables }
    };

    this.registerCustomTheme(customId, customTheme);
    return customId;
  }

  loadPreferences() {
    try {
      const stored = localStorage.getItem('chess-theme-preferences');
      return stored ? JSON.parse(stored) : {};
    } catch (error) {
      console.warn('Failed to load theme preferences:', error);
      return {};
    }
  }

  savePreferences() {
    try {
      localStorage.setItem('chess-theme-preferences', JSON.stringify(this.userPreferences));
    } catch (error) {
      console.warn('Failed to save theme preferences:', error);
    }
  }

  emitThemeChange(themeId, theme) {
    const event = new CustomEvent('themeChanged', {
      detail: { themeId, theme }
    });
    document.dispatchEvent(event);
  }

  // Theme customization helpers
  updateThemeVariable(variable, value) {
    document.documentElement.style.setProperty(variable, value);
  }

  getThemeVariable(variable) {
    return getComputedStyle(document.documentElement).getPropertyValue(variable);
  }

  resetToSystemTheme() {
    delete this.userPreferences.theme;
    this.savePreferences();
    this.applyTheme(this.getSystemTheme());
  }
}

// Global theme manager instance
export const themeManager = new ThemeManager();

// react-chess/src/hooks/useTheme.js
import { useState, useEffect, useCallback } from 'react';
import { themeManager } from '../../shared/theming/ThemeManager';

export function useTheme() {
  const [currentTheme, setCurrentTheme] = useState(themeManager.getCurrentTheme());
  const [availableThemes, setAvailableThemes] = useState(themeManager.getAvailableThemes());

  useEffect(() => {
    const handleThemeChange = (event) => {
      setCurrentTheme(event.detail.themeId);
    };

    document.addEventListener('themeChanged', handleThemeChange);
    return () => document.removeEventListener('themeChanged', handleThemeChange);
  }, []);

  const setTheme = useCallback(async (themeId) => {
    await themeManager.applyTheme(themeId);
  }, []);

  const createCustomTheme = useCallback((baseThemeId, overrides) => {
    const customId = themeManager.createCustomTheme(baseThemeId, overrides);
    setAvailableThemes(themeManager.getAvailableThemes());
    return customId;
  }, []);

  const updateVariable = useCallback((variable, value) => {
    themeManager.updateThemeVariable(variable, value);
  }, []);

  const getThemesByCategory = useCallback(() => {
    return themeManager.getThemesByCategory();
  }, []);

  const resetToSystemTheme = useCallback(() => {
    themeManager.resetToSystemTheme();
  }, []);

  return {
    currentTheme,
    availableThemes,
    setTheme,
    createCustomTheme,
    updateVariable,
    getThemesByCategory,
    resetToSystemTheme
  };
}

// vue-chess/src/composables/useTheme.js
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { themeManager } from '../../shared/theming/ThemeManager';

export function useTheme() {
  const currentTheme = ref(themeManager.getCurrentTheme());
  const availableThemes = ref(themeManager.getAvailableThemes());

  const handleThemeChange = (event) => {
    currentTheme.value = event.detail.themeId;
  };

  onMounted(() => {
    document.addEventListener('themeChanged', handleThemeChange);
  });

  onUnmounted(() => {
    document.removeEventListener('themeChanged', handleThemeChange);
  });

  const setTheme = async (themeId) => {
    await themeManager.applyTheme(themeId);
  };

  const createCustomTheme = (baseThemeId, overrides) => {
    const customId = themeManager.createCustomTheme(baseThemeId, overrides);
    availableThemes.value = themeManager.getAvailableThemes();
    return customId;
  };

  const updateVariable = (variable, value) => {
    themeManager.updateThemeVariable(variable, value);
  };

  const getThemesByCategory = () => {
    return themeManager.getThemesByCategory();
  };

  const resetToSystemTheme = () => {
    themeManager.resetToSystemTheme();
  };

  return {
    currentTheme,
    availableThemes,
    setTheme,
    createCustomTheme,
    updateVariable,
    getThemesByCategory,
    resetToSystemTheme
  };
}

// shared/theming/ThemeStorage.js
export class ThemeStorage {
  constructor() {
    this.storageKey = 'chess-theme-preferences';
    this.cloudSyncEnabled = false;
  }

  savePreferences(preferences) {
    try {
      // Local storage
      localStorage.setItem(this.storageKey, JSON.stringify(preferences));

      // Cloud sync if enabled
      if (this.cloudSyncEnabled) {
        this.syncToCloud(preferences);
      }

      return true;
    } catch (error) {
      console.error('Failed to save theme preferences:', error);
      return false;
    }
  }

  loadPreferences() {
    try {
      const stored = localStorage.getItem(this.storageKey);
      return stored ? JSON.parse(stored) : this.getDefaultPreferences();
    } catch (error) {
      console.error('Failed to load theme preferences:', error);
      return this.getDefaultPreferences();
    }
  }

  getDefaultPreferences() {
    return {
      theme: null, // null means use system preference
      customThemes: [],
      autoSwitchTime: null, // For automatic day/night switching
      followSystemTheme: true
    };
  }

  async syncToCloud(preferences) {
    // Implementation for cloud synchronization
    // This would integrate with your backend API
    try {
      const response = await fetch('/api/user/theme-preferences', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${this.getAuthToken()}`
        },
        body: JSON.stringify(preferences)
      });

      return response.ok;
    } catch (error) {
      console.error('Failed to sync theme preferences to cloud:', error);
      return false;
    }
  }

  async loadFromCloud() {
    try {
      const response = await fetch('/api/user/theme-preferences', {
        headers: {
          'Authorization': `Bearer ${this.getAuthToken()}`
        }
      });

      if (response.ok) {
        const cloudPreferences = await response.json();

        // Merge with local preferences
        const localPreferences = this.loadPreferences();
        const mergedPreferences = { ...localPreferences, ...cloudPreferences };

        this.savePreferences(mergedPreferences);
        return mergedPreferences;
      }
    } catch (error) {
      console.error('Failed to load theme preferences from cloud:', error);
    }

    return this.loadPreferences();
  }

  getAuthToken() {
    // Return user authentication token for cloud sync
    return localStorage.getItem('auth-token');
  }

  enableCloudSync() {
    this.cloudSyncEnabled = true;
  }

  disableCloudSync() {
    this.cloudSyncEnabled = false;
  }
}

// shared/theming/AutoThemeSwitcher.js
export class AutoThemeSwitcher {
  constructor(themeManager) {
    this.themeManager = themeManager;
    this.enabled = false;
    this.schedule = {
      lightStart: '06:00',
      darkStart: '18:00'
    };
    this.checkInterval = null;
  }

  enable(schedule = null) {
    if (schedule) {
      this.schedule = { ...this.schedule, ...schedule };
    }

    this.enabled = true;
    this.checkAndApplyTheme();

    // Check every minute
    this.checkInterval = setInterval(() => {
      this.checkAndApplyTheme();
    }, 60000);
  }

  disable() {
    this.enabled = false;

    if (this.checkInterval) {
      clearInterval(this.checkInterval);
      this.checkInterval = null;
    }
  }

  checkAndApplyTheme() {
    if (!this.enabled) return;

    const now = new Date();
    const currentTime = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;

    const shouldUseDarkTheme = this.isTimeInRange(
      currentTime,
      this.schedule.darkStart,
      this.schedule.lightStart
    );

    const targetTheme = shouldUseDarkTheme ? 'dark' : 'light';

    if (this.themeManager.getCurrentTheme() !== targetTheme) {
      this.themeManager.applyTheme(targetTheme);
    }
  }

  isTimeInRange(current, start, end) {
    const currentMinutes = this.timeToMinutes(current);
    const startMinutes = this.timeToMinutes(start);
    const endMinutes = this.timeToMinutes(end);

    if (startMinutes < endMinutes) {
      // Same day range
      return currentMinutes >= startMinutes && currentMinutes < endMinutes;
    } else {
      // Overnight range
      return currentMinutes >= startMinutes || currentMinutes < endMinutes;
    }
  }

  timeToMinutes(timeString) {
    const [hours, minutes] = timeString.split(':').map(Number);
    return hours * 60 + minutes;
  }

  setSchedule(lightStart, darkStart) {
    this.schedule = { lightStart, darkStart };

    if (this.enabled) {
      this.checkAndApplyTheme();
    }
  }
}

// shared/theming/ThemeAnimator.js
export class ThemeAnimator {
  constructor() {
    this.isAnimating = false;
    this.animationDuration = 300;
  }

  async animateThemeChange(fromTheme, toTheme) {
    if (this.isAnimating) return;

    this.isAnimating = true;

    try {
      // Create transition overlay
      const overlay = this.createTransitionOverlay();
      document.body.appendChild(overlay);

      // Fade out
      await this.fadeOut(overlay);

      // Apply new theme
      await this.themeManager.applyTheme(toTheme);

      // Fade in
      await this.fadeIn(overlay);

      // Remove overlay
      document.body.removeChild(overlay);
    } finally {
      this.isAnimating = false;
    }
  }

  createTransitionOverlay() {
    const overlay = document.createElement('div');
    overlay.className = 'theme-transition-overlay';
    overlay.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--color-background);
      opacity: 0;
      z-index: 9999;
      pointer-events: none;
      transition: opacity ${this.animationDuration}ms ease;
    `;
    return overlay;
  }

  fadeOut(overlay) {
    return new Promise(resolve => {
      requestAnimationFrame(() => {
        overlay.style.opacity = '1';
        setTimeout(resolve, this.animationDuration);
      });
    });
  }

  fadeIn(overlay) {
    return new Promise(resolve => {
      requestAnimationFrame(() => {
        overlay.style.opacity = '0';
        setTimeout(resolve, this.animationDuration);
      });
    });
  }

  setAnimationDuration(duration) {
    this.animationDuration = duration;
  }
}

// shared/testing/ThemeTestUtils.js
export class ThemeTestUtils {
  static async testThemeContrast(themeId) {
    // Apply theme
    await themeManager.applyTheme(themeId);

    // Get color values
    const backgroundColor = getComputedStyle(document.documentElement)
      .getPropertyValue('--color-background').trim();
    const textColor = getComputedStyle(document.documentElement)
      .getPropertyValue('--color-on-background').trim();

    // Calculate contrast ratio
    const ratio = this.calculateContrastRatio(backgroundColor, textColor);

    return {
      backgroundColor,
      textColor,
      contrastRatio: ratio,
      passesAA: ratio >= 4.5,
      passesAAA: ratio >= 7
    };
  }

  static calculateContrastRatio(color1, color2) {
    const rgb1 = this.hexToRgb(color1);
    const rgb2 = this.hexToRgb(color2);

    const l1 = this.getLuminance(rgb1);
    const l2 = this.getLuminance(rgb2);

    const lighter = Math.max(l1, l2);
    const darker = Math.min(l1, l2);

    return (lighter + 0.05) / (darker + 0.05);
  }

  static hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  }

  static getLuminance({ r, g, b }) {
    const [rs, gs, bs] = [r, g, b].map(c => {
      c = c / 255;
      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
    });

    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
  }

  static async testAllThemes() {
    const themes = themeManager.getAvailableThemes();
    const results = {};

    for (const theme of themes) {
      results[theme.id] = await this.testThemeContrast(theme.id);
    }

    return results;
  }
}

// shared/theming/ThemeLoader.js
export class ThemeLoader {
  constructor() {
    this.loadedThemes = new Set();
    this.preloadQueue = [];
  }

  async preloadTheme(themeId) {
    if (this.loadedThemes.has(themeId)) {
      return; // Already loaded
    }

    const theme = themeManager.themes.get(themeId);
    if (!theme) return;

    // Add to preload queue
    this.preloadQueue.push(themeId);

    // Load CSS in background
    if (theme.cssFile) {
      const link = document.createElement('link');
      link.rel = 'preload';
      link.as = 'style';
      link.href = theme.cssFile;
      document.head.appendChild(link);
    }

    this.loadedThemes.add(themeId);
  }

  async preloadCommonThemes() {
    // Preload system themes
    await Promise.all([
      this.preloadTheme('light'),
      this.preloadTheme('dark'),
      this.preloadTheme('high-contrast')
    ]);
  }

  getLoadedThemes() {
    return Array.from(this.loadedThemes);
  }
}