<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; color: 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',
			color: 'amber'
		},
		401: {
			title: 'Session Expired',
			message: 'Your session has expired. Please sign in again to continue.',
			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',
			color: 'blue'
		},
		403: {
			title: 'Access Denied',
			message: "You don't have permission to access this resource. Contact an administrator if you believe this is an error.",
			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',
			color: 'red'
		},
		404: {
			title: 'Page Not Found',
			message: "We couldn't find the page you're looking for. It may have been moved or deleted.",
			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',
			color: 'slate'
		},
		500: {
			title: 'Server Error',
			message: 'Something went wrong on our end. Our team has been notified. Please try again later.',
			icon: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
			color: 'red'
		}
	};

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

	const colorClasses = $derived({
		red: {
			bg: 'bg-gradient-to-br from-red-50 to-red-100',
			icon: 'text-red-500',
			border: 'border-red-200'
		},
		amber: {
			bg: 'bg-gradient-to-br from-amber-50 to-amber-100',
			icon: 'text-amber-500',
			border: 'border-amber-200'
		},
		blue: {
			bg: 'bg-gradient-to-br from-blue-50 to-blue-100',
			icon: 'text-blue-500',
			border: 'border-blue-200'
		},
		slate: {
			bg: 'bg-gradient-to-br from-slate-50 to-slate-100',
			icon: 'text-slate-500',
			border: 'border-slate-200'
		}
	}[errorInfo.color]);
</script>

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

<div class="flex min-h-[60vh] flex-col items-center justify-center px-4 py-12">
	<!-- Logo -->
	<div class="mb-6">
		<a href="/dashboard" class="inline-block">
			<img
				src="/MONACOUSA-Flags_376x376.png"
				alt="Monaco USA"
				class="h-16 w-16 rounded-xl object-contain shadow-md"
			/>
		</a>
	</div>

	<!-- Error Card -->
	<div
		class="w-full max-w-lg rounded-2xl border border-slate-200/60 bg-white/80 p-4 sm:p-6 md:p-8 text-center shadow-lg backdrop-blur-sm"
	>
		<!-- Error Icon -->
		<div class="mx-auto mb-4 sm:mb-6 flex h-16 w-16 sm:h-24 sm:w-24 items-center justify-center rounded-full {colorClasses.bg}">
			<svg
				class="h-8 w-8 sm:h-12 sm:w-12 {colorClasses.icon}"
				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 Badge -->
		<div
			class="mx-auto mb-3 sm:mb-4 inline-flex items-center rounded-full border {colorClasses.border} bg-white px-3 sm:px-4 py-1 sm:py-1.5"
		>
			<span class="text-sm font-semibold text-slate-500">Error {status}</span>
		</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="/dashboard">
				<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="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
					/>
				</svg>
				Dashboard
			</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>

			{#if status === 401}
				<Button variant="outline" size="lg" href="/login">
					<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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
						/>
					</svg>
					Sign In
				</Button>
			{/if}
		</div>
	</div>

	<!-- Help Text -->
	<p class="mt-8 text-sm text-slate-500">
		Need assistance?
		<a href="mailto:support@monacousa.org" class="text-monaco-600 hover:text-monaco-700">
			Contact support
		</a>
	</p>

	<!-- Technical Details (collapsed by default) -->
	{#if $page.error?.message && import.meta.env.DEV}
		<details class="mt-6 w-full max-w-lg">
			<summary class="cursor-pointer text-sm text-slate-400 hover:text-slate-600">
				Technical details
			</summary>
			<pre
				class="mt-2 overflow-auto rounded-lg bg-slate-100 p-4 text-xs text-slate-600">{$page.error.message}</pre>
		</details>
	{/if}
</div>
