"use client";

import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import z from "zod";
import { Button } from "~/components/ui/button";
import { Card } from "~/components/ui/card";
import { filteredCaratteristiche } from "~/hooks/schedaAnnuncioUtils";
import { it } from "~/i18n/it";
import { handleConsegna } from "~/lib/annuncio_details";
import { replaceWithBr } from "~/lib/newlineToBr";
import { cn, formatCurrency } from "~/lib/utils";
import type { Annunci } from "~/schemas/public/Annunci";
import { api } from "~/utils/api";
import { IconMatrix } from "./IconComponents";
import { GoogleMapsIcon, LogoSvg, WhatsAppIcon } from "./svgs";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";

const blobToBase64 = (blob: Blob): Promise<string> => {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.onerror = reject;
		reader.onload = () => {
			if (typeof reader.result === "string") {
				// Remove the Data-URL prefix (e.g. "data:application/pdf;base64,") to get just the base64
				resolve(reader.result.split(",")[1] || "");
			} else {
				reject(new Error("Failed to convert blob to text"));
			}
		};
		reader.readAsDataURL(blob);
	});
};

export function SchedaAnnuncioStampabile({ data }: { data: Annunci }) {
	const [inputEmail, setInputEmail] = useState<string>("");
	const [openPopover, setOpenPopover] = useState<boolean>(false);

	const { mutate } = api.comunicazioni.sendSchedaAnnuncioEmail.useMutation({
		onSuccess: () => {
			toast.success("Email inviata con successo!", {
				id: "send-scheda-annuncio-email",
			});
		},
		onError: (error) => {
			toast.error(`Errore durante l'invio dell'email: ${error.message}`, {
				id: "send-scheda-annuncio-email",
			});
		},
	});

	const sendPdf = async () => {
		if (!data || !inputEmail || !data.locatore || !data.numero) {
			toast.error("Dati annuncio mancanti.");
			return;
		}
		try {
			toast.loading("Generazione PDF in corso...", {
				id: "generate-pdf",
			});
			const response = await fetch(`/api/generate-pdf?id=${data.id}`);

			if (!response.ok) {
				throw new Error(
					`Errore nella generazione del PDF: ${response.statusText}`,
				);
			}
			const blob = await response.blob();

			const pdfBase64 = await blobToBase64(blob);

			mutate({
				pdf: pdfBase64,
				to: inputEmail,
				codice: data.codice,
				numero: data.numero,
				nominativo: data.locatore,
				indirizzo: `${data.indirizzo}, ${data.civico} ${data.comune} ${data.cap} (${data.provincia})`,
			});
			setInputEmail("");

			toast.success("PDF generato con successo!", {
				id: "generate-pdf",
			});
		} catch (error) {
			toast.error(
				`Errore durante la generazione del PDF: ${(error as Error).message}`,
				{
					id: "generate-pdf",
				},
			);
			console.error("Error generating PDF:", error);
		}
	};

	const generatePdf = async () => {
		if (!data) {
			toast.error("Dati annuncio mancanti.");
			return;
		}
		try {
			toast.loading("Generazione PDF in corso...", {
				id: "generate-pdf",
			});
			const response = await fetch(`/api/generate-pdf?id=${data.id}`);
			if (!response.ok) {
				throw new Error(
					`Errore nella generazione del PDF: ${response.statusText}`,
				);
			}
			const blob = await response.blob();
			toast.success("PDF generato con successo!", {
				id: "generate-pdf",
			});
			const url = window.URL.createObjectURL(blob);
			const link = document.createElement("a");
			link.href = url;
			link.download = `scheda-annuncio-${data.codice}.pdf`;
			document.body.appendChild(link);
			link.click();
			link.remove();
			window.URL.revokeObjectURL(url);
		} catch (error) {
			toast.error(
				`Errore durante la generazione del PDF: ${(error as Error).message}`,
				{
					id: "generate-pdf",
				},
			);
			console.error("Error generating PDF:", error);
		}
	};

	return (
		<div className="mx-auto max-w-4xl">
			<div className="space-y-6">
				<div className="flex flex-wrap items-center justify-between gap-4">
					<h1 className="font-bold text-2xl">Scheda Annuncio Stampabile</h1>
					<div className="flex gap-2">
						<Button onClick={() => generatePdf()}>Scarica Scheda</Button>

						<Popover onOpenChange={setOpenPopover} open={openPopover}>
							<PopoverTrigger asChild>
								<Button className="print:hidden" variant="outline">
									Invia tramite email
								</Button>
							</PopoverTrigger>
							<PopoverContent className="flex w-80 flex-col gap-4 print:hidden">
								<Label htmlFor="indirizzo">Indirizzo Email</Label>
								<Input
									id="indirizzo"
									onChange={(e) => setInputEmail(e.target.value)}
									onKeyDown={(e) => {
										if (
											e.key === "Enter" &&
											z.safeParse(z.email(), inputEmail).success
										) {
											sendPdf();
										}
									}}
									type="email"
								/>
								<Button
									disabled={
										z.safeParse(z.email(), inputEmail).success === false
									}
									onClick={sendPdf}
								>
									Invia
								</Button>
							</PopoverContent>
						</Popover>
					</div>
				</div>
				<SchedaAnnuncio data={data} />
			</div>
		</div>
	);
}

