<script lang="ts">
	import { page } from '$app/stores';
	import { goto } from '$app/navigation';
	import { Home, ArrowLeft, AlertCircle, FileQuestion } from 'lucide-svelte';

	const is404 = $derived($page.status === 404);
	const is500 = $derived($page.status === 500 || ($page.status ?? 0) >= 500);
	const status = $derived($page.status ?? 500);
	const errorMessage = $derived($page.error?.message);
</script>

<div class="flex min-h-screen items-center justify-center bg-base-200 p-4">
	<div class="card w-full max-w-2xl bg-base-100 shadow-xl">
		<div class="card-body text-center">
			{#if is404}
				<div class="mb-6 flex justify-center">
					<div class="bg-warning/10 rounded-full p-6">
						<FileQuestion class="text-warning h-24 w-24" />
					</div>
				</div>
				<h1 class="text-base-content mb-4 text-6xl font-bold">404</h1>
				<h2 class="text-base-content mb-2 text-3xl font-semibold">Página não encontrada</h2>
				<p class="text-base-content/70 mb-8 text-lg">
					A página que você está procurando não existe ou foi movida.
				</p>
			{:else if is500}
				<div class="mb-6 flex justify-center">
					<div class="bg-error/10 rounded-full p-6">
						<AlertCircle class="text-error h-24 w-24" />
					</div>
				</div>
				<h1 class="text-base-content mb-4 text-6xl font-bold">500</h1>
				<h2 class="text-base-content mb-2 text-3xl font-semibold">Erro interno do servidor</h2>
				<p class="text-base-content/70 mb-8 text-lg">
					Ocorreu um erro inesperado. Nossa equipe foi notificada e está trabalhando para resolver o problema.
				</p>
			{:else}
				<div class="mb-6 flex justify-center">
					<div class="bg-error/10 rounded-full p-6">
						<AlertCircle class="text-error h-24 w-24" />
					</div>
				</div>
				<h1 class="text-base-content mb-4 text-6xl font-bold">{status}</h1>
				<h2 class="text-base-content mb-2 text-3xl font-semibold">Erro</h2>
				<p class="text-base-content/70 mb-8 text-lg">
					{errorMessage || 'Ocorreu um erro inesperado.'}
				</p>
			{/if}

			<div class="card-actions justify-center gap-4">
				<button
					class="btn btn-primary"
					onclick={() => goto('/')}
					type="button"
				>
					<Home class="h-5 w-5" />
					Voltar ao Início
				</button>
				<button
					class="btn btn-ghost"
					onclick={() => window.history.back()}
					type="button"
				>
					<ArrowLeft class="h-5 w-5" />
					Voltar
				</button>
			</div>
		</div>
	</div>
</div>















