<template>
  <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
    <!-- 响应式卡片网格 -->
    <!--
            这个div使用了Tailwind CSS的类来实现响应式的卡片网格布局：
            - grid：将容器设置为网格布局。
            - grid-cols-1：在小屏幕下每行显示1列。
            - sm:grid-cols-2：在中等屏幕（sm及以上）每行显示2列。
            - lg:grid-cols-3：在大屏幕（lg及以上）每行显示3列。
            - gap-4：网格项之间有统一的间距。
            - max-w-8xl：设置最大宽度为8xl，防止内容过宽。
            - mx-auto：左右自动外边距，使网格居中显示。
        -->
    <div class="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 gap-4 w-full mx-auto">
      <div
        v-for="item in firstLevelItems"
        :key="item.path"
        class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5 sm:p-6 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"
        @click="navigateTo(item.path)"
      >
        <!-- 卡片头部 -->
        <div class="flex items-center justify-between mb-1">
          <h2 class="font-sans text-xl sm:text-xl lg:text-2xl font-bold text-gray-900 dark:text-white leading-tight">
            {{ item.title }}
          </h2>
          <span class="text-sm sm:text-base lg:text-lg text-gray-600 dark:text-gray-400 font-normal">
            <span class="text-primary mr-0.3">{{ getChildrenCount(item) }}</span>篇
          </span>
        </div>

        <!-- 子页面列表 -->
        <div
          v-if="getChildrenTitles(item).length > 0"
          class=""
        >
          <div
            v-for="(child, index) in getChildrenWithIcons(item).slice(0, 5)"
            :key="index"
            class="flex items-center justify-between
                        text-sm sm:text-base lg:text-lg text-gray-700 dark:text-gray-300
                         hover:text-blue-600 dark:hover:text-blue-400
                         transition-colors duration-200 py-1
                         border-b border-gray-200 dark:border-gray-700 pt-2"
          >
            <div class="flex items-center flex-1 min-w-0 pl-1 ">
              <UIcon
                :name="(typeof child.icon === 'string' ? child.icon : 'lucide-file-text')"
                class="mr-2 text-gray-400"
                size="14"
              />
              <span class="text-base font-medium font-sans">{{ child.title }}</span>
            </div>
            <UIcon
              name="lucide-chevron-right"
              class="text-gray-400 flex-shrink-0 ml-2"
              size="16"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// 计算属性：提取第一级数据
const firstLevelItems = computed(() => {
  if (!navigation?.value) return []
  return navigation.value
    .filter(item => item.title && item.path)
    .map(item => ({
      ...item,
      description: item.description,
      icon: item.icon || 'lucide-book-open'
    }))
})

// 获取子页面数量
const getChildrenCount = (item: ContentNavigationItem) => {
  return item.children?.length || 0
}

// 获取子页面标题列表
const getChildrenTitles = (item: ContentNavigationItem) => {
  if (!item.children) return []
  return item.children.map(child => child.title).filter(Boolean)
}

// 获取子页面数据（包含图标）
const getChildrenWithIcons = (item: ContentNavigationItem) => {
  if (!item.children) return []
  return item.children.filter(child => child.title)
}

// 导航方法
const navigateTo = (path: string) => {
  if (path) {
    window.location.href = path
  }
}
</script>
