<script setup lang="ts">
import { ref } from 'vue'
import {ArrowLeft, X} from 'lucide-vue-next'
import { useRouter } from 'vue-router'

const router = useRouter()

const goToFirmware = () => {
  router.push('/firmware')
}

const activeType = ref('全部')
const boardTypes = ['全部',  '主协板', '采集板', '发射板', '升压板']

interface Board {type: string; hwVersion: string; fwVersion: string
  productionDate: string
}

const allBoards = ref<Board[]>([
  { type: '主协板', hwVersion: 'MB-V2.3', fwVersion: 'v2.3.5', productionDate: '2024-01-10' },
  { type: '主协板', hwVersion: 'MB-V2.2', fwVersion: 'v2.3.5', productionDate: '2024-02-15' },
  { type: '主协板', hwVersion: 'MB-V2.1', fwVersion: 'v1.5.0', productionDate: '2024-01-12' },
  { type: '采集板', hwVersion: 'RX-V2.2', fwVersion: 'v1.8.2', productionDate: '2024-01-15' },
  { type: '采集板', hwVersion: 'RX-V2.3', fwVersion: 'v1.8.0', productionDate: '2024-03-09' },
  { type: '发射板', hwVersion: 'TX-V2.1', fwVersion: 'v1.5.0', productionDate: '2024-01-18' },
  { type: '发射板', hwVersion: 'TX-V2.2', fwVersion: 'v1.4.2', productionDate: '2023-06-01' },
  { type: '升压板', hwVersion: 'BO-V2.1', fwVersion: 'v1.0.0', productionDate: '2024-01-20' },
  { type: '采集板', hwVersion: 'RX-V2.3', fwVersion: 'v1.7.0',productionDate: '2023-08-10' },
])

const filteredBoards = ref(allBoards.value)
const filterBoards = () => {
  filteredBoards.value = activeType.value === '全部'
    ? allBoards.value
    : allBoards.value.filter(b => b.type === activeType.value)
}
filterBoards()
const switchType = (t: string) => { activeType.value = t; filterBoards() }


// Detail drawer
const showDetail = ref(false)
const currentBoard = ref<Board | null>(null)
const openDetail = (b: Board) => { currentBoard.value = b; showDetail.value = true }

// Add board drawer
const showAddDrawer = ref(false)
const addForm = ref({
  type: '主协板' as string,
  hwVersion: '',
  fwVersion: '',
  productionDate: '',
})
const openAddDrawer = () => {
  addForm.value = { type: '主协板', hwVersion: '', fwVersion: '', productionDate: '' }
  showAddDrawer.value = true
}
const submitAddBoard = () => {
  const { type, hwVersion, fwVersion, productionDate } = addForm.value
  if (!hwVersion || !fwVersion || !productionDate) return
  allBoards.value.push({ type, hwVersion, fwVersion, productionDate })
  filterBoards()
  showAddDrawer.value = false
}

const upgradeHistory = [
  { date: '2024-03-01', from: 'v2.3.0', to: 'v2.3.5', operator: '王工程师', method: '远程OTA' },
  { date: '2024-01-20', from: 'v2.2.0', to: 'v2.3.0', operator: '李工程师', method: '本地烧录' },
]
const calibHistory = [
  { date: '2024-03-05', result: '合格', calibrator: '张工程师', expiry: '2025-03-05' },
  { date: '2023-03-10', result: '合格', calibrator: '王工程师', expiry: '2024-03-10' },
]
const serviceHistory = [
  { deviceSn: 'GD30-2025-000001', from: '2025-01-15', to: '至今', role: '在役' },
  { deviceSn: 'GD30-2024-000890', from: '2024-03-08', to: '2024-12-31', role: '已拆卸' },
]
const repairHistory = [
  { orderId: 'WO-2024-0001', date: '2024-02-26', action: '更换（旧板换下）', operator: '李工' },
]

</script>

