import { format } from "date-fns";
import { it } from "date-fns/locale";
import { CalendarIcon } from "lucide-react";
import toast from "react-hot-toast";
import { z } from "zod/v4";
import {
	CredenzaBody,
	CredenzaClose,
	CredenzaFooter,
} from "~/components/custom_ui/credenza";
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import { MultiSelect } from "~/components/custom_ui/multiselect";
import { Button } from "~/components/ui/button";
import { Calendar } from "~/components/ui/calendar";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "~/components/ui/popover";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "~/components/ui/select";
import { Switch } from "~/components/ui/switch";
import { cn, formatCurrency } from "~/lib/utils";
import { useZodForm } from "~/lib/zodForm";
import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
import type { Prezziario } from "~/schemas/public/Prezziario";
import type { ServizioServizioId } from "~/schemas/public/Servizio";
import type { UsersId } from "~/schemas/public/Users";
import { zPrezziarioId } from "~/server/utils/zod_types";
import { api } from "~/utils/api";

type FormProps = {
	prezziario: Prezziario[];
	servizioId: ServizioServizioId;
	userId: UsersId;
	setOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

export const FormNewOrder = ({
	prezziario,
	servizioId,
	userId,
	setOpen,
}: FormProps) => {
	const schema = z.object({
		packid: zPrezziarioId,
		isActive: z.boolean(),
		type: z.custom<OrderTypeEnum>(),
		created_at: z.date(),
	});
	type FormValues = z.infer<typeof schema>;

	z.config(z.locales.it());

	const form = useZodForm(schema, {
		defaultValues: {},
	});
	const utils = api.useUtils();
	const { mutate: createOrder } = api.servizio.createOrdine.useMutation({
		onError: (error) => {
			toast.error(`Errore nella creazione dell'ordine: ${error.message}`);
		},
		onSuccess: async () => {
			toast.success("Ordine creato con successo");
			await utils.servizio.getOrdini.invalidate({
				userId,
			});
			setOpen(false);
			form.reset();
		},
	});
	function onSubmit(fields: FormValues) {
		createOrder({
			data: {
				...fields,
				servizio_id: servizioId,
				userid: userId,
			},
		});
	}

	return (
		<>
			<Form {...form}>
				<form onSubmit={form.handleSubmit(onSubmit)}>
					<CredenzaBody className="max-h-[80vh] w-full pb-5">
						<div className="space-y-8 px-0.5">
							<FormField
								control={form.control}
								name="packid"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="select-pack">Servizio</FormLabel>
											<FormMessage />
										</div>
										<FormControl>
											<MultiSelect
												defaultValue={undefined}
												elementId="select-pack"
												elementName="packid"
												isMulti={false}
												onValueChange={(value) => {
													const selected = zPrezziarioId.safeParse(value.value);
													if (selected.success) {
														field.onChange(selected.data);
													} else {
														console.error(
															"Invalid packid selected",
															value.value,
														);
													}
												}}
												options={prezziario.map((p) => ({
													label: `${p.idprezziario} - ${p.nome_it} (${formatCurrency(p.prezzo_cent / 100)})`,
													value: p.idprezziario,
												}))}
												placeholder="Seleziona..."
											/>
										</FormControl>
									</FormItem>
								)}
							/>

							<FormField
								control={form.control}
								name="type"
								render={({ field }) => (
									<FormItem>
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="titolo">Tipologia</FormLabel>
											<FormMessage />
										</div>
										<FormControl>
											<Select
												defaultValue={field.value || ""}
												onValueChange={field.onChange}
											>
												<FormControl>
													<SelectTrigger className="w-full">
														<SelectValue placeholder="Seleziona tipologia" />
													</SelectTrigger>
												</FormControl>
												<SelectContent id="select-color">
													{Object.values(OrderTypeEnum).map((option) => (
														<SelectItem key={option} value={option}>
															{option}
														</SelectItem>
													))}
												</SelectContent>
											</Select>
										</FormControl>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="created_at"
								render={({ field }) => (
									<FormItem className="flex w-full flex-col">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="created_at">Data Ordine</FormLabel>
											<FormMessage />
										</div>
										<Popover>
											<PopoverTrigger asChild>
												<FormControl>
													<Button
														className={cn(
															"h-10.5 w-full 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="created_at"
														variant={"outline"}
													>
														{field.value ? (
															format(field.value, "PPP", {
																locale: it,
															})
														) : (
															<span>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={new Date()}
													endMonth={new Date(2050, 12)}
													locale={it}
													mode="single"
													onSelect={field.onChange}
													selected={field.value || undefined}
												/>
											</PopoverContent>
										</Popover>
									</FormItem>
								)}
							/>
							<FormField
								control={form.control}
								name="isActive"
								render={({ field }) => (
									<FormItem className="w-full">
										<div className="flex flex-wrap items-center gap-x-2">
											<FormLabel htmlFor="isActive">Attivo</FormLabel>
											<FormControl>
												<Switch
													className="data-[state=checked]:bg-neutral-700"
													defaultChecked={field.value}
													id="isActive"
													onCheckedChange={field.onChange}
												/>
											</FormControl>
											<FormMessage />
										</div>

										<FormDescription>
											Imposta se il servizio è attivo
										</FormDescription>
									</FormItem>
								)}
							/>
						</div>
					</CredenzaBody>

					<CredenzaFooter>
						<Button type="submit" variant="success">
							Salva
						</Button>
						<CredenzaClose asChild>
							<Button aria-label="Close Credenza" variant="outline">
								Chiudi
							</Button>
						</CredenzaClose>
					</CredenzaFooter>
				</form>
			</Form>
		</>
	);
};