import React, { useRef, useEffect, useState } from 'react';
import { useLeva, useZoom, useGlyphRenderer, useConfigs, useKeyboardNavigation, useLocalStorage } from './hooks';
import { ConfigDisplay, MapContainer, ErrorDisplay, LoadingDisplay } from './components';
import { useDebugUMAPStore } from './store';
import './styles/index.css';

/**
 * Composant principal DebugUMAP - Version refactorisée avec Zustand
 */
const DebugUMAP = () => {
  console.log('DebugUMAP: Composant rendu');
  const svgRef = useRef(null);
  const [svgReady, setSvgReady] = useState(false);

  // Hooks pour la gestion de l'état (maintenant via Zustand)
  const configs = useDebugUMAPStore((state) => state.configs);
  const currentConfig = useDebugUMAPStore((state) => state.getCurrentConfig());
  const currentConfigIndex = useDebugUMAPStore((state) => state.currentConfigIndex);
  const setCurrentConfigIndex = useDebugUMAPStore((state) => state.setCurrentConfigIndex);
  const error = useDebugUMAPStore((state) => state.error);
  const loading = useDebugUMAPStore((state) => state.loading);
  const useCategoryColors = useDebugUMAPStore((state) => state.useCategoryColors);
  const setUseCategoryColors = useDebugUMAPStore((state) => state.setUseCategoryColors);
  const baseGlyphSize = useDebugUMAPStore((state) => state.baseGlyphSize);
  const setBaseGlyphSize = useDebugUMAPStore((state) => state.setBaseGlyphSize);
  const darkMode = useDebugUMAPStore((state) => state.darkMode);
  const setDarkMode = useDebugUMAPStore((state) => state.setDarkMode);
  const showCentroids = useDebugUMAPStore((state) => state.showCentroids);
  const setShowCentroids = useDebugUMAPStore((state) => state.setShowCentroids);

  console.log('DebugUMAP: Valeurs du store:', {
    configs: configs.length,
    loading,
    error,
    baseGlyphSize,
    useCategoryColors,
    darkMode
  });

  // Hook pour la persistance localStorage (en premier pour charger la config)
  useLocalStorage();

  // Hook pour charger les configurations
  useConfigs();

  // Détecter quand le SVG est monté
  useEffect(() => {
    if (svgRef.current && !svgReady) {
      console.log('DebugUMAP: SVG détecté, marqué comme prêt');
      setSvgReady(true);
    }
  }, [svgReady]);

  // Hook pour le rendu des glyphes
  useGlyphRenderer({ svgRef, enabled: svgReady });

  // Hook pour le zoom
  const { resetZoom } = useZoom(svgRef, baseGlyphSize, svgReady, darkMode);

  // Hook pour Leva
  useLeva({ onResetZoom: resetZoom });

  // Hook pour la navigation au clavier
  useKeyboardNavigation();


  // États de chargement et d'erreur
  if (loading) {
    return <LoadingDisplay />;
  }

  if (error) {
    return <ErrorDisplay error={error} />;
  }

  return (
    <div className={`debug-umap-container ${darkMode ? 'dark-mode' : ''}`}>
      <ConfigDisplay />
      <MapContainer ref={svgRef} />
    </div>
  );
};

export default DebugUMAP;