<template>
    <view class="voice-evaluation-container">
        <!-- 顶部导航栏 -->
        <custom-navbar title="语音评测"></custom-navbar>

        <!-- 评测内容显示 -->
        <view class="content-section">
            <view class="section-header">
                <text class="section-title">📝 评测内容</text>
                <text class="edit-btn" v-if="content" @click="editContent">编辑</text>
            </view>
            <view class="content-text" v-if="content">
                <text>{{ content }}</text>
            </view>
            <view class="content-input" v-else>
                <textarea 
                    v-model="inputContent" 
                    placeholder="请输入要评测的课文或文字内容（建议50-200字）"
                    maxlength="500"
                    class="textarea"
                    :auto-height="true"
                ></textarea>
                <view class="char-count">{{ inputContent.length }}/500</view>
                <button @click="setContent" class="btn-primary" :disabled="!inputContent.trim()">确定</button>
            </view>
        </view>

        <!-- 录音控制 -->
        <view class="record-section">
            <view class="section-header">
                <text class="section-title">🎤 语音录制</text>
            </view>
            <view class="record-controls">
                <!-- 录音波形动画 -->
                <view class="wave-container" v-if="isRecording">
                    <view class="wave-item" v-for="(item, index) in waveData" :key="index" 
                          :style="{ height: item + 'rpx' }"></view>
                </view>
                <view class="record-time" v-if="isRecording">
                    <text class="time-text">录制中：{{ formatTime(recordTime) }}</text>
                </view>
                <view class="record-buttons">
                    <button 
                        v-if="!isRecording && !recordPath" 
                        @click="startRecord" 
                        class="btn-record"
                        :disabled="!content"
                    >
                        <text class="btn-icon">🎤</text>
                        <text>开始录音</text>
                    </button>
                    <button 
                        v-if="isRecording" 
                        @click="stopRecord" 
                        class="btn-stop"
                    >
                        <text class="btn-icon">⏹</text>
                        <text>停止录音</text>
                    </button>
                    <button 
                        v-if="recordPath && !isRecording" 
                        @click="playRecord" 
                        class="btn-play"
                        :disabled="isPlaying"
                    >
                        <text class="btn-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
                        <text>{{ isPlaying ? '播放中' : '播放录音' }}</text>
                    </button>
                    <button 
                        v-if="recordPath && !isRecording" 
                        @click="reRecord" 
                        class="btn-rerecord"
                    >
                        <text class="btn-icon">🔄</text>
                        <text>重新录制</text>
                    </button>
                </view>
            </view>
        </view>

        <!-- 评测结果 -->
        <view class="result-section" v-if="evaluationResult">
            <view class="section-header">
                <text class="section-title">📊 评测结果</text>
                <view class="header-actions">
                    <text class="view-detail-btn" @click="viewCurrentDetail">查看详情</text>
                    <text class="submit-status" v-if="isSubmitted">✓ 已提交</text>
                </view>
            </view>
            <view class="result-main-score">
                <text class="main-score-value">{{ evaluationResult.score || 0 }}</text>
                <text class="main-score-label">总分</text>
            </view>
            <view class="result-scores">
                <view class="score-item">
                    <view class="score-progress">
                        <view class="score-progress-bar" :style="{ width: (evaluationResult.accuracy || 0) + '%' }"></view>
                    </view>
                    <text class="score-label">准确度</text>
                    <text class="score-value">{{ evaluationResult.accuracy || 0 }}分</text>
                </view>
                <view class="score-item">
                    <view class="score-progress">
                        <view class="score-progress-bar" :style="{ width: (evaluationResult.fluency || 0) + '%' }"></view>
                    </view>
                    <text class="score-label">流畅度</text>
                    <text class="score-value">{{ evaluationResult.fluency || 0 }}分</text>
                </view>
                <view class="score-item">
                    <view class="score-progress">
                        <view class="score-progress-bar" :style="{ width: (evaluationResult.completeness || 0) + '%' }"></view>
                    </view>
                    <text class="score-label">完整度</text>
                    <text class="score-value">{{ evaluationResult.completeness || 0 }}分</text>
                </view>
                <view class="score-item">
                    <view class="score-progress">
                        <view class="score-progress-bar" :style="{ width: (evaluationResult.pronunciation || 0) + '%' }"></view>
                    </view>
                    <text class="score-label">发音</text>
                    <text class="score-value">{{ evaluationResult.pronunciation || 0 }}分</text>
                </view>
            </view>
            
            <!-- 提交按钮 -->
            <view class="submit-section" v-if="currentEvaluationId && evaluationResult && !isSubmitted">
                <button 
                    @click="submitEvaluation" 
                    class="btn-submit"
                    :loading="isSubmitting"
                >
                    {{ isSubmitting ? '提交中...' : '提交评测' }}
                </button>
            </view>
        </view>

        <!-- 评测按钮 -->
        <view class="evaluate-section" v-if="recordPath && !evaluationResult">
            <button 
                @click="evaluate" 
                class="btn-evaluate"
                :loading="isEvaluating"
            >
                {{ isEvaluating ? '评测中...' : '开始评测' }}
            </button>
        </view>

        <!-- 历史记录 -->
        <view class="history-section">
            <view class="section-header">
                <text class="section-title">📋 历史记录</text>
                <text class="refresh-btn" @click="loadHistory">刷新</text>
            </view>
            <view class="history-list" v-if="historyList.length > 0">
                <view 
                    v-for="(item, index) in historyList" 
                    :key="item.id || index" 
                    class="history-item"
                    @click="viewDetail(item)"
                >
                    <view class="history-left">
                        <view class="history-content">{{ item.content ? (item.content.length > 30 ? item.content.substring(0, 30) + '...' : item.content) : '无内容' }}</view>
                        <view class="history-time">{{ formatDateTime(item.evaluationTime) }}</view>
                    </view>
                    <view class="history-right">
                        <view class="history-score">{{ item.score || 0 }}分</view>
                        <text class="arrow">›</text>
                    </view>
                </view>
            </view>
            <view v-else class="empty-tip">
                <text class="empty-icon">📭</text>
                <text>暂无历史记录</text>
            </view>
        </view>
    </view>
