"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2, Mail } from "lucide-react";
import { useTransition } from "react";
import { Controller, useForm } from "react-hook-form";
import { toast } from "sonner";
import * as z from "zod";
import { Button } from "@/components/ui/button";
import {
	Field,
	FieldError,
	FieldGroup,
	FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth-client";

const magicLinkSchema = z.object({
	email: z.email("Please enter a valid email address."),
});

type MagicLinkFormValues = z.infer<typeof magicLinkSchema>;

interface MagicLinkFormProps {
	callbackURL?: string;
	params?: URLSearchParams;
}

export function MagicLinkForm({
	callbackURL = "/dashboard",
	params,
}: MagicLinkFormProps) {
	const [loading, startTransition] = useTransition();

	const form = useForm<MagicLinkFormValues>({
		resolver: zodResolver(magicLinkSchema),
		defaultValues: { email: "" },
	});

	const onSubmit = (data: MagicLinkFormValues) => {
		startTransition(async () => {
			await authClient.signIn.magicLink(
				{
					email: data.email,
					callbackURL,
				},
				{
					query: params ? Object.fromEntries(params.entries()) : undefined,
					onSuccess() {
						toast.success("Check your inbox for a sign-in link.");
						form.reset();
					},
					onError(context) {
						toast.error(context.error.message);
					},
				},
			);
		});
	};

	return (
		<form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-2">
			<FieldGroup>
				<Controller
					name="email"
					control={form.control}
					render={({ field, fieldState }) => (
						<Field data-invalid={fieldState.invalid}>
							<FieldLabel htmlFor="magic-link-email">
								Email (magic link)
							</FieldLabel>
							<Input
								{...field}
								id="magic-link-email"
								type="email"
								placeholder="m@example.com"
								aria-invalid={fieldState.invalid}
								autoComplete="email"
							/>
							{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
						</Field>
					)}
				/>
			</FieldGroup>
			<Button
				type="submit"
				variant="outline"
				className="w-full gap-2"
				disabled={loading}
			>
				{loading ? (
					<Loader2 size={16} className="animate-spin" />
				) : (
					<Mail size={16} />
				)}
				<span>Send me a sign-in link</span>
			</Button>
		</form>
	);
}