<script setup lang="ts">
import { ref, computed } from 'vue'
import { Plus, Download, Info, X } from 'lucide-vue-next'

const showDrawer = ref(false)
const selectedModel = ref('GD-10 Supreme')
const expiryType = ref('永久')
const expiryDate = ref('')

interface AuthItem { name: string,gd10: boolean, gd20: boolean, gd30: boolean }
const authItems: AuthItem[] = [
  { name: '1D SP',gd10: true,gd20: true, gd30: true },
  { name: '2D SP',gd10: true, gd20: true, gd30: true },
  { name: '3D SP',gd10: false, gd20: true, gd30: true },
  { name: '1D VES',gd10: true, gd20: true, gd30: true },
  { name: '2D ERT',gd10: true, gd20: true, gd30: true },
  { name: '3D ERT',gd10: false, gd20: true, gd30: true },
  { name: '1D IP',gd10: true, gd20: true, gd30: true },
  { name: '2D IP' ,gd10: true, gd20: true, gd30: true },
  { name: '3D IP',gd10: false, gd20: true, gd30: true },
  { name: '跨孔（Cross-Hole）',gd10: false, gd20: true, gd30: true },
  { name: '水上（Marine）',gd10: false, gd20: true, gd30: true },
]
const checkedItems = ref(new Set<string>())

const availableItems = computed(() =>
  authItems.map(item => {
    let preset = false
    if (selectedModel.value === 'GD-10 Supreme') preset = item.gd10
    else if (selectedModel.value === 'GD-20 Supreme') preset = item.gd20
    else preset = item.gd30
    return { ...item, preset }
  })
)
const selectedCount = computed(() => checkedItems.value.size)
const totalAvailable = computed(() => authItems.length)
const toggleItem = (name: string) => { checkedItems.value.has(name) ? checkedItems.value.delete(name) : checkedItems.value.add(name) }
const selectAll = () => { authItems.forEach(i => checkedItems.value.add(i.name)) }
const clearAll = () => { checkedItems.value.clear() }
const openDrawer = () => {
  checkedItems.value.clear()
  // Auto-check items that match the selected model
  authItems.forEach(item => {
    let preset = false
    if (selectedModel.value === 'GD-10 Supreme') preset = item.gd10
    else if (selectedModel.value === 'GD-20 Supreme') preset = item.gd20
    else preset = item.gd30
    if (preset) checkedItems.value.add(item.name)
  })
  showDrawer.value = true
}
const onModelChange = () => {
  checkedItems.value.clear()
  authItems.forEach(item => {
    let preset = false
    if (selectedModel.value === 'GD-10 Supreme') preset = item.gd10
    else if (selectedModel.value === 'GD-20 Supreme') preset = item.gd20
    else preset = item.gd30
    if (preset) checkedItems.value.add(item.name)
  })
}

