<template>
  <div class="layer1-home">
    <div class="layer1-content">
      <!-- 教材/年级/单元联动选择 -->
      <CurriculumSelector
        :selectedTextbook="selectedTextbook"
        :selectedGrade="selectedGrade"
        :selectedUnit="selectedUnit"
        @update:selectedTextbook="$emit('update:selectedTextbook', $event)"
        @update:selectedGrade="$emit('update:selectedGrade', $event)"
        @update:selectedUnit="$emit('update:selectedUnit', $event)"
      />

      <!-- 单元信息卡片 -->
      <UnitInfoCard :unit="currentUnit" />

      <!-- 练习类型网格 -->
      <ExerciseTypeGrid @select="$emit('selectExerciseType', $event)" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import curriculumData from '../data/curriculum.json'
import type { CurriculumData, ExerciseType } from '@/types/englishSpeaking'
import CurriculumSelector from '../components/CurriculumSelector.vue'
import UnitInfoCard from '../components/UnitInfoCard.vue'
import ExerciseTypeGrid from '../components/ExerciseTypeGrid.vue'

const props = defineProps<{
  selectedTextbook: string
  selectedGrade: string
  selectedUnit: string
}>()

defineEmits<{
  (e: 'update:selectedTextbook', value: string): void
  (e: 'update:selectedGrade', value: string): void
  (e: 'update:selectedUnit', value: string): void
  (e: 'selectExerciseType', type: ExerciseType): void
}>()

const data = curriculumData as CurriculumData

const currentUnit = computed(() => {
  const tb = data.textbooks.find(t => t.id === props.selectedTextbook)
  const grade = tb?.grades.find(g => g.id === props.selectedGrade)
  return grade?.units.find(u => u.id === props.selectedUnit)
})
</script>

<style lang="scss" scoped>
.layer1-home {
  padding: 16px 20px;
}

.layer1-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
