import { useState, useEffect, createContext, useContext } from "react";

// Créer un contexte pour le thème
const ThemeModeContext = createContext();

// Provider pour le contexte du thème
export const ThemeModeProvider = ({ children }) => {
  // Get system preference
  const getSystemPreference = () => {
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  };

  // Essayer de récupérer le mode depuis localStorage ou utiliser la préférence système
  const getSavedTheme = () => {
    const savedTheme = localStorage.getItem("theme-mode");
    return savedTheme || getSystemPreference();
  };

  // Initialize theme mode from saved or system preference
  const [mode, setMode] = useState(getSavedTheme);

  // Listen to system preference changes if no saved preference
  useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleChange = (e) => {
      // Only change if no user preference is saved
      if (!localStorage.getItem("theme-mode")) {
        setMode(e.matches ? "dark" : "light");
      }
    };

    mediaQuery.addEventListener("change", handleChange);
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, []);

  // Save theme preference to localStorage when it changes
  useEffect(() => {
    localStorage.setItem("theme-mode", mode);
  }, [mode]);

  const toggleTheme = () => {
    setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
  };

  return (
    <ThemeModeContext.Provider value={{ mode, toggleTheme }}>
      {children}
    </ThemeModeContext.Provider>
  );
};

// Hook pour utiliser le contexte du thème
export const useThemeMode = () => {
  const context = useContext(ThemeModeContext);
  if (context === undefined) {
    throw new Error("useThemeMode must be used within a ThemeModeProvider");
  }
  return context;
};