import { useEffect, useState } from 'react';

export type ColorTheme = 'default' | 'carbon' | 'amber' | 'ocean' | 'zinc';

const STORAGE_KEY = 'kiraa-color-theme';

export function useColorTheme() {
    const [theme, setThemeState] = useState<ColorTheme>(() => {
        if (typeof window === 'undefined') return 'default';
        return (localStorage.getItem(STORAGE_KEY) as ColorTheme) || 'default';
    });

    const setTheme = (t: ColorTheme) => {
        setThemeState(t);
        localStorage.setItem(STORAGE_KEY, t);
        if (t === 'default') {
            document.documentElement.removeAttribute('data-color-theme');
        } else {
            document.documentElement.setAttribute('data-color-theme', t);
        }
    };

    // Sync on mount (in case blade script ran before React)
    useEffect(() => {
        const stored = (localStorage.getItem(STORAGE_KEY) as ColorTheme) || 'default';
        if (stored !== 'default') {
            document.documentElement.setAttribute('data-color-theme', stored);
        }
    }, []);

    return { theme, setTheme };
}