import { CheckCircle } from "lucide-react";
import type { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { useState } from "react";
import { z } from "zod/v4";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import { DualInputLayout } from "~/components/custom_ui/inputLayouts";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { Checkbox } from "~/components/ui/checkbox";
import Input from "~/components/ui/input";
import { PhoneInput } from "~/components/ui/phone-input";
import { Textarea } from "~/components/ui/textarea";
import { useZodForm } from "~/lib/zodForm";
import { useTranslation } from "~/providers/I18nProvider";
import { api } from "~/utils/api";

/**
 * Pagina contatti: /contatti
 */
const Contatto: NextPage = () => {
	const { locale, t } = useTranslation();
	const [hasSent, setHasSent] = useState(false);
	const ContactFormSchema = z.object({
		checkbox: z.boolean().refine((val) => val === false), // Honeypot field
		cognome: z.string().nonempty("Inserisci un cognome valido"),
		email: z.email(),
		messaggio: z.string().nonempty("Inserisci un messaggio"),
		nome: z.string().nonempty("Inserisci un nome valido"),
		numero: z.string().nonempty("Inserisci un numero di telefono"),
	});

	const form = useZodForm(ContactFormSchema, {
		defaultValues: {
			checkbox: false, // Honeypot field
			cognome: "",
			email: "",
			messaggio: "",
			nome: "",
			numero: "",
		},
	});

	const { mutate: contactMutation } =
		api.comunicazioni.sendEmailContatto.useMutation({
			onSuccess: () => {
				setHasSent(true);
				form.reset();
			},
		});
	const onSubmit = (data: z.infer<typeof ContactFormSchema>) => {
		contactMutation({
			cognome: data.cognome,
			email: data.email,
			messaggio: data.messaggio,
			nome: data.nome,
			telefono: data.numero,
		});
	};
	z.config(z.locales[locale]());

	return (
		<>
			<Head>
				<title>{t.heads.contatti_titolo}</title>
				<meta content={t.heads.main_description} name="description" />
			</Head>
			<main className="mx-auto w-full max-w-8xl px-2 py-5 md:px-8">
				<Badge className="bg-muted py-1 text-foreground text-sm outline outline-muted-foreground">
					{t.contatti}
				</Badge>

				<div className="mx-auto max-w-7xl px-4 md:px-8">
					<div className="mx-auto max-w-lg space-y-3 sm:text-center">
						<p className="font-semibold text-4xl text-accent-foreground">
							{t.contact_form.titolo}
						</p>
						<p>
							{t.contact_form.sottotitolo1}{" "}
							<Link href="/guida#faq">
								<span className="font-bold text-accent-foreground text-lg">
									{t.contact_form.sottotitolo2}
								</span>
							</Link>{" "}
							{t.contact_form.sottotitolo3}
						</p>
					</div>
					<div className="mx-auto mt-12 max-w-xl">
						{hasSent ? (
							<ContactSuccess />
						) : (
							<Form {...form}>
								<form
									className="space-y-8 px-0.5"
									onSubmit={form.handleSubmit(onSubmit)}
								>
									<DualInputLayout
										children1={
											<FormField
												control={form.control}
												name="nome"
												render={({ field }) => (
													<FormItem>
														<div className="flex flex-wrap items-center gap-x-2">
															<FormLabel className="font-medium text-base">
																{t.contact_form.nome}
															</FormLabel>
															<FormMessage />
														</div>
														<FormControl>
															<Input {...field} type="text" />
														</FormControl>
													</FormItem>
												)}
											/>
										}
										children2={
											<FormField
												control={form.control}
												name="cognome"
												render={({ field }) => (
													<FormItem>
														<div className="flex flex-wrap items-center gap-x-2">
															<FormLabel className="font-medium text-base">
																{t.contact_form.cognome}
															</FormLabel>
															<FormMessage />
														</div>
														<FormControl>
															<Input {...field} type="text" />
														</FormControl>
													</FormItem>
												)}
											/>
										}
									/>

									<FormField
										control={form.control}
										name="email"
										render={({ field }) => (
											<FormItem>
												<div className="flex flex-wrap items-center gap-x-2">
													<FormLabel className="font-medium text-base">
														{t.contact_form.email}
													</FormLabel>
													<FormMessage />
												</div>
												<FormControl>
													<Input {...field} type="email" />
												</FormControl>
											</FormItem>
										)}
									/>
									<FormField
										control={form.control}
										name="numero"
										render={({ field }) => (
											<FormItem>
												<div className="flex flex-wrap items-center gap-x-2">
													<FormLabel
														className="font-medium text-base"
														htmlFor="numero"
													>
														{t.contact_form.telefono}
													</FormLabel>
													<FormMessage />
												</div>
												<FormControl>
													<PhoneInput {...field} id="numero" />
												</FormControl>
											</FormItem>
										)}
									/>
									<FormField
										control={form.control}
										name="messaggio"
										render={({ field }) => (
											<FormItem>
												<div className="flex flex-wrap items-center gap-x-2">
													<FormLabel className="font-medium text-base">
														{t.contact_form.messaggio}
													</FormLabel>
													<FormMessage />
												</div>
												<FormControl>
													<Textarea className="min-h-37.5" {...field} />
												</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"
										data-umami-event="contact_form_submit"
										type="submit"
									>
										{t.contact_form.invia}
									</Button>
								</form>
							</Form>
						)}
					</div>
				</div>
			</main>
		</>
	);
};

export default Contatto;

const ContactSuccess = () => {
	const { t } = useTranslation();
	return (
		<div className="flex h-full w-full items-center justify-center pt-14">
			<div className="mx-auto max-w-lg space-y-3 text-center">
				<CheckCircle className="mx-auto size-20 text-green-600" />
				<h3 className="font-semibold text-4xl text-accent-foreground sm:text-5xl">
					{t.contact_form.successo}
				</h3>
				<p className="text-muted-foreground">{t.contact_form.inviata}</p>
				<div className="flex flex-wrap items-center justify-center gap-3">
					<Link aria-label={t.contact_form.cta} href="/">
						<Button>{t.contact_form.cta}</Button>
					</Link>
				</div>
			</div>
		</div>
	);
};
