<script lang="ts">
	import { page } from '$app/stores';
	import { Button } from '$lib/components/ui/button';

	// Error details with friendly messages
	const errorMessages: Record<number, { title: string; message: string; icon: string }> = {
		400: {
			title: 'Bad Request',
			message: "Something went wrong with your request. Please check and try again.",
			icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'
		},
		401: {
			title: 'Unauthorized',
			message: 'You need to sign in to access this page.',
			icon: 'M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'
		},
		403: {
			title: 'Access Denied',
			message: "You don't have permission to view this page.",
			icon: 'M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636'
		},
		404: {
			title: 'Page Not Found',
			message: "The page you're looking for doesn't exist or has been moved.",
			icon: 'M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
		},
		500: {
			title: 'Server Error',
			message: 'Something went wrong on our end. Please try again later.',
			icon: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
		}
	};

	const status = $derived($page.status);
	const errorInfo = $derived(
		errorMessages[status] || {
			title: 'Something Went Wrong',
			message: $page.error?.message || 'An unexpected error occurred.',
			icon: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
		}
	);
</script>

<svelte:head>
	<title>{status} - {errorInfo.title} | Monaco USA</title>
</svelte:head>

<div class="relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-12">
	<!-- Background image -->
	<div class="absolute inset-0 -z-20">
		<img src="/monaco_high_res.jpg" alt="" class="h-full w-full object-cover" />
		<div
			class="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-slate-900/60 to-monaco-900/70"
		></div>
	</div>

	<!-- Decorative blur elements -->
	<div class="absolute inset-0 -z-10">
		<div class="absolute -left-40 -top-40 h-80 w-80 rounded-full bg-monaco-500/30 blur-3xl"></div>
		<div class="absolute -right-40 top-1/3 h-96 w-96 rounded-full bg-monaco-400/20 blur-3xl"></div>
		<div class="absolute bottom-0 left-1/3 h-72 w-72 rounded-full bg-white/10 blur-3xl"></div>
	</div>

	<div class="w-full max-w-lg text-center">
		<!-- Logo -->
		<div class="mb-6 sm:mb-8 inline-flex flex-col items-center">
			<a href="/" class="inline-flex flex-col items-center">
				<div class="mb-4 overflow-hidden rounded-2xl bg-white/90 p-2 shadow-xl backdrop-blur-sm">
					<img
						src="/MONACOUSA-Flags_376x376.png"
						alt="Monaco USA"
						class="h-12 w-12 sm:h-16 sm:w-16 object-contain"
					/>
				</div>
			</a>
		</div>

		<!-- Error Card -->
		<div class="rounded-2xl bg-white/95 p-4 sm:p-6 md:p-8 shadow-2xl backdrop-blur-sm">
			<!-- Error Icon -->
			<div
				class="mx-auto mb-4 sm:mb-6 flex h-16 w-16 sm:h-20 sm:w-20 items-center justify-center rounded-full bg-gradient-to-br from-red-50 to-red-100"
			>
				<svg
					class="h-8 w-8 sm:h-10 sm:w-10 text-red-500"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="1.5"
				>
					<path stroke-linecap="round" stroke-linejoin="round" d={errorInfo.icon} />
				</svg>
			</div>

			<!-- Error Code -->
			<div class="mb-2 text-4xl sm:text-6xl font-bold text-slate-900">{status}</div>

			<!-- Error Title -->
			<h1 class="mb-3 text-2xl font-bold text-slate-900">{errorInfo.title}</h1>

			<!-- Error Message -->
			<p class="mb-8 text-slate-600">{errorInfo.message}</p>

			<!-- Actions -->
			<div class="flex flex-col gap-3 sm:flex-row sm:justify-center">
				<Button variant="monaco" size="lg" href="/">
					<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
						/>
					</svg>
					Go Home
				</Button>

				<Button variant="outline" size="lg" onclick={() => history.back()}>
					<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M10 19l-7-7m0 0l7-7m-7 7h18"
						/>
					</svg>
					Go Back
				</Button>
			</div>
		</div>

		<!-- Help Text -->
		<p class="mt-6 text-sm text-white/60">
			Need help?
			<a href="mailto:support@monacousa.org" class="text-monaco-300 hover:text-monaco-200">
				Contact support
			</a>
		</p>

		<!-- Footer -->
		<p class="mt-4 text-xs text-white/40">&copy; 2026 Monaco USA. All rights reserved.</p>
	</div>
</div>
