---
import Layout from '../../layouts/Layout.astro';
import ChangelogEntry from '../../components/changelog/ChangelogEntry.astro';
import VersionBadge from '../../components/changelog/VersionBadge.astro';
import {
	getChangelog,
	getLatestRelease,
	getAllReleaseYears,
	getChangelogStats,
	getChangelogGroupedByYearMonth,
} from '../../utils/changelog';

const language = 'en';
const allReleases = await getChangelog(language);
const latestRelease = await getLatestRelease(language);
const years = await getAllReleaseYears(language);
const stats = await getChangelogStats(language);
const groupedByYearMonth = await getChangelogGroupedByYearMonth(language);
---

<Layout
	title="Changelog - Product Updates & Release Notes | Picture"
	description="Stay up to date with the latest Picture updates, new features, improvements, and bug fixes. See what's new in AI image generation."
>
	<div class="min-h-screen bg-dark-bg">
		<!-- Hero -->
		<div class="bg-gradient-to-b from-dark-elevated to-dark-bg py-16 md:py-24">
			<div class="mx-auto max-w-6xl px-6">
				<div class="mb-12 text-center">
					<div
						class="mb-6 inline-block rounded-full border border-primary/20 bg-primary/10 px-4 py-1.5"
					>
						<span class="text-sm font-medium text-primary">📝 Changelog</span>
					</div>
					<h1 class="mb-6 text-4xl font-bold text-white md:text-5xl lg:text-6xl">
						What's New in Picture
					</h1>
					<p class="mx-auto mb-8 max-w-3xl text-xl text-gray-300">
						Stay up to date with new features, improvements, and bug fixes. We ship updates
						regularly to make Picture better for you.
					</p>

					<!-- Stats -->
					<div class="flex flex-wrap items-center justify-center gap-8 text-sm text-gray-400">
						<div>
							<span class="text-2xl font-bold text-primary">{stats.totalReleases}</span> releases
						</div>
						<div>
							<span class="text-2xl font-bold text-primary">{stats.latestVersion}</span> latest
						</div>
						<div><span class="text-2xl font-bold text-primary">{years.length}</span> years</div>
					</div>
				</div>

				<!-- Latest Release Highlight -->
				{
					latestRelease && (
						<div class="mb-12 rounded-2xl border border-primary/20 bg-gradient-to-r from-primary/10 to-purple-500/10 p-8">
							<div class="mb-4 flex flex-wrap items-start justify-between gap-4">
								<div>
									<div class="mb-3 flex items-center gap-3">
										<VersionBadge
											version={latestRelease.data.version}
											type={latestRelease.data.type}
										/>
										<span class="text-sm text-gray-400">
											{new Date(latestRelease.data.releaseDate).toLocaleDateString('en-US', {
												month: 'long',
												day: 'numeric',
												year: 'numeric',
											})}
										</span>
									</div>
									<h2 class="mb-2 text-3xl font-bold text-white">{latestRelease.data.title}</h2>
									<p class="text-lg text-gray-300">{latestRelease.data.summary}</p>
								</div>
								<a
									href={`/changelog/${latestRelease.id}`}
									class="whitespace-nowrap rounded-lg bg-primary px-6 py-3 font-medium text-white transition hover:bg-primary/90"
								>
									Read Full Release
								</a>
							</div>
						</div>
					)
				}

				<!-- Filter Tabs -->
				<div class="mb-8 flex flex-wrap items-center gap-3">
					<button class="filter-btn active" data-year="all">
						All Releases ({stats.totalReleases})
					</button>
					{
						years.map((year) => (
							<button class="filter-btn" data-year={year}>
								{year} ({stats.yearCounts.find((y) => y.year === year)?.count || 0})
							</button>
						))
					}
				</div>

				<!-- Subscribe -->
				<div class="mb-12 rounded-xl border border-dark-border bg-dark-elevated p-6">
					<div class="flex flex-wrap items-center justify-between gap-4">
						<div>
							<h3 class="mb-1 text-lg font-semibold text-white">Get Release Notifications</h3>
							<p class="text-sm text-gray-400">
								Subscribe to receive updates about new releases and features.
							</p>
						</div>
						<div class="flex gap-3">
							<a
								href="https://twitter.com/picture"
								class="rounded-lg border border-dark-border bg-dark-bg px-4 py-2 text-sm text-gray-300 transition hover:border-primary hover:text-primary"
							>
								Twitter
							</a>
							<a
								href="https://discord.gg/picture"
								class="rounded-lg border border-dark-border bg-dark-bg px-4 py-2 text-sm text-gray-300 transition hover:border-primary hover:text-primary"
							>
								Discord
							</a>
							<a
								href="/blog/rss.xml"
								class="rounded-lg border border-dark-border bg-dark-bg px-4 py-2 text-sm text-gray-300 transition hover:border-primary hover:text-primary"
							>
								RSS Feed
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Changelog Entries -->
		<div class="mx-auto max-w-6xl px-6 pb-16">
			<!-- Grouped by Year & Month -->
			{
				Object.entries(groupedByYearMonth)
					.sort(([yearA], [yearB]) => parseInt(yearB) - parseInt(yearA))
					.map(([year, months]) => (
						<div class="changelog-year mb-16" data-year={year}>
							<h2 class="sticky top-20 z-10 mb-8 bg-dark-bg py-4 text-3xl font-bold text-white">
								{year}
							</h2>

							{Object.entries(months)
								.sort((a, b) => {
									const monthOrder = [
										'January',
										'February',
										'March',
										'April',
										'May',
										'June',
										'July',
										'August',
										'September',
										'October',
										'November',
										'December',
									];
									return monthOrder.indexOf(b[0]) - monthOrder.indexOf(a[0]);
								})
								.map(([month, releases]) => (
									<div class="changelog-month mb-12">
										<h3 class="mb-6 text-xl font-semibold text-gray-400">{month}</h3>
										<div class="space-y-8">
											{releases.map((release) => (
												<ChangelogEntry entry={release} />
											))}
										</div>
									</div>
								))}
						</div>
					))
			}
		</div>

		<!-- CTA -->
		<div class="mx-auto max-w-4xl px-6 py-16">
			<div
				class="rounded-2xl border border-primary/20 bg-gradient-to-r from-primary/10 to-purple-500/10 p-12 text-center"
			>
				<h2 class="mb-4 text-3xl font-bold text-white">Ready to try the latest features?</h2>
				<p class="mb-8 text-gray-300">
					Experience all the new improvements and features we've built for you.
				</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 Free
				</a>
			</div>
		</div>
	</div>

	<script>
		const filterBtns = document.querySelectorAll('.filter-btn');
		const yearSections = document.querySelectorAll('.changelog-year');

		filterBtns.forEach((btn) => {
			btn.addEventListener('click', () => {
				const selectedYear = btn.getAttribute('data-year');

				// Update active button
				filterBtns.forEach((b) => b.classList.remove('active'));
				btn.classList.add('active');

				// Filter sections
				yearSections.forEach((section) => {
					const sectionYear = section.getAttribute('data-year');

					if (selectedYear === 'all' || sectionYear === selectedYear) {
						(section as HTMLElement).style.display = 'block';
					} else {
						(section as HTMLElement).style.display = 'none';
					}
				});
			});
		});
	</script>

	<style>
		.filter-btn {
			@apply rounded-lg border border-dark-border bg-dark-elevated px-4 py-2 text-sm text-gray-300 transition hover:border-primary hover:text-primary;
		}
		.filter-btn.active {
			@apply border-primary bg-primary/10 text-primary;
		}
	</style>
</Layout>
