"use client";
import { format } from "date-fns";
import { enUS, it } from "date-fns/locale";
import { CalendarIcon, HelpCircleIcon, Mail } from "lucide-react";
import { useRouter } from "next/router";
import { type Control, useWatch } from "react-hook-form";
import toast from "react-hot-toast";
import { z } from "zod/v4";
import { Counter } from "~/components/counter";
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import Input from "~/components/custom_ui/input";
import InputWIcon from "~/components/custom_ui/input-icon";
import {
	MultiSelect,
	RepackValues,
	UnpackOptions,
} from "~/components/custom_ui/multiselect";
import { PhoneInput } from "~/components/phone-input";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { Calendar } from "~/components/ui/calendar";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "~/components/ui/card";
import { Label } from "~/components/ui/label";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "~/components/ui/popover";
import { Separator } from "~/components/ui/separator";
import { Slider } from "~/components/ui/slider";
import { Switch } from "~/components/ui/switch";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "~/components/ui/tooltip";
import { getComuni } from "~/i18n/comuni";
import { GetNazioni } from "~/i18n/nazioni";
import { getProvinciaFromSigla, provincieWithSigla } from "~/i18n/provincie";
import { checkFiscalCodeValidity, getComuneFieldValue } from "~/lib/form_utils";
import { cn } from "~/lib/utils";
import { useZodForm } from "~/lib/zodForm";
import { useTranslation } from "~/providers/I18nProvider";
import type { Servizio } from "~/schemas/public/Servizio";
import TipologiaPosizioneEnum from "~/schemas/public/TipologiaPosizioneEnum";
import type { Users, UsersId } from "~/schemas/public/Users";
import type { UsersAnagrafica } from "~/schemas/public/UsersAnagrafica";
import { api } from "~/utils/api";

type InitialData = {
	servizio: Servizio;
	userData: Pick<Users, "id" | "nome" | "cognome" | "email" | "telefono">;
	anagrafica: UsersAnagrafica | undefined;
};

const FormNewServizioSchema = z.object({
	animali: z.boolean(),
	arredato: z.boolean(),
	ascensore: z.boolean(),
	azienda: z.boolean(),
	budget: z.number().positive(),
	cap_recapiti: z.string().length(5),
	citta_recapiti: z.string().nonempty("Inserisci una città"),
	civico_recapiti: z.string().nonempty("Inserisci un civico"),
	codice_destinatario: z.string().nullable(),
	codice_fiscale: z.string(),
	cognome: z.string().nonempty("Inserisci un cognome valido"),
	data_nascita: z.date(),
	email: z.email(),
	entromese: z.number().nullable(),
	fatturazione_aziendale: z.boolean(),
	fumatori: z.boolean(),
	giardino: z.boolean(),
	indirizzo_recapiti: z.string().nonempty("Inserisci un indirizzo"),
	legale_rappresentante: z.string().nullable(),
	luogo_nascita: z.string(),
	motivazione_transitorio: z.string().nullable(),
	n_adulti: z.number().min(1),
	n_minori: z.number(),
	nazione_nascita: z.string(),
	nazione_recapiti: z
		.string()
		.refine((v) => v !== "", { params: { type: "nazione" } }),
	nome: z.string().nonempty("Inserisci un nome valido"),
	p_iva: z.string().nullable(),
	parcheggio: z.boolean(),
	permanenza: z.number().nullable(),
	pianoterra: z.boolean(),
	provincia_recapiti: z
		.string()
		.refine((v) => v !== "", { params: { type: "provincia" } }),
	ragione_sociale: z.string().nullable(),
	reddito: z.string().nullable(),
	sede_legale: z.string().nullable(),
	sesso: z.string(),
	skipOrdine: z.boolean(),
	telefono: z.string(),
	terrazzo: z.boolean(),
	tipologia: z.custom<TipologiaPosizioneEnum>(),
});
type FormNewServizioValues = z.infer<typeof FormNewServizioSchema>;

