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

	let { form } = $props();

	let firstName = $state('');
	let lastName = $state('');
	let email = $state('');
	let password = $state('');
	let confirmPassword = $state('');
	let loading = $state(false);
</script>

<svelte:head>
	<title>Initial Setup | Monaco USA</title>
</svelte:head>

<div class="relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-12">
	<!-- Background image -->
	<div class="absolute inset-0 -z-20">
		<img
			src="/monaco_high_res.jpg"
			alt=""
			class="h-full w-full object-cover"
		/>
		<div class="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-slate-900/60 to-monaco-900/70"></div>
	</div>

	<!-- Decorative blur elements -->
	<div class="absolute inset-0 -z-10">
		<div class="absolute -left-40 -top-40 h-80 w-80 rounded-full bg-monaco-500/30 blur-3xl"></div>
		<div class="absolute -right-40 top-1/3 h-96 w-96 rounded-full bg-monaco-400/20 blur-3xl"></div>
		<div class="absolute bottom-0 left-1/3 h-72 w-72 rounded-full bg-white/10 blur-3xl"></div>
	</div>

	<div class="w-full max-w-md">
		<!-- Logo and Branding -->
		<div class="mb-8 text-center">
			<div class="inline-flex flex-col items-center">
				<div class="mb-4 overflow-hidden rounded-2xl bg-white/90 p-2 shadow-xl backdrop-blur-sm">
					<img
						src="/MONACOUSA-Flags_376x376.png"
						alt="Monaco USA"
						class="h-20 w-20 object-contain"
					/>
				</div>
				<h1 class="text-2xl font-bold text-white drop-shadow-lg">
					Monaco <span class="text-monaco-300">USA</span>
				</h1>
				<p class="mt-1 text-sm text-white/80">Americans in Monaco</p>
			</div>
		</div>

		<!-- Setup Card Container -->
		<div class="rounded-2xl bg-white p-8 shadow-xl">
			<div class="space-y-6">
				<div class="text-center">
					<h2 class="text-xl font-semibold text-slate-900">Welcome to Monaco USA</h2>
					<p class="mt-1 text-sm text-slate-500">Create your administrator account to get started</p>
				</div>

				<!-- Setup Notice -->
				<div class="rounded-lg bg-blue-50 p-4 text-sm text-blue-800">
					<div class="flex items-start gap-3">
						<svg class="h-5 w-5 flex-shrink-0 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
						</svg>
						<div>
							<p class="font-medium">Initial Setup Required</p>
							<p class="mt-1 text-blue-700">This is the first time the portal is being accessed. Create an admin account to manage the portal.</p>
						</div>
					</div>
				</div>

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

				<form
					method="POST"
					use:enhance={() => {
						loading = true;
						return async ({ update }) => {
							loading = false;
							await update();
						};
					}}
					class="space-y-4"
				>
					<div class="grid grid-cols-2 gap-4">
						<FormField
							label="First name"
							name="first_name"
							type="text"
							placeholder="John"
							required
							disabled={loading}
							bind:value={firstName}
							autocomplete="given-name"
						/>

						<FormField
							label="Last name"
							name="last_name"
							type="text"
							placeholder="Doe"
							required
							disabled={loading}
							bind:value={lastName}
							autocomplete="family-name"
						/>
					</div>

					<FormField
						label="Email address"
						name="email"
						type="email"
						placeholder="admin@monacousa.org"
						required
						disabled={loading}
						bind:value={email}
						autocomplete="email"
					/>

					<FormField
						label="Password"
						name="password"
						type="password"
						placeholder="At least 8 characters"
						required
						disabled={loading}
						bind:value={password}
						autocomplete="new-password"
					/>

					<FormField
						label="Confirm password"
						name="confirm_password"
						type="password"
						placeholder="Confirm your password"
						required
						disabled={loading}
						bind:value={confirmPassword}
						autocomplete="new-password"
					/>

					<Button
						type="submit"
						variant="monaco"
						size="lg"
						class="w-full"
						disabled={loading}
					>
						{#if loading}
							<LoadingSpinner size="sm" class="mr-2" />
							Creating admin account...
						{:else}
							Create Admin Account
						{/if}
					</Button>
				</form>
			</div>
		</div>

		<!-- Footer -->
		<p class="mt-6 text-center text-xs text-white/60">
			&copy; 2026 Monaco USA. All rights reserved.
		</p>
	</div>
</div>
