// 主题设置模块
class ThemeSettings {
    constructor() {
        this.themeMode = localStorage.getItem('themeMode') || 'light'; // 主题模式：light, dark
        this.selectedColor = localStorage.getItem('selectedColor') || '#f5f5f5'; // 选择的主题颜色
    }

    // 初始化
    initialize() {
        // 创建主题设置UI
        this.createUI();

        // 应用主题模式
        this.applyThemeMode();

        console.log('主题设置模块初始化完成');
    }

    // 创建UI
    createUI() {
        const themeContent = document.getElementById('theme-content');
        if (!themeContent) return;

        // 定义样式变量
        const imageSettingsStyle = window.backgroundSettings && window.backgroundSettings.backgroundType === 'image' ? 'display: block;' : 'display: none;';
        const colorSettingsStyle = window.backgroundSettings && window.backgroundSettings.backgroundType === 'color' ? 'display: block;' : 'display: none;';

        const html = 
            '<div style="margin-bottom: 15px;">' +
                '<div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;">' +
                    '<span>背景类型</span>' +
                    '<div style="display: flex; gap: 10px;">' +
                        '<button class="mode-btn ' + (window.backgroundSettings && window.backgroundSettings.backgroundType === 'image' ? 'active' : '') + '" ' +
                                'onclick="window.themeSettings.setBackgroundType(\'image\')" ' +
                                'style="min-width: 80px;">' +
                            '图片' +
                        '</button>' +
                        '<button class="mode-btn ' + (window.backgroundSettings && window.backgroundSettings.backgroundType === 'color' ? 'active' : '') + '" ' +
                                'onclick="window.themeSettings.setBackgroundType(\'color\')" ' +
                                'style="min-width: 80px;">' +
                            '颜色' +
                        '</button>' +
                    '</div>' +
                '</div>' +
            '</div>' +

            '<div id="imageBackgroundSettings" style="' + imageSettingsStyle + '">' +
                '<div style="margin-bottom: 15px;">' +
                    '<div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;">' +
                        '<span>自动切换</span>' +
                        '<button class="mode-btn" id="bgToggle" onclick="window.backgroundSettings.toggleAutoSwitch()" style="min-width: 100px;">' +
                            '已关闭(永久)' +
                        '</button>' +
                    '</div>' +
                    '<div id="bgIntervalContainer" style="display: none; margin-top: 10px;">' +
                        '<input type="number" id="bgInterval" min="1" value="' + (window.backgroundSettings ? window.backgroundSettings.interval : 30) + '" ' +
                            'onchange="window.backgroundSettings.updateInterval(this.value)" ' +
                            'class="settings-input">' +
                    '</div>' +
                '</div>' +

                '<div>' +
                    '<label style="margin-bottom: 10px; display: block; font-size: 14px;">背景选择</label>' +
                    '<div class="bg-grid-container bg-grid-fixed" id="bgGrid"></div>' +
                    '<div class="bg-pagination-container" id="bgPagination"></div>' +
                '</div>' +
            '</div>' +

            '<div id="colorBackgroundSettings" style="' + colorSettingsStyle + '">' +
                '<div style="margin-bottom: 15px;">' +
                    '<div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;">' +
                        '<span>主题模式</span>' +
                        '<div style="display: flex; gap: 10px;">' +
                            '<button class="mode-btn ' + (this.themeMode === 'light' ? 'active' : '') + '" ' +
                                    'onclick="window.themeSettings.setThemeMode(\'light\')" ' +
                                    'style="min-width: 80px;">' +
                                '亮色' +
                            '</button>' +
                            '<button class="mode-btn ' + (this.themeMode === 'dark' ? 'active' : '') + '" ' +
                                    'onclick="window.themeSettings.setThemeMode(\'dark\')" ' +
                                    'style="min-width: 80px;">' +
                                '暗色' +
                            '</button>' +
                        '</div>' +
                    '</div>' +
                '</div>' +

                '<div>' +
                    '<label style="margin-bottom: 10px; display: block; font-size: 14px;">主题颜色</label>' +
                    '<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px; background: rgba(0, 0, 0, 0.2); border-radius: 12px;">' +
                        '<div class="theme-color-item ' + (this.themeMode === 'light' && this.selectedColor === '#f5f5f5' ? 'active' : '') + '" ' +
                             'style="background: #f5f5f5; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#f5f5f5\')"></div>' +
                        '<div class="theme-color-item ' + (this.themeMode === 'light' && this.selectedColor === '#e3f2fd' ? 'active' : '') + '" ' +
                             'style="background: #e3f2fd; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#e3f2fd\')"></div>' +
                        '<div class="theme-color-item ' + (this.themeMode === 'light' && this.selectedColor === '#fff3e0' ? 'active' : '') + '" ' +
                             'style="background: #fff3e0; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#fff3e0\')"></div>' +
                        '<div class="theme-color-item ' + (this.themeMode === 'light' && this.selectedColor === '#e8f5e9' ? 'active' : '') + '" ' +
                             'style="background: #e8f5e9; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#e8f5e9\')"></div>' +
                        '<div class="theme-color-item ' + (this.themeMode === 'dark' && this.selectedColor === '#1a1a1a' ? 'active' : '') + '" ' +
                             'style="background: #1a1a1a; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#1a1a1a\')"></div>' +
                        '<div class="theme-color-item ' + (this.themeMode === 'dark' && this.selectedColor === '#2d2d2d' ? 'active' : '') + '" ' +
                             'style="background: #2d2d2d; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#2d2d2d\')"></div>' +
                        '<div class="theme-color-item ' + (this.themeMode === 'dark' && this.selectedColor === '#1e1e1e' ? 'active' : '') + '" ' +
                             'style="background: #1e1e1e; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#1e1e1e\')"></div>' +
                        '<div class="theme-color-item ' + (this.themeMode === 'dark' && this.selectedColor === '#0d0d0d' ? 'active' : '') + '" ' +
                             'style="background: #0d0d0d; width: 100%; padding-bottom: 100%; position: relative;" ' +
                             'onclick="window.themeSettings.setThemeColor(\'#0d0d0d\')"></div>' +
                    '</div>' +
                '</div>' +
            '</div>';

        // 将主题设置插入到背景设置内容的开头
        const backgroundContent = document.getElementById('background-content');
        if (backgroundContent) {
            // 检查是否已存在主题设置容器
            let themeSettingsDiv = backgroundContent.querySelector('.theme-settings-container');

            if (!themeSettingsDiv) {
                // 创建主题设置容器
                themeSettingsDiv = document.createElement('div');
                themeSettingsDiv.className = 'theme-settings-container';
                backgroundContent.insertBefore(themeSettingsDiv, backgroundContent.firstChild);
            }

            // 更新主题设置内容
            themeSettingsDiv.innerHTML = html;
        }
    }

