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

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

<div class="relative flex min-h-screen flex-col bg-surface">
	<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.reset_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.reset_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">
						<input type="hidden" name="token" value={data.token ?? ''} />

						<div>
							<label
								for="newPassword"
								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
								>{m.reset_password_label()}</label
							>
							<input
								type="password"
								name="newPassword"
								id="newPassword"
								required
								autocomplete="new-password"
								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>

						<div>
							<label
								for="confirmPassword"
								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
								>{m.reset_password_confirm_label()}</label
							>
							<input
								type="password"
								name="confirmPassword"
								id="confirmPassword"
								required
								autocomplete="new-password"
								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 === 'MISMATCH'
									? m.reset_password_mismatch()
									: getErrorMessage(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.reset_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>
