<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-20 bg-white/80 dark:bg-surface-900/90 backdrop-blur-xl border-r border-surface-200/50 dark:border-surface-700/50 flex flex-col items-center py-6 shadow-[4px_0_24px_rgba(0,0,0,0.02)] z-50 drag-region">
    <!-- Logo -->
    <div class="mb-8 relative group no-drag cursor-default">
      <div class="w-11 h-11 bg-gradient-to-br from-primary-500 to-primary-600 rounded-2xl flex items-center justify-center shadow-lg shadow-primary-500/30 group-hover:scale-105 transition-transform duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 text-white"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path></svg>
      </div>
      <!-- Glow effect -->
      <div class="absolute inset-0 bg-primary-500/40 blur-lg rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 -z-10"></div>
    </div>

    <!-- 连接状态 -->
    <div 
      class="mb-8 p-2 rounded-full transition-all duration-300 no-drag"
      :class="deviceStore.isServerRunning ? 'bg-green-100/50 dark:bg-green-900/20 text-green-600 dark:text-green-400' : 'bg-surface-100 dark:bg-surface-800 text-surface-400'"
      :title="deviceStore.isServerRunning ? '服务正常运行' : '服务已断开'"
    >
      <Wifi v-if="deviceStore.isServerRunning" :size="18" class="animate-pulse-slow" />
      <WifiOff v-else :size="18" />
    </div>

    <!-- 导航菜单 -->
    <nav class="flex-1 flex flex-col gap-4 w-full px-3 no-drag">
      <button
        v-for="item in navItems"
        :key="item.path"
        @click="router.push(item.path)"
        class="w-full aspect-square rounded-2xl flex flex-col items-center justify-center gap-1 transition-all duration-300 relative group"
        :class="[
          isActive(item.path)
            ? 'bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-300 shadow-sm'
            : 'text-surface-500 dark:text-surface-400 hover:bg-surface-50 dark:hover:bg-surface-800 hover:text-surface-700 dark:hover:text-surface-200'
        ]"
        :title="item.label"
      >
        <component 
          :is="item.icon" 
          :size="22" 
          class="transition-transform duration-300 group-hover:scale-110" 
          :class="{ 'group-active:scale-95': true }"
        />
        <span class="text-[10px] font-medium opacity-0 group-hover:opacity-100 transition-opacity absolute -bottom-2 translate-y-full bg-surface-900 text-white px-2 py-0.5 rounded shadow-lg pointer-events-none z-50 whitespace-nowrap hidden sm:block">
            {{ item.label }}
        </span>
        
        <!-- 未读消息徽章 (仅在设备页) -->
        <span
          v-if="item.path === '/devices' && chatStore.totalUnread > 0"
          class="absolute top-2 right-2 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white dark:border-surface-900 shadow-sm"
        >
          <span class="absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75 animate-ping"></span>
        </span>
      </button>
    </nav>

    <!-- 设备数量 -->
    <div class="mt-auto mb-6 text-center no-drag">
      <div class="text-[10px] uppercase tracking-wider text-surface-400 font-semibold mb-1">Online</div>
      <div class="text-sm font-bold bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300 px-3 py-1 rounded-full min-w-[2rem]">
        {{ deviceStore.onlineDevices.length }}
      </div>
    </div>
  </aside>
</template>