    // 设置背景类型
    setBackgroundType(type) {
        if (window.backgroundSettings) {
            window.backgroundSettings.backgroundType = type;
            localStorage.setItem('backgroundType', type);

            // 重新创建主题设置UI
            this.createUI();

            // 如果切换到图片背景，恢复背景图片
            if (type === 'image' && window.backgroundManager) {
                // 检查背景列表是否已经加载
                if (window.backgroundManager.backgrounds.length === 0) {
                    console.log('背景列表为空，开始加载背景列表...');
                    // 延迟加载背景列表
                    setTimeout(async () => {
                        try {
                            await window.backgroundManager.loadBackgrounds();
                            console.log('背景列表加载完成，数量:', window.backgroundManager.backgrounds.length);
                            
                            // 从localStorage恢复之前的背景图片
                            const savedBackground = localStorage.getItem('currentBg');
                            if (savedBackground) {
                                // 从背景列表中找到对应的背景
                                const background = window.backgroundManager.backgrounds.find(bg => bg.file === savedBackground);
                                if (background) {
                                    // 使用与setRandomBackground相同的逻辑设置背景
                                    const bgFile = background.webp || background.file;
                                    const bgUrl = `${window.location.origin}/resource/backgrounds/${bgFile}`;

                                    document.body.style.setProperty('--bg-image', `url(${bgUrl})`);
                                    document.body.classList.remove('bg-fade');
                                    void document.body.offsetWidth; // 强制重绘
                                    document.body.classList.add('bg-fade');

                                    window.backgroundManager.currentBackground = background;

                                    // 应用亮色背景模式
                                    document.body.classList.add('light-bg');
                                    document.body.classList.remove('dark-bg');

                                    const headerTitle = document.querySelector('header h1');
                                    if (headerTitle) {
                                        headerTitle.classList.add('light-bg-glow');
                                        headerTitle.classList.remove('dark-bg');
                                    }
                                    
                                    console.log('背景图片恢复成功:', savedBackground);
                                } else {
                                    window.backgroundManager.setRandomBackground();
                                }
                            } else {
                                window.backgroundManager.setRandomBackground();
                            }
                        } catch (error) {
                            console.error('加载背景列表失败:', error);
                            window.backgroundManager.setRandomBackground();
                        }
                    }, 100);
                } else {
                    // 背景列表已加载，直接恢复背景
                    const savedBackground = localStorage.getItem('currentBg');
                    if (savedBackground) {
                        // 从背景列表中找到对应的背景
                        const background = window.backgroundManager.backgrounds.find(bg => bg.file === savedBackground);
                        if (background) {
                            // 使用与setRandomBackground相同的逻辑设置背景
                            const bgFile = background.webp || background.file;
                            const bgUrl = `${window.location.origin}/resource/backgrounds/${bgFile}`;

                            document.body.style.setProperty('--bg-image', `url(${bgUrl})`);
                            document.body.classList.remove('bg-fade');
                            void document.body.offsetWidth; // 强制重绘
                            document.body.classList.add('bg-fade');

                            window.backgroundManager.currentBackground = background;

                            // 应用亮色背景模式
                            document.body.classList.add('light-bg');
                            document.body.classList.remove('dark-bg');

                            const headerTitle = document.querySelector('header h1');
                            if (headerTitle) {
                                headerTitle.classList.add('light-bg-glow');
                                headerTitle.classList.remove('dark-bg');
                            }
                        } else {
                            window.backgroundManager.setRandomBackground();
                        }
                    } else {
                        window.backgroundManager.setRandomBackground();
                    }
                }
            } else if (type === 'color') {
                // 如果切换到颜色背景，应用主题颜色
                this.applyThemeMode();
            }
        }
    }

