Ziya/app/stores/theme.ts

import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', {
  state: () => ({
    isDark: false,
    currentPalette: 1, // Use number instead of string for easier handling
    availablePalettes: Array.from({ length: 24 }, (_, i) => i + 1), // [1, 2, 3, ..., 24]

    // 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}`);

          console.log(`Applied 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();

          console.log('Theme initialized:', {
            isDark: this.isDark,
            currentPalette: this.currentPalette,
            currentTheme: this.currentTheme,
          });
        }
        catch (error) {
          console.error('Error initializing theme:', error);
          // Fallback to defaults
          this.isDark = false;
          this.currentPalette = 1;
          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() {
      this.isDark = false;
      this.currentPalette = 1;
      this.applyTheme();
      this.saveToStorage();
    },

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