<script setup lang="ts">
import { NButton, NGrid, NGridItem, NInput, NUpload } from 'naive-ui'
import { useHardwareBinding, useHardwareExcel, useQuickGenerate } from './useHardwareBinding'

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

const { hardwareGroups, validate, reset } = useHardwareBinding(props)
const { handleDownloadTemplate, handleUpload } = useHardwareExcel(props, hardwareGroups)
const { quickGenerate } = useQuickGenerate(props, hardwareGroups)

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

<template>
  <div class="h-full">
    <div class="mb-8 flex items-center justify-between">
      <div>
        <h2 class="mb-2 text-3xl text-gray-800 font-bold">
          点阵笔硬件绑定
        </h2>
        <p class="text-gray-400">
          请将点阵笔序列号 (SN) 绑定至对应队伍。建议使用扫码枪快速录入。
        </p>
      </div>
      <div class="flex gap-4">
        <NButton secondary type="primary" @click="handleDownloadTemplate">
          <template #icon>
            <icon-ic-baseline-download class="text-icon" />
          </template>
          下载模板
        </NButton>
        <NUpload :show-file-list="false" :custom-request="handleUpload" accept=".xlsx, .xls">
          <NButton type="primary" color="#1a202c">
            <template #icon>
              <icon-ic-baseline-upload class="text-icon" />
            </template>
            导入配置
          </NButton>
        </NUpload>
        <NButton secondary type="success" @click="quickGenerate('order')">
          <template #icon>
            <icon-ic-baseline-settings-backup-restore class="text-icon" />
          </template>
          快速顺序生成
        </NButton>
        <NButton type="info" @click="quickGenerate('random')">
          <template #icon>
            <icon-ic-baseline-settings-backup-restore class="text-icon" />
          </template>
          快速随机生成
        </NButton>
      </div>
    </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-4">
          <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" /> -->
              <icon-ic-baseline-edit class="text-xl text-blue-500" />
            </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>
