<script lang="ts">
	import { enhance } from '$app/forms';
	import { goto } from '$app/navigation';
	import { Button } from '$lib/components/button/index.js';
	import * as Card from '$lib/components/card/index.js';
	import { Label } from '$lib/components/label/index.js';
	import { Input } from '$lib/components/input/index.js';
	import { cn } from '$lib/utils.js';
	import { toast } from 'svelte-sonner';
	import type { HTMLAttributes } from 'svelte/elements';
	import type { ActionData } from '../../routes/login/$types.js';

	let {
		class: className,
		form,
		...restProps
	}: HTMLAttributes<HTMLDivElement> & { form?: ActionData } = $props();

	const id = Math.random().toString(36).substring(2, 15);

	$effect(() => {
		if (form?.message) {
			toast.error(form.message);
		}
	});
</script>

<div class={cn('flex flex-col gap-6', className)} {...restProps}>
	<Card.Root>
		<Card.Header class="text-center">
			<Card.Title class="text-xl"><h1>Serengo</h1></Card.Title>
			<Card.Description>Enter your credentials to continue</Card.Description>
		</Card.Header>
		<Card.Content>
			<form method="post" action="?/login" use:enhance>
				<div class="grid gap-4">
					<div class="grid gap-2">
						<Label for="username-{id}">Username</Label>
						<Input
							id="username-{id}"
							name="username"
							type="text"
							placeholder="Enter your username"
							required
						/>
					</div>
					<div class="grid gap-2">
						<Label for="password-{id}">Password</Label>
						<Input
							id="password-{id}"
							name="password"
							type="password"
							placeholder="Enter your password"
							required
						/>
					</div>

					<div class="flex gap-2">
						<Button type="submit" class="flex-1">Login</Button>
						<Button type="submit" variant="outline" formaction="?/register" class="flex-1">
							Register
						</Button>
					</div>
				</div>
				<Button variant="outline" class="mt-4 w-full" onclick={() => goto('/login/google')}>
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path
							d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
							fill="currentColor"
						/>
					</svg>
					Login with Google
				</Button>
			</form>
		</Card.Content>
	</Card.Root>
</div>
