<script lang="ts">
import { page } from '$app/state';
import { RefreshCw, Home, AlertTriangle } from '@lucide/svelte';
import { browser } from '$app/environment';

let status = $derived(page.status);
let message = $derived(page.error?.message || 'An unexpected error occurred');

// Check if it looks like a connection/API failure
let is_connection_error = $derived(
    message.toLowerCase().includes('site lookup failed') ||
        message.toLowerCase().includes('fetch') ||
        status === 500
);
</script>

<div
    class="bg-surface-50 dark:bg-surface-900 flex min-h-screen flex-col items-center justify-center p-4 text-center">
    <div
        class="dark:bg-surface-800 border-surface-200 dark:border-surface-700 max-w-md rounded-2xl border bg-white p-8 shadow-xl">
        <div class="mb-6 flex justify-center">
            <div
                class="bg-error-100 dark:bg-error-900 text-error-600 dark:text-error-400 rounded-full p-4">
                <AlertTriangle size={48} />
            </div>
        </div>

        <h1 class="text-surface-900 mb-2 text-6xl font-black dark:text-white">
            {status}
        </h1>
        <h2
            class="text-surface-700 dark:text-surface-200 mb-4 text-2xl font-bold">
            {#if is_connection_error}
                Connection Failure
            {:else}
                Something went wrong
            {/if}
        </h2>

        <p class="text-surface-600 dark:text-surface-400 mb-8 leading-relaxed">
            {message}
        </p>

        <div class="flex flex-col gap-3">
            <button
                onclick={() => browser && window.location.reload()}
                class="btn btn-lg preset-filled-primary-500 hover:preset-filled-primary-600 w-full font-bold">
                <RefreshCw class="mr-2 size-5" />
                Retry Connection
            </button>

            <a
                href="/"
                class="btn btn-lg preset-outlined-surface-500 w-full font-bold">
                <Home class="mr-2 size-5" />
                Return Home
            </a>
        </div>

        {#if is_connection_error}
            <div
                class="border-surface-100 dark:border-surface-700 text-surface-500 mt-8 border-t pt-6 text-sm">
                <p>
                    If you are onsite at an event, please check your network
                    connection or contact the registration desk.
                </p>
            </div>
        {/if}
    </div>
</div>