interface License {model: string; status: '已发布' | '草稿' | '已停用'; modules: string; expiry: string; createdDate: string }
const licenses: License[] = [
  {model: 'GD-10 Supreme', status: '已发布', modules: '1D SP, 2D SP, 1D VES, 2D ERT, 1D IP, 2D IP', expiry: '永久', createdDate: '2025-02-01' },
  {model: 'GD-20 Supreme', status: '已发布', modules: '全部模块', expiry: '永久', createdDate: '2025-02-05' },
  {model: 'GD-30 Supreme', status: '草稿', modules: '全部模块（不含水上）', expiry: '1年', createdDate: '2025-02-08' },
]
const getStatusStyle = (s: License['status']) => {
  if (s === '已发布') return { backgroundColor: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F' }
  if (s === '草稿') return { backgroundColor: '#FFFBE6', color: '#FAAD14', border: '1px solid #FFE58F' }
  return { backgroundColor: '#FAFAFA', color: 'rgba(0,0,0,0.45)', border: '1px solid #D9D9D9' }
}
</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="openDrawer">
            <Plus :size="16" /> 选择授权项
          </button>
        </div>
      </div>
      <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="background-color: #E6FFFB; border: 1px solid #87E8DE">
      <Info :size="20" style="color: #13C2C2; flex-shrink: 0; margin-top: 2px" />
      <div style="color: #006D75">
        <div class="font-medium mb-1">授权说明</div>
        <div class="text-sm">授权文件按设备型号管理，每个型号对应一套授权模块配置。点击"选择授权项"可按型号勾选功能模块，设备在APP激活时自动下载对应型号的授权文件。</div>
      </div>
    </div>

    <!-- Filter -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
      <div class="grid grid-cols-3 gap-4">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.65)">设备型号</label>
          <select class="w-full px-3 py-2 border rounded" style="border-color: #D9D9D9; background-color: #fff">
            <option>全部</option><option>GD-10 Supreme</option><option>GD-20 Supreme</option><option>GD-30 Supreme</option>
          </select>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.65)">状态</label>
          <select class="w-full px-3 py-2 border rounded" style="border-color: #D9D9D9; background-color: #fff">
            <option>全部</option><option>已发布</option><option>草稿</option><option>已停用</option>
          </select>
        </div>
        <div class="flex items-end">
          <button class="w-full px-4 py-2 rounded text-white" style="background-color: #4a7c59">查询</button>
        </div>
      </div>
    </div>

    <!-- License Table -->
    <div class="bg-white rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead style="background-color: #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>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(lic, i) in licenses" :key="i" class="border-b" style="border-color: #F0F0F0">
              <td class="px-6 py-4">{{ lic.model }}</td>
              <td class="px-6 py-4 text-sm" style="color: rgba(0,0,0,0.65); max-width: 200px">{{ lic.modules }}</td>
              <td class="px-6 py-4" style="color: rgba(0,0,0,0.65)">{{ lic.expiry }}</td>
              <td class="px-6 py-4" style="color: rgba(0,0,0,0.65)">{{ lic.createdDate }}</td>
              <td class="px-6 py-4"><span class="px-2 py-1 rounded text-xs" :style="getStatusStyle(lic.status)">{{ lic.status }}</span></td>
              <td class="px-6 py-4">
                <div class="flex items-center gap-3">
                  <button class="text-sm" style="color: #4a7c59">详情</button>
                  <button class="text-sm" style="color: #4a7c59">下载</button>
                  <button v-if="lic.status === '草稿'" class="text-sm" style="color: #52C41A">发布</button>
                  <button v-if="lic.status === '已发布'" class="text-sm" style="color: #FF4D4F">停用</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    <div class="bg-white p-4 rounded-lg flex items-center justify-between" style="box-shadow: 0 1px 2px rgba(0,0,0,0.05)">
      <div class="text-sm" style="color: rgba(0,0,0,0.65)">显示 1-10 / 共 156 条</div>
      <div class="flex items-center gap-2">
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0,0,0,0.45)" disabled>上一页</button>
        <button class="px-3 py-1 rounded" style="background-color: #4a7c59; color: #fff">1</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0,0,0,0.85)">2</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0,0,0,0.85)">3</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0,0,0,0.85)">下一页</button>
      </div>
    </div>

    <!-- Authorization Generate 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-[640px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <!-- 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>

        <!-- Body -->
        <div class="flex-1 overflow-y-auto p-6">
          <!-- Model & Expiry -->
          <div class="grid grid-cols-2 gap-4 mb-6">
            <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="selectedModel" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff" @change="onModelChange()">
                <option>GD-10 Supreme</option>
                <option>GD-20 Supreme</option>
                <option>GD-30 Supreme</option>
              </select>
            </div>
            <div>
              <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">授权有效期</label>
              <select v-model="expiryType" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                <option>永久</option><option>1年</option><option>2年</option><option>自定义</option>
              </select>
            </div>
            <div v-if="expiryType === '自定义'">
              <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">到期日期</label>
              <input type="date" v-model="expiryDate" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" />
            </div>
          </div>

          <!-- Auth Items Table -->
          <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-2">
              <span class="text-sm font-medium">功能授权项</span>
              <span class="text-xs" style="color: rgba(0,0,0,0.45)">已选 {{ selectedCount }} / {{ totalAvailable }} 项</span>
            </div>
            <div class="flex items-center gap-3">
              <button class="text-xs" style="color: #4a7c59" @click="selectAll">全选</button>
              <button class="text-xs" style="color: rgba(0,0,0,0.45)" @click="clearAll">清空</button>
            </div>
          </div>

          <table class="w-full text-sm">
            <thead style="background-color: #FAFAFA">
              <tr>
                <th class="px-3 py-2 text-left" style="width: 36px"></th>
                <th class="px-3 py-2 text-left">功能授权项名称</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in availableItems" :key="i" class="border-b" style="border-color: #F0F0F0">
                <td class="px-3 py-2">
                  <input type="checkbox" class="w-3.5 h-3.5" style="accent-color: #4a7c59" :checked="checkedItems.has(item.name)" @change="toggleItem(item.name)" />
                </td>
                <td class="px-3 py-2">{{ item.name }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 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: selectedCount > 0 ? '#52C41A' : '#D9D9D9' }"
            :disabled="selectedCount === 0"
            @click="showDrawer = false"
          >保存</button>
        </div>
      </div>
    </div>
  </div>
</template>
