---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Pagination from '@/components/Pagination.astro';
import PageHeaderCard from '@/components/PageHeaderCard.astro';
import StatsChart from '@/components/StatsChart.astro';
import { getAllPosts } from '@/lib/posts';
import { getPageSlice } from '@/lib/pagination';

const posts = await getAllPosts();
const pageData = getPageSlice(posts, 1);
const archiveStats = [...posts.reduce((months, post) => {
  const key = `${post.date.getFullYear()}-${String(post.date.getMonth() + 1).padStart(2, '0')}`;
  months.set(key, (months.get(key) ?? 0) + 1);
  return months;
}, new Map<string, number>())]
  .sort(([a], [b]) => a.localeCompare(b))
  .map(([label, value]) => ({ label, value }));
---

<BaseLayout title="归档">
  <section class="content-wrap narrow">
    <PageHeaderCard title="归档" subtitle={`共 ${posts.length} 篇文章`} />
    <StatsChart title="归档发布趋势" subtitle="按月份统计文章发布数量" type="line" items={archiveStats} />
    <div class="archive-list">
      {pageData.items.map((post) => (
        <a href={post.href}>
          <time datetime={post.date.toISOString()}>{post.dateText}</time>
          <span>{post.title}</span>
        </a>
      ))}
    </div>
    <Pagination currentPage={pageData.currentPage} totalPages={pageData.totalPages} basePath="/archives/" />
  </section>
</BaseLayout>