<script setup lang="ts">
import { computed, onUnmounted, ref } from 'vue'
import { mockData } from './data/mock' // 引入模拟数据
import AnswerAnalysisComp from './modules/AnswerAnalysisComp.vue'
import CoverComp from './modules/CoverComp.vue' // 封面组件
import GameComp from './modules/GameComp.vue'
import IntroComp from './modules/IntroComp.vue'

// 状态定义
type Status = 'COVER' | 'INTRO' | 'GAME' | 'ANSWER_ANALYSIS'

const status = ref<Status>('COVER')
const data = ref(mockData)

// 索引控制
const currentStep = ref(0) // Node 索引
const subStep = ref(0) // Question 索引

// 定时器控制
const timeLeft = ref(0)
let timerInterval: number | null = null

// --- 计算属性 ---
const currentNode = computed(() => data.value.nodes[currentStep.value])
const currentQuestion = computed(() => {
  // 保护性代码：防止越界
  const questions = currentNode.value.questions
  return questions[subStep.value] || questions[0]
})

// --- 动作处理 ---

// 1. 开始比赛 -> 去第一个环节的介绍页
function handleStart() {
  currentStep.value = 0
  subStep.value = 0
  status.value = 'INTRO'
}

// 2. 抽题 -> 去答题页，重置时间
function handleDraw() {
  status.value = 'GAME'
  timeLeft.value = currentNode.value.config.timeLimit
  startTimer()
}

// 3. 定时器逻辑
function startTimer() {
  if (timerInterval)
    clearInterval(timerInterval)
  timerInterval = window.setInterval(() => {
    if (timeLeft.value > 0) {
      timeLeft.value--
    }
    else {
      // 时间到，清除定时器，进入答题图解页面
      if (timerInterval)
        clearInterval(timerInterval)
      status.value = 'ANSWER_ANALYSIS'
    }
  }, 1000)
}

// 4. 下一题逻辑 (核心流程)
function handleToAnalysis() {
  if (timerInterval)
    clearInterval(timerInterval)
  status.value = 'ANSWER_ANALYSIS'
}

function handleNext() {
  if (timerInterval)
    clearInterval(timerInterval)

  const totalQuestionsInNode = currentNode.value.config.questionCount

  // A. 如果当前环节还有题
  if (subStep.value < totalQuestionsInNode - 1 && subStep.value < currentNode.value.questions.length - 1) {
    subStep.value++
    // 回到介绍页（抽题页），等待用户点击“抽题”再次开始
    status.value = 'INTRO'
  }
  // B. 当前环节结束，去下一个环节
  else {
    if (currentStep.value < data.value.nodes.length - 1) {
      currentStep.value++
      subStep.value = 0
      status.value = 'INTRO' // 回到介绍页
    }
    else {
      // 全部结束
      window.$message?.success('全场比赛结束！')
      status.value = 'COVER'
      currentStep.value = 0
      subStep.value = 0
    }
  }
}

onUnmounted(() => {
  if (timerInterval)
    clearInterval(timerInterval)
})
</script>

<template>
  <div class="user-app-container relative h-screen w-full overflow-hidden font-sans">
    <!-- 背景图占位 (实际项目中应为 img 或 background-image) -->
    <div class="absolute inset-0 z-0 bg-blue-100/50">
      <!-- 模拟云纹/山水背景 -->
      <div class="absolute bottom-0 h-1/3 w-full from-teal-200/50 to-transparent bg-gradient-to-t" />
      <div class="absolute top-0 h-1/4 w-full from-blue-200/50 to-transparent bg-gradient-to-b" />
    </div>

    <!-- 顶部左右信息 (固定) -->
    <div class="absolute left-6 top-4 z-20 text-lg text-gray-700 font-medium tracking-wide">
      教育学会
    </div>
    <div class="absolute right-6 top-4 z-20 text-lg text-gray-700 font-medium tracking-wide">
      树人研究院
    </div>

    <!-- 主内容区域 -->
    <div class="relative z-10 h-full w-full">
      <!-- 状态 1: 封面 -->
      <CoverComp
        v-if="status === 'COVER'"
        :title="data.activityInfo.name"
        :nodes="data.nodes"
        @start="handleStart"
      />

      <!-- 状态 2: 介绍页 -->
      <IntroComp
        v-else-if="status === 'INTRO'"
        :node="currentNode"
        @back="status = 'COVER'"
        @draw="handleDraw"
      />

      <!-- 状态 3: 答题页 -->
      <GameComp
        v-else-if="status === 'GAME'"
        :node="currentNode"
        :question="currentQuestion"
        :sub-step="subStep"
        :time-left="timeLeft"
        @back="status = 'INTRO'"
        @next="handleToAnalysis"
      />

      <!-- 状态 4: 答题图解页 -->
      <AnswerAnalysisComp
        v-else-if="status === 'ANSWER_ANALYSIS'"
        :question-id="currentQuestion.id"
        @back="status = 'GAME'"
        @next="handleNext"
      />
    </div>
  </div>
</template>

<style scoped>
.user-app-container {
  /* 基础背景色，防止图片加载失败时太突兀 */
  background-color: #eef7ff;
}
</style>
