---
export const prerender = false;

import {
	getEmDashCollection,
	getTaxonomyTerms,
	getTermsForEntries,
} from "emdash";
import Base from "../../layouts/Base.astro";
import ProjectCard from "../../components/ProjectCard.astro";

// Get filter from query param. When set, push the filter down to the
// database via `where` instead of loading every project and filtering
// in JS — that pattern scales O(projects × terms-per-project) and
// blows up the moment you have more than a couple of dozen entries.
const activeTag = Astro.url.searchParams.get("tag");

const [{ entries: sortedProjects, cacheHint }, tags] = await Promise.all([
	getEmDashCollection("projects", {
		orderBy: { published_at: "desc" },
		...(activeTag ? { where: { tag: activeTag } } : {}),
	}),
	getTaxonomyTerms("tag"),
]);

Astro.cache.set(cacheHint);

// Single batched JOIN for the tag pills shown on each card, instead of
// one getEntryTerms() round-trip per card.
const tagsByEntry = await getTermsForEntries(
	"projects",
	sortedProjects.map((p) => p.data.id),
	"tag",
);
const projectsWithTags = sortedProjects.map((project) => ({
	project,
	projectTags: tagsByEntry.get(project.data.id) ?? [],
}));
---

<Base
	title={activeTag
		? `${tags.find((t) => t.slug === activeTag)?.label || activeTag} — Work`
		: "Work"}
>
	<section class="work-header">
		<h1>Work</h1>
		<p class="work-intro">
			A selection of projects spanning branding, web design, print, and
			photography.
		</p>

		{
			tags.length > 0 && (
				<nav class="tag-filters" aria-label="Filter by tag">
					{tags.map((tag) => (
						<a
							href={`/work?tag=${tag.slug}`}
							class:list={["tag-filter", { active: activeTag === tag.slug }]}
						>
							{tag.label}
						</a>
					))}
					{activeTag && (
						<a href="/work" class="tag-clear" aria-label="Clear filter">
							Clear
						</a>
					)}
				</nav>
			)
		}
	</section>

	{
		projectsWithTags.length > 0 ? (
			<section class="projects">
				<div class="projects-grid">
					{projectsWithTags.map(({ project, projectTags }) => (
						<ProjectCard
							title={project.data.title ?? "Untitled"}
							summary={project.data.summary}
							featuredImage={project.data.featured_image ?? ""}
							href={`/work/${project.id}`}
							client={project.data.client}
							year={project.data.year}
							tags={projectTags.map((t) => t.label)}
						/>
					))}
				</div>
			</section>
		) : (
			<section class="empty-state">
				{activeTag ? (
					<>
						<p>No projects found with this tag.</p>
						<a href="/work" class="btn">
							View all projects
						</a>
					</>
				) : (
					<>
						<p>No projects yet. Add your first project in the admin panel.</p>
						<a href="/_emdash/admin/content/projects/new" class="btn">
							Add a project
						</a>
					</>
				)}
			</section>
		)
	}
</Base>

<style>
	.work-header {
		max-width: var(--wide-width);
		margin: 0 auto;
		padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
	}

	.work-header h1 {
		font-size: var(--font-size-3xl);
		margin-bottom: var(--spacing-md);
	}

	.work-intro {
		font-size: var(--font-size-lg);
		color: var(--color-muted);
		max-width: 600px;
	}

	.tag-filters {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm);
		margin-top: var(--spacing-xl);
	}

	.tag-filter {
		display: inline-block;
		padding: var(--spacing-xs) var(--spacing-md);
		font-size: var(--font-size-sm);
		color: var(--color-muted);
		text-decoration: none;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		transition:
			color var(--transition-fast),
			border-color var(--transition-fast),
			background var(--transition-fast);
	}

	.tag-filter:hover {
		color: var(--color-text);
		border-color: var(--color-text);
	}

	.tag-filter.active {
		color: var(--color-bg);
		background: var(--color-text);
		border-color: var(--color-text);
	}

	.tag-clear {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-xs);
		padding: var(--spacing-xs) var(--spacing-md);
		font-size: var(--font-size-sm);
		color: var(--color-muted);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	.tag-clear:hover {
		color: var(--color-text);
	}

	.tag-clear::before {
		content: "×";
		font-size: 1.1em;
	}

	.projects {
		max-width: var(--wide-width);
		margin: 0 auto;
		padding: 0 var(--spacing-lg) var(--spacing-4xl);
	}

	.projects-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-2xl);
	}

	.empty-state {
		text-align: center;
		padding: var(--spacing-4xl) var(--spacing-lg);
		color: var(--color-muted);
	}

	.btn {
		display: inline-block;
		margin-top: var(--spacing-lg);
		padding: var(--spacing-sm) var(--spacing-lg);
		background: var(--color-text);
		color: var(--color-bg);
		text-decoration: none;
		border-radius: var(--radius);
		font-size: var(--font-size-sm);
	}

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