export const FormNewServizioAcquisto = ({
	initialData,
	userId,
	isAdmin = false,
}: {
	initialData: InitialData;
	userId: UsersId;
	isAdmin?: boolean;
}) => {
	const router = useRouter();
	const schema = FormNewServizioSchema.superRefine(
		(
			{
				telefono,
				codice_fiscale,
				sesso,
				cognome,
				nome,
				data_nascita,
				luogo_nascita,
				nazione_nascita,
				n_adulti,
				permanenza,
				entromese,
				motivazione_transitorio,
				reddito,
				azienda,
				p_iva,
				sede_legale,
				legale_rappresentante,
				ragione_sociale,
				fatturazione_aziendale,
				codice_destinatario,
			},
			refinementContext,
		) => {
			if (entromese === null) {
				refinementContext.issues.push({
					code: "custom",
					input: "",
					message: "Inserisci il mese di inizio",
					path: ["entromese"],
				});
			}
			if (azienda) {
				if (!ragione_sociale || ragione_sociale.length < 1) {
					refinementContext.issues.push({
						code: "custom",
						input: "",
						message: "Inserisci la ragione sociale",
						path: ["ragione_sociale"],
					});
				}
				if (!sede_legale || sede_legale.length < 1) {
					refinementContext.issues.push({
						code: "custom",
						input: "",
						message: "Inserisci la sede legale",
						path: ["sede_legale"],
					});
				}
				if (!p_iva || p_iva.length < 1) {
					refinementContext.issues.push({
						code: "custom",
						input: "",
						message: "Inserisci la partita iva",
						path: ["p_iva"],
					});
				}
				if (!legale_rappresentante || legale_rappresentante.length < 1) {
					refinementContext.issues.push({
						code: "custom",
						input: "",
						message: "Inserisci il legale rappresentante",
						path: ["legale_rappresentante"],
					});
				}
			}
			if (fatturazione_aziendale) {
				if (!codice_destinatario || codice_destinatario.length !== 7) {
					refinementContext.issues.push({
						code: "custom",
						input: "",
						message: "Inserisci un codice destinatario valido",
						path: ["codice_destinatario"],
					});
				}
			}

			if (!telefono || telefono.length < 10) {
				refinementContext.issues.push({
					code: "custom",
					input: "",
					message:
						"Il numero di telefono deve essere lungo almeno 10 caratteri",
				});
			}
			checkFiscalCodeValidity({
				codiceFiscale: codice_fiscale,
				cognome,
				dataNascita: data_nascita,
				luogoNascita: luogo_nascita,
				nazioneNascita: nazione_nascita,
				nome,
				path: "codice_fiscale",
				refinementContext,
				sesso,
			});
			if (n_adulti <= 0) {
				refinementContext.issues.push({
					code: "custom",
					input: "",
					message: "Inserisci il numero di persone",
					path: ["n_adulti"],
				});
			}
			if (
				permanenza === null &&
				tipologia === TipologiaPosizioneEnum.Transitorio
			) {
				refinementContext.issues.push({
					code: "custom",
					input: "",
					message: "Inserisci permanenza",
					path: ["permanenza"],
				});
			}
			if (tipologia === TipologiaPosizioneEnum.Transitorio) {
				if (
					motivazione_transitorio === "" ||
					motivazione_transitorio === null
				) {
					refinementContext.issues.push({
						code: "custom",
						input: "",
						message: "Inserisci la motivazione",
						path: ["motivazione_transitorio"],
					});
				}
			} else {
				if (reddito === "" || reddito === null) {
					refinementContext.issues.push({
						code: "custom",
						input: "",
						message: "Inserisci il reddito",
						path: ["reddito"],
					});
				}
			}
		},
	);

	// This can come from your database or API.
	const defaultValues: FormNewServizioValues = {
		...initialData.userData,
		azienda: initialData.anagrafica?.azienda || false,
		cap_recapiti: initialData.anagrafica?.cap_residenza || "",
		citta_recapiti: initialData.anagrafica?.comune_residenza || "",
		civico_recapiti: initialData.anagrafica?.civico_residenza || "",
		codice_destinatario: initialData.anagrafica?.codice_destinatario || "",
		codice_fiscale: initialData.anagrafica?.codice_fiscale || "",
		data_nascita: initialData.anagrafica?.data_nascita
			? new Date(initialData.anagrafica.data_nascita)
			: new Date(),
		fatturazione_aziendale:
			initialData.anagrafica?.fatturazione_aziendale || false,
		indirizzo_recapiti: initialData.anagrafica?.via_residenza || "",
		legale_rappresentante: initialData.anagrafica?.legale_rappresentante || "",
		luogo_nascita: initialData.anagrafica?.luogo_nascita || "",
		nazione_nascita: initialData.anagrafica?.nazione_nascita || "",
		nazione_recapiti: initialData.anagrafica?.nazione_residenza || "",

		p_iva: initialData.anagrafica?.p_iva || "",
		provincia_recapiti: initialData.anagrafica?.provincia_residenza || "",
		ragione_sociale: initialData.anagrafica?.ragione_sociale || "",
		sede_legale: initialData.anagrafica?.sede_legale || "",
		sesso: initialData.anagrafica?.sesso || "M",
		...initialData.servizio,
		skipOrdine: false,
	};

	const { locale, t } = useTranslation();
	const nazioni_options = GetNazioni();
	const comuni_options = getComuni();
	z.config(z.locales[locale]());

	const form = useZodForm(schema, {
		defaultValues: defaultValues,
	});
	const DatePickerLocale = locale === "it" ? it : enUS;
	const { mutate } = api.servizio.postAcquistoData.useMutation({
		onError: (error) => {
			toast.error(`Errore invio dati: ${error.message}`, {
				id: "salvataggio",
			});
		},
		onMutate: () => {
			toast.loading("Invio dati in corso", {
				id: "salvataggio",
			});
		},
		onSuccess: async (data) => {
			toast.success("Servizio impostato con successo", {
				id: "salvataggio",
			});

			if (isAdmin) {
				if (data) {
					await router.push(`/area-riservata/admin/user-view/ordini/${userId}`);
				} else {
					await router.push(
						`/area-riservata/admin/user-view/ricerca/${userId}`,
					);
				}
			} else {
				await router.push(`/servizio/pagamento/${data}`);
			}
		},
	});

	function onSubmit(fields: FormNewServizioValues) {
		mutate({
			anagrafica: {
				azienda: fields.azienda,
				cap_residenza: fields.cap_recapiti,
				civico_residenza: fields.civico_recapiti,
				codice_destinatario: fields.codice_destinatario,
				codice_fiscale: fields.codice_fiscale,
				comune_residenza: fields.citta_recapiti,
				data_nascita: fields.data_nascita,
				fatturazione_aziendale: fields.fatturazione_aziendale,
				idanagrafica: initialData.anagrafica?.idanagrafica,
				legale_rappresentante: fields.legale_rappresentante,
				luogo_nascita: fields.luogo_nascita,
				nazione_nascita: fields.nazione_nascita,
				nazione_residenza: fields.nazione_recapiti,
				p_iva: fields.p_iva,
				provincia_residenza: fields.provincia_recapiti,
				ragione_sociale: fields.ragione_sociale,
				sede_legale: fields.sede_legale,
				sesso: fields.sesso,
				userid: userId,
				via_residenza: fields.indirizzo_recapiti,
			},
			servizio: {
				animali: fields.animali,
				arredato: fields.arredato,
				ascensore: fields.ascensore,
				budget: fields.budget,
				entromese: fields.entromese,
				fumatori: fields.fumatori,
				giardino: fields.giardino,
				motivazione_transitorio: fields.motivazione_transitorio,
				n_adulti: fields.n_adulti,
				n_minori: fields.n_minori,
				parcheggio: fields.parcheggio,
				permanenza: fields.permanenza,
				pianoterra: fields.pianoterra,
				reddito: fields.reddito,
				terrazzo: fields.terrazzo,
				tipologia: fields.tipologia,
			},
			servizioId: initialData.servizio.servizio_id,
			skipOrdine: isAdmin ? fields.skipOrdine : false,
			user: {
				cognome: fields.cognome,
				email: fields.email,
				nome: fields.nome,
				telefono: fields.telefono.replace(/\s/g, ""),
				username: `${fields.nome.trim()} ${fields.cognome.trim()}`,
			},
			userId,
		});
	}
	type altrePrefMappingType = [
		["animali", string],
		["fumatori", string],
		["giardino", string],
		["parcheggio", string],
		["terrazzo", string],
		["ascensore", string],
		["pianoterra", string],
	];
	const altrePrefMapping = t.altrePrefMapping as altrePrefMappingType;
	const [tipologia, nazione_nascita, nazione_recapiti, budget] = form.watch([
		"tipologia",
		"nazione_nascita",
		"nazione_recapiti",
		"budget",
	]);

	const texts =
		locale === "it"
			? {
					dettagli: "Dettagli del servizio",
					dettagli_desc: "Questi dati rappresentano la tua ricerca",
					fattura: "Vuoi che la fatturazione sia intestata alla tua azienda?",
					personali: "Dati personali",
					personali_desc: "Inserisci i tuoi dati personali",
					salva: "Salva e procedi al pagamento",
					sdi: "Codice destinatario SDI",
				}
			: {
					dettagli: "Service Details",
					dettagli_desc: "These data represent your search",
					fattura: "Do you want the invoice to be issued to your company?",
					personali: "Personal Data",
					personali_desc: "Enter your personal data",
					salva: "Save and proceed to payment",
					sdi: "SDI Recipient Code",
				};

	return (
		<Form {...form}>
			<form
				className="space-y-8 px-0.5 pb-5"
				onSubmit={form.handleSubmit(onSubmit)}
			>
				<Card>
					<CardHeader>
						<CardTitle>{texts.dettagli}</CardTitle>
						<CardDescription>{texts.dettagli_desc}</CardDescription>
					</CardHeader>
					<CardContent className="space-y-6">
						<FormField
							control={form.control}
							name="tipologia"
							render={({ field }) => (
								<FormItem>
									<div className="flex flex-wrap items-center gap-x-2">
										<FormLabel htmlFor="select-tipologia">
											{t.preferenze.tipologia}
										</FormLabel>
										<FormMessage />
									</div>

									<MultiSelect
										defaultValue={
											field.value === TipologiaPosizioneEnum.Transitorio
												? {
														label: "Transitorio",
														value: TipologiaPosizioneEnum.Transitorio,
													}
												: {
														label: "Stabile",
														value: TipologiaPosizioneEnum.Stabile,
													}
										}
										elementId="select-tipologia"
										elementName="tipologia"
										isMulti={false}
										onValueChange={(value) => {
											field.onChange(value.value);
											form.setValue("motivazione_transitorio", null);
											form.setValue("reddito", null);
										}}
										options={[
											{
												label: "Transitorio",
												value: TipologiaPosizioneEnum.Transitorio,
											},
											{
												label: "Stabile",
												value: TipologiaPosizioneEnum.Stabile,
											},
										]}
										placeholder={t.seleziona_placeholder}
									/>
								</FormItem>
							)}
						/>

						<FormField
							control={form.control}
							name="budget"
							render={({ field }) => (
								<FormItem>
									<div className="flex flex-wrap items-center gap-x-2 pb-1">
										<FormLabel htmlFor="budgetslider">
											{`${t.preferenze.budget_label1} - ${field.value},00 ${
												t.preferenze.budget_label2
											}`}
										</FormLabel>
										<FormMessage />
									</div>
									<FormControl>
										<Slider
											defaultValue={[field.value]}
											id="budgetslider"
											max={2000}
											min={0}
											onValueChange={(vals) => {
												field.onChange(Number(vals[0]));
											}}
											rangeClassName="bg-neutral-700"
											step={50}
											thumbClassName="border-neutral-700"
											value={[budget]}
										/>
									</FormControl>
									<FormDescription>{t.preferenze.budget_desc}</FormDescription>
								</FormItem>
							)}
						/>
						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
							<FormField
								control={form.control}
								name="entromese"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="select-mesi">
												{t.preferenze.dalmese_label}...
											</FormLabel>
											<FormMessage />
										</div>
										<FormControl>
											<MultiSelect
												defaultValue={
													field.value !== null
														? {
																// biome-ignore lint/style/noNonNullAssertion: <known size>
																label: t.preferenze.mesi[field.value]!,
																value: String(field.value),
															}
														: undefined
												}
												elementId="select-mesi"
												elementName="entro_mese"
												isMulti={false}
												onValueChange={(value) => {
													field.onChange(
														value.value !== "" ? parseInt(value.value) : null,
													);
												}}
												options={UnpackOptions({
													options: t.preferenze.mesi,
												})}
												placeholder="Seleziona..."
											/>
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								disabled={tipologia !== TipologiaPosizioneEnum.Transitorio}
								name="permanenza"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="permanenza">
												{t.preferenze.permanenza_label}
											</FormLabel>
											<FormMessage />
										</div>

										<FormControl>
											<MultiSelect
												defaultValue={
													field.value
														? {
																label:
																	t.preferenze.permanenza[field.value] || "",
																value: field.value.toString(),
															}
														: undefined
												}
												disabled={
													tipologia !== TipologiaPosizioneEnum.Transitorio
												}
												elementId="permanenza"
												elementName="permanenza"
												isMulti={false}
												onValueChange={(value) => {
													field.onChange(
														value.value !== "" ? parseInt(value.value) : null,
													);
												}}
												options={UnpackOptions({
													options: t.preferenze.permanenza,
												})}
												placeholder="Seleziona..."
											/>
										</FormControl>
										<FormDescription>
											{t.preferenze.permanenza_desc}
										</FormDescription>
									</FormItem>
								)}
							/>
						</div>
						<div className="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
							<div className="flex w-full items-center justify-between gap-4">
								<FormField
									control={form.control}
									name="n_adulti"
									render={({ field }) => (
										<FormItem className={cn("w-full")}>
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel className={cn("")} htmlFor="n_adulti">
													{t.preferenze.nadulti_label}
												</FormLabel>
												<FormMessage />
											</div>
											<FormControl>
												<Counter
													name="n_adulti"
													onlyPositive
													setValue={(v) => field.onChange(Number(v))}
													value={field.value}
												/>
											</FormControl>
										</FormItem>
									)}
								/>
								<FormField
									control={form.control}
									name="n_minori"
									render={({ field }) => (
										<FormItem className={cn("w-full")}>
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel className={cn("")} htmlFor="n_minori">
													{t.preferenze.nminori_label}
												</FormLabel>
												<FormMessage />
											</div>
											<FormControl>
												<Counter
													name="n_minori"
													onlyPositive
													setValue={(v) => field.onChange(Number(v))}
													value={field.value}
												/>
											</FormControl>
										</FormItem>
									)}
								/>
							</div>

							<FormField
								control={form.control}
								name="arredato"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="arredato">
												{t.preferenze.arredato_label}
											</FormLabel>
											<FormControl>
												<Switch
													checked={field.value}
													className="data-[state=checked]:bg-neutral-700"
													id="arredato"
													onCheckedChange={field.onChange}
												/>
											</FormControl>
											<FormMessage />
										</div>

										<FormDescription>
											{t.preferenze.arredato_desc}
										</FormDescription>
									</FormItem>
								)}
							/>
						</div>

						{tipologia === TipologiaPosizioneEnum.Transitorio ? (
							<FormField
								control={form.control}
								key={tipologia}
								name="motivazione_transitorio"
								render={({ field }) => {
									const existingValue = t.preferenze.motivazioni_mappings.find(
										(m) => m.id === field.value,
									);

									return (
										<FormItem>
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel htmlFor="motivazione_transitorio">
													{t.preferenze.motivazione_label}
												</FormLabel>
												<FormMessage />
											</div>
											<MultiSelect
												defaultValue={
													existingValue
														? {
																label: existingValue.title,
																value: existingValue.id,
															}
														: undefined
												}
												elementId="select-motivazione_transitorio"
												elementName="motivazione_transitorio"
												isMulti={false}
												onValueChange={(value) => {
													field.onChange(value.value);
												}}
												options={t.preferenze.motivazioni_mappings.map(
													(option) => ({
														label: option.title,
														value: option.id,
													}),
												)}
												placeholder={t.seleziona_placeholder}
											/>

											<FormDescription>
												{t.preferenze.motivazione_desc}
											</FormDescription>
										</FormItem>
									);
								}}
							/>
						) : (
							<FormField
								control={form.control}
								key={tipologia}
								name="reddito"
								render={({ field }) => (
									<FormItem>
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="select-reddito">
												{t.preferenze.reddito_label}
											</FormLabel>
											<FormMessage />
										</div>

										<MultiSelect
											defaultValue={undefined}
											elementId="select-reddito"
											elementName="reddito"
											isMulti={false}
											onValueChange={(value) => {
												field.onChange(value.value);
											}}
											options={UnpackOptions({
												options: t.preferenze.reddito_options,
											})}
											placeholder={t.seleziona_placeholder}
										/>
									</FormItem>
								)}
							/>
						)}

						<div className="flex flex-col space-y-2">
							<Label htmlFor="altrePrefDialogButton">
								{t.preferenze.altrepref_label}
							</Label>
							<FormDescription>{t.preferenze.altrepref_desc}</FormDescription>
							<div className="mt-2 flex flex-wrap gap-2">
								{altrePrefMapping.map((pair) => {
									if (pair) {
										return (
											<FormField
												control={form.control}
												key={pair[0]}
												name={pair[0]}
												render={({ field }) => (
													<FormItem>
														<FormControl>
															<Badge
																className={cn(
																	"cursor-pointer text-sm",
																	field.value
																		? "bg-neutral-800 hover:bg-neutral-800 sm:hover:bg-neutral-900/80"
																		: "bg-neutral-200 text-neutral-700 hover:bg-neutral-200 sm:hover:bg-neutral-900/80 sm:hover:text-neutral-50",
																)}
																onClick={() => {
																	field.onChange(!field.value);
																}}
															>
																{pair[1]}
															</Badge>
														</FormControl>
													</FormItem>
												)}
											/>
										);
									}
								})}
							</div>
						</div>
					</CardContent>
				</Card>
				<Card>
					<CardHeader>
						<CardTitle>{texts.personali}</CardTitle>
						<CardDescription>{texts.personali_desc}</CardDescription>
					</CardHeader>
					<CardContent className="space-y-6">
						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
							<FormField
								control={form.control}
								name="nome"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="nome">{t.account.nome}</FormLabel>
											<FormMessage />
										</div>

										<FormControl>
											<Input {...field} id="nome" type="text" />
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="cognome"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="cognome">
												{t.account.cognome}
											</FormLabel>
											<FormMessage />
										</div>

										<FormControl>
											<Input {...field} id="cognome" type="text" />
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="azienda"
								render={({ field }) => (
									<FormItem className="mt-6 w-full">
										<div className="flex items-center justify-center gap-x-4">
											<FormLabel htmlFor="azienda">
												{t.account.azienda_o_pf_disclamer}
											</FormLabel>
											<FormControl>
												<Switch
													checked={field.value}
													className="data-[state=checked]:bg-neutral-700"
													id="azienda"
													onCheckedChange={(v) => {
														field.onChange(v);
														if (!v) {
															form.setValue("ragione_sociale", null);
															form.setValue("sede_legale", null);
															form.setValue("p_iva", null);
														}
													}}
												/>
											</FormControl>
											<FormMessage />
										</div>
									</FormItem>
								)}
							/>
						</div>

						<AziendaSection control={form.control} setValue={form.setValue} />
						<FatturazioneSection control={form.control} />

						<Separator />
						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
							<FormField
								control={form.control}
								name="data_nascita"
								render={({ field }) => (
									<FormItem className="flex w-full flex-col">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="dataNascita">
												{t.anagrafica.dataNascita}
											</FormLabel>
											<FormMessage />
										</div>
										<Popover>
											<PopoverTrigger asChild>
												<FormControl>
													<Button
														className={cn(
															"h-[42px] w-full pl-3 text-left font-medium",
															!field.value && "text-muted-foreground",
															`rounded-lg border border-neutral-300 bg-white text-primary shadow-xs outline-hidden file:border-0 file:bg-transparent file:font-medium file:text-sm hover:border-neutral-400 focus:border-neutral-400 disabled:cursor-not-allowed disabled:opacity-50 aria-expanded:border-neutral-400 dark:border-neutral-500 dark:bg-primary dark:text-white dark:aria-expanded:border-neutral-400 dark:focus:border-transparent dark:hover:border-neutral-400 dark:placeholder:text-neutral-400`,
														)}
														id="dataNascita"
														variant={"outline"}
													>
														{field.value ? (
															format(field.value, "PPP", {
																locale: DatePickerLocale,
															})
														) : (
															<span>{t.anagrafica.scegli_data}</span>
														)}
														<CalendarIcon className="ml-auto size-4 opacity-50" />
													</Button>
												</FormControl>
											</PopoverTrigger>
											<PopoverContent align="start" className="w-auto p-0">
												<Calendar
													autoFocus
													captionLayout="dropdown"
													defaultMonth={field.value}
													disabled={(date) =>
														date > new Date() || date < new Date("1900-01-01")
													}
													endMonth={new Date()}
													locale={DatePickerLocale}
													mode="single"
													onSelect={field.onChange}
													selected={field.value}
												/>
											</PopoverContent>
										</Popover>
									</FormItem>
								)}
							/>

							<FormField
								control={form.control}
								name="nazione_nascita"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="select-naz-nascita">
												{t.anagrafica.nazioneNascita}
											</FormLabel>
											<FormMessage />
										</div>

										<FormControl>
											<MultiSelect
												defaultValue={RepackValues({
													options: nazioni_options,
													values: field.value,
												})}
												elementId="select-naz-nascita"
												elementName="nazioneNascita"
												isMulti={false}
												onValueChange={async (value) => {
													field.onChange(value.value);
													await form.trigger("luogo_nascita");
													if (value.value !== "0") {
														form.setValue("luogo_nascita", "");
													}
												}}
												options={UnpackOptions({ options: nazioni_options })}
												placeholder="Seleziona..."
											/>
										</FormControl>
									</FormItem>
								)}
							/>

							<FormField
								control={form.control}
								name="luogo_nascita"
								render={({ field }) => {
									if (nazione_nascita === "0") {
										const options = comuni_options.map((c) => c.nome);
										return (
											<FormItem className="w-full">
												<div className="flex flex-wrap items-center gap-x-2">
													<FormLabel htmlFor="select-comune-nascita">
														{t.anagrafica.luogoNascita}
													</FormLabel>
													<FormMessage />
												</div>

												<FormControl>
													<MultiSelect
														defaultValue={getComuneFieldValue(
															field.value,
															options,
														)}
														elementId="select-comune-nascita"
														elementName="luogoNascita"
														isMulti={false}
														onValueChange={async (value) => {
															field.onChange(value.value);
															await form.trigger("luogo_nascita");
														}}
														options={UnpackOptions({ options })}
														placeholder="Seleziona..."
													/>
												</FormControl>
											</FormItem>
										);
									}
									return (
										<FormItem className="w-full">
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel htmlFor="luogoNascita">
													{t.anagrafica.luogoNascita}
												</FormLabel>
												<FormMessage />
											</div>
											<FormControl>
												<Input
													{...field}
													id="luogoNascita"
													onChange={async (v) => {
														field.onChange(v.target.value);
														await form.trigger("luogo_nascita");
													}}
													type="text"
												/>
											</FormControl>
										</FormItem>
									);
								}}
							/>

							<FormField
								control={form.control}
								name="sesso"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex items-center gap-x-2">
											<FormLabel htmlFor="select-sesso">
												<TooltipProvider>
													<Tooltip delayDuration={0}>
														<TooltipTrigger className="relative flex items-center gap-x-2">
															{t.anagrafica.sesso}{" "}
															<HelpCircleIcon className="-right-6 absolute size-5" />
														</TooltipTrigger>
														<TooltipContent>
															{t.anagrafica.sesso_disclamer}
														</TooltipContent>
													</Tooltip>
												</TooltipProvider>
											</FormLabel>
											<FormMessage />
										</div>
										<MultiSelect
											defaultValue={t.anagrafica.sesso_options.filter(
												(v) => v.value === field.value,
											)}
											elementId="select-sesso"
											elementName="sesso"
											isMulti={false}
											onValueChange={(value) => {
												field.onChange(value.value);
											}}
											options={t.anagrafica.sesso_options}
											placeholder=""
										/>
									</FormItem>
								)}
							/>
						</div>
						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
							<FormField
								control={form.control}
								name="codice_fiscale"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="codice_fiscale">
												{t.anagrafica.codiceFiscale}
											</FormLabel>
											<FormMessage />
										</div>
										<FormControl>
											<Input
												{...field}
												className="uppercase"
												id="codice_fiscale"
												onChange={async (v) => {
													field.onChange(v.target.value.toUpperCase());
													await form.trigger("codice_fiscale");
												}}
												type="text"
											/>
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="email"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="email">{t.account.email}</FormLabel>
											<FormMessage />
										</div>

										<FormControl>
											<InputWIcon
												{...field}
												iconPosition="start"
												id="email"
												type="email"
											>
												<Mail aria-hidden="true" size={16} strokeWidth={2} />
											</InputWIcon>
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="telefono"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="numero">
												{t.account.telefono}
											</FormLabel>
											<FormMessage />
										</div>

										<FormControl>
											<PhoneInput {...field} id="telefono" />
										</FormControl>
									</FormItem>
								)}
							/>
						</div>
						<Separator />
						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
							<FormField
								control={form.control}
								name="nazione_recapiti"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="select-naz">
												{t.recapiti.nazione}
											</FormLabel>
											<FormMessage />
										</div>

										<FormControl>
											<MultiSelect
												defaultValue={RepackValues({
													options: nazioni_options,
													values: field.value,
												})}
												elementId="select-naz"
												elementName="nazioneRecapiti"
												isMulti={false}
												onValueChange={async (value) => {
													field.onChange(value.value);
													form.setValue("provincia_recapiti", "");
													if (value.value !== "0") {
														form.setValue("citta_recapiti", "");
													}
												}}
												options={UnpackOptions({ options: nazioni_options })}
												placeholder="Seleziona..."
											/>
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="provincia_recapiti"
								render={({ field }) => {
									const provinciaName =
										field.value && getProvinciaFromSigla(field.value);
									return (
										<FormItem className="w-full">
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel htmlFor="provinciaRecapiti">
													{t.recapiti.provincia}
												</FormLabel>
												<FormMessage />
											</div>

											{nazione_recapiti === "0" ? (
												<MultiSelect
													defaultValue={
														field.value && provinciaName
															? {
																	label: provinciaName,
																	value: field.value,
																}
															: undefined
													}
													elementId="provinciaRecapiti"
													elementName="provincia"
													isMulti={false}
													onValueChange={(value) => {
														field.onChange(value.value);
													}}
													options={provincieWithSigla.map((prov) => ({
														label: prov.nome,
														value: prov.sigla,
													}))}
													placeholder="Seleziona"
												/>
											) : (
												<FormControl>
													<Input
														{...field}
														id="provinciaRecapiti"
														type="text"
													/>
												</FormControl>
											)}
										</FormItem>
									);
								}}
							/>
						</div>
						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
							<FormField
								control={form.control}
								name="citta_recapiti"
								render={({ field }) => {
									if (nazione_recapiti === "0") {
										const provincia = form.watch("provincia_recapiti");
										const options = comuni_options
											.filter((comune) =>
												provincia ? comune.provincia === provincia : true,
											)
											.map((comune) => comune.nome);
										return (
											<FormItem className="w-full">
												<div className="flex flex-wrap items-center gap-x-2">
													<FormLabel htmlFor="select-comune">
														{t.recapiti.comune}
													</FormLabel>
													<FormMessage />
												</div>

												<FormControl>
													<MultiSelect
														defaultValue={getComuneFieldValue(
															field.value,
															options,
														)}
														elementId="select-comune"
														elementName="citta_recapiti"
														isMulti={false}
														onValueChange={async (value) => {
															field.onChange(value.value);
															await form.trigger("citta_recapiti");
														}}
														options={UnpackOptions({ options })}
														placeholder="Seleziona..."
													/>
												</FormControl>
											</FormItem>
										);
									}
									return (
										<FormItem className="w-full">
											<div className="flex flex-wrap items-center gap-x-2">
												<FormLabel htmlFor="citta_recapiti">
													{t.recapiti.comune}
												</FormLabel>
												<FormMessage />
											</div>
											<FormControl>
												<Input
													{...field}
													id="citta_recapiti"
													onChange={async (v) => {
														field.onChange(v.target.value);
														await form.trigger("citta_recapiti");
													}}
													type="text"
												/>
											</FormControl>
										</FormItem>
									);
								}}
							/>
							<FormField
								control={form.control}
								name="cap_recapiti"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="cap">{t.recapiti.cap}</FormLabel>

											<FormMessage />
										</div>
										<FormControl>
											<Input
												{...field}
												id="cap"
												placeholder="00100"
												type="text"
											/>
										</FormControl>
									</FormItem>
								)}
							/>
						</div>
						<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
							<FormField
								control={form.control}
								name="indirizzo_recapiti"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="indirizzo">
												{t.recapiti.indirizzo}
											</FormLabel>
											<FormMessage />
										</div>
										<FormControl>
											<Input
												{...field}
												id="indirizzo"
												placeholder="Via Roma"
												type="text"
											/>
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="civico_recapiti"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="civico">
												{t.recapiti.civico}
											</FormLabel>

											<FormMessage />
										</div>
										<FormControl>
											<Input
												{...field}
												id="civico"
												placeholder="50"
												type="text"
											/>
										</FormControl>
									</FormItem>
								)}
							/>
						</div>
					</CardContent>
				</Card>
				<div className="flex w-full flex-wrap items-center justify-center gap-2 pb-8 sm:justify-end">
					{isAdmin && (
						<FormField
							control={form.control}
							name="skipOrdine"
							render={({ field }) => (
								<FormItem className="py-2">
									<div className="flex items-center justify-start gap-x-4">
										<FormLabel htmlFor="skipOrdine">
											Vuoi saltare la creazione dell&apos;ordine e impostare il
											servizio come attivo?
										</FormLabel>
										<FormControl>
											<Switch
												checked={field.value}
												className="data-[state=checked]:bg-neutral-700"
												id="skipOrdine"
												onCheckedChange={(v) => {
													field.onChange(v);
												}}
											/>
										</FormControl>
										<FormMessage />
									</div>
								</FormItem>
							)}
						/>
					)}
					<Button className="w-full sm:w-auto" type="submit">
						{texts.salva}
					</Button>
				</div>
			</form>
		</Form>
	);
};

