// 音效设置模块
class SoundSettings {
    constructor() {
        this.soundEnabled = true;
        this.cialloEnabled = true;
        this.volume = 0.8; // 默认80%音量
    }

    // 初始化
    async initialize() {
        // 从localStorage恢复设置
        this.soundEnabled = ConfigManager.getBoolConfig('soundEffectsEnabled', true);
        this.cialloEnabled = ConfigManager.getBoolConfig('cialloEffectEnabled', true);
        this.volume = ConfigManager.getConfig('soundEffectsVolume', 0.8);

        // 加载音效列表
        if (window.soundEffectManager) {
            await window.soundEffectManager.loadSoundEffects();
        }

        // 创建音效设置UI
        this.createUI();

        // 更新UI状态
        this.updateUI();

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

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

        soundContent.innerHTML = `
            <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="soundToggle" onclick="window.soundSettings.toggleSoundEffects()" style="min-width: 100px;">
                        已开启
                    </button>
                </div>
                <div id="soundStatus" style="font-size: 12px; color: rgba(255,255,255,0.6); display: none;">
                    检查音效状态中...
                </div>
            </div>

            <div style="margin-bottom: 15px;">
                <div style="margin-bottom: 10px;">
                    <span>选择音效</span>
                </div>
                <div id="soundEffectCards" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px;">
                    <!-- 音效卡片将通过JavaScript动态添加 -->
                </div>
                <div id="soundEffectDescription" style="font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 5px;">
                    <!-- 音效描述将通过JavaScript动态更新 -->
                </div>
            </div>

            <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="cialloToggle" onclick="window.soundSettings.toggleCialloEffect()" style="min-width: 100px;">
                        已开启
                    </button>
                </div>
                <div id="cialloStatus" style="font-size: 12px; color: rgba(255,255,255,0.6);">
                    点击时显示文本特效
                </div>
            </div>

            <div style="margin-bottom: 15px;">
                <div style="margin-bottom: 10px;">
                    <span>选择文本</span>
                </div>
                <div id="textEffectCards" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;">
                    <!-- 文本特效卡片将通过JavaScript动态添加 -->
                </div>
            </div>

            <div style="margin-bottom: 15px;">
                <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;">
                    <span>音效音量</span>
                    <span id="volumeValue" style="color: rgba(255,255,255,0.8);">${Math.round(this.volume * 100)}%</span>
                </div>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <span style="font-size: 12px; color: rgba(255,255,255,0.6);">🔈</span>
                    <input type="range" id="soundVolumeSlider" min="0" max="100" value="${Math.round(this.volume * 100)}"
                           class="volume-slider"
                           oninput="window.soundSettings.updateVolume(this.value)"
                           onchange="window.soundSettings.testVolume()">
                    <span style="font-size: 12px; color: rgba(255,255,255,0.6);">🔊</span>
                </div>
            </div>
        `;
    }

    // 更新UI状态
    updateUI() {
        const soundToggle = document.getElementById('soundToggle');
        const cialloToggle = document.getElementById('cialloToggle');
        const volumeSlider = document.getElementById('soundVolumeSlider');
        const volumeValue = document.getElementById('volumeValue');
        const soundEffectSelect = document.getElementById('soundEffectSelect');
        const soundEffectDescription = document.getElementById('soundEffectDescription');
        const textEffectSelect = document.getElementById('textEffectSelect');

        if (soundToggle) {
            if (this.soundEnabled) {
                soundToggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)';
                soundToggle.style.color = 'white';
                soundToggle.style.borderColor = 'transparent';
                soundToggle.textContent = '已开启';
            } else {
                soundToggle.style.background = 'rgba(40, 40, 40, 0.8)';
                soundToggle.style.color = 'rgba(255, 255, 255, 0.7)';
                soundToggle.style.borderColor = 'rgba(255, 255, 255, 0.2)';
                soundToggle.textContent = '已关闭';
            }
        }

