<script setup lang="ts">
import { NButton, NForm, NFormItem, NInput, NInputNumber, NModal, NSelect } from 'naive-ui'
import { ref, watch } from 'vue'
import { useQuestionConfig } from './useQuestionConfig'

const props = defineProps<{
  modelValue: {
    rounds: Array<{
      id: string
      name: string
      questions: Array<{ value: string | null, score: number, time: number }>
    }>
  }
}>()

const {
  getRoundScore,
  getRoundTime,
  totalStats,
  questionOptions,
  scoreOptions,
  timeOptions,
  addRound,
  removeRound,
  addQuestion,
  removeQuestion,
  validate,
  reset,
} = useQuestionConfig(props)

// 模态框控制
const showAddModal = ref(false)
const newRoundForm = ref({
  name: '',
  count: 10,
})

function handleOpenAddModal() {
  newRoundForm.value = {
    name: `第${(props.modelValue?.rounds?.length || 0) + 1}轮 汉字听写`,
    count: 10,
  }
  showAddModal.value = true
}

function handleConfirmAdd() {
  if (!newRoundForm.value.name) {
    window.$message?.warning('请输入环节名称')
    return
  }
  addRound(newRoundForm.value.name, newRoundForm.value.count)
  showAddModal.value = false
}

// 初始化默认数据
watch(() => props.modelValue, () => {
  // 如果没有任何轮次，显示空状态，不再自动添加
  // 保持空状态以便用户看到"暂无配置题包"的界面
}, { immediate: true })

