<template>
  <aside
    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
          v-if="header?.search"
          :collapsed="false"
          loading="true"
          label="搜索文档"
          description="请输入关键词"
          class="w-full"
          color="primary"
        />
      </ClientOnly>
    </div>

    <!-- 可滚动的导航区域 -->
    <div
      class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500"
      style="max-height: calc(100vh - 200px)"
    >

        <!-- 导航 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 ">
          <ContentDirectory />
        </div>



        <div class="mt-4 border-t border-gray-200 dark:border-gray-700 w-3/5 mx-5" />
        <!-- root: 'space-y-1',
                  list: 'space-y-1',
                  item: '',
                  listWithChildren: 'ms-4 border-s border-gray-200 dark:border-gray-700',
                  itemWithChildren: 'flex flex-col',
                  trigger: 'font-medium text-sm',
                  link: 'group relative w-full px-4 py-3 text-sm font-medium rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 hover:shadow-sm transition-all duration-200 flex items-center gap-2',
                  linkLeadingIcon: 'shrink-0 size-5',
                  linkTrailingIcon: 'size-4 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
                  linkTitle: 'truncate'
                   -->
        <!-- 分隔线 -->

          <!-- Document Navigation -->
          <UContainer>
            <UPageAside>
              <UContentNavigation 
                highlight 
                :navigation="navigation"
                color="primary"
                variant="pill"
                :ui="{
                }"
              />
            </UPageAside>
          </UContainer>


    </div>
  </aside>
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from "@nuxt/content";
const { header } = useAppConfig();
// const searchQuery = ref("");

// 折叠状态管理
// const expandedGroups = ref<Set<string>>(new Set())

// 切换分组展开状态
// const toggleGroup = (groupPath: string) => {
//   if (expandedGroups.value.has(groupPath)) {
//     expandedGroups.value.delete(groupPath)
//   } else {
//     expandedGroups.value.add(groupPath)
//   }
// }

// 检查分组是否展开
// const isGroupExpanded = (groupPath: string) => {
//   return expandedGroups.value.has(groupPath)
// }

// // 使用官方的 queryCollectionNavigation 方法获取导航数据
// const { data: navigation, pending, error, refresh } = await useAsyncData('content-navigation', () => {
//   return queryCollectionNavigation('docs', ['description'])
// })

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>