        if (cialloToggle) {
            if (this.cialloEnabled) {
                cialloToggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)';
                cialloToggle.style.color = 'white';
                cialloToggle.style.borderColor = 'transparent';
                cialloToggle.textContent = '已开启';
            } else {
                cialloToggle.style.background = 'rgba(40, 40, 40, 0.8)';
                cialloToggle.style.color = 'rgba(255, 255, 255, 0.7)';
                cialloToggle.style.borderColor = 'rgba(255, 255, 255, 0.2)';
                cialloToggle.textContent = '已关闭';
            }
        }

        if (volumeSlider) {
            volumeSlider.value = Math.round(this.volume * 100);
        }

        if (volumeValue) {
            volumeValue.textContent = `${Math.round(this.volume * 100)}%`;
        }

        // 更新音效选择卡片
        const soundEffectCards = document.getElementById('soundEffectCards');
        if (soundEffectCards && window.soundEffectManager) {
            // 清空现有卡片
            soundEffectCards.innerHTML = '';
            
            // 添加音效卡片
            const soundEffects = window.soundEffectManager.getSoundEffects();
            const selectedSound = window.soundEffectManager.getSelectedSound();
            
            soundEffects.forEach(effect => {
                const card = document.createElement('div');
                card.className = 'sound-card';
                card.dataset.soundFile = effect.file;

                // 设置卡片样式
                card.style.cssText = `
                    padding: 8px;
                    border-radius: 6px;
                    background: rgba(40, 40, 40, 0.7);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    cursor: pointer;
                    transition: all 0.3s ease;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                `;

                // 如果是当前选中的音效，添加高亮样式
                if (effect.file === selectedSound) {
                    card.style.cssText += `
                        background: linear-gradient(135deg, #00b09b, #96c93d);
                        border-color: transparent;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                    `;
                }

                // 添加图标
                const icon = document.createElement('div');
                icon.style.cssText = `
                    font-size: 20px;
                    margin-bottom: 6px;
                `;
                icon.textContent = '🔊'; // 可以根据不同音效使用不同图标

                // 添加名称
                const name = document.createElement('div');
                name.style.cssText = `
                    font-size: 12px;
                    font-weight: 500;
                    margin-bottom: 2px;
                `;
                name.textContent = effect.name;

                // 组装卡片
                card.appendChild(icon);
                card.appendChild(name);

                // 添加点击事件
                card.addEventListener('click', () => {
                    // 立即更新卡片选中状态
                    this.updateSoundCardSelection(effect.file);
                    // 然后调用changeSoundEffect
                    window.soundSettings.changeSoundEffect(effect.file);
                });

                // 添加悬停效果
                card.addEventListener('mouseenter', () => {
                    // 检查当前是否是选中的音效
                    const currentSelectedSound = window.soundEffectManager ? window.soundEffectManager.getSelectedSound() : null;
                    if (effect.file !== currentSelectedSound) {
                        card.style.background = 'rgba(60, 60, 60, 0.8)';
                        card.style.transform = 'translateY(-2px)';
                    }
                });

                card.addEventListener('mouseleave', () => {
                    // 检查当前是否是选中的音效
                    const currentSelectedSound = window.soundEffectManager ? window.soundEffectManager.getSelectedSound() : null;
                    if (effect.file !== currentSelectedSound) {
                        card.style.background = 'rgba(40, 40, 40, 0.7)';
                        card.style.transform = 'translateY(0)';
                    }
                });

                soundEffectCards.appendChild(card);
            });
        }

        // 更新音效描述
        if (soundEffectDescription && window.soundEffectManager) {
            const soundEffects = window.soundEffectManager.getSoundEffects();
            const selectedSound = window.soundEffectManager.getSelectedSound();
            const selectedEffect = soundEffects.find(effect => effect.file === selectedSound);
            
            if (selectedEffect) {
                soundEffectDescription.textContent = selectedEffect.description;
            }
        }

        // 更新文本特效选择卡片
        const textEffectCards = document.getElementById('textEffectCards');
        if (textEffectCards && window.cialloEffectManager) {
            // 清空现有卡片
            textEffectCards.innerHTML = '';
            
            // 添加文本特效卡片
            const textVariants = window.cialloEffectManager.getTextVariants();
            const selectedText = window.cialloEffectManager.getSelectedText();
            
            textVariants.forEach(text => {
                const card = document.createElement('div');
                card.className = 'text-card';
                card.dataset.text = text;

                // 设置卡片样式
                card.style.cssText = `
                    padding: 8px;
                    border-radius: 6px;
                    background: rgba(40, 40, 40, 0.7);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    cursor: pointer;
                    transition: all 0.3s ease;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    min-height: 50px;
                `;

                // 如果是当前选中的文本，添加高亮样式
                if (text === selectedText) {
                    card.style.cssText += `
                        background: linear-gradient(135deg, #00b09b, #96c93d);
                        border-color: transparent;
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                    `;
                }

                // 添加文本内容
                const textContent = document.createElement('div');
                textContent.style.cssText = `
                    font-size: 12px;
                    font-weight: 500;
                `;
                textContent.textContent = text;

                // 组装卡片
                card.appendChild(textContent);

                // 添加点击事件
                card.addEventListener('click', () => {
                    // 立即更新卡片选中状态
                    this.updateTextCardSelection(text);
                    // 然后调用changeTextEffect
                    window.soundSettings.changeTextEffect(text);
                });

                // 添加悬停效果
                card.addEventListener('mouseenter', () => {
                    // 检查当前是否是选中的文本
                    const currentSelectedText = window.cialloEffectManager ? window.cialloEffectManager.getSelectedText() : null;
                    if (text !== currentSelectedText) {
                        card.style.background = 'rgba(60, 60, 60, 0.8)';
                        card.style.transform = 'translateY(-2px)';
                    }
                });

                card.addEventListener('mouseleave', () => {
                    // 检查当前是否是选中的文本
                    const currentSelectedText = window.cialloEffectManager ? window.cialloEffectManager.getSelectedText() : null;
                    if (text !== currentSelectedText) {
                        card.style.background = 'rgba(40, 40, 40, 0.7)';
                        card.style.transform = 'translateY(0)';
                    }
                });

                textEffectCards.appendChild(card);
            });
        }
    }

    // 更改音效
    changeSoundEffect(soundFile) {
        if (window.soundEffectManager) {
            window.soundEffectManager.setSelectedSound(soundFile);
            
            // 更新音效描述
            const soundEffectDescription = document.getElementById('soundEffectDescription');
            if (soundEffectDescription) {
                const soundEffects = window.soundEffectManager.getSoundEffects();
                const selectedEffect = soundEffects.find(effect => effect.file === soundFile);
                
                if (selectedEffect) {
                    soundEffectDescription.textContent = selectedEffect.description;
                }
            }
            
            // 更新卡片选中状态
            this.updateSoundCardSelection(soundFile);

            // 如果音效开启，播放测试音效
            if (this.soundEnabled) {
                this.playTestSound();
            }
        }
    }

    // 更新音效卡片选中状态
    updateSoundCardSelection(selectedSoundFile) {
        const soundCards = document.querySelectorAll('.sound-card');
        soundCards.forEach(card => {
            const soundFile = card.dataset.soundFile;
            if (soundFile === selectedSoundFile) {
                // 选中状态样式
                card.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)';
                card.style.borderColor = 'transparent';
                card.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
            } else {
                // 未选中状态样式
                card.style.background = 'rgba(40, 40, 40, 0.7)';
                card.style.borderColor = 'rgba(255, 255, 255, 0.1)';
                card.style.boxShadow = 'none';
            }
        });
    }

    // 更改文本特效
    changeTextEffect(text) {
        if (window.cialloEffectManager) {
            window.cialloEffectManager.setSelectedText(text);
            console.log(`文本特效已更改为: ${text}`);
            
            // 更新卡片选中状态
            this.updateTextCardSelection(text);
        }
    }

    // 更新文本特效卡片选中状态
    updateTextCardSelection(selectedText) {
        const textCards = document.querySelectorAll('.text-card');
        textCards.forEach(card => {
            const text = card.dataset.text;
            if (text === selectedText) {
                // 选中状态样式
                card.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)';
                card.style.borderColor = 'transparent';
                card.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
            } else {
                // 未选中状态样式
                card.style.background = 'rgba(40, 40, 40, 0.7)';
                card.style.borderColor = 'rgba(255, 255, 255, 0.1)';
                card.style.boxShadow = 'none';
            }
        });
    }

    // 切换音效
    toggleSoundEffects() {
        this.soundEnabled = !this.soundEnabled;
        ConfigManager.setBoolConfig('soundEffectsEnabled', this.soundEnabled);

        // 更新音效管理器
        if (window.soundEffectManager) {
            window.soundEffectManager.setEnabled(this.soundEnabled);
        }

        this.updateUI();

        // 如果开启，播放测试音效
        if (this.soundEnabled && window.soundEffectManager) {
            this.playTestSound();
        }
    }

    // 切换Ciallo特效
    toggleCialloEffect() {
        this.cialloEnabled = !this.cialloEnabled;
        ConfigManager.setBoolConfig('cialloEffectEnabled', this.cialloEnabled);
        
        // 更新特效管理器的状态
        if (window.cialloEffectManager) {
            window.cialloEffectManager.setEnabled(this.cialloEnabled);
        }

        this.updateUI();

        // 如果开启，显示测试特效
        if (this.cialloEnabled && window.cialloEffectManager) {
            this.showTestCiallo();
        }
    }

    // 更新音量
    updateVolume(value) {
        this.volume = value / 100;
        ConfigManager.setConfig('soundEffectsVolume', this.volume);

        // 更新音效管理器
        if (window.soundEffectManager) {
            window.soundEffectManager.setVolume(this.volume);
        }

        // 更新UI
        const volumeValue = document.getElementById('volumeValue');
        if (volumeValue) {
            volumeValue.textContent = `${value}%`;
        }
    }

    // 测试音量
    testVolume() {
        if (this.soundEnabled && window.soundEffectManager) {
            this.playTestSound();
        }
    }

    // 播放测试音效
    playTestSound() {
        if (window.soundEffectManager) {
            // 使用当前选中的音效进行测试
            const selectedSound = window.soundEffectManager.getSelectedSound();
            
            // 直接播放选中的音效
            if (selectedSound) {
                const soundUrl = getSoundUrl(selectedSound);
                window.soundEffectManager.playSound('click', soundUrl, this.volume);
            } else {
                // 如果没有选中的音效，使用默认音效
                const defaultSoundUrl = getSoundUrl('ciallo.ogg');
                window.soundEffectManager.playSound('click', defaultSoundUrl, this.volume);
            }
        }
    }

    // 显示测试Ciallo特效
    showTestCiallo() {
        if (window.cialloEffectManager) {
            // 在屏幕中央显示测试特效
            const x = window.innerWidth / 2;
            const y = window.innerHeight / 2;
            console.log('显示测试特效，当前选中文本:', window.cialloEffectManager.getSelectedText());
            window.cialloEffectManager.createEffect(x, y);
        }
    }
}