    // 设置主题模式
    setThemeMode(mode) {
        this.themeMode = mode;
        localStorage.setItem('themeMode', mode);
        this.createUI();
        this.applyThemeMode();
    }

    // 设置主题颜色
    setThemeColor(color) {
        this.selectedColor = color;
        localStorage.setItem('selectedColor', color);
        this.createUI();
        this.applyThemeMode();
    }

    // 应用主题模式
    applyThemeMode() {
        if (window.backgroundSettings && window.backgroundSettings.backgroundType === 'color') {
            // 应用颜色背景
            document.body.style.setProperty('--bg-image', 'none');
            document.body.style.backgroundColor = this.selectedColor;

            // 根据主题模式设置文字颜色
            if (this.themeMode === 'light') {
                document.body.classList.add('light-bg');
                document.body.classList.remove('dark-bg');

                // 设置标题为暗色
                const headerTitle = document.querySelector('header h1');
                if (headerTitle) {
                    headerTitle.classList.add('light-bg');
                    headerTitle.classList.remove('dark-bg');
                    headerTitle.classList.add('light-bg-glow');
                }
            } else {
                document.body.classList.add('dark-bg');
                document.body.classList.remove('light-bg');

                // 设置标题为亮色
                const headerTitle = document.querySelector('header h1');
                if (headerTitle) {
                    headerTitle.classList.add('dark-bg');
                    headerTitle.classList.remove('light-bg');
                    headerTitle.classList.remove('light-bg-glow');
                }
            }
        } else {
            // 应用图片背景
            document.body.style.backgroundColor = '';

            // 根据图片背景设置文字颜色
            document.body.classList.add('light-bg');
            document.body.classList.remove('dark-bg');

            // 设置标题为暗色
            const headerTitle = document.querySelector('header h1');
            if (headerTitle) {
                headerTitle.classList.add('light-bg');
                headerTitle.classList.remove('dark-bg');
                headerTitle.classList.add('light-bg-glow');
            }
        }
    }
}

// 全局主题设置实例
let themeSettings;
