<script lang="ts">
	import { page } from '$app/state';
	import * as m from '$lib/paraglide/messages.js';

	const status = $derived(page.status);

	const title = $derived(
		status === 404
			? m.error_not_found_title()
			: m.error_generic_title()
	);

	const description = $derived(
		status === 404
			? m.error_not_found_body()
			: page.error?.message ?? m.error_generic_title()
	);

	const code = $derived(String(status));
	const is404 = $derived(status === 404);
</script>

<svelte:head>
	<title>{m.error_status({ status: code })} · libnovel</title>
</svelte:head>

<div class="min-h-screen bg-(--color-surface) text-(--color-text) flex flex-col items-center justify-center px-6 py-16 font-sans">

	<!-- Illustration -->
	{#if is404}
		<!-- Open book, missing page -->
		<svg class="w-24 h-24 mb-8 opacity-90" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
			<!-- Left page -->
			<rect x="8" y="16" width="36" height="60" rx="3" fill="var(--color-surface-2)" stroke="var(--color-border)" stroke-width="1.5"/>
			<!-- Right page — torn/missing edge -->
			<path d="M44 16 H76 Q78 16 78 18 V74 Q78 76 76 76 H44 L46 64 L44 52 L47 40 L44 28 Z" fill="var(--color-surface-2)" stroke="var(--color-border)" stroke-width="1.5"/>
			<!-- Spine -->
			<rect x="42" y="16" width="4" height="60" rx="1" fill="var(--color-border)"/>
			<!-- Left text lines -->
			<rect x="16" y="28" width="20" height="2.5" rx="1.25" fill="var(--color-border)"/>
			<rect x="16" y="34" width="16" height="2.5" rx="1.25" fill="var(--color-border)"/>
			<rect x="16" y="40" width="20" height="2.5" rx="1.25" fill="var(--color-border)"/>
			<rect x="16" y="46" width="12" height="2.5" rx="1.25" fill="var(--color-border)"/>
			<!-- Right page: question mark -->
			<text x="61" y="58" font-size="28" font-weight="800" font-family="ui-sans-serif,system-ui,sans-serif" fill="var(--color-brand)" text-anchor="middle" opacity="0.9">?</text>
		</svg>
	{:else}
		<!-- Book with broken spine / lightning bolt -->
		<svg class="w-24 h-24 mb-8 opacity-90" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
			<!-- Book cover -->
			<rect x="14" y="12" width="50" height="68" rx="4" fill="var(--color-surface-2)" stroke="var(--color-border)" stroke-width="1.5"/>
			<!-- Spine -->
			<rect x="10" y="12" width="8" height="68" rx="2" fill="var(--color-surface-3)" stroke="var(--color-border)" stroke-width="1.5"/>
			<!-- Pages edge -->
			<rect x="62" y="14" width="4" height="64" rx="1" fill="var(--color-surface-3)"/>
			<!-- Lightning bolt (error) -->
			<path d="M44 22 L34 46 H42 L36 70 L58 42 H48 L56 22 Z" fill="var(--color-brand)" opacity="0.9"/>
			<!-- Text lines below -->
			<rect x="22" y="58" width="28" height="2.5" rx="1.25" fill="var(--color-border)"/>
			<rect x="22" y="63" width="18" height="2.5" rx="1.25" fill="var(--color-border)"/>
			<rect x="22" y="68" width="24" height="2.5" rx="1.25" fill="var(--color-border)"/>
		</svg>
	{/if}

	<!-- Status code watermark -->
	<p class="text-[7rem] sm:text-[9rem] font-black leading-none text-(--color-surface-3) select-none tabular-nums -mb-4">
		{code}
	</p>

	<!-- Title + description -->
	<div class="mt-6 text-center max-w-sm space-y-2">
		<h1 class="text-2xl sm:text-3xl font-bold text-(--color-text)">{title}</h1>
		<p class="text-(--color-muted) text-sm sm:text-base leading-relaxed">{description}</p>
	</div>

	<!-- Actions -->
	<div class="mt-8 flex flex-wrap gap-3 justify-center">
		<a
			href="/"
			class="px-5 py-2.5 rounded-xl bg-(--color-brand) text-(--color-surface) font-semibold text-sm hover:bg-(--color-brand-dim) transition-colors"
		>
			{m.error_go_home()}
		</a>
		{#if !is404}
			<button
				onclick={() => location.reload()}
				class="px-5 py-2.5 rounded-xl bg-(--color-surface-2) border border-(--color-border) text-(--color-text) font-semibold text-sm hover:bg-(--color-surface-3) transition-colors"
			>
				Retry
			</button>
		{/if}
		<button
			onclick={() => history.back()}
			class="px-5 py-2.5 rounded-xl bg-(--color-surface-2) border border-(--color-border) text-(--color-text) font-semibold text-sm hover:bg-(--color-surface-3) transition-colors"
		>
			{m.common_back()}
		</button>
	</div>

	<!-- Subtle branding -->
	<p class="mt-14 text-xs text-(--color-muted) tracking-widest uppercase select-none">libnovel</p>
</div>