<template>
  <div class="p-6">
    <!-- Header -->
    <div class="mb-6">
      <div class="flex items-center justify-between mb-2">
        <h2 class="text-2xl font-semibold">板卡型号管理</h2>
        <div class="flex items-center gap-3">
          <button
            class="px-4 py-2 rounded flex items-center gap-2"
            style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
          >
            <Download :size="16" />
            导出
          </button>
          <button
            class="px-4 py-2 rounded text-white flex items-center gap-2"
            style="background-color: #4a7c59"
            @click="openAddDrawer"
          >
            <Plus :size="16" />
            新增板卡
          </button>
        </div>
      </div>
    </div>

    <!-- Board Type Tabs + Table -->
    <div class="bg-white rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
      <div class="flex border-b" style="border-color: #F0F0F0">
        <button v-for="t in boardTypes" :key="t" @click="switchType(t)"
          class="px-5 py-3 text-sm font-medium transition-colors"
          :style="{ color: activeType === t ? '#4a7c59' : 'rgba(0,0,0,0.65)', borderBottom: activeType === t ? '2px solid #4a7c59' : '2px solid transparent', marginBottom: '-1px' }">
          {{ t }}
        </button>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead style="background-color: #FAFAFA">
            <tr>
              <th class="px-5 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">类型</th>
              <th class="px-5 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">型号</th>
              <th class="px-5 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">最新固件版本</th>
              <th class="px-5 py-3 text-left text-sm font-medium" style="color: rgba(0,0,0,0.85)">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="b in filteredBoards" class="border-b" style="border-color: #F0F0F0">
              <td class="px-5 py-4 text-sm" style="color: rgba(0,0,0,0.65)">{{ b.type }}</td>
              <td class="px-5 py-4 text-sm">{{ b.hwVersion }}</td>
              <td class="px-5 py-4 text-sm" style="color: rgba(0,0,0,0.65)">{{ b.fwVersion }}</td>
              <td class="px-5 py-4">
                <div class="flex items-center gap-3">
                  
                <button class="text-sm" style="color: #4a7c59" @click="openDetail(b)">详情</button>
                
                <button class="text-sm" style="color: #4a7c59" @click="goToFirmware">固件</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Detail Drawer -->
    <div v-if="showDetail && currentBoard" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showDetail = false">
      <div class="bg-white w-[560px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <div class="flex items-center gap-3 p-5 border-b" style="border-color: #F0F0F0">
          <button @click="showDetail = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.65)"><ArrowLeft :size="18" /></button>
          <h3 class="text-lg font-semibold">板卡详情</h3>
        </div>
        <div class="flex-1 overflow-y-auto p-6 space-y-5">
          <!-- Basic Info -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">基本信息</h4>
            <div class="grid grid-cols-2 gap-3 text-sm" style="color: rgba(0,0,0,0.65)">
              <div>板卡类型：{{ currentBoard.type }}</div>
              <div>型号：{{ currentBoard.hwVersion }}</div>
              <div>当前固件：{{ currentBoard.fwVersion }}</div>
              <div>生产日期：{{ currentBoard.productionDate }}</div>
          </div>

          <!-- Upgrade History -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">固件升级记录</h4>
            <div v-if="upgradeHistory.length === 0" class="text-sm" style="color: rgba(0,0,0,0.25)">暂无升级记录</div>
            <div v-else class="space-y-2">
              <div v-for="(u, i) in upgradeHistory" :key="i" class="flex items-center gap-3 text-sm" style="color: rgba(0,0,0,0.65)">
                <span style="color: rgba(0,0,0,0.35)">{{ u.date }}</span>
                <span>{{ u.from }} → {{ u.to }}</span>
                <span class="px-1.5 py-0.5 rounded text-xs" style="background-color: #eef5f0; color: #4a7c59">{{ u.method }}</span>
                <span style="color: rgba(0,0,0,0.35)">{{ u.operator }}</span>
              </div>
            </div>
          </div>

          <!-- Calibration History -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">校准历史</h4>
            <div v-if="calibHistory.length === 0" class="text-sm" style="color: rgba(0,0,0,0.25)">暂无校准记录</div>
            <div v-else class="space-y-2">
              <div v-for="(c, i) in calibHistory" :key="i" class="flex items-center gap-3 text-sm" style="color: rgba(0,0,0,0.65)">
                <span style="color: rgba(0,0,0,0.35)">{{ c.date }}</span>
                <span class="px-1.5 py-0.5 rounded text-xs" style="background-color: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F">{{ c.result }}</span>
                <span>到期：{{ c.expiry }}</span>
                <span style="color: rgba(0,0,0,0.35)">{{ c.calibrator }}</span>
              </div>
            </div>
          </div>

          <!-- Service History -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">服役记录</h4>
            <div v-if="serviceHistory.length === 0" class="text-sm" style="color: rgba(0,0,0,0.25)">暂无服役记录</div>
            <div v-else class="space-y-2">
              <div v-for="(s, i) in serviceHistory" :key="i" class="flex items-center gap-3 text-sm" style="color: rgba(0,0,0,0.65)">
                <router-link :to="'/devices/' + s.deviceSn" style="color: #4a7c59">{{ s.deviceSn }}</router-link>
                <span>{{ s.from }} ~ {{ s.to }}</span>
                <span class="px-1.5 py-0.5 rounded text-xs" :style="s.role === '在役' ? { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' } : { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }">{{ s.role }}</span>
              </div>
            </div>
          </div>

          <!-- Repair History -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-3">维修记录</h4>
            <div v-if="repairHistory.length === 0" class="text-sm" style="color: rgba(0,0,0,0.25)">暂无维修记录</div>
            <div v-else class="space-y-2">
              <div v-for="(r, i) in repairHistory" :key="i" class="flex items-center gap-3 text-sm" style="color: rgba(0,0,0,0.65)">
                <span style="color: rgba(0,0,0,0.35)">{{ r.date }}</span>
                <router-link :to="'/repair/' + r.orderId" style="color: #4a7c59">{{ r.orderId }}</router-link>
                <span>{{ r.action }}</span>
                <span style="color: rgba(0,0,0,0.35)">{{ r.operator }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-center gap-3 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-6 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showDetail = false">关闭</button>
        </div>
      </div>
    </div>
  </div>
    <!-- Add Board Drawer -->
    <div v-if="showAddDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showAddDrawer = false">
      <div class="bg-white w-[480px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <div class="flex items-center justify-between p-5 border-b" style="border-color: #F0F0F0">
          <h3 class="text-lg font-semibold">新增板卡</h3>
          <button @click="showAddDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.45)"><X :size="18" /></button>
        </div>
        <div class="flex-1 overflow-y-auto p-6 space-y-5">
          <!-- 板卡类型 -->
          <div>
            <label class="block text-sm font-medium mb-1.5" style="color: rgba(0,0,0,0.85)"><span class="text-red-500 mr-0.5">*</span>板卡类型</label>
            <select v-model="addForm.type" class="w-full px-3 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85); outline: none">
              <option v-for="t in boardTypes.filter(x => x !== '全部')" :key="t" :value="t">{{ t }}</option>
            </select>
          </div>
          <!-- 型号 -->
          <div>
            <label class="block text-sm font-medium mb-1.5" style="color: rgba(0,0,0,0.85)"><span class="text-red-500 mr-0.5">*</span>板卡型号</label>
            <input v-model="addForm.hwVersion" type="text" placeholder="如 MB-V2.3" class="w-full px-3 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; outline: none" />
          </div>
          <!-- 固件版本 -->
          <div>
            <label class="block text-sm font-medium mb-1.5" style="color: rgba(0,0,0,0.85)"><span class="text-red-500 mr-0.5">*</span>固件版本</label>
            <input v-model="addForm.fwVersion" type="text" placeholder="如 v1.0.0" class="w-full px-3 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; outline: none" />
          </div>
          <!-- 生产日期 -->
          <div>
            <label class="block text-sm font-medium mb-1.5" style="color: rgba(0,0,0,0.85)"><span class="text-red-500 mr-0.5">*</span>生产日期</label>
            <input v-model="addForm.productionDate" type="date" class="w-full px-3 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; outline: none" />
          </div>
        </div>
        <div class="flex items-center justify-end gap-3 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-6 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showAddDrawer = false">取消</button>
          <button class="px-6 py-2 rounded text-sm text-white" style="background-color: #4a7c59" @click="submitAddBoard">确认新增</button>
        </div>
      </div>
    </div>
  </div>
</template>
