<script lang="ts">
	import { enhance } from '$app/forms';
	import { Button } from '$lib/components/ui/button';
	import { FormField, FormMessage, LoadingSpinner } from '$lib/components/auth';
	import { ArrowLeft } from 'lucide-svelte';

	let { form } = $props();

	let email = $state('');
	let loading = $state(false);
</script>

<svelte:head>
	<title>Forgot Password | Monaco USA</title>
</svelte:head>

<div class="space-y-6">
	<div class="text-center">
		<h2 class="text-xl font-semibold text-slate-900">Forgot your password?</h2>
		<p class="mt-1 text-sm text-slate-500">
			Enter your email and we'll send you a reset link
		</p>
	</div>

	{#if form?.error}
		<FormMessage type="error" message={form.error} />
	{/if}

	{#if form?.success}
		<FormMessage type="success" message={form.success} />
		<div class="text-center">
			<a
				href="/login"
				class="inline-flex items-center gap-2 text-sm font-medium text-monaco-600 hover:text-monaco-700"
			>
				<ArrowLeft class="h-4 w-4" />
				Back to sign in
			</a>
		</div>
	{:else}
		<form
			method="POST"
			use:enhance={() => {
				loading = true;
				return async ({ update }) => {
					loading = false;
					await update();
				};
			}}
			class="space-y-4"
		>
			<FormField
				label="Email address"
				name="email"
				type="email"
				placeholder="you@example.com"
				required
				disabled={loading}
				bind:value={email}
				autocomplete="email"
			/>

			<Button type="submit" variant="monaco" size="lg" class="w-full" disabled={loading}>
				{#if loading}
					<LoadingSpinner size="sm" class="mr-2" />
					Sending reset link...
				{:else}
					Send reset link
				{/if}
			</Button>
		</form>

		<div class="text-center">
			<a
				href="/login"
				class="inline-flex items-center gap-2 text-sm font-medium text-monaco-600 hover:text-monaco-700"
			>
				<ArrowLeft class="h-4 w-4" />
				Back to sign in
			</a>
		</div>
	{/if}
</div>
