<script setup>
import { computed, ref } from 'vue'
import { useDeviceStore } from '@/stores/deviceStore'
import DeviceCard from '@/components/DeviceCard.vue'
import { Search, RefreshCw, Monitor } from 'lucide-vue-next'

const deviceStore = useDeviceStore()

const searchQuery = ref('')
const isRefreshing = ref(false)

// 过滤设备
const filteredDevices = computed(() => {
  const query = searchQuery.value.toLowerCase().trim()
  if (!query) return deviceStore.deviceList
  
  return deviceStore.deviceList.filter(device =>
    device.deviceName.toLowerCase().includes(query) ||
    device.ip.includes(query)
  )
})

// 刷新设备列表
async function refresh() {
  if (isRefreshing.value) return
  
  isRefreshing.value = true
  try {
    await deviceStore.stopServices()
    await deviceStore.startServices()
  } finally {
    setTimeout(() => {
      isRefreshing.value = false
    }, 1000)
  }
}
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- 头部 -->
    <header class="bg-white dark:bg-gray-800 border-b border-surface-200 dark:border-gray-700 px-6 py-4">
      <div class="flex items-center justify-between mb-4">
        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">附近设备</h1>
        <button
          @click="refresh"
          class="p-2 rounded-lg hover:bg-surface-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
          :class="{ 'animate-spin': isRefreshing }"
          :disabled="isRefreshing"
        >
          <RefreshCw :size="20" />
        </button>
      </div>

      <!-- 搜索框 -->
      <div class="relative">
        <Search class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" :size="18" />
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索设备..."
          class="w-full pl-10 pr-4 py-2 bg-surface-50 dark:bg-gray-700 border border-surface-200 dark:border-gray-600 rounded-lg focus:outline-none focus:border-primary-400 transition-colors text-gray-900 dark:text-white placeholder-gray-400"
        />
      </div>
    </header>

    <!-- 设备列表 -->
    <div class="flex-1 overflow-y-auto p-6">
      <!-- 加载状态 -->
      <div 
        v-if="deviceStore.isDiscovering && deviceStore.deviceCount === 0"
        class="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500"
      >
        <div class="w-16 h-16 border-4 border-gray-200 dark:border-gray-600 border-t-primary-500 dark:border-t-primary-400 rounded-full animate-spin mb-4" />
        <p>正在搜索附近设备...</p>
      </div>

      <!-- 空状态 -->
      <div 
        v-else-if="filteredDevices.length === 0"
        class="flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500"
      >
        <Monitor :size="64" class="mb-4 opacity-50" />
        <p class="text-lg">{{ searchQuery ? '未找到匹配的设备' : '暂无发现设备' }}</p>
        <p class="text-sm mt-1">确保设备在同一局域网内并运行 Flash Send</p>
      </div>

      <!-- 设备网格 -->
      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <DeviceCard
          v-for="device in filteredDevices"
          :key="device.deviceId"
          :device="device"
        />
      </div>
    </div>

    <!-- 底部状态栏 -->
    <footer class="bg-white dark:bg-gray-800 border-t border-surface-200 dark:border-gray-700 px-6 py-3 text-sm text-gray-500 dark:text-gray-400">
      <div class="flex items-center justify-between">
        <span>
          发现 {{ deviceStore.deviceCount }} 台设备
          <template v-if="deviceStore.onlineDevices.length > 0">
            · {{ deviceStore.onlineDevices.length }} 台在线
          </template>
        </span>
        <span v-if="deviceStore.localDevice">
          本机: {{ deviceStore.localDevice.deviceName }} ({{ deviceStore.localDevice.ip }})
        </span>
      </div>
    </footer>
  </div>
</template>