</template>

<script>
import { uploadAndEvaluate, getMyVoiceRecords, submitVoiceEvaluation } from '@/api/study/voiceEvaluation.js'
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'

export default {
    components: {
        CustomNavbar
    },
    data() {
        return {
            courseId: null,
            courseName: '',
            content: '',
            inputContent: '',
            isRecording: false,
            recordTime: 0,
            recordTimer: null,
            recordPath: '',
            recorderManager: null,
            audioContext: null,
            isPlaying: false,
            isEvaluating: false,
            evaluationResult: null,
            currentEvaluationId: null,
            isSubmitted: false, // 是否已提交
            isSubmitting: false, // 是否正在提交
            currentEvaluationAudioPath: null, // 当前评测记录的音频路径
            historyList: [],
            waveData: [20, 30, 25, 35, 28, 32, 26, 30], // 波形数据
            waveTimer: null
        }
    },
    onLoad(options) {
        if (options.courseId) {
            this.courseId = parseInt(options.courseId)
        }
        if (options.courseName) {
            this.courseName = decodeURIComponent(options.courseName)
        }
        if (options.content) {
            this.content = decodeURIComponent(options.content)
        }
        this.initRecorder()
        this.loadHistory()
    },
    onUnload() {
        if (this.recordTimer) {
            clearInterval(this.recordTimer)
        }
        if (this.waveTimer) {
            clearInterval(this.waveTimer)
        }
        if (this.recorderManager) {
            this.recorderManager.stop()
        }
        if (this.audioContext) {
            this.audioContext.destroy()
        }
    },
    methods: {
        // 初始化录音管理器
        initRecorder() {
            this.recorderManager = uni.getRecorderManager()
            this.recorderManager.onStart(() => {
                console.log('录音开始')
                this.isRecording = true
                this.recordTime = 0
                this.recordTimer = setInterval(() => {
                    this.recordTime++
                }, 1000)
                // 启动波形动画
                this.startWaveAnimation()
            })
            this.recorderManager.onStop((res) => {
                console.log('录音结束', res)
                this.isRecording = false
                if (this.recordTimer) {
                    clearInterval(this.recordTimer)
                }
                this.stopWaveAnimation()
                if (res.tempFilePath) {
                    this.recordPath = res.tempFilePath
                    uni.showToast({
                        title: '录音完成',
                        icon: 'success',
                        duration: 1500
                    })
                }
            })
            this.recorderManager.onError((err) => {
                console.error('录音错误', err)
                uni.showToast({
                    title: '录音失败：' + err.errMsg,
                    icon: 'none',
                    duration: 2000
                })
                this.isRecording = false
                if (this.recordTimer) {
                    clearInterval(this.recordTimer)
                }
                this.stopWaveAnimation()
            })
        },
        // 启动波形动画
        startWaveAnimation() {
            this.waveTimer = setInterval(() => {
                this.waveData = this.waveData.map(() => Math.random() * 30 + 20)
            }, 200)
        },
        // 停止波形动画
        stopWaveAnimation() {
            if (this.waveTimer) {
                clearInterval(this.waveTimer)
                this.waveTimer = null
            }
            this.waveData = [20, 30, 25, 35, 28, 32, 26, 30]
        },
        // 设置评测内容
        setContent() {
            if (!this.inputContent.trim()) {
                uni.showToast({
                    title: '请输入评测内容',
                    icon: 'none'
                })
                return
            }
            this.content = this.inputContent.trim()
            this.inputContent = ''
            // 重置录音和评测结果
            this.recordPath = ''
            this.evaluationResult = null
        },
        // 编辑内容
        editContent() {
            this.inputContent = this.content
            this.content = ''
        },
        // 开始录音
        startRecord() {
            if (!this.content) {
                uni.showToast({
                    title: '请先设置评测内容',
                    icon: 'none'
                })
                return
            }
            this.recorderManager.start({
                duration: 60000, // 最长60秒
                sampleRate: 16000,
                numberOfChannels: 1,
                encodeBitRate: 96000,
                format: 'mp3'
            })
        },
        // 停止录音
        stopRecord() {
            this.recorderManager.stop()
        },
        // 播放录音
        playRecord() {
            if (this.audioContext) {
                this.audioContext.destroy()
            }
            this.audioContext = uni.createInnerAudioContext()
            this.audioContext.src = this.recordPath
            this.isPlaying = true
            this.audioContext.play()
            this.audioContext.onEnded(() => {
                this.isPlaying = false
                this.audioContext.destroy()
                this.audioContext = null
            })
            this.audioContext.onError((err) => {
                console.error('播放失败', err)
                this.isPlaying = false
                uni.showToast({
                    title: '播放失败',
                    icon: 'none'
                })
                if (this.audioContext) {
                    this.audioContext.destroy()
                    this.audioContext = null
                }
            })
        },
        // 重新录制
        reRecord() {
            this.recordPath = ''
            this.evaluationResult = null
            this.currentEvaluationId = null
            this.isSubmitted = false
        },
        // 开始评测
        async evaluate() {
            if (!this.recordPath) {
                uni.showToast({
                    title: '请先录制语音',
                    icon: 'none',
                    duration: 2000
                })
                return
            }
            if (!this.content) {
                uni.showToast({
                    title: '请先设置评测内容',
                    icon: 'none',
                    duration: 2000
                })
                return
            }

            // 检查登录状态
            const token = uni.getStorageSync('token')
            if (!token) {
                uni.showModal({
                    title: '提示',
                    content: '请先登录',
                    showCancel: false,
                    success: (res) => {
                        if (res.confirm) {
                            uni.reLaunch({
                                url: '/pages/login/login'
                            })
                        }
                    }
                })
                return
            }

            this.isEvaluating = true
            try {
                const result = await uploadAndEvaluate(
                    this.recordPath,
                    this.content,
                    this.courseId,
                    'zh-CN'
                )
                
                if (result.code === 200 && result.data && result.data.evaluation) {
                    this.evaluationResult = {
                        score: result.data.evaluation.score,
                        accuracy: result.data.evaluation.accuracy,
                        fluency: result.data.evaluation.fluency,
                        completeness: result.data.evaluation.completeness,
                        pronunciation: result.data.evaluation.pronunciation
                    }
                    this.currentEvaluationId = result.data.evaluation.id
                    this.currentEvaluationAudioPath = result.data.evaluation.audioPath || null
                    // 检查是否已提交（处理null、0、1、true等情况）
                    const submitted = result.data.evaluation.isSubmitted
                    this.isSubmitted = submitted === 1 || submitted === true || submitted === '1'
                    console.log('评测完成，评测ID:', this.currentEvaluationId, '提交状态:', this.isSubmitted, '音频路径:', this.currentEvaluationAudioPath)
                    uni.showToast({
                        title: '评测完成',
                        icon: 'success',
                        duration: 2000
                    })
                    // 刷新历史记录
                    this.loadHistory()
                    // 滚动到结果区域
                    this.$nextTick(() => {
                        uni.pageScrollTo({
                            selector: '.result-section',
                            duration: 300
                        })
                    })
                } else {
                    throw new Error(result.msg || '评测失败')
                }
            } catch (error) {
                console.error('评测失败', error)
                let errorMsg = error.message || '评测失败'
                // 如果是登录相关错误，跳转到登录页
                if (errorMsg.includes('登录') || errorMsg.includes('401')) {
                    uni.showModal({
                        title: '提示',
                        content: errorMsg,
                        showCancel: false,
                        success: (res) => {
                            if (res.confirm) {
                                uni.reLaunch({
                                    url: '/pages/login/login'
                                })
                            }
                        }
                    })
                } else {
                    uni.showToast({
                        title: errorMsg,
                        icon: 'none',
                        duration: 3000
                    })
                }
            } finally {
                this.isEvaluating = false
            }
        },
        // 加载历史记录
        async loadHistory() {
            try {
                const result = await getMyVoiceRecords(this.courseId)
                if (result.code === 200 && result.data) {
                    this.historyList = result.data || []
                    // 如果当前评测ID在历史记录中，更新提交状态和音频路径
                    if (this.currentEvaluationId) {
                        const currentRecord = this.historyList.find(item => item.id === this.currentEvaluationId)
                        if (currentRecord) {
                            const submitted = currentRecord.isSubmitted
                            this.isSubmitted = submitted === 1 || submitted === true || submitted === '1'
                            this.currentEvaluationAudioPath = currentRecord.audioPath || null
                        }
                    }
                } else {
                    console.warn('加载历史记录失败', result.msg)
                }
            } catch (error) {
                console.error('加载历史记录失败', error)
                // 如果是401错误，不显示错误提示（可能是未登录）
                if (!error.message || !error.message.includes('401')) {
                    // 静默失败，不打扰用户
                }
            }
        },
        // 查看详情
        viewDetail(item) {
            uni.navigateTo({
                url: `/pages/voice/detail?id=${item.id}`
            })
        },
        // 查看当前评测详情
        viewCurrentDetail() {
            if (this.currentEvaluationId) {
                uni.navigateTo({
                    url: `/pages/voice/detail?id=${this.currentEvaluationId}`
                })
            } else {
                uni.showToast({
                    title: '暂无评测详情',
                    icon: 'none'
                })
            }
        },
        // 提交评测
        async submitEvaluation() {
            if (!this.currentEvaluationId) {
                uni.showToast({
                    title: '请先完成评测',
                    icon: 'none'
                })
                return
            }
            
            if (this.isSubmitted) {
                uni.showToast({
                    title: '该评测已提交',
                    icon: 'none'
                })
                return
            }
            
            // 确认提交
            const hasAudio = this.recordPath || this.currentEvaluationAudioPath
            uni.showModal({
                title: '确认提交',
                content: hasAudio ? 
                    '提交后，管理员将看到您的评测结果和音频文件，是否确认提交？' : 
                    '提交后，管理员将看到您的评测结果，是否确认提交？',
                success: async (res) => {
                    if (res.confirm) {
                        this.isSubmitting = true
                        try {
                            // 如果有录音文件，自动上传音频；否则使用已有的音频路径或不上传
                            const audioFilePath = this.recordPath || null
                            const result = await submitVoiceEvaluation(this.currentEvaluationId, audioFilePath)
                            if (result.code === 200) {
                                this.isSubmitted = true
                                uni.showToast({
                                    title: audioFilePath ? '提交成功（已上传音频）' : '提交成功',
                                    icon: 'success',
                                    duration: 2000
                                })
                                // 刷新历史记录
                                this.loadHistory()
                            } else {
                                throw new Error(result.msg || '提交失败')
                            }
                        } catch (error) {
                            console.error('提交失败', error)
                            uni.showToast({
                                title: error.message || '提交失败',
                                icon: 'none',
                                duration: 3000
                            })
                        } finally {
                            this.isSubmitting = false
                        }
                    }
                }
            })
        },
        // 格式化时间
        formatTime(seconds) {
            const min = Math.floor(seconds / 60)
            const sec = seconds % 60
            return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
        },
        // 格式化日期时间
        formatDateTime(dateTime) {
            if (!dateTime) return ''
            const date = new Date(dateTime)
            const year = date.getFullYear()
            const month = (date.getMonth() + 1).toString().padStart(2, '0')
            const day = date.getDate().toString().padStart(2, '0')
            const hour = date.getHours().toString().padStart(2, '0')
            const minute = date.getMinutes().toString().padStart(2, '0')
            return `${year}-${month}-${day} ${hour}:${minute}`
        }
    }
}
</script>