defineExpose({ validate, reset })
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- 顶部标题栏 -->
    <div class="mb-8 flex items-center justify-between">
      <div>
        <div class="text-2xl text-gray-800 font-bold tracking-tight">
          赛程题包配置
        </div>
        <div class="mt-2 flex items-center gap-4 text-sm text-gray-500">
          <span>您可以为比赛添加多个阶段的题包，并自定义题目、分值与限时。</span>
          <div v-if="totalStats.count > 0" class="flex items-center gap-3 border border-gray-100 rounded-lg bg-gray-50 px-3 py-1 text-xs font-bold">
            <div class="flex items-center gap-1">
              <span class="text-gray-400">总题数</span>
              <span class="text-sm text-gray-700">{{ totalStats.count }}</span>
            </div>
            <div class="h-3 w-[1px] bg-gray-200" />
            <div class="flex items-center gap-1">
              <span class="text-gray-400">总分</span>
              <span class="text-sm text-orange-500">{{ totalStats.score }}</span>
            </div>
            <div class="h-3 w-[1px] bg-gray-200" />
            <div class="flex items-center gap-1">
              <span class="text-gray-400">总时长</span>
              <span class="text-sm text-blue-500">{{ totalStats.time }}s</span>
            </div>
          </div>
        </div>
      </div>
      <NButton type="primary" class="shadow-blue-500/20 shadow-lg !h-10 !rounded-lg !px-6 !font-bold" @click="handleOpenAddModal">
        <template #icon>
          <icon-ic-round-plus />
        </template>
        新增赛程题包
      </NButton>
    </div>

    <!-- 空状态 -->
    <div v-if="!props.modelValue?.rounds?.length" class="flex flex-col flex-1 items-center justify-center border-2 border-gray-100 rounded-2xl border-dashed bg-gray-50/30">
      <div class="h-34 w-34 flex items-center justify-center rounded-3xl bg-gray-100 text-gray-300">
        <icon-ic-outline-folder-off class="text-5xl" />
      </div>
      <div class="mt-6 text-lg text-gray-400 font-bold">
        暂无配置题包
      </div>
      <div class="mt-2 text-sm text-gray-500">
        请点击右上角按钮开始添加比赛环节
      </div>
    </div>

    <!-- 列表内容 -->
    <div v-else class="flex flex-col gap-6 pb-10">
      <div v-for="(round, roundIndex) in props.modelValue?.rounds" :key="round.id" class="group relative overflow-hidden border border-gray-100 rounded-2xl bg-white p-1 shadow-sm transition-all hover:shadow-md">
        <!-- 侧边装饰条 -->
        <div class="absolute bottom-0 left-0 top-0 w-1.5 bg-blue-500" />

        <div class="p-6 pl-8">
          <!-- 头部信息 -->
          <div class="mb-4 flex items-center justify-between">
            <div class="flex items-center gap-4">
              <div class="h-8 w-1.5 rounded-full bg-blue-500" />
              <div class="flex items-center gap-3">
                <NInput
                  v-model:value="round.name"
                  placeholder="请输入环节名称"
                  :bordered="false"
                  class="border transition-all !w-80 !border-transparent !rounded-lg !bg-transparent !text-xl !font-bold focus-within:shadow-sm focus-within:!border-blue-500 hover:!border-gray-200 focus-within:!bg-white"
                />
                <div class="flex items-center gap-2">
                  <div class="flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-500 font-bold">
                    <icon-ic-outline-format-list-numbered class="text-sm" />
                    {{ round.questions.length }} 题
                  </div>
                  <div class="flex items-center gap-1 border border-orange-100 rounded-full bg-orange-50 px-3 py-1 text-xs text-orange-500 font-bold">
                    <icon-ic-round-star-border class="text-sm" />
                    {{ getRoundScore(roundIndex) }} 分
                  </div>
                  <div class="flex items-center gap-1 border border-blue-100 rounded-full bg-blue-50 px-3 py-1 text-xs text-blue-500 font-bold">
                    <icon-ic-outline-access-time class="text-sm" />
                    {{ getRoundTime(roundIndex) }} 秒
                  </div>
                </div>
              </div>
            </div>

            <div class="flex items-center gap-3">
              <NButton secondary circle class="!text-gray-400 hover:!bg-blue-50 hover:!text-blue-500" @click="addQuestion(roundIndex)">
                <template #icon>
                  <icon-ic-round-plus class="!text-xl" />
                </template>
              </NButton>
              <NButton secondary circle class="!text-gray-400 hover:!bg-red-50 hover:!text-red-500" @click="removeRound(roundIndex)">
                <template #icon>
                  <icon-ic-outline-delete class="!text-xl" />
                </template>
              </NButton>
            </div>
          </div>

          <!-- 题目列表 -->
          <div class="flex flex-col gap-3">
            <div
              v-for="(item, qIdx) in round.questions"
              :key="qIdx"
              class="group/item flex items-center gap-4 border border-gray-100 rounded-xl bg-white p-2 px-4 transition-all hover:border-blue-200 hover:shadow-sm"
            >
              <span class="w-8 flex-shrink-0 text-center text-sm text-gray-300 font-bold transition-colors group-hover/item:text-blue-500">{{ String(qIdx + 1).padStart(2, '0') }}</span>

              <!-- 题型 -->
              <div class="flex-1">
                <NSelect
                  v-model:value="item.value"
                  :options="questionOptions"
                  placeholder="请选择题目类型..."
                  :bordered="false"
                  class="font-medium"
                />
              </div>

              <!-- 分值 -->
              <div class="flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
                <span class="text-xs text-gray-400 font-bold tracking-wider uppercase">PTS</span>
                <NSelect
                  v-model:value="item.score"
                  :options="scoreOptions"
                  class="w-26 !bg-transparent"
                  size="small"
                  :bordered="false"
                />
              </div>

              <!-- 时间 -->
              <div class="flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
                <icon-ic-outline-timer class="text-gray-400" />
                <NSelect
                  v-model:value="item.time"
                  :options="timeOptions"
                  class="w-26 !bg-transparent"
                  size="small"
                  :bordered="false"
                />
                <span class="text-xs text-gray-400 font-bold">S</span>
              </div>

              <!-- 删除按钮 -->
              <NButton text class="ml-2 opacity-0 transition-opacity !text-gray-300 group-hover/item:opacity-100 hover:!text-red-500" @click="removeQuestion(roundIndex, qIdx)">
                <icon-ic-outline-delete class="!text-xl" />
              </NButton>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增题包弹窗 -->
    <NModal v-model:show="showAddModal" transform-origin="center">
      <div class="w-[480px] rounded-2xl bg-white p-8 shadow-2xl">
        <div class="mb-8 flex flex-col items-center gap-4 text-center">
          <div class="h-14 w-14 flex items-center justify-center rounded-2xl bg-blue-50 text-blue-500">
            <icon-ic-round-library-add class="text-3xl" />
          </div>
          <div>
            <div class="text-xl text-gray-800 font-bold">
              新建环节题包
            </div>
            <div class="mt-1 text-sm text-gray-500">
              请输入环节名称与题目预设数量
            </div>
          </div>
        </div>

        <NForm size="large">
          <NFormItem label="环节/题包名称">
            <NInput v-model:value="newRoundForm.name" placeholder="例如：第一轮 汉字听写" />
          </NFormItem>
          <NFormItem label="初始化题目数量">
            <NInputNumber v-model:value="newRoundForm.count" :min="1" :max="50" class="w-full" />
          </NFormItem>
        </NForm>

        <NButton type="primary" block size="large" class="mt-4 !h-12 !rounded-xl !text-lg !font-bold" @click="handleConfirmAdd">
          生成题包卡片
        </NButton>
      </div>
    </NModal>
  </div>
</template>
