---
import { getTerm, getEmDashCollection, getEntryTerms } from "emdash";
import Base from "../../layouts/Base.astro";
import PostCard from "../../components/PostCard.astro";
import { getReadingTime } from "../../utils/reading-time";

const { slug } = Astro.params;
const term = slug ? await getTerm("category", slug) : null;

if (!term) {
	return Astro.redirect("/404");
}

const { entries: posts } = await getEmDashCollection("posts", {
	where: { category: term.slug },
	orderBy: { published_at: "desc" },
});

// Fetch tags for display on each post card
const filteredPosts = await Promise.all(
	posts.map(async (post) => {
		const tags = await getEntryTerms("posts", post.data.id, "tag");
		return { post, tags };
	})
);
---

<Base title={`${term.label} posts`} description={`All posts in ${term.label}`}>
	<section class="archive-section">
		<header class="archive-header">
			<span class="archive-label">Category</span>
			<h1 class="archive-title">{term.label}</h1>
			<p class="archive-count">
				{filteredPosts.length}
				{filteredPosts.length === 1 ? "post" : "posts"}
			</p>
		</header>

		{
			filteredPosts.length === 0 ? (
				<p class="no-posts">No posts in this category yet.</p>
			) : (
				<div class="posts-grid">
					{filteredPosts.map(({ post, tags }) => (
						<PostCard
							title={post.data.title}
							excerpt={post.data.excerpt}
							featuredImage={post.data.featured_image}
							href={`/posts/${post.id}`}
							date={post.data.publishedAt ?? undefined}
							readingTime={getReadingTime(post.data.content)}
							tags={tags.map((t) => ({ slug: t.slug, label: t.label }))}
						/>
					))}
				</div>
			)
		}
	</section>
</Base>

<style>
	.archive-section {
		max-width: var(--wide-width);
		margin: 0 auto;
		padding: var(--spacing-12) var(--spacing-6);
	}

	.archive-header {
		margin-bottom: var(--spacing-12);
		padding-bottom: var(--spacing-8);
		border-bottom: 1px solid var(--color-border-subtle);
	}

	.archive-label {
		display: block;
		font-size: var(--font-size-xs);
		font-weight: 500;
		color: var(--color-accent);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wider);
		margin-bottom: var(--spacing-2);
	}

	.archive-title {
		font-size: var(--font-size-4xl);
		font-weight: 700;
		letter-spacing: var(--tracking-tight);
		margin-bottom: var(--spacing-2);
	}

	.archive-count {
		font-size: var(--font-size-sm);
		color: var(--color-muted);
	}

	.posts-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-12) var(--spacing-8);
	}

	.no-posts {
		color: var(--color-muted);
	}

	@media (max-width: 900px) {
		.posts-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 600px) {
		.posts-grid {
			grid-template-columns: 1fr;
		}
	}
</style>
