import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

/**
 * Store Zustand pour gérer l'état global de DebugUMAP
 */
export const useDebugUMAPStore = create(
  devtools(
    persist(
      (set, get) => ({
      // === État des configurations ===
      configs: [],
      currentConfigIndex: 0,
      loading: false,
      error: null,

      // === État visuel ===
      useCategoryColors: true,
      baseGlyphSize: 0.25,
      darkMode: false,
      showCentroids: true,

      // === État des glyphes ===
      currentFonts: [],
      mappingFunctions: { mapX: null, mapY: null },
      glyphsLoaded: false,

      // === Actions pour les configurations ===
      setConfigs: (configs) => set({ configs }),
      setCurrentConfigIndex: (index) => set({ currentConfigIndex: index }),
      setLoading: (loading) => set({ loading }),
      setError: (error) => set({ error }),

      // === Actions pour l'état visuel ===
      setUseCategoryColors: (useCategoryColors) => set({ useCategoryColors }),
      setBaseGlyphSize: (baseGlyphSize) => set({ baseGlyphSize }),
      setDarkMode: (darkMode) => set({ darkMode }),
      setShowCentroids: (showCentroids) => set({ showCentroids }),

      // === Actions pour les glyphes ===
      setCurrentFonts: (fonts) => set({ currentFonts: fonts }),
      setMappingFunctions: (functions) => set({ mappingFunctions: functions }),
      setGlyphsLoaded: (loaded) => set({ glyphsLoaded: loaded }),

      // === Actions composites ===
      resetToDefaults: () => set({
        currentConfigIndex: 0,
        useCategoryColors: true,
        baseGlyphSize: 0.25,
        darkMode: false,
        showCentroids: true,
        currentFonts: [],
        mappingFunctions: { mapX: null, mapY: null },
        glyphsLoaded: false,
        error: null
      }),

      // === Actions de persistance ===
      saveToLocalStorage: () => {
        try {
          const state = get();
          const persistData = {
            currentConfigIndex: state.currentConfigIndex,
            useCategoryColors: state.useCategoryColors,
            baseGlyphSize: state.baseGlyphSize,
            darkMode: state.darkMode,
            showCentroids: state.showCentroids,
            timestamp: Date.now()
          };
          
          console.log('useDebugUMAPStore: Sauvegarde de la configuration:', persistData);
          localStorage.setItem('debug-umap-config', JSON.stringify(persistData));
          console.log('useDebugUMAPStore: ✅ Configuration sauvegardée avec succès');
        } catch (error) {
          console.error('useDebugUMAPStore: ❌ Erreur lors de la sauvegarde:', error);
        }
      },

      loadFromLocalStorage: () => {
        try {
          console.log('useDebugUMAPStore: Recherche de la configuration dans localStorage...');
          const saved = localStorage.getItem('debug-umap-config');
          
          if (saved) {
            console.log('useDebugUMAPStore: Données trouvées:', saved);
            const persistData = JSON.parse(saved);
            console.log('useDebugUMAPStore: Configuration parsée:', persistData);
            
            // Appliquer les données sauvegardées
            const newState = {
              currentConfigIndex: persistData.currentConfigIndex || 0,
              useCategoryColors: persistData.useCategoryColors !== undefined ? persistData.useCategoryColors : true,
              baseGlyphSize: persistData.baseGlyphSize || 0.25,
              darkMode: persistData.darkMode !== undefined ? persistData.darkMode : false,
              showCentroids: persistData.showCentroids !== undefined ? persistData.showCentroids : true,
            };
            
            console.log('useDebugUMAPStore: Application de la configuration:', newState);
            set(newState);
            
            return true;
          } else {
            console.log('useDebugUMAPStore: Aucune donnée trouvée dans localStorage');
          }
        } catch (error) {
          console.error('useDebugUMAPStore: Erreur lors du chargement:', error);
        }
        return false;
      },

      // === Getters utiles ===
      getCurrentConfig: () => {
        const { configs, currentConfigIndex } = get();
        return configs[currentConfigIndex] || null;
      },

      getTotalConfigs: () => {
        const { configs } = get();
        return configs.length;
      }
    }),
    {
      name: 'debug-umap-persist', // Clé pour localStorage
      // Ne persister que les états visuels et la config actuelle
      partialize: (state) => ({
        currentConfigIndex: state.currentConfigIndex,
        useCategoryColors: state.useCategoryColors,
        baseGlyphSize: state.baseGlyphSize,
        darkMode: state.darkMode,
        showCentroids: state.showCentroids,
      }),
    }
    ),
    {
      name: 'debug-umap-store', // Nom pour les devtools
    }
  )
);

// Export direct du store pour une utilisation simple