<style scoped>
.voice-evaluation-container {
    padding: 20rpx;
    padding-top: calc(20rpx + 88rpx + env(safe-area-inset-top));
    background-color: #f5f5f5;
    min-height: 100vh;
}

.header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;
    border-radius: 0 0 20rpx 20rpx;
}

.header-content {
    display: flex;
    flex-direction: column;
}

.title {
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    display: block;
    margin-bottom: 10rpx;
}

.subtitle {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.9);
    display: block;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.edit-btn, .refresh-btn, .view-detail-btn {
    font-size: 24rpx;
    color: #409eff;
    padding: 8rpx 16rpx;
    border: 1px solid #409eff;
    border-radius: 20rpx;
}

.content-section, .record-section, .result-section, .evaluate-section, .history-section {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.content-text {
    font-size: 30rpx;
    line-height: 1.8;
    color: #333;
    padding: 30rpx;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12rpx;
    min-height: 200rpx;
    border-left: 4rpx solid #409eff;
}

.char-count {
    text-align: right;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 20rpx;
}

.content-input {
    margin-top: 20rpx;
}

.textarea {
    width: 100%;
    min-height: 200rpx;
    padding: 20rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    font-size: 28rpx;
    margin-bottom: 20rpx;
}

.btn-primary {
    background-color: #409eff;
    color: #fff;
    border: none;
    padding: 20rpx 40rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
}

.wave-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120rpx;
    margin: 30rpx 0;
    gap: 8rpx;
}

