<script setup lang="ts">
// 获取 blog 集合的所有文章
const { data: articles } = await useAsyncData('blog-articles', () => {
  return queryCollection('blog')
    .select('path', 'title', 'description', 'img', 'date')
    .where('path', 'NOT LIKE', '%navigation%')
    .all()
})

// 格式化日期
const formatDate = (date: string | Date | null | undefined) => {
  if (!date) return '未知时间'
  try {
    const d = new Date(date)
    return d.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
  } catch {
    return '未知时间'
  }
}

// 计算阅读时间（基于文章内容长度估算）
// const getReadingTime = (content: string | null | undefined) => {
//   if (!content) return 1
//   try {
//     const wordsPerMinute = 200
//     const wordCount = String(content).split(/\s+/).length
//     return Math.max(1, Math.ceil(wordCount / wordsPerMinute))
//   } catch {
//     return 1
//   }
// }
</script>

<template>
  <div class="w-full bg-gray-50 dark:bg-gray-900 min-h-screen mt-4">
    <div class="max-w-4xl mx-auto ">


      <!-- 文章列表 -->
      <div class="space-y-6 w-full">
        <NuxtLink
          v-for="item in articles"
          :key="item.path"
          :to="item.path"
          class="block w-full"
        >
          <article
            class="pr-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-all duration-200 cursor-pointer group"
          >
            <!-- 文章内容布局 -->
            <div class="flex flex-row">
              <!-- 图片预览区域 -->
              <div class="md:w-48 h-32 w-32 mt-2 ml-2 mb-2 md:mr-2 -mr-1 bg-gray-100 dark:bg-gray-700 rounded-xl overflow-hidden">
                <img 
                  :src="item.img || '/images/default-blog.jpg'" 
                  :alt="item.title"
                  class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                />  
              </div>
              
              <!-- 文字内容区域 -->
              <div class="flex-1 p-4 md:p-6">
                <!-- 文章头部 -->
                <div class="mb-4">
                  <h2 class="md:text-2xl text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                    {{ item.title }}
                  </h2>

                  <!-- 文章描述 -->
                  <p
                    v-if="item.description"
                    class="text-gray-600 dark:text-gray-300 md:text-sm text-xs line-clamp-2"
                  >
                    {{ item.description }}
                  </p>
                </div>

                <!-- 文章元信息 -->
                <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                  <div class="flex items-center gap-4">
                    <!-- 文章时间 -->
                    <div class="flex items-center gap-1">
                      <UIcon
                        name="lucide-clock"
                        size="14"
                      />
                      <span>{{ formatDate(item.date) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </article>
        </NuxtLink>
      </div>

      <!-- 空状态 -->
      <div
        v-if="!articles || articles.length === 0"
        class="text-center py-12"
      >
        <UIcon
          name="lucide-file-text"
          class="mx-auto text-4xl text-gray-400 mb-4"
        />
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
          暂无文章
        </h3>
        <p class="text-gray-500 dark:text-gray-400">
          还没有发布任何博客文章
        </p>
      </div>
    </div>
  </div>
</template>
