<script lang="ts">
	import FlowForm from '$lib/components/FlowForm.svelte';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	// Derive UI text based on recovery flow state
	const flowState = $derived(data.flow.state as string);
	const heading = $derived(
		flowState === 'sent_email' || flowState === 'passed_challenge'
			? 'Enter recovery code'
			: 'Recover your password'
	);
	const description = $derived(
		flowState === 'sent_email'
			? 'Enter the 6-digit recovery code sent to your email'
			: flowState === 'passed_challenge'
				? 'Recovery successful! Update your password below'
				: 'Enter your email address to receive a recovery code'
	);
</script>

<svelte:head>
	<title>Password Recovery - Nexus Nexus</title>
</svelte:head>

<div class="flex min-h-full flex-col justify-center px-4 py-12 sm:px-6 lg:px-8">
	<div class="mx-auto w-full max-w-sm sm:max-w-md">
		<h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-theme sm:text-3xl">
			{heading}
		</h2>
		<p class="mt-2 text-center text-sm text-theme-secondary">
			{description}
		</p>
	</div>

	<div class="mx-auto mt-8 w-full max-w-sm sm:max-w-md">
		<div class="card-padded shadow-theme">
			<FlowForm flow={data.flow} groups={['default', 'code', 'link']} />
		</div>

		<p class="mt-6 text-center text-sm text-theme-secondary">
			Remember your password?
			<a href="/login" class="font-semibold leading-6 text-primary-500 hover:text-primary-600">
				Sign in here
			</a>
		</p>
	</div>
</div>
