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

	// Redirect authenticated users away from register page
	$effect(() => {
		if (auth.isAuthenticated) {
			const returnTo = page.url.searchParams.get('return_to');
			goto(returnTo || '/');
		}
	});

	// Redirect to Kratos registration on mount
	onMount(() => {
		const returnTo = page.url.searchParams.get('return_to');
		auth.redirectToRegistration(returnTo || window.location.origin);
	});
</script>

<svelte:head>
	<title>Sign Up - Nexus</title>
</svelte:head>

<section class="flex min-h-[calc(100vh-3.5rem)] items-center justify-center p-4">
	<div class="text-center">
		<div class="mb-4 text-lg text-theme-secondary">Redirecting to registration...</div>
		<div
			class="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-primary-500/30 border-t-primary-500"
		></div>
	</div>
</section>
