<script setup lang="ts">
import { NGrid, NGridItem, NInput } from 'naive-ui'
import { ref, watch } from 'vue'

const props = defineProps<{
  config?: {
    groupCount: number
    teamCount: number
  }
}>()

interface HardwareGroup {
  groupId: string
  pens: Array<{ label: string, sn: string, online: boolean }>
}

const hardwareGroups = ref<HardwareGroup[]>([])

function generateHardwareGroups() {
  if (!props.config)
    return

  const { groupCount, teamCount } = props.config
  if (!groupCount || groupCount <= 0)
    return

  const totalGroups = groupCount
  const newGroups: HardwareGroup[] = []

  for (let i = 1; i <= totalGroups; i++) {
    const idStr = String(i).padStart(2, '0')
    const currentTeamCount = teamCount

    const pens = []
    for (let j = 1; j <= currentTeamCount; j++) {
      pens.push({
        label: `T${j}`,
        sn: '',
        online: false, // 模拟初始状态
      })
    }

    newGroups.push({
      groupId: idStr,
      pens,
    })
  }
  hardwareGroups.value = newGroups
}

watch(() => props.config, generateHardwareGroups, { deep: true, immediate: true })

function validate() {
  // 暂时不需要强制校验硬件绑定，允许跳过
  return true
}

defineExpose({ validate })
</script>

<template>
  <div class="h-full">
    <div class="mb-8">
      <h2 class="mb-2 text-3xl text-gray-800 font-bold">
        点阵笔硬件绑定
      </h2>
      <p class="text-gray-400">
        请将点阵笔序列号 (SN) 绑定至对应队伍。建议使用扫码枪快速录入。
      </p>
    </div>

    <!-- 状态提示栏 -->
    <div class="mb-8 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
      <div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" />
      <div>
        <div class="text-sm text-indigo-900 font-bold">
          自动发现模式已开启
        </div>
        <div class="mt-1 text-xs text-indigo-400">
          系统将自动扫描正在书写的点阵笔并提示绑定。请确保基站已通电。
        </div>
      </div>
    </div>

    <!-- 硬件状态卡片 -->
    <NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
      <NGridItem v-for="(group, idx) in hardwareGroups" :key="idx">
        <div class="border border-gray-100 rounded-2xl bg-[#F8FAFC] p-6">
          <div class="mb-4 text-gray-800 font-bold">
            硬件绑定: 第 {{ idx + 1 }} 分组
          </div>

          <div class="flex flex-col gap-3">
            <div v-for="pen in group.pens" :key="pen.label" class="flex items-center gap-3 rounded-lg bg-white p-2">
              <div class="w-8 text-center text-gray-400 font-bold">
                {{ pen.label }}
              </div>
              <div class="flex-1">
                <NInput
                  v-model:value="pen.sn" size="small" placeholder="点阵笔 SN" class="bg-transparent"
                  :bordered="false"
                />
              </div>
              <!-- 扫描图标 -->
              <div class="i-carbon-qr-code text-gray-300" />
            </div>
          </div>
        </div>
      </NGridItem>
    </NGrid>
  </div>
</template>

<style scoped>
:deep(.n-input) {
  background-color: transparent;
}

:deep(.n-input__input-el) {
  font-weight: bold;
  color: #4b5563;
}
</style>
