<template>
  <div class="device-list-container">
    <div v-if="!devices?.length" class="w-full text-center">暂无绑定设备</div>
    <div v-else class="grid min-h-[76px] grid-cols-2 gap-3">
      <div
        v-for="device in devices"
        :key="device.id"
        @click="delDevice(device)"
        class="relative h-[76px] rounded-[25px] border-2 p-4 text-[10px]"
      >
        <div class="flex h-full items-center justify-center gap-3">
          <component
            :is="getDeviceTypeInfo(device.user_agent)?.iconComponent"
            class="h-6 w-6 text-white"
          />
          <div class="flex flex-col overflow-hidden">
            <span class="text-white">设备: {{ getDeviceTypeInfo(device.user_agent)?.type }}</span>
            <span class="font-mono text-[11px] tracking-tighter uppercase"
              >SN: {{ device?.identifier?.slice(0, 4) }}{{ device.id }}
            </span>
          </div>
        </div>
        <X :size="16" class="absolute top-[5px] right-[10px] text-[12px]" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Laptop, Smartphone, Tablet, Monitor, Cpu, HelpCircle, X } from 'lucide-vue-next'
import request from '@/utils/request'
import { toast } from 'vue-sonner'

interface Device {
  id: string
  name: string
  user_agent: string
  identifier: string
  type: 'mobile' | 'desktop'
  deviceId: string
}

defineProps<{
  devices: Device[]
}>()

const emit = defineEmits(['refresh'])

function delDevice(device: Device) {
  if (confirm('请确认是否移除此设备？')) {
    request.put('/api/v1/public/user/unbind_device', { id: device.id }).then(() => {
      toast.success('设备已移除')
      emit('refresh')
    })
  }
}

interface DeviceTypeInfo {
  type: string
  iconComponent: any
}

/**
 * 获取设备类型和图标
 * @param userAgent 浏览器代理字符串
 */
const getDeviceTypeInfo = (userAgent: string): DeviceTypeInfo => {
  // 转换为小写以便进行不区分大小写的匹配
  const ua = userAgent.toLowerCase()

  if (ua.includes('ipad')) {
    return { type: 'iPad', iconComponent: Tablet }
  }
  if (ua.includes('iphone') || ua.includes('ios')) {
    return { type: 'iPhone', iconComponent: Smartphone }
  }
  if (ua.includes('android')) {
    return { type: 'Android', iconComponent: Smartphone }
  }
  if (ua.includes('mac') || ua.includes('macos')) {
    return { type: 'Mac', iconComponent: Laptop }
  }
  if (ua.includes('windows')) {
    return { type: 'Windows', iconComponent: Monitor }
  }
  if (ua.includes('linux')) {
    return { type: 'Linux', iconComponent: Cpu }
  }

  return { type: 'Unknown', iconComponent: HelpCircle }
}
</script>
