<script setup lang="ts">
import { ref } from 'vue'

defineProps<{
  questionId?: string
}>()

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

const zoomedImage = ref<string | null>(null)

// Mock team data
const teams = ref([
  {
    id: 1,
    name: '第一队',
    writtenCount: 16,
    correctCount: 13,
    score: 13,
    manualScore: null as number | null,
    image: 'https://via.placeholder.com/300x400?text=Team+1+Answer', // Placeholder for now
  },
  {
    id: 2,
    name: '第二队',
    writtenCount: 15,
    correctCount: 12,
    score: 12,
    manualScore: null as number | null,
    image: 'https://via.placeholder.com/300x400?text=Team+2+Answer',
  },
  {
    id: 3,
    name: '第三队',
    writtenCount: 18,
    correctCount: 15,
    score: 15,
    manualScore: null as number | null,
    image: 'https://via.placeholder.com/300x400?text=Team+3+Answer',
  },
  {
    id: 4,
    name: '第四队',
    writtenCount: 14,
    correctCount: 10,
    score: 10,
    manualScore: null as number | null,
    image: 'https://via.placeholder.com/300x400?text=Team+4+Answer',
  },
])

function handleZoom(img: string) {
  zoomedImage.value = img
}
</script>

<template>
  <div class="relative h-full w-full flex flex-col items-center px-12 pt-28">
    <!-- Top Bar -->
    <div class="relative z-10 mb-6 w-full flex items-center justify-between">
      <!-- Back Button -->
      <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>

      <!-- Title Scroll -->
      <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">
            答题图解
          </h1>
        </div>
      </div>

      <!-- Next Button -->
      <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('next')"
      >
        下一题
      </button>
    </div>

    <!-- Content -->
    <div class="w-full flex flex-col flex-1 overflow-hidden">
      <div class="mb-2 text-xl text-red-600 font-bold">
        备注：由AI模型评判
      </div>

      <div class="grid grid-cols-4 h-full gap-6 pb-8">
        <div v-for="team in teams" :key="team.id" class="flex flex-col border-2 border-gray-200 rounded-xl bg-white/90 p-4 shadow-sm">
          <div class="mb-2 text-xl text-gray-800 font-bold">
            {{ team.name }}
          </div>

          <!-- Answer Image Area -->
          <div class="relative mb-4 flex-1 cursor-zoom-in overflow-hidden border border-gray-300 rounded bg-gray-50" @click="handleZoom(team.image)">
            <!-- Grid Background Simulation -->
            <div class="pointer-events-none absolute inset-0 grid grid-cols-8 gap-px bg-gray-200 opacity-20">
              <div v-for="n in 64" :key="n" class="bg-white" />
            </div>
            <!-- Simulated Handwriting/Content -->
            <div class="absolute inset-0 flex items-center justify-center text-gray-400">
              (点击放大查看详情)
            </div>
          </div>

          <!-- Stats & Score -->
          <div class="flex flex-col gap-2">
            <div class="text-sm text-gray-700 font-medium">
              写了数量{{ team.writtenCount }}，正确{{ team.correctCount }}个，积分{{ team.score }}
            </div>

            <div class="flex items-center justify-between">
              <span class="text-red-500 font-bold">评委当场评</span>
            </div>

            <div class="relative">
              <input
                v-model="team.manualScore"
                type="number"
                class="w-full border border-gray-300 rounded px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
                placeholder="留个输入框，修改正确积分"
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Zoom Modal -->
    <div v-if="zoomedImage" class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm" @click="zoomedImage = null">
      <div class="relative max-h-[90vh] max-w-[90vw] p-4">
        <img :src="zoomedImage" class="max-h-full max-w-full rounded bg-white shadow-2xl" alt="Zoomed Answer">
        <div class="absolute bottom-4 left-1/2 text-sm text-white/80 -translate-x-1/2">
          点击任意处关闭
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Custom Scrollbar for content if needed */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
</style>
