<script lang="ts" setup>
import { Icon } from '@iconify/vue'
import { NCard, NImage, NSpace } from 'naive-ui'
import { ref, watch } from 'vue'

interface AnswerItem {
  id: number
  label?: string
  imageUrl: string // 在真实场景中是学生答题截图的URL
  status: 'correct' | 'wrong' // 初始状态由大模型判定
  type: 'grid' | 'line' // 'grid'对应方格题（如汉字），'line'对应横线题（如词语）
}

interface QuestionGroup {
  id: number
  title: string
  items: AnswerItem[]
  layout: 'grid' | 'list' // 布局方式
}

interface Round {
  id: number
  title: string
  subTitle?: string
  groups: QuestionGroup[]
}

// 模拟数据
const rounds = ref<Round[]>([
  {
    id: 1,
    title: '第一轮',
    subTitle: '汉字大比拼',
    groups: [
      {
        id: 101,
        title: '汉字听写 1',
        layout: 'grid',
        items: [
          { id: 1, label: '1', imageUrl: 'https://placehold.co/100x100?text=汉', status: 'correct', type: 'grid' },
          { id: 2, label: '2', imageUrl: 'https://placehold.co/100x100?text=字', status: 'correct', type: 'grid' },
          { id: 3, label: '3', imageUrl: 'https://placehold.co/100x100?text=听', status: 'correct', type: 'grid' },
          { id: 4, label: '4', imageUrl: 'https://placehold.co/100x100?text=写', status: 'correct', type: 'grid' },
          { id: 5, label: '5', imageUrl: 'https://placehold.co/100x100?text=一', status: 'correct', type: 'grid' },
        ],
      },
      {
        id: 102,
        title: '汉字听写 2',
        layout: 'grid',
        items: [
          { id: 6, label: '1', imageUrl: 'https://placehold.co/100x100?text=错', status: 'wrong', type: 'grid' },
          { id: 7, label: '2', imageUrl: 'https://placehold.co/100x100?text=误', status: 'wrong', type: 'grid' },
          { id: 8, label: '3', imageUrl: 'https://placehold.co/100x100?text=示', status: 'wrong', type: 'grid' },
          { id: 9, label: '4', imageUrl: 'https://placehold.co/100x100?text=例', status: 'wrong', type: 'grid' },
          { id: 10, label: '5', imageUrl: 'https://placehold.co/100x100?text=!', status: 'wrong', type: 'grid' },
        ],
      },
      {
        id: 103,
        title: '汉字加一加',
        layout: 'grid',
        items: Array.from({ length: 10 }).map((_, i) => ({
          id: 20 + i,
          imageUrl: `https://placehold.co/100x100?text=${i + 1}`,
          status: i === 4 ? 'wrong' : 'correct', // 第5个模拟错误
          type: 'grid',
        })),
      },
    ],
  },
  {
    id: 2,
    title: '第一轮',
    subTitle: '词语大比拼',
    groups: [
      {
        id: 201,
        title: '词语听写',
        layout: 'list',
        items: [
          { id: 301, label: '1.', imageUrl: 'https://placehold.co/400x60?text=词语答案一', status: 'correct', type: 'line' },
          { id: 302, label: '2.', imageUrl: 'https://placehold.co/400x60?text=词语答案二', status: 'correct', type: 'line' },
        ],
      },
      {
        id: 202,
        title: '成语写一写 1',
        layout: 'list',
        items: [
          { id: 303, label: '1.', imageUrl: 'https://placehold.co/200x60?text=成语一', status: 'correct', type: 'line' },
          { id: 304, label: '2.', imageUrl: 'https://placehold.co/200x60?text=成语二', status: 'wrong', type: 'line' },
          { id: 305, label: '3.', imageUrl: 'https://placehold.co/200x60?text=成语三', status: 'wrong', type: 'line' },
        ],
      },
      {
        id: 203,
        title: '成语写一写 2',
        layout: 'list',
        items: [
          { id: 306, label: '1.', imageUrl: 'https://placehold.co/600x60?text=长成语答案测试', status: 'correct', type: 'line' },
          { id: 307, label: '2.', imageUrl: 'https://placehold.co/600x60?text=另一个答案', status: 'correct', type: 'line' },
        ],
      },
    ],
  },
])

