---
import { getEmDashEntry, getEmDashCollection, decodeSlug } from "emdash";
import { Image, PortableText } from "emdash/ui";
import Base from "../../layouts/Base.astro";
import ProjectCard from "../../components/ProjectCard.astro";

const slug = decodeSlug(Astro.params.slug);

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

const { entry: project, cacheHint } = await getEmDashEntry("projects", slug);

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

Astro.cache.set(cacheHint);

// Related projects: order by date in the DB and request a small lookahead
// so we can drop the current entry without re-querying. Avoids loading
// every project just to slice off two.
const { entries: relatedProjects } = await getEmDashCollection("projects", {
	orderBy: { published_at: "desc" },
	limit: 3,
});
const otherProjects = relatedProjects.filter((p) => p.id !== project.id).slice(0, 2);

// Parse gallery if present
const gallery = project.data.gallery as
	| Array<{ url: string; alt?: string }>
	| undefined;

// Get image src for OG image
function getImageSrc(img: unknown): string | undefined {
	if (!img || typeof img !== "object") return undefined;
	const image = img as Record<string, unknown>;
	return typeof image.src === "string" ? image.src : undefined;
}
---

<Base
	title={project.data.title}
	description={project.data.summary}
	image={getImageSrc(project.data.featured_image)}
>
	<article class="project">
		<header class="project-header">
			<div class="project-meta">
				{
					project.data.client && (
						<span class="project-client" {...project.edit.client}>
							{project.data.client}
						</span>
					)
				}
				{
					project.data.client && project.data.year && (
						<span class="meta-separator">·</span>
					)
				}
				{
					project.data.year && (
						<span class="project-year" {...project.edit.year}>
							{project.data.year}
						</span>
					)
				}
			</div>
			<h1 class="project-title" {...project.edit.title}>
				{project.data.title}
			</h1>
			{
				project.data.summary && (
					<p class="project-summary" {...project.edit.summary}>
						{project.data.summary}
					</p>
				)
			}
			{
				project.data.url && (
					<a
						href={project.data.url ?? "#"}
						class="project-link"
						target="_blank"
						rel="noopener noreferrer"
					>
						View Live Project →
					</a>
				)
			}
		</header>

		{
			project.data.featured_image && (
				<div class="featured-image" {...project.edit.featured_image}>
					<Image image={project.data.featured_image} />
				</div>
			)
		}

		<div class="project-content">
			<PortableText value={project.data.content} />
		</div>

		{
			gallery && gallery.length > 0 && (
				<div class="project-gallery">
					{gallery.map((img) => (
						<div class="gallery-item">
							<img src={img.url} alt={img.alt || ""} loading="lazy" />
						</div>
					))}
				</div>
			)
		}
	</article>

	{
		otherProjects.length > 0 && (
			<section class="more-projects">
				<div class="more-inner">
					<h2 class="more-title">More Work</h2>
					<div class="more-grid">
						{otherProjects.map((p) => (
							<ProjectCard
								title={p.data.title ?? "Untitled"}
								summary={p.data.summary}
								featuredImage={p.data.featured_image ?? ""}
								href={`/work/${p.id}`}
								client={p.data.client}
								year={p.data.year}
							/>
						))}
					</div>
				</div>
			</section>
		)
	}
</Base>

<style>
	.project {
		max-width: var(--max-width);
		margin: 0 auto;
		padding: 0 var(--spacing-lg) var(--spacing-4xl);
	}

	.project-header {
		margin-bottom: var(--spacing-2xl);
	}

	.project-meta {
		font-size: var(--font-size-sm);
		color: var(--color-muted);
		margin-bottom: var(--spacing-sm);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.meta-separator {
		margin: 0 var(--spacing-sm);
	}

	.project-title {
		font-family: var(--font-serif);
		font-size: var(--font-size-4xl);
		font-weight: 500;
		line-height: 1.1;
		margin-bottom: var(--spacing-lg);
	}

	.project-summary {
		font-size: var(--font-size-lg);
		color: var(--color-muted);
		line-height: 1.6;
		margin-bottom: var(--spacing-lg);
	}

	.project-link {
		display: inline-block;
		font-size: var(--font-size-sm);
		color: var(--color-accent);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	.project-link:hover {
		color: var(--color-text);
	}

	.featured-image {
		margin-bottom: var(--spacing-3xl);
	}

	.featured-image img {
		width: 100%;
		height: auto;
		border-radius: var(--radius);
	}

	.project-content {
		font-size: var(--font-size-base);
		line-height: 1.7;
	}

	.project-content :global(p) {
		margin-bottom: 1.5em;
	}

	.project-content :global(h2) {
		font-family: var(--font-serif);
		font-size: var(--font-size-2xl);
		font-weight: 500;
		margin-top: 2.5em;
		margin-bottom: 0.75em;
	}

	.project-content :global(h3) {
		font-family: var(--font-serif);
		font-size: var(--font-size-xl);
		font-weight: 500;
		margin-top: 2em;
		margin-bottom: 0.5em;
	}

	.project-content :global(blockquote) {
		margin: 2em 0;
		padding-left: var(--spacing-xl);
		border-left: 2px solid var(--color-accent);
		color: var(--color-muted);
		font-family: var(--font-serif);
		font-style: italic;
		font-size: var(--font-size-lg);
	}

	.project-content :global(ul),
	.project-content :global(ol) {
		margin-bottom: 1.5em;
		padding-left: 1.25em;
	}

	.project-content :global(li) {
		margin-bottom: 0.5em;
	}

	.project-content :global(img) {
		margin: 2em 0;
		border-radius: var(--radius);
	}

	.project-gallery {
		margin-top: var(--spacing-3xl);
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg);
	}

	.gallery-item img {
		width: 100%;
		height: auto;
		border-radius: var(--radius);
	}

	.more-projects {
		background: var(--color-surface);
		padding: var(--spacing-4xl) 0;
		margin-top: var(--spacing-2xl);
	}

	.more-inner {
		max-width: var(--wide-width);
		margin: 0 auto;
		padding: 0 var(--spacing-lg);
	}

	.more-title {
		font-family: var(--font-serif);
		font-size: var(--font-size-2xl);
		font-weight: 500;
		margin-bottom: var(--spacing-2xl);
	}

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

	@media (max-width: 768px) {
		.project-title {
			font-size: var(--font-size-3xl);
		}

		.project-gallery {
			grid-template-columns: 1fr;
		}

		.more-grid {
			grid-template-columns: 1fr;
		}
	}
</style>
