<script setup lang="ts">
import { NButton, NGrid, NGridItem, NInputNumber } from 'naive-ui'
import { computed } from 'vue'

interface TeamData {
  id: number
  rank: number
  name: string
  group: string
  correctCount: string
  totalScore: number
  updateTime: string
  isExpanded: boolean
  scores: Record<string, number>
}

const props = defineProps<{
  team: TeamData
}>()

const emit = defineEmits<{
  (e: 'toggleExpand', team: TeamData): void
  (e: 'saveScores', team: TeamData): void
  (e: 'updateScore', team: TeamData, key: string, value: number | null): void
}>()

const rankStyle = computed(() => {
  const rank = props.team.rank
  if (rank === 1)
    return { backgroundColor: '#f59e0b', color: '#fff', border: 'none' }
  if (rank === 2)
    return { backgroundColor: '#9ca3af', color: '#fff', border: 'none' }
  if (rank === 3)
    return { backgroundColor: '#d97706', color: '#fff', border: 'none' }
  return {}
})
</script>

<template>
  <div
    class="border rounded-lg transition-all duration-200"
    :class="team.isExpanded ? 'border-primary bg-blue-50/10' : 'border-gray-100 hover:border-gray-300'"
  >
    <!-- Main Row -->
    <div class="grid grid-cols-[80px_200px_150px_150px_150px_200px_auto] items-center gap-4 px-4 py-4">
      <!-- Rank -->
      <div>
        <div
          class="h-8 w-8 flex items-center justify-center rounded-full text-14px font-bold"
          :style="rankStyle"
        >
          {{ team.rank }}
        </div>
      </div>

      <!-- Name -->
      <div class="text-15px font-bold">
        {{ team.name }}
      </div>

      <!-- Group -->
      <div class="text-gray-500">
        {{ team.group }}
      </div>

      <!-- Correct Count -->
      <div class="font-bold font-mono">
        {{ team.correctCount }}
      </div>

      <!-- Score -->
      <div class="text-16px text-primary font-bold">
        {{ team.totalScore }} Pts
      </div>

      <!-- Time -->
      <div class="text-13px text-gray-400">
        {{ team.updateTime }}
      </div>

      <!-- Action -->
      <div class="text-right">
        <NButton v-if="team.isExpanded" type="primary" size="small" @click="emit('saveScores', team)">
          完成核对
        </NButton>
        <NButton v-else size="small" @click="emit('toggleExpand', team)">
          详情/修正分数
        </NButton>
      </div>
    </div>

    <!-- Expanded Content (Score Grid) -->
    <div v-if="team.isExpanded" class="mx-1 mb-1 border-t border-gray-100 rounded-b-lg bg-white px-6 pb-6 pt-2">
      <div class="mb-4 text-13px text-gray-500 font-bold uppercase">
        Question Breakdown For {{ team.name }}
      </div>

      <NGrid :x-gap="16" :y-gap="16" :cols="5">
        <NGridItem v-for="i in 15" :key="i">
          <div class="border rounded bg-white p-3">
            <div class="mb-2 flex justify-between text-12px text-gray-400">
              <span>Q{{ i }} SCORE</span>
              <span>/ 10</span>
            </div>
            <NInputNumber
              :value="team.scores[`q${i}`]" :min="0" :max="10" button-placement="both"
              class="text-center text-primary font-bold"
              @update:value="(val) => emit('updateScore', team, `q${i}`, val)"
            />
          </div>
        </NGridItem>
      </NGrid>

      <div class="mt-6 flex justify-end">
        <NButton type="primary" class="w-120px" @click="emit('saveScores', team)">
          保存变动并收起
        </NButton>
      </div>
    </div>
  </div>
</template>

<style scoped>
:deep(.n-input-number .n-input__input-el) {
  text-align: center;
  font-weight: bold;
  color: var(--primary-color);
}
</style>
