// 设置面板主类
class SettingsPanel {
    constructor() {
        this.isOpen = false;
        this.isAnimating = false;
        this.modules = {};
        this.animationTimeout = null;

        // 初始化设置模块
        this.initModules();
    }

    // 初始化各个设置模块
    initModules() {
        // 初始化各个设置模块
        this.modules.background = new BackgroundSettings();
        this.modules.sound = new SoundSettings();
        this.modules.video = new VideoSettings();
        this.modules.other = new OtherSettings();
    }

    // 切换设置面板显示状态
    toggle() {
        if (this.isAnimating) return;
        this.isAnimating = true;

        // 取消之前的动画定时器
        if (this.animationTimeout) {
            clearTimeout(this.animationTimeout);
            this.animationTimeout = null;
        }

        const sidebar = document.querySelector('.settings-sidebar');
        const settingsButton = document.querySelector('.settings-button');
        const body = document.body;

        if (!sidebar || !settingsButton || !body) {
            console.error('找不到设置面板元素');
            this.isAnimating = false;
            return;
        }

        this.isOpen = !this.isOpen;

        // 切换类
        sidebar.classList.toggle('active');
        settingsButton.classList.toggle('active');
        body.classList.toggle('settings-open');

        // 处理动画
        if (this.isOpen) {
            body.classList.add('settings-animated');
            this.createOverlay();
        } else {
            // 立即移除遮罩层，使背景虚化立即消失
            this.removeOverlay();
            setTimeout(() => {
                body.classList.remove('settings-animated');
            }, 700);
        }

        // 动画完成后重置状态
        this.animationTimeout = setTimeout(() => {
            this.isAnimating = false;
            this.animationTimeout = null;
        }, 1000);

        console.log('设置面板状态:', this.isOpen ? '已打开' : '已关闭');
    }

    // 创建遮罩层
    createOverlay() {
        // 检查是否已存在遮罩层
        let overlay = document.getElementById('settings-overlay');
        if (!overlay) {
            overlay = document.createElement('div');
            overlay.id = 'settings-overlay';
            overlay.className = 'settings-overlay';
            document.body.appendChild(overlay);

            // 添加点击事件
            overlay.addEventListener('click', () => {
                this.close();
            });
        }
        
        // 添加淡入效果
        setTimeout(() => {
            overlay.classList.add('fade-in');
        }, 10);
    }

    // 移除遮罩层
    removeOverlay() {
        const overlay = document.getElementById('settings-overlay');
        if (overlay) {
            overlay.classList.add('fade-out');
            setTimeout(() => {
                if (overlay.parentNode) {
                    overlay.parentNode.removeChild(overlay);
                }
            }, 400);
        }
    }

    // 关闭设置面板
    close() {
        if (!this.isOpen || this.isAnimating) return;
        
        this.isAnimating = true;
        this.isOpen = false;

        // 取消之前的动画定时器
        if (this.animationTimeout) {
            clearTimeout(this.animationTimeout);
            this.animationTimeout = null;
        }

        const sidebar = document.querySelector('.settings-sidebar');
        const settingsButton = document.querySelector('.settings-button');
        const body = document.body;

        if (!sidebar || !settingsButton || !body) {
            console.error('找不到设置面板元素');
            this.isAnimating = false;
            return;
        }

        // 切换类
        sidebar.classList.remove('active');
        settingsButton.classList.remove('active');
        body.classList.remove('settings-open');

        // 立即移除遮罩层，使背景虚化立即消失
        this.removeOverlay();
        
        // 处理动画
        setTimeout(() => {
            body.classList.remove('settings-animated');
        }, 700);

        // 动画完成后重置状态
        this.animationTimeout = setTimeout(() => {
            this.isAnimating = false;
            this.animationTimeout = null;
        }, 1000);

        console.log('设置面板状态: 已关闭');
    }

    // 初始化设置面板
    initialize() {
        console.log('初始化设置面板...');

        // 创建设置面板HTML
        this.createPanelHTML();

        // 初始化各个设置模块
        Object.values(this.modules).forEach(module => {
            if (module.initialize) {
                module.initialize();
            }
        });

        console.log('设置面板初始化完成');
    }

