---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';
import VersionBadge from '../../components/changelog/VersionBadge.astro';
import {
	formatReleaseDate,
	getTimeAgo,
	isRecentRelease,
	getPlatformIcon,
	getPlatformDisplayName,
	getSeverityIcon,
	getSeverityColor,
	getChangeCategoryDisplayName,
} from '../../utils/changelog';

export async function getStaticPaths() {
	const changelog = await getCollection('changelog');
	return changelog.map((entry) => ({
		params: { slug: entry.id },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
const { data } = entry;

const formattedDate = formatReleaseDate(data.releaseDate, 'long');
const timeAgo = getTimeAgo(data.releaseDate);
const isRecent = isRecentRelease(data.releaseDate);
---

<Layout title={`${data.version} - ${data.title} | Picture Changelog`} description={data.summary}>
	<div class="min-h-screen bg-dark-bg">
		<!-- Breadcrumbs -->
		<div class="mx-auto max-w-4xl px-6 pt-8">
			<nav class="mb-6 flex items-center gap-2 text-sm text-gray-400">
				<a href="/" class="hover:text-primary">Home</a>
				<span>/</span>
				<a href="/changelog" class="hover:text-primary">Changelog</a>
				<span>/</span>
				<span class="text-white">{data.version}</span>
			</nav>
		</div>

		<!-- Header -->
		<div class="mx-auto max-w-4xl px-6 py-12">
			<div class="mb-6 flex flex-wrap items-center gap-3">
				<VersionBadge version={data.version} type={data.type} />

				{
					data.highlighted && (
						<span class="rounded-lg border border-yellow-500/20 bg-yellow-500/10 px-3 py-1 text-sm font-medium text-yellow-400">
							⭐ Highlighted
						</span>
					)
				}

				{
					isRecent && (
						<span class="rounded-lg border border-green-500/20 bg-green-500/10 px-3 py-1 text-sm font-medium text-green-400">
							🆕 New Release
						</span>
					)
				}
			</div>

			<h1 class="mb-6 text-4xl font-bold text-white md:text-5xl">{data.title}</h1>
			<p class="mb-8 text-xl text-gray-300">{data.summary}</p>

			<!-- Meta Info -->
			<div class="mb-8 flex flex-wrap items-center gap-6 text-sm text-gray-400">
				<div class="flex items-center gap-2">
					<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
						></path>
					</svg>
					<span>{formattedDate} · {timeAgo}</span>
				</div>
				<div class="flex items-center gap-2">
					<span>Platforms:</span>
					{
						data.platforms.map((platform) => (
							<span class="inline-flex items-center gap-1 rounded border border-dark-border bg-dark-elevated px-2 py-1 text-xs">
								{getPlatformIcon(platform)} {getPlatformDisplayName(platform)}
							</span>
						))
					}
				</div>
			</div>

			<!-- Stats (if available) -->
			{
				data.stats && (
					<div class="mb-8 grid grid-cols-3 gap-4 rounded-xl border border-dark-border bg-dark-elevated p-6">
						{data.stats.totalChanges && (
							<div class="text-center">
								<div class="mb-1 text-3xl font-bold text-primary">{data.stats.totalChanges}</div>
								<div class="text-sm text-gray-400">Total Changes</div>
							</div>
						)}
						{data.stats.contributors && (
							<div class="text-center">
								<div class="mb-1 text-3xl font-bold text-primary">{data.stats.contributors}</div>
								<div class="text-sm text-gray-400">Contributors</div>
							</div>
						)}
						{data.stats.daysInDevelopment && (
							<div class="text-center">
								<div class="mb-1 text-3xl font-bold text-primary">
									{data.stats.daysInDevelopment}
								</div>
								<div class="text-sm text-gray-400">Days</div>
							</div>
						)}
					</div>
				)
			}

			<!-- Cover Image -->
			{
				data.coverImage && (
					<div class="mb-12 overflow-hidden rounded-xl border border-dark-border">
						<img src={data.coverImage} alt={data.title} class="w-full" />
					</div>
				)
			}
		</div>

		<!-- Changes -->
		<div class="mx-auto max-w-4xl px-6 pb-12">
			<!-- Features -->
			{
				data.changes.features.length > 0 && (
					<div class="mb-12">
						<h2 class="mb-6 flex items-center gap-3 text-3xl font-bold text-white">
							<span>✨</span> New Features
						</h2>
						<div class="space-y-6">
							{data.changes.features.map((feature) => (
								<div class="rounded-xl border border-dark-border bg-dark-elevated p-6">
									<div class="mb-3 flex items-start justify-between gap-4">
										<h3 class="text-xl font-semibold text-white">{feature.title}</h3>
										{feature.category && (
											<span class="whitespace-nowrap rounded-lg border border-primary/20 bg-primary/10 px-3 py-1 text-sm text-primary">
												{getChangeCategoryDisplayName(feature.category)}
											</span>
										)}
									</div>
									<p class="mb-4 text-gray-300">{feature.description}</p>
									{feature.image && (
										<div class="mb-4 overflow-hidden rounded-lg border border-dark-border">
											<img src={feature.image} alt={feature.title} class="w-full" />
										</div>
									)}
									{feature.videoUrl && (
										<div class="mb-4 aspect-video overflow-hidden rounded-lg border border-dark-border">
											<iframe src={feature.videoUrl} class="h-full w-full" allowfullscreen />
										</div>
									)}
									{feature.link && (
										<a
											href={feature.link}
											class="flex items-center gap-1 text-sm text-primary hover:underline"
										>
											Learn more
											<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
													stroke-width="2"
													d="M9 5l7 7-7 7"
												/>
											</svg>
										</a>
									)}
								</div>
							))}
						</div>
					</div>
				)
			}

			<!-- Improvements -->
			{
				data.changes.improvements.length > 0 && (
					<div class="mb-12">
						<h2 class="mb-6 flex items-center gap-3 text-3xl font-bold text-white">
							<span>🔧</span> Improvements
						</h2>
						<div class="rounded-xl border border-dark-border bg-dark-elevated p-6">
							<ul class="space-y-4">
								{data.changes.improvements.map((improvement) => (
									<li class="flex items-start gap-3">
										<span class="mt-0.5 text-lg text-primary">•</span>
										<div class="flex-1">
											<div class="mb-1 flex items-center gap-2">
												<span class="font-semibold text-white">{improvement.title}</span>
												{improvement.category && (
													<span class="rounded border border-dark-border bg-dark-bg px-2 py-0.5 text-xs text-gray-400">
														{getChangeCategoryDisplayName(improvement.category)}
													</span>
												)}
											</div>
											<p class="text-sm text-gray-400">{improvement.description}</p>
										</div>
									</li>
								))}
							</ul>
						</div>
					</div>
				)
			}

			<!-- Bug Fixes -->
			{
				data.changes.bugfixes.length > 0 && (
					<div class="mb-12">
						<h2 class="mb-6 flex items-center gap-3 text-3xl font-bold text-white">
							<span>🐛</span> Bug Fixes
						</h2>
						<div class="rounded-xl border border-dark-border bg-dark-elevated p-6">
							<ul class="space-y-4">
								{data.changes.bugfixes.map((bugfix) => (
									<li class="flex items-start gap-3">
										<span class="mt-0.5 text-lg text-primary">•</span>
										<div class="flex-1">
											<div class="mb-1 flex items-center gap-2">
												{bugfix.severity && (
													<span class={`${getSeverityColor(bugfix.severity)}`}>
														{getSeverityIcon(bugfix.severity)}
													</span>
												)}
												<span class="font-semibold text-white">{bugfix.title}</span>
											</div>
											<p class="text-sm text-gray-400">{bugfix.description}</p>
										</div>
									</li>
								))}
							</ul>
						</div>
					</div>
				)
			}

			<!-- Breaking Changes -->
			{
				data.changes.breaking.length > 0 && (
					<div class="mb-12">
						<h2 class="mb-6 flex items-center gap-3 text-3xl font-bold text-white">
							<span>⚠️</span> Breaking Changes
						</h2>
						<div class="rounded-xl border border-red-500/20 bg-red-500/5 p-6">
							<div class="space-y-6">
								{data.changes.breaking.map((breaking) => (
									<div>
										<h3 class="mb-2 text-lg font-semibold text-white">{breaking.title}</h3>
										<p class="mb-3 text-gray-300">{breaking.description}</p>
										{breaking.migration && (
											<div class="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
												<p class="mb-1 text-sm font-semibold text-yellow-400">Migration Guide:</p>
												<p class="text-sm text-yellow-100">{breaking.migration}</p>
											</div>
										)}
									</div>
								))}
							</div>
						</div>
					</div>
				)
			}

			<!-- Full Content -->
			<div class="mb-12">
				<article
					class="prose prose-lg prose-invert max-w-none
					prose-headings:font-bold prose-headings:text-white
					prose-h2:mb-6 prose-h2:mt-12 prose-h2:text-3xl
					prose-h3:mb-4 prose-h3:mt-8 prose-h3:text-2xl
					prose-p:leading-relaxed prose-p:text-gray-300
					prose-a:text-primary prose-a:no-underline hover:prose-a:underline
					prose-blockquote:border-l-primary prose-blockquote:bg-dark-elevated
					prose-blockquote:py-1 prose-strong:font-semibold prose-strong:text-white prose-code:rounded prose-code:bg-dark-elevated
					prose-code:px-1.5 prose-code:py-0.5 prose-code:text-primary
					prose-pre:border prose-pre:border-dark-border
					prose-pre:bg-dark-elevated
					prose-ol:text-gray-300 prose-ul:text-gray-300 prose-li:marker:text-primary"
				>
					<Content />
				</article>
			</div>

			<!-- Links -->
			<div class="mb-12 flex flex-wrap gap-4">
				{
					data.blogPost && (
						<a href={data.blogPost} class="btn btn-secondary">
							📖 Read Full Blog Post
						</a>
					)
				}
				{
					data.announcementUrl && (
						<a href={data.announcementUrl} target="_blank" rel="noopener" class="btn btn-secondary">
							🐦 Announcement
						</a>
					)
				}
				{
					data.discussionUrl && (
						<a href={data.discussionUrl} target="_blank" rel="noopener" class="btn btn-secondary">
							💬 Join Discussion
						</a>
					)
				}
				<a href="/changelog" class="btn btn-secondary"> ← Back to Changelog </a>
			</div>

			<!-- CTA -->
			<div
				class="rounded-2xl border border-primary/20 bg-gradient-to-r from-primary/10 to-purple-500/10 p-8 text-center"
			>
				<h3 class="mb-3 text-2xl font-bold text-white">Try the new features</h3>
				<p class="mb-6 text-gray-300">Experience all the improvements in this release.</p>
				<a
					href="#"
					class="inline-block rounded-lg bg-primary px-8 py-3 font-medium text-white transition hover:bg-primary/90"
				>
					Get Started
				</a>
			</div>
		</div>
	</div>

	<style>
		.btn {
			@apply inline-flex items-center gap-2 rounded-lg px-6 py-3 font-medium transition;
		}

		.btn-secondary {
			@apply border border-dark-border bg-dark-elevated text-gray-300 hover:border-primary hover:text-primary;
		}
	</style>
</Layout>
