<!-- [DEF:ProtectedRoute:Component] -->
<!--
@SEMANTICS: auth, guard, route, protection
@PURPOSE:   Wraps content to ensure only authenticated users can access it.
@LAYER:     Component
@RELATION:  USES -> authStore
@RELATION:  CALLS -> goto

@INVARIANT: Redirects to /login if user is not authenticated.
-->

<script lang="ts">
    import { onMount } from 'svelte';
    import { auth } from '../../lib/auth/store';
    import { goto } from '$app/navigation';

    // [SECTION: TEMPLATE]
    // Only render slot if authenticated
    // [/SECTION: TEMPLATE]

    onMount(async () => {
        // Check if we have a token but no user profile yet
        if ($auth.token && !$auth.user) {
            auth.setLoading(true);
            try {
                const response = await fetch('/api/auth/me', {
                    headers: {
                        'Authorization': `Bearer ${$auth.token}`
                    }
                });
                
                if (response.ok) {
                    const user = await response.json();
                    auth.setUser(user);
                } else {
                    // Token invalid or expired
                    auth.logout();
                    goto('/login');
                }
            } catch (e) {
                console.error('Failed to verify session:', e);
                auth.logout();
                goto('/login');
            } finally {
                auth.setLoading(false);
            }
        } else if (!$auth.token) {
            goto('/login');
        }
    });
</script>

{#if $auth.loading}
    <div class="flex items-center justify-center min-h-screen">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
{:else if $auth.isAuthenticated}
    <slot />
{/if}

<!-- [/DEF:ProtectedRoute:Component] -->