<template>
  <aside class="w-[200px] h-screen flex-shrink-0 overflow-y-auto" style="background-color: #fff; border-right: 1px solid #e8e8e8">
    <!-- Logo -->
    <div class="px-4 py-4" style="border-bottom: 1px solid #f0f0f0">
      <div class="text-lg font-semibold" style="color: #4a7c59">Geomative</div>
    </div>

    <!-- Homepage -->
    <router-link to="/" class="flex items-center gap-2 px-4 py-3 text-sm transition-colors"
      :style="{ color: isActive('/') ? '#4a7c59' : 'rgba(0,0,0,0.65)', backgroundColor: isActive('/') ? '#eef5f0' : 'transparent', borderLeft: isActive('/') ? '3px solid #4a7c59' : '3px solid transparent', fontWeight: isActive('/') ? 600 : 400 }">
      首页
    </router-link>

    <!-- Menu Groups -->
    <div v-for="group in menuGroups" :key="group.title">
      <div class="px-4 py-2.5 text-xs font-semibold uppercase tracking-wider"
        style="color: rgba(0,0,0,0.35)">
        {{ group.title }}
      </div>
      <router-link
        v-for="item in group.items" :key="item.path" :to="item.path"
        class="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
        :style="{
          color: isActive(item.path) ? '#4a7c59' : 'rgba(0,0,0,0.65)',
          backgroundColor: isActive(item.path) ? '#eef5f0' : 'transparent',
          borderLeft: isActive(item.path) ? '3px solid #4a7c59' : '3px solid transparent',
          fontWeight: isActive(item.path) ? 600 : 400,
        }">
        <component :is="item.icon" :size="16" :style="{ color: isActive(item.path) ? '#4a7c59' : 'rgba(0,0,0,0.35)' }" />
        {{ item.label }}
      </router-link>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { Monitor, Settings2, Key, Cpu, FileCode, Gauge, Wrench, Recycle } from 'lucide-vue-next'

const route = useRoute()
const isActive = (path: string) =>
  path === '/' ? route.path === '/' : route.path === path || route.path.startsWith(path + '/')

const menuGroups = [
  { title: '设备', items: [
    { path: '/devices', label: '设备列表', icon: Monitor },
    { path: '/models', label: '设备型号管理', icon: Settings2 },
    { path: '/boards', label: '板卡型号管理', icon: Cpu },
  ]},
  { title: '授权', items: [
    { path: '/licenses', label: '授权管理', icon: Key },
    ]},
  { title: '配置', items: [
    { path: '/config-files', label: '配置管理', icon: FileCode },
  ]},
  { title: '校准', items: [
    { path: '/calibration', label: '校准记录', icon: Gauge },
  ]},
  { title: '维修', items: [
    { path: '/repair', label: '维修工单', icon: Wrench },
    { path: '/scrap', label: '报废回收', icon: Recycle },
  ]},
]
</script>
