---
import type { BlogPost } from '@/lib/posts';

interface Props {
  posts: BlogPost[];
}

type ArchiveMonth = {
  key: string;
  label: string;
  posts: BlogPost[];
};

type ArchiveYear = {
  year: number;
  count: number;
  months: ArchiveMonth[];
};

const { posts } = Astro.props;
const monthFormatter = new Intl.DateTimeFormat('zh-CN', { month: 'long' });
const dayFormatter = new Intl.DateTimeFormat('zh-CN', { day: '2-digit' });
const archiveYears = posts.reduce<ArchiveYear[]>((years, post) => {
  const year = post.date.getFullYear();
  const monthKey = `${year}-${String(post.date.getMonth() + 1).padStart(2, '0')}`;
  let yearGroup = years.find((item) => item.year === year);

  if (!yearGroup) {
    yearGroup = { year, count: 0, months: [] };
    years.push(yearGroup);
  }

  let monthGroup = yearGroup.months.find((item) => item.key === monthKey);

  if (!monthGroup) {
    monthGroup = {
      key: monthKey,
      label: monthFormatter.format(post.date),
      posts: [],
    };
    yearGroup.months.push(monthGroup);
  }

  yearGroup.count += 1;
  monthGroup.posts.push(post);

  return years;
}, []);
---

<div class="archive-timeline">
  {archiveYears.map((yearGroup) => (
    <section class="archive-year" aria-labelledby={`archive-year-${yearGroup.year}`}>
      <div class="archive-year-marker" aria-hidden="true"></div>
      <header class="archive-year-head">
        <h2 id={`archive-year-${yearGroup.year}`}>{yearGroup.year}</h2>
        <span>{yearGroup.count} 篇</span>
      </header>
      <div class="archive-months">
        {yearGroup.months.map((monthGroup) => (
          <section class="archive-month" aria-label={`${yearGroup.year} ${monthGroup.label}`}>
            <div class="archive-month-label">
              <span>{monthGroup.label}</span>
              <small>{monthGroup.posts.length} 篇</small>
            </div>
            <div class="archive-list">
              {monthGroup.posts.map((post) => (
                <a href={post.href}>
                  <time datetime={post.date.toISOString()}>{dayFormatter.format(post.date)}</time>
                  <span>{post.title}</span>
                </a>
              ))}
            </div>
          </section>
        ))}
      </div>
    </section>
  ))}
</div>