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

            <el-container class="pt-4">
                <el-main class="h-full">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6" v-loading="loading">
                        <div class="panel-shell p-4 sm: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="panel-shell p-4 sm: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="panel-shell p-4 sm:p-6">
                            <div class="text-md font-semibold mb-3">学生考试记录</div>
                            <ExamHistoryChart :data="history" />
                        </div>
                        <div class="panel-shell p-4 sm:p-6">
                            <div class="text-md font-semibold mb-3">学生学案记录</div>
                            <PlanHistoryChart :student-id="route.params.id" />
                        </div>
                        <div class="panel-shell p-4 sm:p-6 lg:col-span-2">
                            <div class="text-md font-semibold mb-3">词汇掌握热力图</div>
                            <WordMasteryHeatmap :student-id="route.params.id" :columns="heatmapColumns" />
                        </div>
                        <div class="panel-shell p-4 sm:p-6 lg:col-span-2">
                            <div class="text-md font-semibold mb-3">学情分析</div>
                            <StudyAnalysis :student-id="route.params.id" />
                        </div>
                    </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)
const isMobile = ref(false)
const heatmapColumns = computed(() => isMobile.value ? 20 : 50)

function updateIsMobile() {
    isMobile.value = window.matchMedia('(max-width: 768px)').matches
}

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()
    }) : []
    // 遍历 history 中的 startDate 去掉其中的 T
    history.value.forEach(item => {
        item.startDate = item.startDate.replace('T', ' ')
    })
}

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()
    updateIsMobile()
    window.addEventListener('resize', updateIsMobile)
})
</script>
