---
import BlogLayout from '../../../layouts/BlogLayout.astro';
import BlogList from '../../../components/blog/BlogList.astro';
import CategoryCard from '../../../components/blog/CategoryCard.astro';
import TagCard from '../../../components/blog/TagCard.astro';
import Container from '../../../components/ui/Container';
import { type BlogPost } from '@/types';
import { type Lang } from '@/i18n/utils';
import { defaultLang } from '@/i18n/ui';
import { sortPostsByDate, extractCategories, extractTags } from '@/utils/blog-utils';

// 使用Astro.currentLocale获取当前语言环境
const lang = Astro.currentLocale as Lang || defaultLang;

// 使用import.meta.glob读取所有中文博客文章
const allPosts = await import.meta.glob('./posts/*.md', { eager: true });

// 处理博客文章数据
const blogPosts: BlogPost[] = Object.values(allPosts).map((post: any) => {
  const slug = post.url?.split('/').filter(Boolean).pop() || '';
  
  // 获取文章的默认图片，如果frontmatter中没有指定
  const defaultImage = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=250&fit=crop&crop=center";
  
  return {
    title: post.frontmatter.title,
    description: post.frontmatter.description || '',
    image: post.frontmatter.image || defaultImage,
    slug: slug,
    tags: post.frontmatter.tags || [],
    tagId: post.frontmatter.tagId || [],
    category: Array.isArray(post.frontmatter.category) ? post.frontmatter.category : post.frontmatter.category ? [post.frontmatter.category] : [],
    categoryId: Array.isArray(post.frontmatter.categoryId) ? post.frontmatter.categoryId : post.frontmatter.categoryId ? [post.frontmatter.categoryId] : [],
    date: post.frontmatter.date || post.frontmatter.pubDate || '',
    readTime: post.frontmatter.readTime || post.frontmatter.readingTime || '5分钟阅读',
  };
});

// 使用工具函数按日期排序
const sortedBlogPosts = sortPostsByDate(blogPosts);

// 提取所有文章的分类和标签信息（用于侧边栏）
const allPostsArray = Object.values(allPosts).map((post: any) => ({
  category: post.frontmatter.category || [],
  categoryId: post.frontmatter.categoryId || [],
  tags: post.frontmatter.tags || [],
  tagId: post.frontmatter.tagId || []
}));

// 使用工具函数提取分类和标签
const categories = extractCategories(allPostsArray);
const tags = extractTags(allPostsArray);

---

<BlogLayout title="博客 - 赵桂阳" description="深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。">
  <main class="min-h-screen">
    <!-- 头部区域 -->
    <Container client:load size="md" className="pt-24 pb-12">
      <div class="text-center mb-16">
        <h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
          我的<span class="text-purple-500">博客</span>
        </h1>
        <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
          深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。
        </p>
      </div>
    </Container>

    <!-- 主要内容 -->
    <Container client:load size="md" className="pb-20">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- 侧边栏 -->
        <div class="lg:col-span-1 space-y-8">
          <!-- 分类卡片 -->
          <CategoryCard lang="zh" />

          <!-- 标签卡片 -->
          <TagCard lang="zh" />

        </div>

        <!-- 博客文章 -->
        <div class="lg:col-span-3">
          <BlogList posts={sortedBlogPosts} lang="zh" />
        </div>
      </div>
    </div>
  </main>
</BlogLayout>

<style>
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>