import { format } from "date-fns";
import { enUS, it } from "date-fns/locale";
import { CalendarIcon, X } from "lucide-react";
import { z } from "zod/v4";
import { Counter } from "~/components/counter";
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import { Button } from "~/components/ui/button";
import { Calendar } from "~/components/ui/calendar";
import { Label } from "~/components/ui/label";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "~/components/ui/popover";
import { Switch } from "~/components/ui/switch";
import { cn } from "~/lib/utils";
import { useZodForm } from "~/lib/zodForm";
import { useTranslation } from "~/providers/I18nProvider";
import type { Servizio } from "~/schemas/public/Servizio";
import { DEFAULT_SERVIZIO_INTERRUZIONE_DURATION_DAYS } from "~/utils/config";

const Schema = z.object({
	decorrenza: z.date().nullable(),
	isInterrotto: z.boolean(),
	isOkAcconto: z.boolean(),
	isOkConsulenza: z.boolean(),
	isOkSaldo: z.boolean(),
	skipPayment: z.boolean(),
	skipControlloDoc: z.boolean(),
	skipDocMotivazione: z.boolean(),
	onboardOk: z.boolean(),
	interruzioneDays: z.number(),
	acceptedInterr: z.boolean(),
});

export type FormValues = z.infer<typeof Schema>;

export const FormEditServizio = ({
	initialData,
	onSubmit,
}: {
	initialData: Servizio | undefined;
	onSubmit: (fields: FormValues) => void;
}) => {
	// This can come from your database or API.
	let defaultValues: FormValues;

	if (initialData) {
		defaultValues = {
			...initialData,
		};
	} else {
		defaultValues = {
			decorrenza: null,
			isInterrotto: false,
			isOkAcconto: false,
			isOkConsulenza: false,
			isOkSaldo: false,
			skipPayment: false,
			skipControlloDoc: false,
			skipDocMotivazione: false,
			onboardOk: false,
			interruzioneDays: DEFAULT_SERVIZIO_INTERRUZIONE_DURATION_DAYS,
			acceptedInterr: false,
		};
	}
	const { locale, t } = useTranslation();

	z.config(z.locales[locale]());

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

	const DatePickerLocale = locale === "it" ? it : enUS;

	return (
		<Form {...form}>
			<form className="space-y-8 px-0.5" onSubmit={form.handleSubmit(onSubmit)}>
				<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
					<FormField
						control={form.control}
						name="isInterrotto"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="isInterrotto">Interrotto</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="isInterrotto"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>

								<FormDescription>Il servizio è interrotto</FormDescription>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="acceptedInterr"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="acceptedInterr">
										Informativa Interruzione Vista
									</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="acceptedInterr"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="interruzioneDays"
						render={({ field }) => (
							<FormItem className={cn("w-full")}>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel
										className={cn("font-semibold text-base")}
										htmlFor="interruzioneDays"
									>
										Giorni interruzione
									</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Counter
										name="interruzioneDays"
										onlyPositive
										setValue={(value) => field.onChange(Number(value))}
										value={Number(field.value)}
									/>
								</FormControl>
							</FormItem>
						)}
					/>
				</div>
				<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
					<FormField
						control={form.control}
						name="decorrenza"
						render={({ field }) => (
							<FormItem className="flex w-full flex-col">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="decorrenza">
										Decorrenza Servizio
									</FormLabel>
									<FormMessage />
								</div>
								<Popover>
									<PopoverTrigger asChild>
										<FormControl>
											<Button
												className={cn(
													"h-10 w-full bg-card pl-3 text-left font-medium",
													!field.value && "text-muted-foreground",
													"rounded-lg border border-neutral-300 shadow-xs outline-hidden file:border-0 file:bg-transparent file:font-medium file:text-sm disabled:cursor-not-allowed disabled:opacity-50 dark:focus:border-transparent",
												)}
												id="decorrenza"
												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="end" className="w-auto p-0">
										<Calendar
											autoFocus
											captionLayout="dropdown"
											defaultMonth={field.value || new Date()}
											endMonth={new Date(2050, 12)}
											locale={DatePickerLocale}
											mode="single"
											onSelect={field.onChange}
											selected={field.value || undefined}
										/>
									</PopoverContent>
								</Popover>
							</FormItem>
						)}
					/>

					<div className="flex flex-col items-start gap-2">
						<Label htmlFor="reset_decorrenza">Reset Decorrenza</Label>
						<Button
							id="reset_decorrenza"
							onClick={() => form.setValue("decorrenza", null)}
							type="button"
							variant="destructive"
						>
							<X />
							Reset Decorrenza
						</Button>
					</div>
				</div>
				<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
					<FormField
						control={form.control}
						name="onboardOk"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="onboardOk">Onboard Fatta</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="onboardOk"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>

								<FormDescription>Il servizio è interrotto</FormDescription>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="isOkAcconto"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="isOkAcconto">Acconto Pagato</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="isOkAcconto"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>

								<FormDescription>
									I&apos;acconto è stato pagato o attivato manualmente
								</FormDescription>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="isOkSaldo"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="isOkSaldo">Saldo Pagato</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="isOkSaldo"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>

								<FormDescription>
									Il saldo è stato pagato o attivato manualmente
								</FormDescription>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="isOkConsulenza"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="isOkConsulenza">
										Consulenza Pagata
									</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="isOkConsulenza"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>

								<FormDescription>
									La consulenza è stata pagata o attivata manualmente
								</FormDescription>
							</FormItem>
						)}
					/>
				</div>
				<div className="flex w-full flex-col items-start justify-between gap-4 sm:flex-row">
					<FormField
						control={form.control}
						name="skipPayment"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="skipPayment">Salta Pagamento</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="skipPayment"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
								<FormDescription>
									Salta la richiesta di pagamento al cliente (per tutti i
									pagamenti)
								</FormDescription>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="skipControlloDoc"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="skipControlloDoc">
										Salta controllo documento
									</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="skipControlloDoc"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>
								<FormDescription>
									Salta la richiesta del documento del cliente al momento dello
									sblocco contatti
								</FormDescription>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="skipDocMotivazione"
						render={({ field }) => (
							<FormItem className="w-full">
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="skipDocMotivazione">
										Salta documento motivazione
									</FormLabel>
									<FormControl>
										<Switch
											className="data-[state=checked]:bg-neutral-700"
											defaultChecked={field.value}
											id="skipDocMotivazione"
											onCheckedChange={field.onChange}
										/>
									</FormControl>
									<FormMessage />
								</div>

								<FormDescription>
									Salta l&apos;invio del documento di motivazione al cliente al
									momento della conferma annuncio
								</FormDescription>
							</FormItem>
						)}
					/>
				</div>
				<Button type="submit">Salva</Button>
			</form>
		</Form>
	);
};