---
/**
 * Category Page - 文章分類
 * URL: /wen-zhang-fen-lei/[slug]
 * Displays posts filtered by category from Payload CMS
 */
import Layout from '../../layouts/Layout.astro'
import ArticleCard from '../../components/blog/ArticleCard.astro'
import { fetchCategoryBySlug, fetchPosts, formatDate } from '../../lib/api/blog'

const { slug } = Astro.params

// Fetch category by slug
const category = await fetchCategoryBySlug(slug)

// Handle 404 for non-existent category
if (!category) {
  return Astro.redirect('/404')
}

// Fetch posts for this category (limit 100 for category pages)
const PAGE_SIZE = 100
const postsData = await fetchPosts(1, PAGE_SIZE, slug)
const posts = postsData.docs

// Format date function
const formatDateTW = (dateStr: string | null | undefined): string => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-TW', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}
---

<Layout title={category.title}>
  <!-- Category Header -->
  <section class="category-hero" aria-labelledby="category-heading">
    <div class="container">
      <a href="/news" class="back-link">← 回到文章列表</a>
      <h1 id="category-heading" class="category-title">{category.title}</h1>
      {
        category.nameEn && (
          <p class="category-subtitle">{category.nameEn}</p>
        )
      }
    </div>
  </section>

  <!-- Category Posts -->
  <section class="category-posts">
    <div class="container">
      {
        posts.length > 0 ? (
          <div class="posts-grid">
            {posts.map((post) => (
              <article class="post-item">
                <a href={`/xing-xiao-fang-da-jing/${post.slug}`} class="post-link">
                  {
                    post.heroImage?.url && (
                      <div class="post-image">
                      <img
                      src={post.heroImage.url}
                      alt={post.heroImage.alt || post.title}
                      loading="lazy"
                      />
                    </div>
                  )
                  }
                  <div class="post-content">
                    <h3 class="post-title">{post.title}</h3>
                    <time class="post-date">{formatDateTW(post.publishedAt)}</time>
                    {
                      post.excerpt && (
                        <p class="post-excerpt">{post.excerpt.slice(0, 120)}...</p>
                      )
                    }
                  </div>
                </a>
              </article>
            ))}
          </div>
        ) : (
          <div class="empty-state">
            <p>此分類暫無文章</p>
          </div>
        )
      }
    </div>
  </section>
</Layout>

<style>
  .category-hero {
    padding: 60px 20px 40px;
    text-align: center;
    background-color: #ffffff;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: var(--color-enchunblue, #23608c);
    text-decoration: none;
    font-weight: 500;
  }

  .category-title {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 2rem;
    font-weight:  700;
    color: var(--color-dark-blue, #1a1a1a);
    margin-bottom: 8px;
  }

  .category-subtitle {
    font-family: "Quicksand", "Noto Sans TC", sans-serif;
    font-size: 1rem;
    color: var(--color-gray-600, #666);
  }

  .category-posts {
    padding: 40px 20px 60px;
    background-color: #f8f9fa;
    min-height: 60vh;
  }

  .posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .post-item {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
  }

  .post-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  }

  .post-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .post-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-gray-100, #f5f5f5);
  }

  .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .post-content {
    padding: 20px;
  }

  .post-title {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark-blue, #1a1a1a);
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .post-date {
    font-size: 0.875rem;
    color: var(--color-gray-500, #999);
    margin-bottom: 12px;
  }

  .post-excerpt {
    font-size: 0.9375rem;
    color: var(--color-gray-600, #666);
    line-height: 1.6;
  }

  .empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-gray-500, #999);
  }

  /* Responsive */
  @media (max-width: 991px) {
    .posts-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .category-title {
      font-size: 1.75rem;
    }
  }

  @media (max-width: 767px) {
    .category-hero {
      padding: 40px 16px 30px;
    }

    .category-title {
      font-size: 1.5rem;
    }

    .posts-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .category-posts {
      padding: 30px 16px 50px;
    }
  }
</style>
