<script lang="ts">
	import { page } from '$app/state';
	import { goto } from '$app/navigation';

	const errorMessages: Record<number, string> = {
		400: 'Bad Request',
		401: 'Unauthorized',
		403: 'Access Denied',
		404: 'Page Not Found',
		500: 'Internal Server Error'
	};

	let title = $derived(errorMessages[page.status] || 'Something went wrong');
</script>

{#snippet shieldLock()}
	<!-- Shield with lock - for 403 Access Denied -->
	<svg
		class="h-32 w-32 text-theme-muted"
		viewBox="0 0 24 24"
		style="fill: none"
		stroke="currentColor"
		stroke-width="1.5"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
		<rect x="9" y="10" width="6" height="5" rx="1" />
		<path d="M10 10V8a2 2 0 1 1 4 0v2" />
	</svg>
{/snippet}

{#snippet magnifyingGlass()}
	<!-- Magnifying glass with question mark - for 404 Not Found -->
	<svg
		class="h-32 w-32 text-theme-muted"
		viewBox="0 0 24 24"
		style="fill: none"
		stroke="currentColor"
		stroke-width="1.5"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<circle cx="10" cy="10" r="7" />
		<path d="M21 21l-4.35-4.35" />
		<path d="M10 7a2.5 2.5 0 0 0-2.5 2.5" />
		<circle cx="10" cy="13" r="0.5" style="fill: currentColor" />
	</svg>
{/snippet}

{#snippet warningTriangle()}
	<!-- Warning triangle - for general errors -->
	<svg
		class="h-32 w-32 text-theme-muted"
		viewBox="0 0 24 24"
		style="fill: none"
		stroke="currentColor"
		stroke-width="1.5"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path
			d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
		/>
		<line x1="12" y1="9" x2="12" y2="13" />
		<circle cx="12" cy="17" r="0.5" style="fill: currentColor" />
	</svg>
{/snippet}

<svelte:head>
	<title>{title} - Nexus</title>
</svelte:head>

<section class="flex min-h-[calc(100vh-3.5rem)] items-center justify-center p-4">
	<div class="max-w-md text-center">
		<div class="mb-6 flex justify-center">
			{#if page.status === 403 || page.status === 401}
				{@render shieldLock()}
			{:else if page.status === 404}
				{@render magnifyingGlass()}
			{:else}
				{@render warningTriangle()}
			{/if}
		</div>
		<div class="mb-4 text-6xl font-bold text-theme-muted">{page.status}</div>
		<h1 class="mb-2 text-2xl font-semibold text-theme">{title}</h1>
		{#if page.error?.message}
			<p class="mb-6 text-theme-secondary">{page.error.message}</p>
		{/if}
		<div class="flex justify-center gap-3">
			<button onclick={() => history.back()} class="btn-ghost card border text-theme-secondary">
				Go Back
			</button>
			<button onclick={() => goto('/')} class="btn-primary">Home</button>
		</div>
	</div>
</section>
