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

const showDrawer = ref(false)
const drawerForm = ref({
  name: '',
  code: '',
  status: '在产' as '在产' | '停产',
})

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

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

const activeTab = ref('GD-30 Supreme')

const modelData = [
  {
    name: 'GD-30 Supreme',
    code: 'GD30-2024',
    status: '在产' as const,
  },
  {
    name: 'GD-20 Supreme',
    code: 'GD20-2023',
    status: '在产' as const,
  },
  {
    name: 'GD-10 Supreme',
    code: 'GD10-2022',
    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: '' },
  ],
  GD20: [
    { 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: '' },
  ],
  GD10: [
    { 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',
  },
]

// Checklist template drawer state
const showChecklistDrawer = ref(false)
const newTplModel = ref('GD-30 Supreme')
const newTplItems = ref<{ text: string }[]>([{ text: '' }])

const openChecklistDrawer = () => {
  newTplModel.value = 'GD-30 Supreme'
  newTplItems.value = [{ text: '' }]
  showChecklistDrawer.value = true
}

const addTplItem = () => {
  newTplItems.value.push({ text: '' })
}

const removeTplItem = (index: number) => {
  newTplItems.value.splice(index, 1)
}
</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: '#eef5f0', border: '1px solid #a3c4ad' }"
    >
      <Info :size="20" :style="{ color: '#4a7c59', flexShrink: 0, marginTop: '2px' }" />
      <div :style="{ color: '#2d5a3d' }">
        型号管理是平台核心枢纽，每个型号关联授权项、配置文件
      </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 flex items-center gap-2"
            :style="{ backgroundColor: '#4a7c59' }"
            @click="showDrawer = true"
          >
            <Plus :size="16" />
            新增设备型号
          </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>
            </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">
                <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: '#4a7c59' }">编辑</button>
                  <router-link to="/licenses" class="text-sm" style="color: #4a7c59">授权</router-link>
                  <router-link to="/config-files" class="text-sm" style="color: #4a7c59">配置</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' }">
         <div class="flex items-center justify-between">
          <h3 class="text-lg font-semibold">装配Checklist模板</h3>
          <button
            class="px-4 py-2 rounded text-white flex items-center gap-2"
            :style="{ backgroundColor: '#4a7c59' }"
            @click="openChecklistDrawer"
          >
            <Plus :size="16" />
            新增模版
          </button>
        </div>
      </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 ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
            borderBottom: activeTab === model ? '2px solid #4a7c59' : '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>
            </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: '#4a7c59' }"
                  :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>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


    <!-- New Model Drawer -->
    <div v-if="showDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showDrawer = false">
      <div class="bg-white w-[480px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <!-- Drawer Header -->
        <div class="flex items-center justify-between p-5 border-b" style="border-color: #F0F0F0">
          <h3 class="text-lg font-semibold">新增设备型号</h3>
          <button @click="showDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.45)">
            <X :size="18" />
          </button>
        </div>

        <!-- Drawer Body -->
        <div class="flex-1 overflow-y-auto p-6">
          <div class="space-y-5">
            <div>
              <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">型号名称 <span style="color: #FF4D4F">*</span></label>
              <input v-model="drawerForm.name" type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="如：GD-30 Supreme" />
            </div>

            <div>
              <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">型号编码 <span style="color: #FF4D4F">*</span></label>
              <input class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
            </input>
            </div>
            <div>
              <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">状态</label>
              <div class="flex items-center gap-4">
                <label class="flex items-center gap-2 cursor-pointer text-sm">
                  <input type="radio" v-model="drawerForm.status" value="在产" style="accent-color: #4a7c59" />
                  <span>在产</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer text-sm">
                  <input type="radio" v-model="drawerForm.status" value="停产" style="accent-color: #4a7c59" />
                  <span>停产</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <!-- Drawer Footer -->
        <div class="flex items-center justify-end gap-3 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-4 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showDrawer = false">取消</button>
          <button
            class="px-4 py-2 rounded text-white text-sm"
            :style="{ backgroundColor: drawerForm.name && drawerForm.code ? '#4a7c59' : '#D9D9D9' }"
            :disabled="!drawerForm.name || !drawerForm.code"
            @click="showDrawer = false"
          >确认创建</button>
        </div>
      </div>
    </div>

    <!-- Checklist Template Drawer -->
    <div v-if="showChecklistDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showChecklistDrawer = false">
      <div class="bg-white w-[480px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <!-- Drawer Header -->
        <div class="flex items-center justify-between p-5 border-b" style="border-color: #F0F0F0">
          <h3 class="text-lg font-semibold">新增Checklist模版</h3>
          <button @click="showChecklistDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.45)">
            <X :size="18" />
          </button>
        </div>

        <!-- Drawer Body -->
        <div class="flex-1 overflow-y-auto p-6">
          <div class="space-y-5">
            <div>
              <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">设备型号 <span style="color: #FF4D4F">*</span></label>
              <select v-model="newTplModel" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                <option value="GD-30 Supreme">GD-30 Supreme</option>
                <option value="GT20">GD-20 Supreme</option>
                <option value="GM10">GD-10 Supreme</option>
              </select>
            </div>

            <div>
              <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">检查项列表</label>
              <div class="space-y-3">
                <div
                  v-for="(item, index) in newTplItems"
                  :key="index"
                  class="flex items-center gap-2"
                >
                  <span class="text-sm w-6 text-center flex-shrink-0" style="color: rgba(0,0,0,0.45)">{{ index + 1 }}</span>
                  <input
                    v-model="item.text"
                    type="text"
                    class="flex-1 px-3 py-2 border rounded text-sm"
                    style="border-color: #D9D9D9"
                    placeholder="请输入检查项名称"
                  />
                  <button
                    @click="removeTplItem(index)"
                    class="p-1 rounded hover:bg-red-50 text-gray-400 hover:text-red-500 transition-colors flex-shrink-0"
                    :disabled="newTplItems.length <= 1"
                    :style="{ opacity: newTplItems.length <= 1 ? 0.3 : 1 }"
                  >
                    <Trash2 :size="15" />
                  </button>
                </div>
              </div>
              <button
                @click="addTplItem"
                class="mt-3 px-4 py-2 text-sm flex items-center gap-1 rounded transition-colors w-full justify-center"
                :style="{ color: '#4a7c59', border: '1px dashed #4a7c59' }"
              >
                <Plus :size="14" />
                添加检查项
              </button>
            </div>
          </div>
        </div>

        <!-- Drawer Footer -->
        <div class="flex items-center justify-end gap-3 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-4 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showChecklistDrawer = false">取消</button>
          <button
            class="px-4 py-2 rounded text-white text-sm"
            :style="{ backgroundColor: '#4a7c59' }"
            @click="showChecklistDrawer = false"
          >确认生成</button>
        </div>
      </div>
    </div>
  </div>
</template>