<script lang="ts">
	import { toast } from 'svelte-sonner';
	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
	import * as Form from '$lib/components/ui/form/index.js';
	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.js';
	import { firstFormError } from '$lib/form-feedback';
	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 ?? firstFormError(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 } = loginForm;
</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>
				<Field.Description>
					Use the administrator account created for this workspace.
				</Field.Description>
			</div>
			<Form.Field form={loginForm} name="email">
				<Form.Control id="email-{id}">
					{#snippet children({ props })}
						<Form.Label>Email</Form.Label>
						<Input
							{...props}
							type="email"
							autocomplete="email"
							placeholder="admin@example.com"
							bind:value={$formData.email}
						/>
					{/snippet}
				</Form.Control>
				<Form.FieldErrors />
			</Form.Field>
			<Form.Field form={loginForm} name="password">
				<Form.Control id="password-{id}">
					{#snippet children({ props })}
						<Form.Label>Password</Form.Label>
						<Input
							{...props}
							type="password"
							autocomplete="current-password"
							bind:value={$formData.password}
						/>
					{/snippet}
				</Form.Control>
				<Form.FieldErrors />
				<Field.Description>
					New users are created manually by an administrator; public registration is disabled.
				</Field.Description>
			</Form.Field>
			<Button type="submit" class="w-full">Sign in</Button>
		</Field.Group>
	</form>
	<Field.Description class="px-6 text-center">
		Business and sport centre management for clients, bookings, rooms, services, and invoices.
	</Field.Description>
</div>
