<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, data } = $props();

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

<svelte:head>
	<title>Sign In | Monaco USA</title>
</svelte:head>

<div class="space-y-6">
	<div class="text-center">
		<h2 class="text-xl font-semibold text-slate-900">Welcome back</h2>
		<p class="mt-1 text-sm text-slate-500">Sign in to your member account</p>
	</div>

	{#if data.urlError}
		<FormMessage type="error" message={data.urlError} />
	{/if}

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

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

	<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"
		/>

		<FormField
			label="Password"
			name="password"
			type="password"
			placeholder="Enter your password"
			required
			disabled={loading}
			bind:value={password}
			autocomplete="current-password"
		/>

		<div class="flex items-center justify-between">
			<label class="flex items-center gap-2">
				<input
					type="checkbox"
					name="remember"
					class="h-4 w-4 rounded border-slate-300 text-monaco-600 focus:ring-monaco-500"
				/>
				<span class="text-sm text-slate-600">Remember me</span>
			</label>

			<a
				href="/forgot-password"
				class="text-sm font-medium text-monaco-600 hover:text-monaco-700"
			>
				Forgot password?
			</a>
		</div>

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

	<div class="text-center">
		<p class="text-sm text-slate-600">
			Don't have an account?
			<a href="/signup" class="font-medium text-monaco-600 hover:text-monaco-700">
				Sign up
			</a>
		</p>
	</div>
</div>
