Ziya/app/stores/theme.ts

import { defineStore } from 'pinia';
import { useZiyaConfig } from '../composables/useZiyaConfig';

export const useThemeStore = defineStore('theme', {
  state: () => {
    // Get config from composable if available (client-side)
    const { config } = import.meta.client ? useZiyaConfig() : { config: { theme: { defaultDarkMode: false, defaultPalette: 1, availablePalettes: Array.from({ length: 24 }, (_, i) => i + 1) } } };
    
    return {
      isDark: config.theme.defaultDarkMode,
      currentPalette: config.theme.defaultPalette,
      availablePalettes: config.theme.availablePalettes,

      // Theme names for display
      paletteNames: {
        1: 'Cyan Ocean',
        2: 'Royal Blue',
        3: 'Purple Dream',
        4: 'Teal Fresh',
        5: 'Slate Modern',
        6: 'Ruby Fire',
        7: 'Cyan Steel',
        8: 'Navy Deep',
        9: 'Sky Bright',
        10: 'Indigo Classic',
        11: 'Pink Vivid',
        12: 'Forest Green',
        13: 'Golden Sun',
        14: 'Orange Burst',
        15: 'Blue Electric',
        16: 'Purple Royal',
        17: 'Magenta Bold',
        18: 'Purple Deep',
        19: 'Indigo Night',
        20: 'Ocean Blue',
        21: 'Orange Fire',
        22: 'Indigo Bright',
        23: 'Teal Vivid',
        24: 'Sunshine',
      } as Record<number, string>,
    };
  },

  getters: {
    currentTheme(): string {
      // Use daisyUI theme naming convention with hyphens
      const suffix = this.isDark ? 'dark' : 'light';
      const paletteId = this.currentPalette.toString().padStart(2, '0');
      return `palette-${paletteId}-${suffix}`;
    },

    currentPaletteName(): string {
      return this.paletteNames[this.currentPalette] || `Palette ${this.currentPalette}`;
    },
  },

  actions: {
    toggleDarkMode() {
      this.isDark = !this.isDark;
      this.applyTheme();
      this.saveToStorage();
    },

    async setPalette(paletteNumber: number) {
      if (this.availablePalettes.includes(paletteNumber)) {
        this.currentPalette = paletteNumber;
        this.applyTheme();
        this.saveToStorage();
      }
    },

    applyTheme() {
      if (import.meta.client) {
        try {
          const html = document.documentElement;
          const theme = this.currentTheme;

          // Set the data-theme attribute for daisyUI
          html.setAttribute('data-theme', theme);

          // Also set it on body for additional styling if needed
          document.body.setAttribute('data-theme', theme);

          // Add a class for easier CSS targeting
          html.className = html.className.replace(/theme-[\w-]+/g, '');
          html.classList.add(`theme-${theme}`);
        }
        catch (error) {
          console.error('Error applying theme:', error);
        }
      }
    },

    initializeTheme() {
      if (import.meta.client) {
        try {
          // Load from localStorage
          const savedDark = localStorage.getItem('theme-dark');
          const savedPalette = localStorage.getItem('theme-palette');

          if (savedDark !== null) {
            this.isDark = savedDark === 'true';
          }

          if (savedPalette) {
            const paletteNumber = parseInt(savedPalette);
            if (this.availablePalettes.includes(paletteNumber)) {
              this.currentPalette = paletteNumber;
            }
          }

          // Apply the theme
          this.applyTheme();
        }
        catch (error) {
          console.error('Error initializing theme:', error);
          // Fallback to defaults from config
          const { config } = useZiyaConfig();
          this.isDark = config.theme.defaultDarkMode;
          this.currentPalette = config.theme.defaultPalette;
          this.applyTheme();
        }
      }
    },

    saveToStorage() {
      if (import.meta.client) {
        try {
          localStorage.setItem('theme-dark', this.isDark.toString());
          localStorage.setItem('theme-palette', this.currentPalette.toString());
        }
        catch (error) {
          console.error('Error saving theme to storage:', error);
        }
      }
    },

    resetToDefault() {
      // Get defaults from config
      const { config } = useZiyaConfig();
      
      this.isDark = config.theme.defaultDarkMode;
      this.currentPalette = config.theme.defaultPalette;
      this.applyTheme();
      this.saveToStorage();
    },

    setRandomPalette() {
      const randomIndex = Math.floor(Math.random() * this.availablePalettes.length);
      const randomPalette = this.availablePalettes[randomIndex];
      if (randomPalette) {
        this.setPalette(randomPalette);
      }
    },
  },
});