import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import toast from "react-hot-toast";
import { z } from "zod/v4";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import { LoadingSpinner } from "~/components/spinner";
import { Button } from "~/components/ui/button";
import { Checkbox } from "~/components/ui/checkbox";
import Input from "~/components/ui/input";
import { env } from "~/env";
import { useZodForm } from "~/lib/zodForm";
import { useTranslation } from "~/providers/I18nProvider";
import { api } from "~/utils/api";
import { assertNever } from "~/utils/utils";

export const FormLogin = () => {
	const router = useRouter();
	const { redirect } = router.query;
	const LoginSchema = z.object({
		checkbox: z.boolean().refine((val) => val === false), // Honeypot field
		email: z.email(),
		password: z.string(),
	});

	type LoginFormValues = z.infer<typeof LoginSchema>;

	const defaultValues: LoginFormValues = {
		checkbox: false, // Honeypot field
		email: "",
		password: "",
	};
	const { locale, t } = useTranslation();
	z.config(z.locales[locale]());

	const form = useZodForm(LoginSchema, {
		defaultValues: defaultValues,
	});

	const utils = api.useUtils();

	const { mutate, isPending } = api.auth.loginUser.useMutation({
		onError: (error) => {
			toast.error(`${t.auth.login.fail}\n${error.message}`);
		},
		onSuccess: async (data) => {
			// FLOWS: login | 3 | Login Result Handling
			if (!data.ok) {
				switch (data.error._tag) {
					case "NotFound":
						setUserNotFound(true);
						toast.error(`${t.auth.login.fail}\n${data.error.message}`);
						return;
					case "Fail":
						toast.error(`${t.auth.login.fail}\n${data.error.message}`);
						return;
					default:
						assertNever(data.error);
				}
			}

			await utils.auth.getSession.invalidate();
			toast.success(t.auth.login.success);
			await router.push(redirect ? (redirect as string) : "/");
			return;
		},
	});
	const [userNotFound, setUserNotFound] = useState(false);
	function onSubmit(fields: LoginFormValues) {
		mutate({
			email: fields.email,
			password: fields.password,
		});
		form.reset();
	}

	return (
		<>
			<div className="text-center">
				<div className="my-8 space-y-5">
					<h3 className="font-bold text-3xl sm:text-3xl">
						{t.auth.login.titolo}
					</h3>
					<h3 className="text-xl">{t.auth.login.sottotitolo}</h3>
				</div>

				{env.NEXT_PUBLIC_BASE_URL.includes("localhost") && (
					<button
						className="bg-yellow-300 font-semibold"
						onClick={async () => {
							form.setValue("email", "m.pedone98@gmail.com");
							form.setValue("password", "Marco1..");
							await form.handleSubmit(onSubmit)();
						}}
						type="button"
					>
						TEMP DEV LOGIN
					</button>
				)}
				{userNotFound ? (
					<div className="rounded-md bg-red-50 p-4">
						<div className="flex">
							<div className="ml-3">
								<h3 className="font-medium text-lg text-red-800">
									Account non trovato
								</h3>
								<div className="mt-2 text-lg text-red-700">
									<p>
										Devi avere un account per effettuare il login. Se non hai un
										account, contattaci per accedere al servizio.
									</p>
								</div>
							</div>
						</div>
					</div>
				) : (
					<>
						<Form {...form}>
							<form
								autoComplete="on"
								className="space-y-8 px-0.5"
								onSubmit={form.handleSubmit(onSubmit)}
							>
								<FormField
									control={form.control}
									name="email"
									render={({ field }) => (
										<FormItem>
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel htmlFor="email">
													{t.auth.login.email}
												</FormLabel>{" "}
												<FormMessage />
											</div>

											<FormControl>
												<Input
													placeholder="esempio@email.com"
													{...field}
													autoComplete="username"
													id="email"
													required
													type="email"
												/>
											</FormControl>
										</FormItem>
									)}
								/>
								<FormField
									control={form.control}
									name="password"
									render={({ field }) => (
										<FormItem>
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel
													className="flex flex-1 justify-between"
													htmlFor="password"
												>
													<div>{t.auth.login.password}</div>
													<Link
														className="text-primary"
														href="/auth/new-password-reset"
													>
														{t.auth.login.password_forgotten}
													</Link>
												</FormLabel>
												<FormMessage />
											</div>

											<FormControl>
												<Input
													{...field}
													autoComplete="current-password"
													id="password"
													required
													type="password"
												/>
											</FormControl>
										</FormItem>
									)}
								/>
								<FormField
									control={form.control}
									name="checkbox"
									render={({ field }) => (
										<FormItem className="hidden">
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel htmlFor="checkbox">Check Me</FormLabel>
												<FormMessage />
											</div>

											<FormControl>
												<Checkbox
													defaultChecked={field.value}
													id="checkbox"
													onCheckedChange={field.onChange}
												/>
											</FormControl>
										</FormItem>
									)}
								/>
								<Button
									className="w-full rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white duration-150 hover:bg-indigo-500 active:bg-indigo-600"
									disabled={isPending}
									type="submit"
								>
									{isPending ? (
										<div className="flex items-center justify-center">
											<LoadingSpinner size={25} />
										</div>
									) : (
										t.auth.login.titolo
									)}
								</Button>
							</form>
						</Form>
						<br />
						<div className="px-2 pt-2 text-left text-sm">
							<span>{t.auth.login.psa_1}</span>
							<Link
								className="text-indigo-600 underline hover:text-indigo-500"
								href="/termini-condizioni"
							>
								{t.auth.login.psa_terms}
							</Link>
							<span>{t.auth.login.psa_2}</span>
							<Link
								className="text-indigo-600 underline hover:text-indigo-500"
								href="/privacy-policy"
							>
								{t.auth.login.psa_privacy}
							</Link>
							.
						</div>
					</>
				)}
			</div>
		</>
	);
};
