<template>
  <div>    
    <UContentNavigation 
      :navigation="directoryNavigation" 
      highlight 
      color="primary"
      variant="pill"
      :ui="{
        root: '',
        content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
        list: 'isolate -mx-2.5 -mt-1.5',
        item: '',
        listWithChildren: 'ms-5 border-s border-default',
        itemWithChildren: 'flex flex-col data-[state=open]:mb-1.5',
        trigger: 'font-semibold',
        link: 'group relative w-full px-2.5 py-1.5 before:inset-y-px before:inset-x-0 flex items-center gap-1.5 text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2',
        linkLeadingIcon: 'shrink-0 size-5',
        linkTrailing: 'ms-auto inline-flex gap-1.5 items-center',
        linkTrailingBadge: 'shrink-0',
        linkTrailingBadgeSize: 'sm',
        linkTrailingIcon: 'size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180',
        linkTitle: 'truncate',
        linkTitleExternalIcon: 'size-3 align-top text-dimmed'
      }"
    />
  </div>
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

// 获取导航数据
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// 处理导航数据，只显示一级目录和根目录文件
const directoryNavigation = computed(() => {
  if (!navigation?.value) return []
  
  return navigation.value.map(item => {
    // 如果是根目录文件（没有 children），直接返回
    if (!item.children || item.children.length === 0) {
      return {
        title: item.title,
        path: item.path,
        icon: (item.icon as string) || 'i-lucide-file-text',
        active: Boolean(item.active)
      }
    }
    
    // 如果是一级目录，只保留目录本身，不显示子项
    return {
      title: item.title,
      path: item.path,
      icon: (item.icon as string) || 'i-lucide-folder',
      active: Boolean(item.active),
      // 不包含 children，这样就不会展开显示子项
      children: []
    }
  }).filter(item => item.title && item.path) // 过滤掉空项
})

// 调试信息
// console.log('ContentDirectory: Navigation data:', navigation.value)
// console.log('ContentDirectory: Processed navigation:', directoryNavigation.value)
</script>