<script setup lang="ts">
import { ref } from 'vue'
import {
  Info,
  Server,
  CheckCircle2,
  AlertTriangle,
  Layers,
  Plus,
  Trash2,
  GripVertical,
} from 'lucide-vue-next'

interface ChecklistItem {
  id: number
  text: string
  type: 'text' | 'bool'
  required: boolean
  note: string
}

interface ChecklistData {
  [key: string]: ChecklistItem[]
}

const activeTab = ref('GD30')

const stats = [
  { label: '型号总数', value: '12', icon: Server, color: '#1890FF' },
  { label: '在产型号', value: '8', icon: CheckCircle2, color: '#52C41A' },
  { label: '停产型号', value: '3', icon: AlertTriangle, color: '#FAAD14' },
  { label: '关联设备总数', value: '5,234', icon: Layers, color: '#722ED1' },
]

const modelData = [
  {
    name: 'GD30 高密度电法仪',
    code: 'GD30-2024',
    authFile: 'auth_gd30_v2.3.lic',
    configFile: 'config_gd30_v1.5.json',
    firmwareVersion: 'v2.3.5',
    deviceCount: 2456,
    status: '在产' as const,
  },
  {
    name: 'GT20 瞬变电磁仪',
    code: 'GT20-2023',
    authFile: 'auth_gt20_v1.8.lic',
    configFile: 'config_gt20_v1.2.json',
    firmwareVersion: 'v1.8.2',
    deviceCount: 1823,
    status: '在产' as const,
  },
  {
    name: 'GM10 大地电磁仪',
    code: 'GM10-2022',
    authFile: 'auth_gm10_v1.5.lic',
    configFile: 'config_gm10_v1.0.json',
    firmwareVersion: 'v1.5.1',
    deviceCount: 955,
    status: '停产' as const,
  },
]

const checklistData = ref<ChecklistData>({
  GD30: [
    { id: 1, text: '主板SN扫码绑定主机', type: 'text', required: true, note: '唯一SN' },
    { id: 2, text: '采集板SN录入', type: 'text', required: true, note: '1/6/12通道' },
    { id: 3, text: '发射板SN录入', type: 'text', required: true, note: '' },
    { id: 4, text: '内置升压模块检查', type: 'bool', required: true, note: '' },
    { id: 5, text: 'GPS/北斗检测', type: 'bool', required: true, note: '授时正常' },
    { id: 6, text: '电池安装与容量检测', type: 'bool', required: true, note: '' },
    { id: 7, text: '输入电压12~48V测试', type: 'bool', required: true, note: '' },
    { id: 8, text: '接收电压精度校验', type: 'bool', required: true, note: '按型号量程' },
    { id: 9, text: '自电补偿±10V', type: 'bool', required: true, note: '' },
    { id: 10, text: '输入阻抗≥100MΩ', type: 'bool', required: true, note: '' },
    { id: 11, text: '恒压/恒流模式', type: 'bool', required: true, note: '' },
    { id: 12, text: '最大发射电流达标', type: 'bool', required: true, note: '6A/10A/10A' },
    { id: 13, text: '脉冲宽度配置', type: 'bool', required: true, note: '' },
    { id: 14, text: '调级输出电压', type: 'bool', required: true, note: '100~600V' },
    { id: 15, text: '系统启动正常', type: 'bool', required: true, note: '' },
    { id: 16, text: '采集APP连接', type: 'bool', required: true, note: '' },
    { id: 17, text: 'Geometa账号配置', type: 'bool', required: true, note: '' },
    { id: 18, text: '授权文件校验', type: 'bool', required: true, note: '' },
    { id: 19, text: 'USB/WiFi/网口/SD', type: 'bool', required: true, note: '' },
    { id: 20, text: 'IP66防护与密封', type: 'bool', required: true, note: '' },
    { id: 21, text: '过流/过压/短路保护', type: 'bool', required: true, note: '' },
    { id: 22, text: '出厂装箱核对', type: 'bool', required: true, note: '' },
  ],
  GT20: [
    { id: 1, text: '主板SN扫码绑定主机', type: 'text', required: true, note: '唯一SN' },
    { id: 2, text: '采集板SN录入', type: 'text', required: true, note: '' },
    { id: 3, text: 'GPS/北斗检测', type: 'bool', required: true, note: '授时正常' },
    { id: 4, text: '系统启动正常', type: 'bool', required: true, note: '' },
    { id: 5, text: '整体功能测试', type: 'bool', required: true, note: '' },
  ],
  GM10: [
    { id: 1, text: '主板SN扫码绑定主机', type: 'text', required: true, note: '唯一SN' },
    { id: 2, text: '传感器模块连接', type: 'bool', required: true, note: '' },
    { id: 3, text: '接口板安装', type: 'bool', required: true, note: '' },
    { id: 4, text: '线缆整理', type: 'bool', required: true, note: '' },
    { id: 5, text: '系统初始化检测', type: 'bool', required: true, note: '' },
  ],
})

