<script lang="ts">
	import type { PageData } from './$types';
	import type { Game, GameFile, Tag } from '$lib/types';
	import DownloadButton from '$lib/components/DownloadButton.svelte';
	import TagEditor from '$lib/components/TagEditor.svelte';
	import MetaEditor from '$lib/components/MetaEditor.svelte';
	import ScreenshotGallery from '$lib/components/ScreenshotGallery.svelte';

	let { data }: { data: PageData } = $props();

	const game = $derived(data.game as Game);
	const files = $derived(data.files as GameFile[]);
	const tags = $derived(data.tags as Tag[]);
</script>

<svelte:head>
	<title>{game.title} — Game Grid</title>
</svelte:head>

<div class="max-w-4xl mx-auto px-4 py-8">
	<!-- Hero image -->
	{#if game.has_wide || game.has_cover}
		<div class="mb-8 rounded-xl overflow-hidden bg-gray-800 aspect-video max-h-80">
			<img
				src="/api/cover/{game.slug}?wide={(game.has_wide ? '1' : '0')}"
				alt={game.title}
				class="w-full h-full object-cover"
			/>
		</div>
	{/if}

	<div class="flex flex-col md:flex-row gap-8">
		<!-- Cover art (portrait) -->
		{#if game.has_cover}
			<div class="flex-none w-40 md:w-48">
				<div class="aspect-[2/3] rounded-lg overflow-hidden bg-gray-800 shadow-xl">
					<img src="/api/cover/{game.slug}" alt={game.title} class="w-full h-full object-cover" />
				</div>
			</div>
		{/if}

		<div class="flex-1 min-w-0">
			<h1 class="text-3xl font-bold text-white mb-2">{game.title}</h1>

			{#if game.genre}
				<p class="text-purple-400 text-sm font-medium mb-4">{game.genre}</p>
			{/if}

			<TagEditor tags={tags} gameSlug={game.slug} loggedIn={data.loggedIn} />

			<div class="mt-6">
				<DownloadButton {files} />
			</div>
		</div>
	</div>

	<div class="mt-8">
		<MetaEditor {game} loggedIn={data.loggedIn} />
	</div>

	{#if data.screenshots.length > 0}
		<div class="mt-8">
			<h2 class="text-lg font-semibold text-gray-200 mb-3">Screenshots</h2>
			<ScreenshotGallery screenshots={data.screenshots} />
		</div>
	{/if}

	<div class="mt-8">
		<a href="/" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">← Back to library</a>
	</div>
</div>
