<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { setLocale, getLocale } from '$lib/paraglide/runtime';

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

const locales = ['DE', 'EN', 'ES'] as const;
const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
const activeLocale = $derived(getLocale().toUpperCase());
</script>

<div class="relative flex min-h-screen flex-col bg-canvas">
	<!-- Language switcher -->
	<div class="absolute top-4 right-4 flex items-center gap-1">
		{#each locales as locale (locale)}
			<button
				type="button"
				onclick={() => setLocale(localeMap[locale])}
				class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
                    {activeLocale === locale
                        ? 'font-bold text-ink'
                        : 'font-normal text-ink-3 hover:text-ink'}"
			>
				{locale}
			</button>
		{/each}
	</div>

	<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.login_heading()}
				</h1>

				<form method="POST" action="?/login" class="space-y-5">
					<div>
						<label
							for="username"
							class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
							>{m.login_label_username()}</label
						>
						<input
							type="text"
							name="username"
							id="username"
							required
							autocomplete="username"
							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
						/>
					</div>

					<div>
						<label
							for="password"
							class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
							>{m.login_label_password()}</label
						>
						<input
							type="password"
							name="password"
							id="password"
							required
							autocomplete="current-password"
							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
						/>
					</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.login_btn_submit()}
					</button>

					<div class="mt-4 text-center">
						<a
							href="/forgot-password"
							class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
							>{m.login_forgot_password()}</a
						>
					</div>
				</form>
			</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>
