<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Header></Header>
            </el-header>

            <el-container>
                <el-aside width="200px" class="pt-4">
                    <Sidebar />
                </el-aside>
                <el-main class="p-4">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-loading="loading">
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                            <div class="text-lg font-semibold mb-4">学生详情</div>
                            <template v-if="detail">
                                <el-descriptions :column="1" border>
                                    <el-descriptions-item label="ID">{{ detail.id }}</el-descriptions-item>
                                    <el-descriptions-item label="姓名">{{ detail.name }}</el-descriptions-item>
                                    <el-descriptions-item label="班级">{{ detail.className }}</el-descriptions-item>
                                    <el-descriptions-item label="年级">{{ detail.gradeName }}</el-descriptions-item>
                                    <el-descriptions-item label="学生实际水平年级">{{ detail.actualGrade
                                        }}</el-descriptions-item>
                                </el-descriptions>
                            </template>
                            <template v-else>
                                <el-empty description="请从班级页跳转" />
                            </template>
                        </div>

                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                            <div class="text-lg font-semibold mb-4">学生词汇统计</div>
                            <template v-if="wordStat">
                                <el-descriptions :column="1" border>
                                    <el-descriptions-item label="已掌握">{{ wordStat.masteredWordCount
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="未掌握">{{ wordStat.unmasteredWordCount
                                        }}</el-descriptions-item>
                                    <el-descriptions-item label="待复习">{{ wordStat.pendingReviewWordCount
                                        }}</el-descriptions-item>
                                </el-descriptions>
                            </template>
                            <template v-else>
                                <el-empty description="暂无统计" />
                            </template>
                        </div>

                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                            <div class="text-md font-semibold mb-3">学生考试记录</div>
                            <ExamHistoryChart :data="history" />
                        </div>
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                            <div class="text-md font-semibold mb-3">学生学案记录</div>
                            <PlanHistoryChart :student-id="route.params.id" />
                        </div>
                        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                            <div class="text-md font-semibold mb-3">词汇掌握热力图</div>
                            <WordMasteryHeatmap :student-id="route.params.id" :columns="50" />
                        </div>
                        <StudyAnalysis :student-id="route.params.id" />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getStudentDetail } from '@/api/student'
import { getStudentExamHistory } from '@/api/exam'
import { getWordStudentDetail } from '@/api/words'
import ExamHistoryChart from '@/layouts/components/student/ExamHistoryChart.vue'
import PlanHistoryChart from '@/layouts/components/student/PlanHistoryChart.vue'
import WordMasteryHeatmap from '@/layouts/components/student/WordMasteryHeatmap.vue'
import StudyAnalysis from '@/layouts/components/student/StudyAnalysis.vue'
import Sidebar from '@/layouts/components/Sidebar.vue'

const loading = ref(false)
const detail = ref(null)
const route = useRoute()
const history = ref([])
const wordStat = ref(null)

async function fetchDetail() {
    const id = route.params.id
    if (!id) return
    loading.value = true
    try {
        const res = await getStudentDetail(id)
        const d = res.data
        detail.value = d?.data || null
    } finally {
        loading.value = false
    }
}

async function fetchExamHistory() {
    const id = route.params.id
    if (!id) return
    const res = await getStudentExamHistory(id)
    const d = res.data
    history.value = Array.isArray(d?.data) ? d.data.slice().sort((a, b) => {
        return new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
    }) : []
}

async function fetchWordStat() {
    const id = route.params.id
    if (!id) return
    const res = await getWordStudentDetail(Number(id))
    const d = res.data
    wordStat.value = d?.data || null
}

onMounted(() => {
    fetchDetail()
    fetchExamHistory()
    fetchWordStat()
})
</script>
