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

        <h1 class="text-6xl font-black mb-2 text-surface-900 dark:text-white">{status}</h1>
        <h2 class="text-2xl font-bold mb-4 text-surface-700 dark:text-surface-200">
            {#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="mt-8 pt-6 border-t border-surface-100 dark:border-surface-700 text-sm text-surface-500">
                <p>If you are onsite at an event, please check your network connection or contact the registration desk.</p>
            </div>
        {/if}
    </div>
</div>
