---
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 { useTranslations } from '@/i18n/utils';
import { type Lang } from '@/types/i18n';
import { defaultLang } from '@/i18n/ui';
import { sortPostsByDate } from '@/utils/blog-utils';

// Get current language environment using Astro.currentLocale
const lang = Astro.currentLocale as Lang || defaultLang;
const t = useTranslations(lang);

// Read all blog posts using import.meta.glob
const allPosts = await import.meta.glob('./posts/*.md', { eager: true });

// Process blog post data
const blogPosts: BlogPost[] = Object.values(allPosts).map((post: any) => {
  const slug = post.url?.split('/').filter(Boolean).pop() || '';
  
  // Default image if not specified in 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 min read',
  };
});

// Sort posts by date
const sortedBlogPosts = sortPostsByDate(blogPosts);

---

<BlogLayout title="Blog - Joy Zhao" description="Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.">
  <main class="min-h-screen">
    <!-- Header Section -->
    <Container client:load 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">
          Our <span class="text-purple-500">Latest</span> Blog
        </h1>
        <p class="text-xl text-muted-foreground max-w-3xl mx-auto">
          {t('blog.slogan')} Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.
        </p>
      </div>
    </Container>

    <!-- Main Content -->
    <Container client:load 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="en" />

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

        <!-- Blog Posts -->
        <div class="lg:col-span-3">
          <BlogList posts={sortedBlogPosts} lang="en" />
        </div>
      </div>
    </div>
  </main>
</BlogLayout>

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