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

	const isNotFound = $derived(page.status === 404);
	const isServerError = $derived(page.status >= 500);

	const title = $derived(isNotFound ? 'Página não encontrada' : 'Não foi possível carregar esta página');
	const description = $derived(
		isNotFound
			? 'O endereço pode estar incorreto, ou a página foi movida/removida.'
			: 'Ocorreu um erro ao processar sua solicitação. Tente novamente em alguns instantes.'
	);

	// Evita expor detalhes quando o erro é inesperado (SvelteKit usa "Internal Error").
	const safeDetails = $derived(
		!isNotFound && page.error?.message && page.error.message !== 'Internal Error' ? page.error.message : null
	);

	function goBack() {
		if (typeof history !== 'undefined') history.back();
	}

	function reload() {
		if (typeof location !== 'undefined') location.reload();
	}
</script>

<svelte:head>
	<title>{page.status} • {title} • Secretaria de Esportes de Pernambuco</title>
	<meta name="robots" content="noindex" />
</svelte:head>

<div class="min-h-dvh bg-(--page-bg)">
	<main class="mx-auto w-full max-w-6xl px-4 pb-14 pt-10 sm:px-6 sm:pt-14">
		<section class="overflow-hidden rounded-lg bg-white/80 shadow-sm ring-1 ring-black/5">
			<div class="px-6 py-10 sm:px-10 sm:py-12">
				<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">
					Erro {page.status}
				</p>
				<h1 class="mt-2 text-2xl font-extrabold tracking-tight text-(--text-strong) sm:text-3xl">
					{title}
				</h1>
				<p class="mt-3 max-w-2xl text-sm leading-relaxed text-(--text)">
					{description}
				</p>

				{#if safeDetails}
					<div class="mt-5 rounded-lg bg-white/70 p-4 ring-1 ring-black/5">
						<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Detalhes</p>
						<p class="mt-2 text-sm text-(--text)">{safeDetails}</p>
					</div>
				{/if}

				<div class="mt-8 flex flex-wrap items-center gap-3">
					<a
						href="/"
						class="inline-flex items-center justify-center rounded-md bg-(--accent-blue) px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-(--accent-blue)/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--accent-blue) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
					>
						Ir para a página inicial
					</a>

					<button
						type="button"
						onclick={goBack}
						class="inline-flex items-center justify-center rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
					>
						Voltar
					</button>

					{#if isServerError}
						<button
							type="button"
							onclick={reload}
							class="inline-flex items-center justify-center rounded-md bg-white px-4 py-3 text-sm font-bold text-(--text-strong) ring-1 ring-black/10 shadow-sm transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring) focus-visible:ring-offset-2 focus-visible:ring-offset-white"
						>
							Tentar novamente
						</button>
					{/if}
				</div>

				<div class="mt-8 rounded-lg bg-white/70 p-5 ring-1 ring-black/5">
					<p class="text-xs font-semibold uppercase tracking-widest text-(--text-muted)">Dica</p>
					<p class="mt-2 text-sm text-(--text)">
						Se você chegou aqui por um link antigo, volte para a página inicial e escolha o programa no card
						correspondente.
					</p>
				</div>
			</div>
		</section>
	</main>
</div>

