import { defineStore } from 'pinia';
import { useDark, useToggle } from '@vueuse/core';
import { darkTheme, lightTheme } from 'element-plus';

export type ThemeType = 'light' | 'dark' | 'system';

interface ThemeState {
    currentTheme: ThemeType;
    themes: {
        light: ThemeColors;
        dark: ThemeColors;
    };
}

interface ThemeColors {
    primary: string;
    secondary: string;
    background: string;
    text: string;
    // Element Plus 变量
    elBgColor: string;
    elTextColor: string;
    elBorderColor: string;
}

export const useThemeStore = defineStore('theme', {
    state: (): ThemeState => ({
        currentTheme: 'system',
        themes: {
            light: {
                primary: '#000',
                secondary: '#52c41a',
                background: '#ffffff',
                text: '#303133',
                // Element Plus 亮色主题变量
                elBgColor: '#ffffff',
                elTextColor: '#303133',
                elBorderColor: '#dcdfe6'
            },
            dark: {
                primary: '#fff',
                secondary: '#49aa19',
                background: '#141414',
                text: '#ffffff',
                // Element Plus 暗色主题变量
                elBgColor: '#141414',
                elTextColor: '#ffffff',
                elBorderColor: '#363637'
            }
        }
    }),

    getters: {
        isDarkMode(): boolean {
            if (this.currentTheme === 'system') {
                return window.matchMedia('(prefers-color-scheme: dark)').matches;
            }
            return this.currentTheme === 'dark';
        },
        
        currentThemeColors(): ThemeColors {
            return this.isDarkMode ? this.themes.dark : this.themes.light;
        }
    },

    actions: {
        setTheme(theme: ThemeType) {
            this.currentTheme = theme;
            localStorage.setItem('theme', theme);
            
            // 更新 DOM
            const isDark = this.isDarkMode;
            document.documentElement.className = isDark ? 'dark' : '';
            document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
            
            // 更新颜色变量
            this.applyThemeColors();
        },

        initTheme() {
            const savedTheme = localStorage.getItem('theme') as ThemeType;
            if (savedTheme) {
                this.currentTheme = savedTheme;
            }
            
            // 初始应用主题
            this.setTheme(this.currentTheme);
            
            // 监听系统主题变化
            if (this.currentTheme === 'system') {
                window.matchMedia('(prefers-color-scheme: dark)')
                    .addEventListener('change', () => {
                        this.applyThemeColors();
                    });
            }
        },

        // 重命名为 applyThemeColors 并移除循环调用
        applyThemeColors() {
            const colors = this.currentThemeColors;
            const root = document.documentElement;
            
            Object.entries(colors).forEach(([key, value]) => {
                root.style.setProperty(`--theme-${key}`, value);
            });
            
            // 更新 Element Plus 主题状态
            const isDark = this.isDarkMode;
            document.documentElement.className = isDark ? 'dark' : '';
            document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
        }
    }
});
