---
import Layout from '../../layouts/Layout.astro';
import GalleryCard from '../../components/gallery/GalleryCard.astro';
import {
	getAllGalleryImages,
	getRelatedGalleryImages,
	formatFileSize,
	getAspectRatioDisplay,
} from '../../utils/gallery';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
	const images = await getCollection('gallery');
	return images.map((image) => ({
		params: { slug: image.data.slug },
		props: { image },
	}));
}

const { image } = Astro.props;
const { data } = image;

const relatedImages = await getRelatedGalleryImages(image, 8);

const pageTitle = `${data.title} - AI Generated Image | Picture`;
const pageDescription =
	data.description ||
	`${data.title}. AI-generated with ${data.model}. ${data.prompt.slice(0, 100)}...`;
---

<Layout title={pageTitle} description={pageDescription}>
	<main
		class="min-h-screen bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800"
	>
		<!-- Breadcrumb -->
		<nav class="border-b border-gray-200 bg-white px-6 py-4 dark:border-gray-700 dark:bg-gray-800">
			<div class="mx-auto max-w-7xl">
				<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
					<a href="/" class="hover:text-blue-600">Home</a>
					<span>/</span>
					<a href="/gallery" class="hover:text-blue-600">Gallery</a>
					<span>/</span>
					<span class="text-gray-900 dark:text-white">{data.title}</span>
				</div>
			</div>
		</nav>

		<!-- Main Content -->
		<div class="mx-auto max-w-7xl px-6 py-12">
			<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
				<!-- Image -->
				<div class="lg:col-span-2">
					<div class="overflow-hidden rounded-2xl bg-white shadow-xl dark:bg-gray-800">
						<img src={data.imageUrl} alt={data.title} class="h-auto w-full" loading="eager" />

						<!-- Engagement Bar -->
						<div
							class="flex items-center justify-between border-t border-gray-200 p-6 dark:border-gray-700"
						>
							<div class="flex items-center gap-6">
								<button
									class="flex items-center gap-2 text-gray-600 transition hover:text-pink-600 dark:text-gray-400"
								>
									<span class="text-xl">❤️</span>
									<span class="font-semibold">{data.likes.toLocaleString()}</span>
								</button>
								<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
									<span class="text-xl">👁️</span>
									<span>{data.views.toLocaleString()}</span>
								</div>
								<div class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
									<span class="text-xl">⬇️</span>
									<span>{data.downloads.toLocaleString()}</span>
								</div>
							</div>

							<button
								class="rounded-xl bg-blue-600 px-6 py-3 font-semibold text-white transition hover:bg-blue-700"
							>
								Download
							</button>
						</div>
					</div>
				</div>

				<!-- Details Sidebar -->
				<div class="space-y-6">
					<!-- Title & Badges -->
					<div>
						<div class="mb-3 flex flex-wrap gap-2">
							{
								data.featured && (
									<span class="rounded-full bg-blue-100 px-3 py-1 text-sm font-semibold text-blue-800 dark:bg-blue-900 dark:text-blue-200">
										🌟 Featured
									</span>
								)
							}
							{
								data.trending && (
									<span class="rounded-full bg-pink-100 px-3 py-1 text-sm font-semibold text-pink-800 dark:bg-pink-900 dark:text-pink-200">
										🔥 Trending
									</span>
								)
							}
							{
								data.staffPick && (
									<span class="rounded-full bg-purple-100 px-3 py-1 text-sm font-semibold text-purple-800 dark:bg-purple-900 dark:text-purple-200">
										✨ Staff Pick
									</span>
								)
							}
						</div>
						<h1 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">
							{data.title}
						</h1>
						{data.description && <p class="text-gray-600 dark:text-gray-300">{data.description}</p>}
					</div>

					<!-- Creator -->
					{
						data.creator && (
							<div class="rounded-xl bg-white p-4 shadow dark:bg-gray-800">
								<div class="flex items-center gap-3">
									{data.creator.avatar && (
										<img
											src={data.creator.avatar}
											alt={data.creator.name}
											class="h-12 w-12 rounded-full"
										/>
									)}
									<div>
										<div class="text-sm text-gray-600 dark:text-gray-400">Created by</div>
										<div class="font-semibold text-gray-900 dark:text-white">
											{data.creator.name}
										</div>
									</div>
								</div>
							</div>
						)
					}

					<!-- Prompt -->
					<div class="rounded-xl bg-white p-6 shadow dark:bg-gray-800">
						<h2 class="mb-3 text-lg font-bold text-gray-900 dark:text-white">💬 Prompt</h2>
						<p class="mb-4 text-sm text-gray-700 dark:text-gray-300">{data.prompt}</p>
						{
							data.negativePrompt && (
								<div>
									<div class="mb-2 text-sm font-semibold text-gray-600 dark:text-gray-400">
										Negative Prompt:
									</div>
									<p class="text-sm text-gray-600 dark:text-gray-400">{data.negativePrompt}</p>
								</div>
							)
						}
						<button
							class="mt-4 w-full rounded-lg bg-gray-100 px-4 py-2 text-sm font-semibold transition hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
						>
							Copy Prompt
						</button>
					</div>

					<!-- Generation Settings -->
					{
						data.settings && (
							<div class="rounded-xl bg-white p-6 shadow dark:bg-gray-800">
								<h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">⚙️ Settings</h2>
								<div class="space-y-3">
									<div class="flex justify-between">
										<span class="text-sm text-gray-600 dark:text-gray-400">Model</span>
										<a
											href={`/ai-models/${data.model}`}
											class="text-sm font-semibold text-blue-600 hover:underline"
										>
											{data.model}
										</a>
									</div>
									{data.settings.steps && (
										<div class="flex justify-between">
											<span class="text-sm text-gray-600 dark:text-gray-400">Steps</span>
											<span class="text-sm font-semibold text-gray-900 dark:text-white">
												{data.settings.steps}
											</span>
										</div>
									)}
									{data.settings.guidanceScale && (
										<div class="flex justify-between">
											<span class="text-sm text-gray-600 dark:text-gray-400">Guidance Scale</span>
											<span class="text-sm font-semibold text-gray-900 dark:text-white">
												{data.settings.guidanceScale}
											</span>
										</div>
									)}
									{data.settings.seed && (
										<div class="flex justify-between">
											<span class="text-sm text-gray-600 dark:text-gray-400">Seed</span>
											<span class="text-sm font-semibold text-gray-900 dark:text-white">
												{data.settings.seed}
											</span>
										</div>
									)}
									{data.dimensions && (
										<div class="flex justify-between">
											<span class="text-sm text-gray-600 dark:text-gray-400">Resolution</span>
											<span class="text-sm font-semibold text-gray-900 dark:text-white">
												{data.dimensions.width}x{data.dimensions.height}
											</span>
										</div>
									)}
									{data.settings.aspectRatio && (
										<div class="flex justify-between">
											<span class="text-sm text-gray-600 dark:text-gray-400">Aspect Ratio</span>
											<span class="text-sm font-semibold text-gray-900 dark:text-white">
												{data.settings.aspectRatio} (
												{getAspectRatioDisplay(data.settings.aspectRatio)})
											</span>
										</div>
									)}
									{data.fileSize && (
										<div class="flex justify-between">
											<span class="text-sm text-gray-600 dark:text-gray-400">File Size</span>
											<span class="text-sm font-semibold text-gray-900 dark:text-white">
												{formatFileSize(data.fileSize)}
											</span>
										</div>
									)}
								</div>
							</div>
						)
					}

					<!-- Tags -->
					<div class="rounded-xl bg-white p-6 shadow dark:bg-gray-800">
						<h2 class="mb-3 text-lg font-bold text-gray-900 dark:text-white">🏷️ Tags</h2>
						<div class="mb-4 flex flex-wrap gap-2">
							<span
								class="rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200"
							>
								{data.category}
							</span>
							{
								data.style.map((style) => (
									<span class="rounded-full bg-purple-100 px-3 py-1 text-sm text-purple-800 dark:bg-purple-900 dark:text-purple-200">
										{style}
									</span>
								))
							}
						</div>
						<div class="flex flex-wrap gap-2">
							{
								data.tags.map((tag) => (
									<span class="rounded-full bg-blue-100 px-3 py-1 text-sm text-blue-800 dark:bg-blue-900 dark:text-blue-200">
										#{tag}
									</span>
								))
							}
						</div>
					</div>

					<!-- Actions -->
					<div class="space-y-3">
						<button
							class="w-full rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4 font-bold text-white shadow-lg transition hover:from-blue-700 hover:to-purple-700"
						>
							Try This Prompt
						</button>
						<button
							class="w-full rounded-xl border-2 border-gray-300 px-6 py-3 font-semibold transition hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
						>
							Share Image
						</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Related Images -->
		{
			relatedImages.length > 0 && (
				<section class="border-t border-gray-200 bg-white px-6 py-16 dark:border-gray-700 dark:bg-gray-800">
					<div class="mx-auto max-w-7xl">
						<h2 class="mb-8 text-3xl font-bold text-gray-900 dark:text-white">Related Images</h2>
						<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
							{relatedImages.map((relatedImage) => (
								<GalleryCard image={relatedImage} />
							))}
						</div>
					</div>
				</section>
			)
		}
	</main>
</Layout>

<script>
	// Copy prompt functionality
	document.addEventListener('DOMContentLoaded', () => {
		const copyButton = document.querySelector('button:has-text("Copy Prompt")');
		if (copyButton) {
			copyButton.addEventListener('click', async () => {
				const promptText = document.querySelector('p:has-text("Prompt")');
				if (promptText) {
					await navigator.clipboard.writeText(promptText.textContent || '');
					copyButton.textContent = 'Copied!';
					setTimeout(() => {
						copyButton.textContent = 'Copy Prompt';
					}, 2000);
				}
			});
		}
	});
</script>