export function SchedaAnnuncio({
	data,
	raw,
}: {
	data: Annunci;
	raw?: boolean;
}) {
	const companyAddress =
		"Via Beata Giovanna, 1 a Bassano del Grappa (VI)\nTel. +39 0424529869\nEmail: arca@infoalloggi.it";

	const footer =
		"Arcenia Srl. | Tel. +39 0424529869 | Email: arca@infoalloggi.it";

	const [navigationUrl, setNavigationUrl] = useState<string | undefined>(
		undefined,
	);

	const [printDate, setPrintDate] = useState<string>("");
	const [disponibileDate, setDisponibileDate] = useState<string>("");
	useEffect(() => {
		setPrintDate(new Date().toLocaleDateString("it-IT"));
		if (data.disponibile_da) {
			setDisponibileDate(new Date(data.disponibile_da).toLocaleDateString());
		} else if (data.consegna) {
			setDisponibileDate(
				handleConsegna({
					aggiornamento: it.card.in_aggiornamento,
					consegna: data.consegna,
					consegna_da: it.card.consegna_da,
					mesi: it.parametri.mesi,
					subito: it.card.consegna_subito,
				}),
			);
		} else {
			setDisponibileDate("Non specificata");
		}
		if (!data) return;
		if (typeof window === "undefined") return;
		if (
			navigator.userAgent.toUpperCase().includes("MAC") ||
			navigator.userAgent.toUpperCase().includes("IPAD") ||
			navigator.userAgent.toUpperCase().includes("IPHONE") ||
			navigator.userAgent.toUpperCase().includes("IOS") ||
			navigator.userAgent.toUpperCase().includes("IPOD")
		) {
			setNavigationUrl(
				`maps://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${data.lat},${data.lon}`,
			);
		} else {
			setNavigationUrl(
				`https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${data.lat},${data.lon}`,
			);
		}
	}, [data]);

	return (
		<Card
			className={cn(
				"p-4 print:border-none print:shadow-none",
				raw && "border-none shadow-none",
			)}
		>
			<div className="space-y-8">
				<div className="flex items-start justify-between">
					<div>
						<LogoSvg className="h-10 w-auto" />
					</div>

					<div className="relative">
						<p className="text-right font-semibold text-lg">Arcenia Srl</p>
						<p className="whitespace-pre-line text-right text-sm">
							{companyAddress}
						</p>
					</div>
				</div>
				{/* Property Header */}
				<div className="space-y-2 text-center">
					<h2 className="font-bold text-primary text-xl">
						{data.titolo_it || "Immobile in Affitto"}
					</h2>
					<p className="text-lg text-muted-foreground">
						Riferimento: <strong>{data.codice}</strong>
					</p>
				</div>
				<div className="rounded-lg bg-primary/5 p-4 outline-2 outline-green-500">
					<h3 className="mb-2 inline-flex items-center gap-2 font-semibold text-lg text-primary">
						<WhatsAppIcon className="size-6 fill-green-500 stroke-green-500" />{" "}
						Contatti
						<span className="text-base">
							(mandare un messaggio WhatsApp prima di chiamare)
						</span>
					</h3>
					<div className="space-y-1">
						<p>{data.locatore}</p>
						{data.numero && <p className="font-semibold">Tel. {data.numero}</p>}
					</div>
				</div>

				{/* Property Details Grid */}
				<div className="grid grid-cols-1 gap-6 pb-1">
					{/* Location Details */}
					<div className="space-y-3">
						<h3 className="border-b pb-1 font-semibold text-lg">Indirizzo</h3>
						<div className="flex items-center gap-8">
							<p className="font-semibold">
								{data.indirizzo}, {data.civico} {data.comune} {data.cap} (
								{data.provincia})
							</p>
							{navigationUrl && (
								<a
									className="flex items-center gap-2 text-blue-600 underline underline-offset-2"
									href={navigationUrl}
									id="navigationLink"
									rel="noreferrer"
									target="_blank"
								>
									<span>Apri in Google Maps</span>
									<GoogleMapsIcon className="size-6" />
								</a>
							)}
						</div>
					</div>

					{/* Property Characteristics */}
					{/* <div className="space-y-3">
						<h3 className="border-b pb-1 font-semibold text-lg">
							🏠 Caratteristiche
						</h3>
						<div className="space-y-2 text-sm">
							{data.mq && (
								<p>
									<span className="font-medium">mq:</span> {data.mq} mq
								</p>
							)}
							{data.numero_vani && (
								<p>
									<span className="font-medium">Locali:</span>{" "}
									{data.numero_vani}
								</p>
							)}
							{data.numero_camere && (
								<p>
									<span className="font-medium">Camere:</span>{" "}
									{data.numero_camere}
								</p>
							)}
							{data.numero_bagni && (
								<p>
									<span className="font-medium">Bagni:</span>{" "}
									{data.numero_bagni}
								</p>
							)}
						</div>
					</div> */}
				</div>

				{/* Pricing Information */}

				<div className="space-y-3">
					<div className="grid grid-cols-3 gap-4 text-sm">
						{data.tipo && (
							<div className="rounded bg-gray-50 p-3">
								<p className="font-medium text-primary">Tipologia</p>
								<p className="font-bold text-xl">Affitto {data.tipo}</p>
							</div>
						)}
						{data.prezzo && (
							<div className="rounded bg-gray-50 p-3">
								<p className="font-medium text-primary">Canone Mensile</p>
								<p className="font-bold text-xl">
									{formatCurrency(data.prezzo / 100)}
								</p>
							</div>
						)}
						{(data.disponibile_da || data.consegna) && (
							<div className="rounded bg-gray-50 p-3">
								<p className="font-medium text-primary">Disponibile da</p>
								<p className="font-bold text-xl">{disponibileDate}</p>
							</div>
						)}
					</div>
				</div>

				{/* Additional Features */}

				<div className="space-y-3">
					<h3 className="border-b pb-1 font-semibold text-lg">
						Dotazioni e Servizi
					</h3>
					<div className="grid grid-cols-4 gap-2 text-sm">
						{data.caratteristiche &&
							filteredCaratteristiche(data.caratteristiche).map((item) => {
								if (!item.value) return null;
								return (
									<div
										className="flex items-center justify-start gap-2"
										key={item.text}
									>
										<span>
											<IconMatrix type={item.icon} />
										</span>
										<span>
											{item.text}: {item.value}
										</span>
									</div>
								);
							})}
					</div>
				</div>

				{/* Description */}
				{data.desc_it && (
					<>
						<div className="space-y-3">
							<h3 className="border-b pb-1 font-semibold text-lg">
								Descrizione
							</h3>
							<div className="text-justify text-sm leading-relaxed">
								<p
									dangerouslySetInnerHTML={{
										__html: replaceWithBr(data.desc_it),
									}}
								></p>
							</div>
						</div>
					</>
				)}
				<div className="mx-auto max-w-2xl pt-2 text-center text-muted-foreground text-xs">
					<p>
						Informazione strettamente riservata ed indirizzata all'Utente
						Arca-Infoalloggi nel rispetto dell' Art. F. Precisazione dei Tuoi
						Obblighi e responsabilità delle Condizioni Generali di Contratto
						(CGC) accettate
					</p>
				</div>
				<div className="pt-2 text-center text-muted-foreground text-xs">
					<p>{footer}</p>
					<p className="mt-1">Documento generato in data: {printDate}</p>
				</div>
			</div>
		</Card>
	);
}