'use client';
import { useCallback, useEffect, useState } from 'react';
import { THEME_STORAGE_KEY } from '../types/theme.js';
/**
 * Hook to manage theme state with localStorage persistence
 * and system preference detection.
 */
export function useTheme() {
    const [theme, setTheme] = useState('system');
    const [resolvedTheme, setResolvedTheme] = useState('light');
    // Get the system preference
    const getSystemTheme = useCallback(() => {
        if (typeof window === 'undefined') {
            return 'light';
        }
        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }, []);
    // Resolve the actual theme based on current setting
    const resolveTheme = useCallback((currentTheme) => {
        if (currentTheme === 'system') {
            return getSystemTheme();
        }
        return currentTheme;
    }, [getSystemTheme]);
    // Apply theme to document
    const applyTheme = useCallback((resolved) => {
        if (typeof document === 'undefined') {
            return;
        }
        const root = document.documentElement;
        root.classList.remove('light', 'dark');
        root.classList.add(resolved);
        setResolvedTheme(resolved);
    }, []);
    // Set theme and persist to localStorage
    const setThemeAndPersist = useCallback((newTheme) => {
        setTheme(newTheme);
        if (typeof localStorage !== 'undefined') {
            localStorage.setItem(THEME_STORAGE_KEY, newTheme);
        }
        const resolved = resolveTheme(newTheme);
        applyTheme(resolved);
    }, [resolveTheme, applyTheme]);
    // Initialize theme from localStorage or system preference
    useEffect(() => {
        const stored = localStorage.getItem(THEME_STORAGE_KEY);
        const initialTheme = stored ?? 'system';
        setTheme(initialTheme);
        const resolved = resolveTheme(initialTheme);
        applyTheme(resolved);
    }, [resolveTheme, applyTheme]);
    // Listen for system preference changes
    useEffect(() => {
        if (typeof window === 'undefined') {
            return;
        }
        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        const handleChange = () => {
            if (theme === 'system') {
                const resolved = resolveTheme('system');
                applyTheme(resolved);
            }
        };
        mediaQuery.addEventListener('change', handleChange);
        return () => mediaQuery.removeEventListener('change', handleChange);
    }, [theme, resolveTheme, applyTheme]);
    return {
        theme,
        resolvedTheme,
        setTheme: setThemeAndPersist,
    };
}
