<script lang="ts">
	import { toast } from 'svelte-sonner';
	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
	import { Field as FormField, Control, FieldErrors } from 'formsnap';
	import * as Field from '$lib/components/ui/field/index.js';
	import { superForm, type SuperValidated } from 'sveltekit-superforms';
	import { zod4Client } from 'sveltekit-superforms/adapters';
	import type { HTMLAttributes } from 'svelte/elements';
	import { Input } from '$lib/components/ui/input/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import { cn, type WithElementRef } from '$lib/utils/format.js';
	import { loginSchema, type LoginSchema } from '$lib/schemas/auth';

	let {
		ref = $bindable(null),
		class: className,
		form: initialForm,
		...restProps
	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
		form: SuperValidated<LoginSchema['_output'], string>;
	} = $props();

	const id = $props.id();
	// svelte-ignore state_referenced_locally
	const loginForm = superForm(initialForm, {
		validators: zod4Client(loginSchema),
		resetForm: false,
		onUpdated: ({ form }) => {
			if (!form.valid) {
				toast.error(form.message ?? firstError(form.errors), {
					id: 'login-error',
					position: 'top-center'
				});
			}
		},
		onError: ({ result }) => {
			toast.error(result.error.message, {
				id: 'login-error',
				position: 'top-center'
			});
		}
	});

	const { form: formData, enhance, tainted } = loginForm;

	function firstError(errors: Record<string, unknown>) {
		for (const value of Object.values(errors)) {
			if (Array.isArray(value) && typeof value[0] === 'string') {
				return value[0];
			}
		}

		return 'Check the highlighted fields.';
	}
</script>

<div class={cn('flex flex-col gap-6', className)} bind:this={ref} {...restProps}>
	<form action="?/login" method="POST" use:enhance>
		<Field.Group>
			<div class="flex flex-col items-center gap-2 text-center">
				<div class="flex flex-col items-center gap-2 font-medium">
					<div
						class="flex size-9 items-center justify-center rounded-md bg-primary text-primary-foreground"
					>
						<GalleryVerticalEndIcon class="size-6" />
					</div>
					<span class="sr-only">Clearity</span>
				</div>
				<h1 class="text-xl font-bold">Sign in to Clearity</h1>
			</div>
			<FormField form={loginForm} name="email">
				<Field.Field>
					<Control id="email-{id}">
						{#snippet children({ props })}
							<Field.Label>Email</Field.Label>
							<Input
								{...props}
								aria-invalid={$tainted?.email ? props['aria-invalid'] : undefined}
								type="email"
								autocomplete="email"
								placeholder="admin@example.com"
								bind:value={$formData.email}
							/>
						{/snippet}
					</Control>
					{#if $tainted?.email}
						<Field.Error><FieldErrors /></Field.Error>
					{/if}
				</Field.Field>
			</FormField>
			<FormField form={loginForm} name="password">
				<Field.Field>
					<Control id="password-{id}">
						{#snippet children({ props })}
							<Field.Label>Password</Field.Label>
							<Input
								{...props}
								aria-invalid={$tainted?.password ? props['aria-invalid'] : undefined}
								type="password"
								autocomplete="current-password"
								bind:value={$formData.password}
							/>
						{/snippet}
					</Control>
					{#if $tainted?.password}
						<Field.Error><FieldErrors /></Field.Error>
					{/if}
				</Field.Field>
			</FormField>
			<Field.Field>
				<Button type="submit" class="w-full">Sign in</Button>
			</Field.Field>
		</Field.Group>
	</form>
</div>
