<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import AuthHeader from '../AuthHeader.svelte';

let { form }: { form?: { error?: string; success?: boolean } } = $props();
</script>

<div class="flex min-h-screen flex-col bg-canvas">
	<AuthHeader />
	<div class="flex flex-1 items-center justify-center px-4">
		<div class="w-full max-w-sm">
			<!-- Logo -->
			<div class="mb-10 text-center">
				<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
					<span class="font-sans text-2xl font-bold tracking-widest text-ink uppercase"
						>Familienarchiv</span
					>
				</a>
			</div>

			<!-- Card -->
			<div class="rounded-sm border border-line bg-surface p-8 shadow-sm">
				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-ink uppercase">
					{m.forgot_password_heading()}
				</h1>

				{#if form?.success}
					<div class="mb-5 rounded-sm border border-green-200 bg-green-50 px-4 py-3">
						<p class="font-sans text-xs text-green-700">{m.forgot_password_success()}</p>
					</div>

					<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
						>{m.forgot_password_back_to_login()}</a
					>
				{:else}
					<form method="POST" class="space-y-5">
						<div>
							<label
								for="email"
								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
								>{m.forgot_password_email_label()}</label
							>
							<input
								type="email"
								name="email"
								id="email"
								required
								autocomplete="email"
								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
							/>
						</div>

						{#if form?.error}
							<div class="text-center font-sans text-xs font-medium text-red-600">{form.error}</div>
						{/if}

						<button
							type="submit"
							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
						>
							{m.forgot_password_submit()}
						</button>

						<div class="mt-4 text-center">
							<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
								>{m.forgot_password_back_to_login()}</a
							>
						</div>
					</form>
				{/if}
			</div>
		</div>
	</div>

	<!-- Footer -->
	<div class="py-4 text-center">
		<p class="font-sans text-xs tracking-widest text-ink-3 uppercase">Familienarchiv</p>
	</div>
</div>
