<!-- [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 { api } from '../../lib/api';
    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 user = await api.fetchApi('/auth/me');
                auth.setUser(user);
            } 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] -->