<script setup lang="ts">
import type { ActivityNode, Question } from '../types'
import { computed } from 'vue'
import { uiTemplatesMapping } from '../data/mock'
import QuestionRenderer from './QuestionRenderer.vue'

const props = defineProps<{
  node: ActivityNode
  question: Question
  subStep: number
  timeLeft: number
}>()

defineEmits(['back', 'next'])

const formattedTime = computed(() => {
  const m = Math.floor(props.timeLeft / 60)
  const s = props.timeLeft % 60
  return `${m}:${s < 10 ? `0${s}` : s}`
})

// Mock chart data
const chartData = [
  { group: '第一组', total: 42, correct: 36 },
  { group: '第二组', total: 20, correct: 16 },
  { group: '第三组', total: 19, correct: 19 },
  { group: '第四组', total: 17, correct: 14 },
]
</script>

<template>
  <div class="relative h-full w-full flex flex-col items-center px-12 pt-28">
    <!-- 顶部栏 -->
    <div class="relative z-10 mb-8 w-full flex items-center justify-between">
      <!-- 返回按钮 -->
      <button
        class="border-2 border-red-400 rounded-full bg-white px-8 py-2 text-lg text-red-500 font-bold shadow-md transition hover:bg-red-50"
        @click="$emit('back')"
      >
        返回
      </button>

      <!-- 标题卷轴 -->
      <div class="absolute left-1/2 top-0 -translate-x-1/2">
        <div
          class="relative h-20 min-w-[300px] flex items-center justify-center border-2 border-orange-200 rounded-lg from-orange-100 to-orange-50 bg-gradient-to-b px-12 shadow-lg"
        >
          <div
            class="absolute top-1/2 h-24 w-6 border-r-4 border-yellow-600 rounded-l-md bg-teal-700 shadow-md -left-3 -translate-y-1/2"
          >
            <div class="absolute left-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
            <div class="absolute bottom-2 left-1 h-2 w-full rounded-full bg-teal-600/50" />
          </div>
          <div
            class="absolute top-1/2 h-24 w-6 border-l-4 border-yellow-600 rounded-r-md bg-teal-700 shadow-md -right-3 -translate-y-1/2"
          >
            <div class="absolute right-1 top-2 h-2 w-full rounded-full bg-teal-600/50" />
            <div class="absolute bottom-2 right-1 h-2 w-full rounded-full bg-teal-600/50" />
          </div>
          <h1 class="text-3xl text-gray-800 font-bold tracking-widest font-serif">
            {{ node.moduleName }}
            <span class="text-sm text-red-500 font-bold">（{{ uiTemplatesMapping[node.uiTemplate] }}）</span>
          </h1>
        </div>
      </div>

      <!-- 倒计时 -->
      <div class="border-2 border-red-400 rounded-full bg-white px-6 py-2 shadow-md">
        <span class="text-xl text-red-500 font-bold">倒计时 {{ formattedTime }}</span>
      </div>
    </div>

    <!-- 题目说明 -->
    <div class="m-14 text-2xl text-gray-800 font-medium">
      {{ node.description }}
    </div>

    <!-- 题目内容区域 -->
    <div class="flex-2 mb-4 w-full flex items-center justify-center">
      <QuestionRenderer
        :template="node.uiTemplate" :content="question.content"
        class="origin-center scale-150 transform"
      />
    </div>

    <!-- 隐藏的 Next 按钮 (点击题目区域或键盘操作，这里为了演示保留一个透明层或仅通过逻辑触发，或者暂时放一个不易察觉的按钮用于测试) -->
    <div class="absolute inset-0 z-0" @click="$emit('next')" /> <!-- 点击背景切换下一题，方便演示 -->

    <!-- 底部图表区域 -->
    <div
      class="relative z-20 mb-8 h-64 max-w-5xl w-full flex flex-col border-2 border-blue-300 rounded-xl bg-white/90 p-4 shadow-lg backdrop-blur"
    >
      <!-- 图表标题栏 -->
      <div class="mb-4 flex items-center justify-between px-2">
        <div class="flex items-center gap-2">
          <div class="h-3 w-3 rotate-45 bg-orange-400" />
          <span class="text-lg text-blue-800 font-bold">答题进度</span>
        </div>
        <div class="flex gap-6 text-sm">
          <div class="flex items-center gap-2">
            <div class="h-3 w-3 rounded-full bg-blue-400" />
            <span class="text-gray-600">答题数量</span>
          </div>
          <div class="flex items-center gap-2">
            <div class="h-3 w-3 rounded-full bg-orange-300" />
            <span class="text-gray-600">正确数量</span>
          </div>
        </div>
      </div>

      <!-- 柱状图 -->
      <div class="flex flex-1 items-end justify-around px-8 pb-2">
        <div v-for="item in chartData" :key="item.group" class="w-16 flex flex-col items-center gap-2">
          <div class="h-32 flex items-end gap-2">
            <!-- Blue Bar -->
            <div
              class="relative w-6 rounded-t-md from-blue-500 to-blue-300 bg-gradient-to-t transition-all duration-1000"
              :style="{ height: `${item.total * 2}px` }"
            >
              <span class="absolute left-1/2 text-blue-800 font-bold -top-6 -translate-x-1/2">{{ item.total }}</span>
            </div>
            <!-- Orange Bar -->
            <div
              class="relative w-6 rounded-t-md from-orange-400 to-orange-200 bg-gradient-to-t transition-all duration-1000"
              :style="{ height: `${item.correct * 2}px` }"
            >
              <span class="absolute left-1/2 text-orange-600 font-bold -top-6 -translate-x-1/2">{{ item.correct
              }}</span>
            </div>
          </div>
          <div class="mt-2 text-blue-800 font-bold">
            {{ item.group }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Question Renderer Override if needed */
:deep(.question-content) {
  font-size: 4rem;
  color: #ef4444;
  /* red-500 */
  font-weight: bold;
}
</style>
