<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useDeviceStore } from '@/stores/deviceStore'
import { useChatStore } from '@/stores/chatStore'
import { 
  Monitor, 
  FolderOpen, 
  Settings, 
  Wifi,
  WifiOff
} from 'lucide-vue-next'

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

const navItems = [
  { path: '/devices', icon: Monitor, label: '设备' },
  { path: '/files', icon: FolderOpen, label: '文件' },
  { path: '/settings', icon: Settings, label: '设置' },
]

const isActive = (path) => route.path.startsWith(path)
</script>

<template>
  <aside class="w-16 bg-white dark:bg-gray-800 border-r border-surface-200 dark:border-gray-700 flex flex-col items-center py-4">
    <!-- Logo -->
    <div class="w-10 h-10 bg-primary-500 rounded-xl flex items-center justify-center mb-6">
      <span class="text-white font-bold text-lg">F</span>
    </div>

    <!-- 连接状态 -->
    <div 
      class="mb-6 p-2 rounded-lg"
      :class="deviceStore.isServerRunning ? 'text-green-500' : 'text-gray-400 dark:text-gray-500'"
    >
      <Wifi v-if="deviceStore.isServerRunning" :size="20" />
      <WifiOff v-else :size="20" />
    </div>

    <!-- 导航菜单 -->
    <nav class="flex-1 flex flex-col gap-2">
      <button
        v-for="item in navItems"
        :key="item.path"
        @click="router.push(item.path)"
        class="w-10 h-10 rounded-xl flex items-center justify-center transition-all relative"
        :class="[
          isActive(item.path)
            ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400'
            : 'text-gray-500 dark:text-gray-400 hover:bg-surface-100 dark:hover:bg-gray-700'
        ]"
        :title="item.label"
      >
        <component :is="item.icon" :size="20" />
        
        <!-- 未读消息徽章 (仅在设备页) -->
        <span
          v-if="item.path === '/devices' && chatStore.totalUnread > 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"
        >
          {{ chatStore.totalUnread > 9 ? '9+' : chatStore.totalUnread }}
        </span>
      </button>
    </nav>

    <!-- 设备数量 -->
    <div class="mt-auto text-center">
      <div class="text-xs text-gray-400 dark:text-gray-500">在线</div>
      <div class="text-lg font-semibold text-gray-700 dark:text-gray-300">
        {{ deviceStore.onlineDevices.length }}
      </div>
    </div>
  </aside>
</template>
