/**
 * 语音克隆页面 JavaScript
 */

// 全局变量
let loadingModal = null;
let mediaRecorder = null;
let audioChunks = [];
let recordedBlob = null;

// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initializeComponents();
    bindEvents();
    loadVoiceStatus();
});

/**
 * 初始化组件
 */
function initializeComponents() {
    loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
}

/**
 * 绑定事件
 */
function bindEvents() {
    // 文件选择
    document.getElementById('voice-file').addEventListener('change', handleFileSelect);
    
    // 录音控制
    document.getElementById('start-record').addEventListener('click', startRecording);
    document.getElementById('stop-record').addEventListener('click', stopRecording);
    
    // 表单提交
    document.getElementById('voice-upload-form').addEventListener('submit', uploadVoiceSample);
    document.getElementById('speech-generate-form').addEventListener('submit', generateSpeech);
}

/**
 * 显示加载状态
 */
function showLoading(message = '正在处理中...', detail = '请稍候...') {
    document.getElementById('loading-message').textContent = message;
    document.getElementById('loading-detail').textContent = detail;
    loadingModal.show();
}

/**
 * 隐藏加载状态
 */
function hideLoading() {
    loadingModal.hide();
}

/**
 * 显示成功消息
 */
function showSuccess(message) {
    showToast(message, 'success');
}

/**
 * 显示错误消息
 */
function showError(message) {
    showToast(message, 'danger');
}

/**
 * 显示Toast消息
 */
function showToast(message, type = 'info') {
    const colors = {
        'success': 'bg-success',
        'danger': 'bg-danger',
        'warning': 'bg-warning',
        'info': 'bg-info'
    };
    
    const toast = document.createElement('div');
    toast.className = `toast align-items-center text-white ${colors[type]} border-0 position-fixed top-0 end-0 m-3`;
    toast.style.zIndex = '9999';
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">
                <i class="fas fa-check-circle me-2"></i>${message}
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    
    document.body.appendChild(toast);
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
    
    setTimeout(() => {
        if (toast.parentNode) {
            toast.parentNode.removeChild(toast);
        }
    }, 3000);
}

/**
 * 加载语音状态
 */
async function loadVoiceStatus() {
    try {
        const response = await fetch('/voice-clone/api/voice-clone/status');
        const result = await response.json();
        
        updateStatusCard(result);
        
        if (result.has_sample) {
            // 启用语音生成功能
            document.getElementById('generate-btn').disabled = false;
        }
        
    } catch (error) {
        console.error('加载语音状态失败:', error);
        updateStatusCard({
            success: false,
            message: '无法加载语音状态'
        });
    }
}

/**
 * 更新状态卡片
 */