// 切换状态逻辑：点击后 Correct <-> Wrong
function toggleStatus(item: AnswerItem) {
  item.status = item.status === 'correct' ? 'wrong' : 'correct'
}

watch(() => rounds.value, (val) => {
  // eslint-disable-next-line no-console
  console.log(val, 'v')
}, {
  deep: true,
})
</script>

<template>
  <div class="min-h-screen bg-gray-50 p-4">
    <NSpace vertical size="large">
      <NCard v-for="round in rounds" :key="round.id" :title="`${round.title} · ${round.subTitle}`" size="huge">
        <div class="flex flex-col gap-8">
          <div v-for="group in round.groups" :key="group.id">
            <h3 class="mb-4 text-lg text-gray-700 font-medium">
              {{ group.title }}
            </h3>

            <!-- Grid Layout (Grid Items) -->
            <div v-if="group.layout === 'grid'" class="flex flex-wrap gap-4">
              <div
                v-for="item in group.items"
                :key="item.id"
                class="group relative cursor-pointer transition-all duration-200"
                @click="toggleStatus(item)"
              >
                <!-- Image Container with Status Border -->
                <div
                  class="relative overflow-hidden border-2 rounded-md border-dashed bg-white p-1"
                  :class="[
                    item.status === 'correct' ? 'border-green-500' : 'border-red-500',
                  ]"
                >
                  <NImage
                    :src="item.imageUrl"
                    preview-disabled
                    object-fit="contain"
                    :class="group.layout === 'grid' ? 'w-24 h-24' : ''"
                  />

                  <!-- Status Icon Overlay -->
                  <div class="absolute z-10 rounded-full bg-white -right-3 -top-3">
                    <Icon
                      v-if="item.status === 'correct'"
                      icon="mdi:check-circle"
                      class="text-2xl text-green-500"
                    />
                    <Icon
                      v-else
                      icon="mdi:close-circle"
                      class="text-2xl text-red-500"
                    />
                  </div>
                </div>

                <!-- Label if exists -->
                <div v-if="item.label" class="mt-1 text-center text-sm text-gray-500">
                  {{ item.label }}
                </div>
              </div>
            </div>

            <!-- List Layout (Line Items) -->
            <div v-else class="flex flex-col gap-4">
              <!-- Using a grid for lines to handle multiple per row if needed, or just flex-wrap -->
              <div class="flex flex-wrap gap-x-8 gap-y-4">
                <div
                  v-for="item in group.items"
                  :key="item.id"
                  class="relative cursor-pointer transition-all duration-200"
                  @click="toggleStatus(item)"
                >
                  <div class="flex items-center gap-2">
                    <span v-if="item.label" class="w-6 text-gray-600 font-medium">{{ item.label }}</span>

                    <div
                      class="relative overflow-hidden border-2 rounded-md border-dashed bg-white px-2 py-1"
                      :class="[
                        item.status === 'correct' ? 'border-green-500' : 'border-red-500',
                      ]"
                    >
                      <NImage
                        :src="item.imageUrl"
                        preview-disabled
                        object-fit="contain"
                        height="50"
                      />

                      <!-- Status Icon Overlay -->
                      <div class="absolute z-10 rounded-full bg-white shadow-sm -right-3 -top-3">
                        <Icon
                          v-if="item.status === 'correct'"
                          icon="mdi:check-circle"
                          class="text-2xl text-green-500"
                        />
                        <Icon
                          v-else
                          icon="mdi:close-circle"
                          class="text-2xl text-red-500"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </NCard>
    </NSpace>
  </div>
</template>

<style scoped>
/* Ensure icons are visible and positioned correctly */
</style>
