<script lang="ts">
import { page } from '$app/state';
import { m } from '$lib/paraglide/messages.js';

let copied = $state(false);

function copyId() {
	const id = page.error?.errorId;
	if (!id) return;
	if (!navigator.clipboard) return;
	navigator.clipboard.writeText(id).then(
		() => {
			copied = true;
			setTimeout(() => (copied = false), 2000);
		},
		() => {
			/* clipboard denied or unavailable — select-all on the <code> element remains */
		}
	);
}
</script>

<svelte:head>
	<title>{m.page_title_error()}</title>
</svelte:head>

<main class="px-4 py-12 text-center font-sans">
	<h1 class="mb-2 font-serif text-2xl font-bold text-ink">{m.page_title_error()}</h1>
	<p class="mb-8 font-sans text-sm text-ink-2">
		{page.error?.message ?? m.error_internal_error()}
	</p>
	<p class="mb-4 font-mono text-4xl font-bold text-ink">{page.status}</p>

	{#if page.error?.errorId}
		<div class="mt-6 flex flex-col items-center gap-3">
			<p class="font-sans text-xs tracking-widest text-ink-2 uppercase">
				{m.error_page_id_label()}
			</p>
			<code
				class="rounded border border-line bg-surface px-3 py-1 font-mono text-sm text-ink select-all"
			>
				{page.error.errorId}
			</code>
			<button
				class="min-h-[44px] min-w-[44px] rounded-sm bg-brand-navy px-5 py-2 font-sans text-sm text-white transition-colors hover:opacity-90 focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2"
				onclick={copyId}
				aria-label={m.error_copy_id_label()}
			>
				<span aria-live="polite">{copied ? m.error_copied() : m.error_copy_id_label()}</span>
			</button>
		</div>
	{/if}
</main>
