<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useDeviceStore } from '@/stores/deviceStore'
import { useChatStore } from '@/stores/chatStore'
import { Monitor, Smartphone, Laptop, MessageSquare, Send } from 'lucide-vue-next'

const props = defineProps({
  device: {
    type: Object,
    required: true
  }
})

const router = useRouter()
const deviceStore = useDeviceStore()
const chatStore = useChatStore()

const isConnected = computed(() => deviceStore.isConnected(props.device.deviceId))
const unreadCount = computed(() => chatStore.getUnreadCount(props.device.deviceId))

// 根据设备名推断图标
const deviceIcon = computed(() => {
  const name = props.device.deviceName.toLowerCase()
  if (name.includes('phone') || name.includes('mobile') || name.includes('android') || name.includes('iphone')) {
    return Smartphone
  }
  if (name.includes('laptop') || name.includes('macbook') || name.includes('notebook')) {
    return Laptop
  }
  return Monitor
})

// 连接并进入聊天
async function openChat() {
  if (!isConnected.value) {
    try {
      await deviceStore.connectToDevice(props.device.deviceId)
    } catch (error) {
      console.error('Connection failed:', error)
      return
    }
  }
  router.push(`/chat/${props.device.deviceId}`)
}

// 选择文件发送
async function sendFile() {
  const file = await chatStore.selectFile()
  if (file) {
    router.push(`/chat/${props.device.deviceId}`)
  }
}
</script>

<template>
  <div 
    class="device-card bg-white dark:bg-gray-800 rounded-xl p-4 border border-surface-200 dark:border-gray-700 cursor-pointer hover:shadow-md dark:hover:bg-gray-750 transition-all"
    @click="openChat"
  >
    <div class="flex items-start gap-3">
      <!-- 设备图标 -->
      <div 
        class="w-12 h-12 rounded-xl flex items-center justify-center"
        :class="device.online ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400' : 'bg-surface-100 dark:bg-gray-700 text-gray-400'"
      >
        <component :is="deviceIcon" :size="24" />
      </div>

      <!-- 设备信息 -->
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2">
          <h3 class="font-medium text-gray-900 dark:text-white truncate">
            {{ device.deviceName }}
          </h3>
          <!-- 连接状态点 -->
          <span 
            class="w-2 h-2 rounded-full flex-shrink-0"
            :class="isConnected ? 'bg-green-500' : (device.online ? 'bg-yellow-500' : 'bg-gray-300 dark:bg-gray-600')"
          />
        </div>
        
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
          {{ device.ip }}
        </p>

        <!-- 能力标签 -->
        <div class="flex gap-1 mt-2">
          <span 
            v-for="cap in device.capabilities" 
            :key="cap"
            class="px-2 py-0.5 bg-surface-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-xs rounded"
          >
            {{ cap }}
          </span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-col gap-2">
        <button
          @click.stop="openChat"
          class="p-2 rounded-lg hover:bg-primary-100 dark:hover:bg-primary-900/30 text-primary-600 dark:text-primary-400 transition-colors relative"
          title="发送消息"
        >
          <MessageSquare :size="18" />
          <span 
            v-if="unreadCount > 0"
            class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center"
          >
            {{ unreadCount > 9 ? '9+' : unreadCount }}
          </span>
        </button>
        
        <button
          @click.stop="sendFile"
          class="p-2 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/30 text-green-600 dark:text-green-400 transition-colors"
          title="发送文件"
        >
          <Send :size="18" />
        </button>
      </div>
    </div>
  </div>
</template>
