<template>
  <div
    class="w-64 bg-white dark:bg-gray-900 flex flex-col h-screen border-r border-gray-200 dark:border-gray-700 overflow-hidden">
    <!--  Logo  -->
    <div class="flex-shrink-0 p-4 border-gray-200 dark:border-gray-700">
      <!-- Logo and Site Name -->
      <div class="h-8">
        <NuxtLink to="/" class="flex items-center space-x-3">
          <div class="w-8 h-8 bg-primary rounded-xl flex items-center justify-center shadow-md">
            <span class="text-white font-bold text-lg">E</span>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-white">简单文档</span>
          <TemplateMenu />
        </NuxtLink>
      </div>
    </div>

    <!-- Search Box -->
    <div class="p-4 border-gray-200 dark:border-gray-700">
      <ClientOnly>
        <UContentSearchButton :collapsed="false" label="搜索文档" class="w-full"
          color="primary" />
      </ClientOnly>
    </div>

    <!-- 可滚动的导航区域 -->
    <div class=" h-full overflow-y-auto ">

      <!-- 导航 Section -->

      <div>
        <NuxtLink to="/"
          class="flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200"
          :class="{
            'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 shadow-sm':
              $route.path === '/',
          }">
          <Icon name="lucide-home" class="text-primary mr-2" size="20" />
          站点首页
        </NuxtLink>
      </div>

      <!-- 总目录及展示页导航 -->
      <div class="flex items-center px-8 p-1">
        <DocsAsideLeftTop />
      </div>

      <!-- 分隔线 -->
      <div class="mt-4 uppercase tracking-wider border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />

      <!-- 文档目录导航 -->
      <div class="mt-6 flex items-center justify-start pl-8 w-4/5">
          <UContentNavigation highlight :navigation="navigation" color="primary" type="single" variant="pill" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from "@nuxt/content";
const { header } = useAppConfig();
const navigation = inject<Ref<ContentNavigationItem[]>>("navigation");

// const handleSearch = () => {
//   // 搜索功能将在后续实现
//   console.log("Searching for:", searchQuery.value);
// };

// 调试信息
// console.log('AppSidebar: Navigation data:', navigation.value)
// console.log('AppSidebar: Pending:', pending.value)
// console.log('AppSidebar: Error:', error.value)
</script>
