import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import i18n from '../i18n';
import {
    THEME_COLOR_KEY,
    applyThemeColorVars,
    DEFAULT_THEME_COLOR,
    findThemePreset,
    themeColorPresets,
} from '../config/theme-colors';

const countryList = [
    { code: 'zh', name: 'Chinese' },
    { code: 'da', name: 'Danish' },
    { code: 'en', name: 'English' },
    { code: 'fr', name: 'French' },
    { code: 'de', name: 'German' },
    { code: 'el', name: 'Greek' },
    { code: 'hu', name: 'Hungarian' },
    { code: 'it', name: 'Italian' },
    { code: 'ja', name: 'Japanese' },
    { code: 'pl', name: 'Polish' },
    { code: 'pt', name: 'Portuguese' },
    { code: 'ru', name: 'Russian' },
    { code: 'es', name: 'Spanish' },
    { code: 'sv', name: 'Swedish' },
    { code: 'tr', name: 'Turkish' },
];

export const useLayoutStore = defineStore('layout', () => {
    const layout = ref('app');
    const is_show_sidebar = ref(true);
    const is_show_search = ref(false);
    const is_dark_mode = ref(false);
    const dark_mode = ref('light');
    const locale = ref(null);
    const menu_style = ref('vertical');
    const layout_style = ref('full');
    const theme_color = ref(DEFAULT_THEME_COLOR.id);

    const setLayout = (value) => {
        layout.value = value || 'app';
    };

    const toggleSideBar = (value) => {
        is_show_sidebar.value = value;
    };

    const toggleSearch = (value) => {
        is_show_search.value = value;
    };

    const toggleLocale = (value) => {
        const next = value || 'es';
        i18n.global.locale.value = next;
        localStorage.setItem('i18n_locale', next);
        locale.value = next;
    };

    const toggleDarkMode = (value) => {
        const next = value || 'light';
        localStorage.setItem('dark_mode', next);
        dark_mode.value = next;

        if (next === 'light') {
            is_dark_mode.value = false;
        } else if (next === 'dark') {
            is_dark_mode.value = true;
        } else if (next === 'system') {
            is_dark_mode.value = !!(
                window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
            );
        }

        document.querySelector('body')?.classList.toggle('dark', is_dark_mode.value);
    };

    const toggleMenuStyle = (value) => {
        const next = value || '';
        localStorage.setItem('menu_style', next);
        menu_style.value = next;
        if (!next || next === 'vertical') {
            is_show_sidebar.value = true;
        } else if (next === 'collapsible-vertical') {
            is_show_sidebar.value = false;
        }
    };

    const toggleLayoutStyle = (value) => {
        const next = value || '';
        localStorage.setItem('layout_style', next);
        layout_style.value = next;
    };

    const setThemeColor = (idOrHex) => {
        const preset = findThemePreset(idOrHex);
        theme_color.value = preset.id;
        localStorage.setItem(THEME_COLOR_KEY, preset.id);
        applyThemeColorVars(preset);
    };

    const initThemeColor = () => {
        const saved = localStorage.getItem(THEME_COLOR_KEY);
        setThemeColor(saved || DEFAULT_THEME_COLOR.id);
    };

    return {
        layout,
        is_show_sidebar,
        is_show_search,
        is_dark_mode,
        dark_mode,
        locale,
        menu_style,
        layout_style,
        theme_color,
        themeColorPresets,
        countryList,
        setLayout,
        toggleSideBar,
        toggleSearch,
        toggleLocale,
        toggleDarkMode,
        toggleMenuStyle,
        toggleLayoutStyle,
        setThemeColor,
        initThemeColor,
        currentLayout: computed(() => layout.value),
        currentThemePreset: computed(() => findThemePreset(theme_color.value)),
    };
});
