<script lang="ts">
	import { page } from '$app/stores';
	import { t } from 'svelte-i18n';
	import ErrorState from '$lib/components/ui/ErrorState.svelte';

	const status = $derived($page.status);
	const message = $derived($page.error?.message ?? '');

	const title = $derived.by(() => {
		if (status === 403) return $t('error.admin_forbidden_title');
		if (status === 404) return $t('error.admin_not_found_title');
		return $t('error.admin_generic_title');
	});

	const hint = $derived.by(() => {
		if (status === 403) return $t('error.admin_forbidden_hint');
		return message || $t('error.generic_hint');
	});
</script>

<svelte:head>
	<title>{status} — {$t('app_title')}</title>
</svelte:head>

<ErrorState {status} {title} {hint}>
	{#snippet actions()}
		<a
			href="/"
			class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
		>
			{$t('error.back_to_dashboard')}
		</a>
		<a
			href="/admin/users"
			class="rounded-lg border border-border px-4 py-2 text-sm font-medium transition-colors hover:bg-accent"
		>
			{$t('admin.users') ?? 'Admin users'}
		</a>
	{/snippet}
</ErrorState>