const editingCell = ref<{ model: string; id: number; field: string } | null>(null)

const updateChecklistItem = (model: string, id: number, field: keyof ChecklistItem, value: string | boolean) => {
  checklistData.value = {
    ...checklistData.value,
    [model]: checklistData.value[model].map((item: ChecklistItem) =>
      item.id === id ? { ...item, [field]: value } : item
    ),
  }
}

const addChecklistItem = (model: string) => {
  const items = checklistData.value[model]
  const newId = items.length > 0 ? Math.max(...items.map((i: ChecklistItem) => i.id)) + 1 : 1
  checklistData.value = {
    ...checklistData.value,
    [model]: [...items, { id: newId, text: '新检查项', type: 'bool' as const, required: true, note: '' }],
  }
}

const deleteChecklistItem = (model: string, id: number) => {
  checklistData.value = {
    ...checklistData.value,
    [model]: checklistData.value[model].filter((item: ChecklistItem) => item.id !== id).map((item: ChecklistItem, i: number) => ({ ...item, id: i + 1 })),
  }
}

const handleEditBlur = (e: Event, model: string, id: number) => {
  updateChecklistItem(model, id, 'text', (e.target as HTMLInputElement).value)
  editingCell.value = null
}

const handleEditKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Enter') (e.target as HTMLInputElement).blur()
}

const boardVersionData = [
  {
    boardType: '主板',
    requiredVersion: 'v2.3.x',
    validationRule: '版本号前缀必须为 v2.3',
    status: 'active',
  },
  {
    boardType: '采集板',
    requiredVersion: 'v1.8.x',
    validationRule: '版本号前缀必须为 v1.8',
    status: 'active',
  },
  {
    boardType: '发射板',
    requiredVersion: 'v1.5.x',
    validationRule: '版本号前缀必须为 v1.5',
    status: 'active',
  },
]
</script>

