'use client';

import { useState, useEffect } from 'react';
import { Sun01Icon, Moon02Icon, SunCloud01Icon, MoonCloudIcon } from '@zen/core/shared/icons';

// Script à injecter dans <head> pour appliquer le thème avant le premier rendu (anti-FOUC).
export const THEME_INIT_SCRIPT = `(function(){try{var t=localStorage.getItem('theme'),d=window.matchMedia('(prefers-color-scheme: dark)').matches;if(t==='dark'||(!t&&d))document.documentElement.classList.add('dark');}catch(e){}})();`;

const THEME_ICONS = {
    light: Sun01Icon,
    dark: Moon02Icon,
};

export function getStoredTheme() {
    const stored = localStorage.getItem('theme');
    if (stored === 'light' || stored === 'dark') return stored;
    return 'auto';
}

export function applyTheme(theme) {
    if (theme === 'dark') {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
    } else if (theme === 'light') {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
    } else {
        localStorage.removeItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        document.documentElement.classList.toggle('dark', prefersDark);
    }
}

export function getThemeIcon(theme, systemIsDark) {
    if (theme === 'auto') return systemIsDark ? MoonCloudIcon : SunCloud01Icon;
    return THEME_ICONS[theme];
}

function getNextTheme(current) {
    const systemIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (current === 'auto') return systemIsDark ? 'light' : 'dark';
    if (current === 'dark') return systemIsDark ? 'auto' : 'light';
    return systemIsDark ? 'dark' : 'auto';
}

export function ThemeWatcher() {
    useEffect(() => {
        const mq = window.matchMedia('(prefers-color-scheme: dark)');
        function onSystemChange(e) {
            if (localStorage.getItem('theme')) return;
            document.documentElement.classList.toggle('dark', e.matches);
        }
        mq.addEventListener('change', onSystemChange);
        return () => mq.removeEventListener('change', onSystemChange);
    }, []);

    return null;
}

export function useTheme() {
    const [theme, setTheme] = useState('auto');
    const [systemIsDark, setSystemIsDark] = useState(false);

    useEffect(() => {
        setTheme(getStoredTheme());
        setSystemIsDark(window.matchMedia('(prefers-color-scheme: dark)').matches);

        const mq = window.matchMedia('(prefers-color-scheme: dark)');
        function onSystemChange(e) {
            setSystemIsDark(e.matches);
        }
        mq.addEventListener('change', onSystemChange);
        return () => mq.removeEventListener('change', onSystemChange);
    }, []);

    function toggle() {
        const next = getNextTheme(theme);
        setTheme(next);
        applyTheme(next);
    }

    return { theme, toggle, systemIsDark };
}