    // 创建设置面板HTML
    createPanelHTML() {
        const settingsHTML = `
            <div class="settings-button" onclick="settingsPanel.toggle()">⚙️</div>
            <div class="settings-sidebar">
                <div class="settings-header">
                    <h2>设置</h2>
                </div>

                <!-- 背景设置区域 -->
                <div class="setting-item" data-setting="background">
                    <div class="setting-header" onclick="settingsPanel.toggleSection('background')">
                        <h3>🖼️ 背景设置 <span class="toggle-icon">▼</span></h3>
                    </div>
                    <div class="setting-content" id="background-content">
                        <!-- 背景设置内容将由BackgroundSettings模块添加 -->
                    </div>
                </div>

                <!-- 音效设置区域 -->
                <div class="setting-item" data-setting="sound">
                    <div class="setting-header" onclick="settingsPanel.toggleSection('sound')">
                        <h3>✨ 点击效果 <span class="toggle-icon">▼</span></h3>
                    </div>
                    <div class="setting-content" id="sound-content">
                        <!-- 音效设置内容将由SoundSettings模块添加 -->
                    </div>
                </div>

                <!-- 视频设置区域 -->
                <div class="setting-item" data-setting="video">
                    <div class="setting-header" onclick="settingsPanel.toggleSection('video')">
                        <h3>📹 视频播放设置 <span class="toggle-icon">▼</span></h3>
                    </div>
                    <div class="setting-content" id="video-content">
                        <!-- 视频设置内容将由VideoSettings模块添加 -->
                    </div>
                </div>

                <!-- 其他设置区域 -->
                <div class="setting-item" data-setting="other">
                    <div class="setting-header" onclick="settingsPanel.toggleSection('other')">
                        <h3>⚙️ 其他设置 <span class="toggle-icon">▼</span></h3>
                    </div>
                    <div class="setting-content" id="other-content">
                        <!-- 其他设置内容将由OtherSettings模块添加 -->
                    </div>
                </div>
            </div>
        `;

        document.body.insertAdjacentHTML('beforeend', settingsHTML);
    }

    // 切换设置区域展开/折叠
    toggleSection(sectionId) {
        const content = document.getElementById(`${sectionId}-content`);
        const header = document.querySelector(`[data-setting="${sectionId}"] .setting-header`);
        const icon = header.querySelector('.toggle-icon');

        if (!content || !icon) return;

        // 如果正在动画中，则不执行任何操作
        if (content.isAnimating) return;

        content.isAnimating = true;

        if (content.style.maxHeight && content.style.maxHeight !== '0px') {
            // 折叠
            content.style.maxHeight = '0px';
            icon.textContent = '▼';

            setTimeout(() => {
                content.isAnimating = false;
            }, 300);
        } else {
            // 展开
            content.style.maxHeight = content.scrollHeight + 'px';
            icon.textContent = '▲';

            setTimeout(() => {
                content.isAnimating = false;
            }, 300);
        }
    }
}

// 全局设置面板实例
let settingsPanel;

// 初始化函数
window.initializeSettingsPanel = function() {
    if (!settingsPanel) {
        settingsPanel = new SettingsPanel();
        settingsPanel.initialize();
        
        // 将设置模块暴露到全局作用域，以便HTML中的onclick事件可以访问
        window.backgroundSettings = settingsPanel.modules.background;
        window.soundSettings = settingsPanel.modules.sound;
        window.videoSettings = settingsPanel.modules.video;
        window.otherSettings = settingsPanel.modules.other;
    }
};

// 为了兼容现有代码，保留全局toggleSettings函数
window.toggleSettings = function() {
    if (!settingsPanel) {
        settingsPanel = new SettingsPanel();
        settingsPanel.initialize();
        
        // 将设置模块暴露到全局作用域
        window.backgroundSettings = settingsPanel.modules.background;
        window.soundSettings = settingsPanel.modules.sound;
        window.videoSettings = settingsPanel.modules.video;
        window.otherSettings = settingsPanel.modules.other;
    }
    settingsPanel.toggle();
};