<template>
  <div class="p-6">
    <!-- Page Header -->
    <div class="mb-6">
      <h2 class="text-2xl font-semibold mb-1">设备型号管理</h2>
      <p class="text-sm" :style="{ color: 'rgba(0, 0, 0, 0.45)' }">管理设备型号及相关配置</p>
    </div>

    <!-- Info Banner -->
    <div
      class="mb-6 p-4 rounded-lg flex items-start gap-3"
      :style="{ backgroundColor: '#E6F7FF', border: '1px solid #91D5FF' }"
    >
      <Info :size="20" :style="{ color: '#1890FF', flexShrink: 0, marginTop: '2px' }" />
      <div :style="{ color: '#0050B3' }">
        型号管理是平台核心枢纽，每个型号关联授权文件、配置文件和固件版本
      </div>
    </div>

    <!-- Stat Cards -->
    <div class="grid grid-cols-4 gap-6 mb-6">
      <div
        v-for="(stat, index) in stats"
        :key="index"
        class="bg-white p-6 rounded-lg"
        :style="{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }"
      >
        <div class="flex items-center justify-between">
          <div>
            <div class="text-sm mb-2" :style="{ color: 'rgba(0, 0, 0, 0.65)' }">{{ stat.label }}</div>
            <div class="text-3xl font-semibold">{{ stat.value }}</div>
          </div>
          <div
            class="w-12 h-12 rounded-lg flex items-center justify-center"
            :style="{ backgroundColor: `${stat.color}15` }"
          >
            <component :is="stat.icon" :size="24" :style="{ color: stat.color }" />
          </div>
        </div>
      </div>
    </div>

    <!-- Model Table -->
    <div class="bg-white rounded-lg mb-6" :style="{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }">
      <div class="p-6 border-b" :style="{ borderColor: '#F0F0F0' }">
        <div class="flex items-center justify-between">
          <h3 class="text-lg font-semibold">型号列表</h3>
          <button
            class="px-4 py-2 rounded text-white"
            :style="{ backgroundColor: '#1890FF' }"
          >
            新增型号
          </button>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead :style="{ backgroundColor: '#FAFAFA' }">
            <tr>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">型号名称</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">编码</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">授权文件</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">配置文件</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">固件版本</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">设备数</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">状态</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(model, index) in modelData"
              :key="index"
              class="border-b"
              :style="{ borderColor: '#F0F0F0' }"
            >
              <td class="px-6 py-4">{{ model.name }}</td>
              <td class="px-6 py-4" :style="{ color: 'rgba(0, 0, 0, 0.65)' }">{{ model.code }}</td>
              <td class="px-6 py-4">
                <router-link to="/licenses" class="text-sm" style="color: #1890FF">{{ model.authFile }}</router-link>
              </td>
              <td class="px-6 py-4">
                <router-link to="/config-files" class="text-sm" style="color: #1890FF">{{ model.configFile }}</router-link>
              </td>
              <td class="px-6 py-4">
                <router-link to="/firmware" class="text-sm" style="color: #1890FF">{{ model.firmwareVersion }}</router-link>
              </td>
              <td class="px-6 py-4">{{ model.deviceCount.toLocaleString() }}</td>
              <td class="px-6 py-4">
                <span
                  class="px-2 py-1 rounded text-xs"
                  :style="{
                    backgroundColor: model.status === '在产' ? '#F6FFED' : '#FFFBE6',
                    color: model.status === '在产' ? '#52C41A' : '#FAAD14',
                    border: `1px solid ${model.status === '在产' ? '#B7EB8F' : '#FFE58F'}`,
                  }"
                >
                  {{ model.status }}
                </span>
              </td>
              <td class="px-6 py-4">
                <div class="flex items-center gap-3">
                  <button class="text-sm" :style="{ color: '#1890FF' }">编辑</button>
                  <router-link to="/licenses" class="text-sm" style="color: #1890FF">授权</router-link>
                  <router-link to="/config-files" class="text-sm" style="color: #1890FF">配置</router-link>
                  <router-link to="/firmware" class="text-sm" style="color: #1890FF">固件</router-link>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Assembly Checklist -->
    <div class="bg-white rounded-lg mb-6" :style="{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }">
      <div class="p-6 border-b" :style="{ borderColor: '#F0F0F0' }">
        <h3 class="text-lg font-semibold">装配Checklist模板</h3>
      </div>

      <!-- Tabs -->
      <div class="flex border-b" :style="{ borderColor: '#F0F0F0' }">
        <button
          v-for="model in Object.keys(checklistData)"
          :key="model"
          @click="activeTab = model"
          class="px-6 py-3 text-sm font-medium transition-colors"
          :style="{
            color: activeTab === model ? '#1890FF' : 'rgba(0, 0, 0, 0.65)',
            borderBottom: activeTab === model ? '2px solid #1890FF' : 'none',
            marginBottom: activeTab === model ? '-1px' : '0',
          }"
        >
          {{ model }}
        </button>
      </div>

      <!-- Checklist Content -->
      <div class="p-6">
        <table class="w-full">
          <thead :style="{ backgroundColor: '#FAFAFA' }">
            <tr>
              <th class="px-3 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)', width: '50px' }">序号</th>
              <th class="px-3 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">项目名称</th>
              <th class="px-3 py-3 text-center text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)', width: '70px' }">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in checklistData[activeTab]"
              :key="item.id"
              class="border-b"
              :style="{ borderColor: '#F0F0F0' }"
            >
              <td class="px-3 py-3 text-sm" :style="{ color: 'rgba(0, 0, 0, 0.45)' }">
                <div class="flex items-center gap-1">
                  <GripVertical :size="14" :style="{ color: '#D9D9D9' }" />
                  {{ item.id }}
                </div>
              </td>
              <td class="px-3 py-3 text-sm">
                <input
                  v-if="editingCell?.model === activeTab && editingCell?.id === item.id && editingCell?.field === 'text'"
                  autofocus
                  class="w-full px-2 py-1 border rounded text-sm"
                  :style="{ borderColor: '#1890FF' }"
                  :value="item.text"
                  @blur="handleEditBlur($event, activeTab, item.id)"
                  @keydown="handleEditKeydown"
                />
                <span
                  v-else
                  class="cursor-pointer hover:text-blue-500"
                  @click="editingCell = { model: activeTab, id: item.id, field: 'text' }"
                >
                  {{ item.text }}
                </span>
              </td>
              <td class="px-3 py-3 text-center">
                <button
                  @click="deleteChecklistItem(activeTab, item.id)"
                  class="text-gray-400 hover:text-red-500 transition-colors"
                >
                  <Trash2 :size="15" />
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="mt-4 flex items-center justify-between">
          <button
            @click="addChecklistItem(activeTab)"
            class="px-4 py-2 text-sm flex items-center gap-1 rounded transition-colors"
            :style="{ color: '#1890FF', border: '1px dashed #1890FF' }"
          >
            <Plus :size="14" />
            添加检查项
          </button>
          <button
            class="px-6 py-2 text-sm rounded text-white"
            :style="{ backgroundColor: '#1890FF' }"
          >
            确认保存
          </button>
        </div>
      </div>
    </div>

    <!-- Board Version Requirements -->
    <div class="bg-white rounded-lg" :style="{ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }">
      <div class="p-6 border-b" :style="{ borderColor: '#F0F0F0' }">
        <h3 class="text-lg font-semibold">板卡版本要求</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead :style="{ backgroundColor: '#FAFAFA' }">
            <tr>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">板卡类型</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">要求固件版本</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">校验规则</th>
              <th class="px-6 py-3 text-left text-sm font-medium" :style="{ color: 'rgba(0, 0, 0, 0.85)' }">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(board, index) in boardVersionData"
              :key="index"
              class="border-b"
              :style="{ borderColor: '#F0F0F0' }"
            >
              <td class="px-6 py-4">{{ board.boardType }}</td>
              <td class="px-6 py-4">
                <span
                  class="px-2 py-1 rounded text-xs"
                  :style="{ backgroundColor: '#F0F2F5', color: 'rgba(0, 0, 0, 0.85)' }"
                >
                  {{ board.requiredVersion }}
                </span>
              </td>
              <td class="px-6 py-4" :style="{ color: 'rgba(0, 0, 0, 0.65)' }">{{ board.validationRule }}</td>
              <td class="px-6 py-4">
                <div class="flex items-center gap-3">
                  <button class="text-sm" :style="{ color: '#1890FF' }">编辑</button>
                  <button class="text-sm" :style="{ color: '#1890FF' }">测试</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>