/**
 * MSS后台主题配置系统
 * Theme Configuration System
 * 版本: 1.0.0
 */

(function(window) {
    'use strict';
    
    // 主题配置对象
    const ThemeConfig = {
        // 当前主题
        currentTheme: 'business-blue',
        
        // 可用主题列表
        themes: {
            'business-blue': {
                name: '深蓝商务',
                description: '简洁大气的深蓝色商务风格',
                cssFile: '/Public/css/theme-business-blue.css',
                preview: '/Public/images/theme-preview-blue.jpg',
                colors: {
                    primary: '#1e3a8a',
                    secondary: '#64748b',
                    accent: '#f97316',
                    success: '#059669',
                    warning: '#d97706',
                    danger: '#dc2626'
                }
            },
            'classic': {
                name: '经典风格',
                description: '传统的管理系统界面风格',
                cssFile: null, // 使用原始样式
                preview: '/Public/images/theme-preview-classic.jpg',
                colors: {
                    primary: '#409EFF',
                    secondary: '#909399',
                    accent: '#E6A23C',
                    success: '#67C23A',
                    warning: '#E6A23C',
                    danger: '#F56C6C'
                }
            }
        },
        
        // 初始化主题系统
        init: function() {
            this.loadThemeFromStorage();
            this.createThemeControls();
            this.bindEvents();
            this.applyTheme(this.currentTheme);
        },
        
        // 从本地存储加载主题设置
        loadThemeFromStorage: function() {
            const savedTheme = localStorage.getItem('mss-admin-theme');
            if (savedTheme && this.themes[savedTheme]) {
                this.currentTheme = savedTheme;
            }
        },
        
        // 保存主题设置到本地存储
        saveThemeToStorage: function() {
            localStorage.setItem('mss-admin-theme', this.currentTheme);
        },
        
        // 创建主题控制界面
        createThemeControls: function() {
            // 检查是否已存在主题控制器
            if (document.getElementById('theme-controls')) {
                return;
            }
            
            const controlsHTML = `
                <div id="theme-controls" class="theme-controls" style="position: fixed; top: 100px; right: -300px; width: 320px; background: white; box-shadow: -2px 0 20px rgba(0,0,0,0.1); border-radius: 12px 0 0 12px; z-index: 9999; transition: right 0.3s ease;">
                    <div class="theme-controls-header" style="padding: 20px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border-radius: 12px 0 0 0;">
                        <h4 style="margin: 0; font-size: 16px; font-weight: 600;">🎨 主题设置</h4>
                        <button id="theme-toggle" style="position: absolute; left: -40px; top: 20px; width: 40px; height: 40px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border: none; border-radius: 8px 0 0 8px; cursor: pointer; font-size: 16px;">⚙️</button>
                    </div>
                    <div class="theme-controls-body" style="padding: 20px;">
                        <div class="theme-selector">
                            <h5 style="margin: 0 0 15px 0; color: #374151; font-size: 14px;">选择主题风格</h5>
                            <div id="theme-options" class="theme-options">
                                ${Object.keys(this.themes).map(themeKey => {
                                    const theme = this.themes[themeKey];
                                    return `
                                        <div class="theme-option ${themeKey === this.currentTheme ? 'active' : ''}" 
                                             data-theme="${themeKey}" 
                                             style="border: 2px solid ${themeKey === this.currentTheme ? '#1e3a8a' : '#e2e8f0'}; border-radius: 8px; padding: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease;">
                                            <div style="display: flex; align-items: center; gap: 12px;">
                                                <div class="theme-preview" style="width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, ${theme.colors.primary} 0%, ${theme.colors.accent} 100%);"></div>
                                                <div>
                                                    <div style="font-weight: 600; color: #374151; font-size: 14px;">${theme.name}</div>
                                                    <div style="font-size: 12px; color: #6b7280;">${theme.description}</div>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                }).join('')}
                            </div>
                        </div>
                        
                        <div class="theme-actions" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
                            <button id="reset-theme" style="width: 100%; background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.3s ease;">
                                🔄 重置为默认主题
                            </button>
                        </div>
                    </div>
                </div>
            `;
            
            document.body.insertAdjacentHTML('beforeend', controlsHTML);
        },
        
        // 绑定事件
        bindEvents: function() {
            // 主题切换器开关
            document.addEventListener('click', (e) => {
                if (e.target.id === 'theme-toggle') {
                    this.toggleThemeControls();
                }
                
                // 主题选项点击
                if (e.target.closest('.theme-option')) {
                    const themeKey = e.target.closest('.theme-option').dataset.theme;
                    this.switchTheme(themeKey);
                }
                
                // 重置主题
                if (e.target.id === 'reset-theme') {
                    this.resetTheme();
                }
                
                // 点击其他区域关闭主题面板
                if (!e.target.closest('#theme-controls')) {
                    this.hideThemeControls();
                }
            });
            
            // 键盘快捷键 (Ctrl + T)
            document.addEventListener('keydown', (e) => {
                if (e.ctrlKey && e.key === 't') {
                    e.preventDefault();
                    this.toggleThemeControls();
                }
            });
        },
        
        // 切换主题控制面板显示
        toggleThemeControls: function() {
            const controls = document.getElementById('theme-controls');
            if (controls) {
                const isVisible = controls.style.right === '0px';
                controls.style.right = isVisible ? '-300px' : '0px';
            }
        },
        
        // 隐藏主题控制面板
        hideThemeControls: function() {
            const controls = document.getElementById('theme-controls');
            if (controls && controls.style.right === '0px') {
                controls.style.right = '-300px';
            }
        },
        
        // 切换主题
        switchTheme: function(themeKey) {
            if (!this.themes[themeKey]) {
                console.error('主题不存在:', themeKey);
                return;
            }
            
            this.currentTheme = themeKey;
            this.applyTheme(themeKey);
            this.updateThemeControls();
            this.saveThemeToStorage();
            
            // 显示切换成功提示
            this.showNotification(`已切换到 ${this.themes[themeKey].name} 主题`);
        },
        
        // 应用主题
        applyTheme: function(themeKey) {
            const theme = this.themes[themeKey];
            if (!theme) return;
            
            // 移除之前的主题样式
            const existingThemeLinks = document.querySelectorAll('link[data-theme]');
            existingThemeLinks.forEach(link => link.remove());
            
            // 应用新主题样式
            if (theme.cssFile) {
                const link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = theme.cssFile;
                link.setAttribute('data-theme', themeKey);
                document.head.appendChild(link);
            }
            
            // 更新CSS自定义属性
            if (theme.colors) {
                const root = document.documentElement;
                Object.keys(theme.colors).forEach(colorKey => {
                    root.style.setProperty(`--theme-${colorKey}`, theme.colors[colorKey]);
                });
            }
        },
        
        // 更新主题控制界面
        updateThemeControls: function() {
            const options = document.querySelectorAll('.theme-option');
            options.forEach(option => {
                const themeKey = option.dataset.theme;
                if (themeKey === this.currentTheme) {
                    option.classList.add('active');
                    option.style.borderColor = '#1e3a8a';
                } else {
                    option.classList.remove('active');
                    option.style.borderColor = '#e2e8f0';
                }
            });
        },
        
        // 重置主题
        resetTheme: function() {
            this.switchTheme('business-blue');
        },
        
        // 显示通知
        showNotification: function(message) {
            // 如果有layui的layer模块，使用layer
            if (window.layui && layui.layer) {
                layui.layer.msg(message, {
                    icon: 1,
                    time: 2000,
                    skin: 'layui-layer-hui'
                });
            } else {
                // 否则创建简单的通知
                const notification = document.createElement('div');
                notification.textContent = message;
                notification.style.cssText = `
                    position: fixed;
                    top: 80px;
                    right: 20px;
                    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
                    color: white;
                    padding: 12px 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 10000;
                    font-size: 14px;
                    transform: translateX(100%);
                    transition: transform 0.3s ease;
                `;
                
                document.body.appendChild(notification);
                
                // 动画显示
                setTimeout(() => {
                    notification.style.transform = 'translateX(0)';
                }, 100);
                
                // 3秒后移除
                setTimeout(() => {
                    notification.style.transform = 'translateX(100%)';
                    setTimeout(() => {
                        if (notification.parentNode) {
                            notification.parentNode.removeChild(notification);
                        }
                    }, 300);
                }, 3000);
            }
        },
        
        // 获取当前主题信息
        getCurrentTheme: function() {
            return this.themes[this.currentTheme];
        },
        
        // 添加自定义主题
        addCustomTheme: function(themeKey, themeConfig) {
            this.themes[themeKey] = themeConfig;
            this.createThemeControls(); // 重新创建控制界面
        }
    };
    
    // 自动初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            ThemeConfig.init();
        });
    } else {
        ThemeConfig.init();
    }
    
    // 暴露到全局
    window.ThemeConfig = ThemeConfig;
    
})(window);