import { createContext, useContext, useState, useEffect, ReactNode } from 'react';

type AdminTheme = 'dark' | 'light';

interface AdminThemeContextType {
  adminTheme: AdminTheme;
  toggleAdminTheme: () => void;
}

const AdminThemeContext = createContext<AdminThemeContextType>({
  adminTheme: 'dark',
  toggleAdminTheme: () => {},
});

export const useAdminTheme = () => useContext(AdminThemeContext);

export const AdminThemeProvider = ({ children }: { children: ReactNode }) => {
  const [adminTheme, setAdminTheme] = useState<AdminTheme>(() => {
    if (typeof window === 'undefined') return 'dark';
    return (localStorage.getItem('admin-theme') as AdminTheme) || 'dark';
  });

  useEffect(() => {
    const root = document.documentElement;
    if (adminTheme === 'light') {
      root.classList.add('admin-light');
    } else {
      root.classList.remove('admin-light');
    }
  }, [adminTheme]);

  const toggleAdminTheme = () => {
    setAdminTheme((prev) => {
      const next = prev === 'dark' ? 'light' : 'dark';
      localStorage.setItem('admin-theme', next);
      return next;
    });
  };

  useEffect(() => {
    return () => {
      document.documentElement.classList.remove('admin-light');
    };
  }, []);

  return (
    <AdminThemeContext.Provider value={{ adminTheme, toggleAdminTheme }}>
      {children}
    </AdminThemeContext.Provider>
  );
};