.wave-item {
    width: 8rpx;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 4rpx;
    transition: height 0.2s;
}

.record-time {
    text-align: center;
    margin-bottom: 20rpx;
}

.time-text {
    font-size: 32rpx;
    color: #f56c6c;
    font-weight: bold;
}

.record-buttons {
    display: flex;
    justify-content: center;
    gap: 20rpx;
    flex-wrap: wrap;
}

.btn-record, .btn-stop, .btn-play, .btn-rerecord {
    padding: 24rpx 40rpx;
    border-radius: 50rpx;
    font-size: 28rpx;
    border: none;
    display: flex;
    align-items: center;
    gap: 10rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.btn-icon {
    font-size: 32rpx;
}

.btn-record {
    background-color: #67c23a;
    color: #fff;
}

.btn-stop {
    background-color: #f56c6c;
    color: #fff;
}

.btn-play {
    background-color: #409eff;
    color: #fff;
}

.btn-rerecord {
    background-color: #909399;
    color: #fff;
}

.result-main-score {
    text-align: center;
    padding: 40rpx 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12rpx;
    margin-bottom: 30rpx;
}

.main-score-value {
    display: block;
    font-size: 80rpx;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.main-score-label {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 10rpx;
}

.result-scores {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
}

.score-item {
    padding: 24rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    border: 1px solid #eee;
}

.score-progress {
    width: 100%;
    height: 8rpx;
    background-color: #e4e7ed;
    border-radius: 4rpx;
    margin-bottom: 16rpx;
    overflow: hidden;
}

.score-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
    border-radius: 4rpx;
    transition: width 0.3s;
}

.score-label {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
}

.score-value {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #409eff;
}

.btn-evaluate {
    width: 100%;
    background-color: #409eff;
    color: #fff;
    border: none;
    padding: 30rpx;
    border-radius: 8rpx;
    font-size: 32rpx;
}

.history-list {
    margin-top: 20rpx;
}

.history-item {
    padding: 24rpx;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.history-left {
    flex: 1;
    margin-right: 20rpx;
}

.history-content {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-time {
    font-size: 24rpx;
    color: #999;
}

.history-right {
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.history-score {
    font-size: 32rpx;
    font-weight: bold;
    color: #409eff;
}

.arrow {
    font-size: 40rpx;
    color: #ccc;
}

.empty-tip {
    text-align: center;
    padding: 80rpx 40rpx;
    color: #999;
    font-size: 28rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
}

.empty-icon {
    font-size: 80rpx;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.submit-status {
    font-size: 24rpx;
    color: #67c23a;
    padding: 8rpx 16rpx;
    background: rgba(103, 194, 58, 0.1);
    border-radius: 20rpx;
    border: 1px solid #67c23a;
}

.submit-section {
    margin-top: 30rpx;
    padding-top: 30rpx;
    border-top: 1px solid #eee;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
    color: #fff;
    border: none;
    padding: 30rpx;
    border-radius: 8rpx;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 12rpx rgba(103, 194, 58, 0.3);
}
</style>