const AziendaSection = ({
	control,
	setValue,
}: {
	control: Control<FormNewServizioValues>;
	setValue: (
		name: keyof FormNewServizioValues,
		// biome-ignore lint/suspicious/noExplicitAny: <fine here>
		value: any,
	) => void;
}) => {
	const { t, locale } = useTranslation();
	const azienda = useWatch({
		control,
		name: "azienda",
	});
	return (
		<>
			<div
				className={cn(
					"flex w-full flex-col items-start justify-between gap-4 sm:flex-row",
					!azienda && "hidden",
				)}
			>
				<FormField
					control={control}
					name="ragione_sociale"
					render={({ field }) => (
						<FormItem className="w-full">
							<div className="flex flex-wrap items-center gap-x-2">
								<FormLabel htmlFor="ragione_sociale">
									{t.anagrafica.ragioneSociale}
								</FormLabel>
								<FormMessage />
							</div>
							<FormControl>
								<Input
									{...field}
									id="ragione_sociale"
									type="text"
									value={field.value || undefined}
								/>
							</FormControl>
						</FormItem>
					)}
				/>
				<FormField
					control={control}
					name="sede_legale"
					render={({ field }) => (
						<FormItem className="w-full">
							<div className="flex flex-wrap items-center gap-x-2">
								<FormLabel htmlFor="sede_legale">
									{t.anagrafica.sedeLegale}
								</FormLabel>
								<FormMessage />
							</div>
							<FormControl>
								<Input
									{...field}
									id="sede_legale"
									type="text"
									value={field.value || undefined}
								/>
							</FormControl>
						</FormItem>
					)}
				/>
			</div>

			<div
				className={cn(
					"flex w-full flex-col items-start justify-between gap-4 sm:flex-row",
					!azienda && "hidden",
				)}
			>
				<FormField
					control={control}
					name="p_iva"
					render={({ field }) => (
						<FormItem className="w-full">
							<div className="flex flex-wrap items-center gap-x-2">
								<FormLabel htmlFor="p_iva">{t.anagrafica.p_iva}</FormLabel>
								<FormMessage />
							</div>
							<FormControl>
								<Input
									{...field}
									id="p_iva"
									type="text"
									value={field.value || undefined}
								/>
							</FormControl>
						</FormItem>
					)}
				/>
				<FormField
					control={control}
					name="legale_rappresentante"
					render={({ field }) => (
						<FormItem className="w-full">
							<div className="flex flex-wrap items-center gap-x-2">
								<FormLabel htmlFor="legale_rappresentante">
									{t.anagrafica.legale_rappresentante}
								</FormLabel>
								<FormMessage />
							</div>
							<FormControl>
								<Input
									{...field}
									id="legale_rappresentante"
									type="text"
									value={field.value || undefined}
								/>
							</FormControl>
						</FormItem>
					)}
				/>
			</div>
			<FormField
				control={control}
				name="fatturazione_aziendale"
				render={({ field }) => (
					<FormItem className={cn("py-2", !azienda && "hidden")}>
						<div className="flex items-center justify-start gap-x-4">
							<FormLabel htmlFor="fatturazione_aziendale">
								{locale === "it"
									? "Vuoi che la fatturazione sia intestata alla tua azienda?"
									: "Do you want the invoice to be issued to your company?"}
							</FormLabel>
							<FormControl>
								<Switch
									checked={field.value}
									className="data-[state=checked]:bg-neutral-700"
									id="fatturazione_aziendale"
									onCheckedChange={(v) => {
										field.onChange(v);
										if (!v) {
											setValue("codice_destinatario", null);
										}
									}}
								/>
							</FormControl>
							<FormMessage />
						</div>
					</FormItem>
				)}
			/>
		</>
	);
};

const FatturazioneSection = ({
	control,
}: {
	control: Control<FormNewServizioValues>;
}) => {
	const { locale } = useTranslation();
	const fatturazione_aziendale = useWatch({
		control,
		name: "fatturazione_aziendale",
	});
	return (
		<FormField
			control={control}
			name="codice_destinatario"
			render={({ field }) => (
				<FormItem className={cn("w-full", !fatturazione_aziendale && "hidden")}>
					<div className="flex flex-wrap items-center gap-x-2">
						<FormLabel htmlFor="codice_destinatario">
							{locale === "it"
								? "Codice destinatario SDI"
								: "SDI Recipient Code"}
						</FormLabel>
						<FormMessage />
					</div>

					<FormControl>
						<Input
							{...field}
							id="codice_destinatario"
							type="text"
							value={field.value || undefined}
						/>
					</FormControl>
				</FormItem>
			)}
		/>
	);
};