function updateStatusCard(result) {
    const content = document.getElementById('voice-status-content');
    
    if (result.has_sample) {
        content.innerHTML = `
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 class="fw-bold text-success mb-2">
                        <i class="fas fa-check-circle me-2"></i>专属声音已准备好！
                    </h5>
                    <p class="text-muted mb-1">AI识别内容：「${result.recognized_text}」</p>
                    <small class="text-muted">录制时间：${result.upload_time}</small>
                </div>
                <div class="col-md-4 text-end">
                    <div class="d-flex align-items-center justify-content-end">
                        <div class="icon-bubble me-3" style="background: linear-gradient(45deg, #28a745, #20c997); width: 60px; height: 60px;">
                            <i class="fas fa-microphone text-white"></i>
                        </div>
                        <div>
                            <span class="badge bg-success">已就绪</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
    } else {
        content.innerHTML = `
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 class="fw-bold text-warning mb-2">
                        <i class="fas fa-exclamation-triangle me-2"></i>还没有录制语音样本
                    </h5>
                    <p class="text-muted mb-0">快来录制你的专属声音，让AI学会模仿你说话吧！</p>
                </div>
                <div class="col-md-4 text-end">
                    <div class="icon-bubble" style="background: linear-gradient(45deg, #ffc107, #ffca2c); width: 60px; height: 60px;">
                        <i class="fas fa-microphone-slash text-white"></i>
                    </div>
                </div>
            </div>
        `;
    }
}

/**
 * 处理文件选择
 */
function handleFileSelect(e) {
    const file = e.target.files[0];
    if (file) {
        recordedBlob = null; // 重置录音数据
        document.getElementById('upload-btn').disabled = false;
        
        // 显示文件预览
        const audioUrl = URL.createObjectURL(file);
        showAudioPreview(audioUrl);
    }
}

/**
 * 开始录音
 */
async function startRecording() {
    try {
        // 重置文件选择
        document.getElementById('voice-file').value = '';
        
        const stream = await navigator.mediaDevices.getUserMedia({ 
            audio: {
                sampleRate: 16000,
                channelCount: 1,
                echoCancellation: true,
                noiseSuppression: true
            }
        });
        
        mediaRecorder = new MediaRecorder(stream, {
            mimeType: 'audio/webm;codecs=opus'
        });
        
        audioChunks = [];
        
        mediaRecorder.ondataavailable = function(event) {
            if (event.data.size > 0) {
                audioChunks.push(event.data);
            }
        };
        
        mediaRecorder.onstop = function() {
            recordedBlob = new Blob(audioChunks, { type: 'audio/webm' });
            const audioUrl = URL.createObjectURL(recordedBlob);
            showAudioPreview(audioUrl);
            
            // 启用上传按钮
            document.getElementById('upload-btn').disabled = false;
        };
        
        mediaRecorder.start(100);
        
        // 更新UI
        document.getElementById('start-record').disabled = true;
        document.getElementById('stop-record').disabled = false;
        document.getElementById('record-status').textContent = '正在录音...';
        document.getElementById('record-status').className = 'text-danger';
        
    } catch (error) {
        showError('录音失败，请检查麦克风权限');
        console.error('录音失败:', error);
    }
}

/**
 * 停止录音
 */
function stopRecording() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        mediaRecorder.stream.getTracks().forEach(track => track.stop());
    }
    
    // 更新UI
    document.getElementById('start-record').disabled = false;
    document.getElementById('stop-record').disabled = true;
    document.getElementById('record-status').textContent = '录音完成';
    document.getElementById('record-status').className = 'text-success';
}

/**
 * 显示音频预览
 */
function showAudioPreview(audioUrl) {
    const previewAudio = document.getElementById('preview-audio');
    const previewSource = document.getElementById('preview-source');
    
    previewSource.src = audioUrl;
    previewAudio.load();
    document.getElementById('audio-preview').style.display = 'block';
}

/**
 * 上传语音样本
 */
async function uploadVoiceSample(e) {
    e.preventDefault();
    
    const fileInput = document.getElementById('voice-file');
    const file = fileInput.files[0];
    
    if (!file && !recordedBlob) {
        showError('请选择音频文件或先录音');
        return;
    }
    
    showLoading('正在上传和训练你的声音...', '这可能需要几秒钟时间');
    
    try {
        const formData = new FormData();
        
        if (file) {
            formData.append('audio', file);
        } else if (recordedBlob) {
            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
            formData.append('audio', recordedBlob, `recording_${timestamp}.webm`);
        }
        
        const response = await fetch('/voice-clone/api/voice-clone/upload', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            showSuccess(result.message);
            loadVoiceStatus(); // 重新加载状态
            
            // 清空表单
            document.getElementById('voice-upload-form').reset();
            document.getElementById('audio-preview').style.display = 'none';
            document.getElementById('upload-btn').disabled = true;
        } else {
            showError(result.message);
        }
        
    } catch (error) {
        showError('上传失败，请检查网络连接');
        console.error('上传失败:', error);
    } finally {
        hideLoading();
    }
}

/**
 * 生成语音
 */
async function generateSpeech(e) {
    e.preventDefault();
    
    const text = document.getElementById('speech-text').value.trim();
    if (!text) {
        showError('请输入要合成的文本');
        return;
    }
    
    showLoading('正在用你的声音生成语音...', '请耐心等待，这很神奇哦');
    
    try {
        const response = await fetch('/voice-clone/api/voice-clone/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                text: text
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            showSuccess(result.message);
            
            // 显示生成的音频
            const generatedAudio = document.getElementById('generated-audio');
            const generatedSource = document.getElementById('generated-source');
            
            // 创建音频URL
            const filename = result.audio_url.split('/').pop();
            generatedSource.src = `/voice-test/download-audio/${filename}`;
            generatedAudio.load();
            document.getElementById('speech-result').style.display = 'block';
            
        } else {
            showError(result.message);
        }
        
    } catch (error) {
        showError('生成失败，请检查网络连接');
        console.error('生成失败:', error);
    } finally {
        hideLoading();
    }
}