<template>
  <div class="h-screen flex bg-gray-50">
    <!-- Sidebar -->
    <aside class="w-56 bg-white border-r border-gray-200 flex flex-col shrink-0 shadow-sm">
      <!-- Logo -->
      <div class="h-16 flex items-center gap-2.5 px-5 border-b border-gray-100">
        <div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
          <span class="text-white font-bold text-sm">凌</span>
        </div>
        <div>
          <div class="text-sm font-bold text-gray-800">凌空天行</div>
          <div class="text-[10px] text-gray-400">后台管理系统</div>
        </div>
      </div>

      <!-- Menu -->
      <nav class="flex-1 overflow-y-auto py-3 px-3 space-y-1">
        <div v-for="group in menuGroups" :key="group.label">
          <div class="text-[11px] text-gray-400 font-medium px-3 py-2 uppercase tracking-wider">{{ group.label }}</div>
          <router-link v-for="item in group.items" :key="item.path" :to="item.path"
            class="flex items-center gap-3 px-3 py-2.5 text-sm rounded-lg transition-all duration-200"
            :class="$route.path === item.path
              ? 'bg-blue-50 text-blue-700 font-medium shadow-sm'
              : 'text-gray-600 hover:bg-gray-50 hover:text-gray-800'">
            <div :class="item.icon" class="text-lg shrink-0" />
            <span>{{ item.label }}</span>
          </router-link>
        </div>
      </nav>

      <!-- Bottom -->
      <div class="p-4 border-t border-gray-100">
        <div class="flex items-center gap-3 text-sm text-gray-500">
          <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
            <span class="text-blue-600 font-medium text-xs">{{ adminName.charAt(0) }}</span>
          </div>
          <div class="flex-1 min-w-0">
            <div class="text-gray-700 text-sm truncate">{{ adminName }}</div>
            <div class="text-gray-400 text-xs">管理员</div>
          </div>
          <button class="p-1.5 rounded-lg hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition" @click="handleLogout" title="退出登录">
            <div class="i-carbon-logout text-lg" />
          </button>
        </div>
      </div>
    </aside>

    <!-- Main -->
    <div class="flex-1 flex flex-col min-w-0">
      <!-- Header -->
      <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0">
        <div class="flex items-center gap-2 text-sm text-gray-500">
          <span class="text-gray-400">/</span>
          <span class="text-gray-700 font-medium">{{ $route.meta.title }}</span>
        </div>
      </header>

      <!-- Content -->
      <main class="flex-1 overflow-auto p-6">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const adminName = ref(localStorage.getItem('admin_name') || '管理员')

const menuGroups = [
  {
    label: '系统管理',
    items: [
      { path: '/dashboard', label: '工作台', icon: 'i-carbon-dashboard' },
      { path: '/users', label: '用户管理', icon: 'i-carbon-user-multiple' },
    ],
  },
  {
    label: '业务管理',
    items: [
      { path: '/approvals', label: '认证审核', icon: 'i-carbon-certificate-check' },
      { path: '/departments', label: '组织架构', icon: 'i-carbon-tree-view-alt' },
      { path: '/pending-employees', label: '通讯录导入', icon: 'i-carbon-import-export' },
    ],
  },
  {
    label: '访客模块',
    items: [
      { path: '/appointments', label: '预约管理', icon: 'i-carbon-calendar' },
      { path: '/visit-types', label: '来访目的', icon: 'i-carbon-list-dropdown' },
      { path: '/visitor-areas', label: '到访区域', icon: 'i-carbon-location' },
      { path: '/workflow-designer', label: '流程设计器', icon: 'i-carbon-diagram' },
      { path: '/config', label: '审批配置', icon: 'i-carbon-settings-adjust' },
    ],
  },
  {
    label: '内容管理',
    items: [
      { path: '/banners', label: 'Banner管理', icon: 'i-carbon-image' },
      { path: '/materials', label: '素材上传', icon: 'i-carbon-upload' },
      { path: '/notices', label: '通知管理', icon: 'i-carbon-notification' },
    ],
  },
]

function handleLogout() {
  localStorage.clear()
  router.push('/login')
}
</script>

