infoalloggi-monorepo/apps/infoalloggi/src/components/schedaAnnuncioStampabile.tsx

"use client";

import html2canvas from "html2canvas-pro";
import jsPDF from "jspdf";
import { useEffect, useRef, useState } from "react";
import toast from "react-hot-toast";
import { useReactToPrint } from "react-to-print";
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 { 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";

export function SchedaAnnuncioStampabile({ data }: { data: Annunci }) {
	const [inputEmail, setInputEmail] = useState<string>("");
	const [openPopover, setOpenPopover] = useState<boolean>(false);
	const contentRef = useRef<HTMLDivElement>(null);
	const reactToPrintFn = useReactToPrint({
		contentRef,
		//print: async (target) => {console.log("Printing...", target.contentDocument);},
	});

	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 sendEmail = useReactToPrint({
		contentRef,
		print: async (target) => {
			try {
				const htmlContent = target.contentDocument?.documentElement;
				if (!htmlContent) {
					toast.error("Impossibile generare il contenuto per la stampa.");
					return;
				}
				if (!data || !inputEmail || !data.locatore || !data.numero) {
					toast.error("Dati annuncio o indirizzo email mancanti.");
					return;
				}
				toast.loading("Invio email in corso...", {
					id: "send-scheda-annuncio-email",
				});
				setOpenPopover(false);
				htmlContent.querySelectorAll(".print\\:border-none").forEach((el) => {
					el.classList.remove("border");
				});
				htmlContent.querySelectorAll(".print\\:shadow-none").forEach((el) => {
					el.classList.remove("shadow-sm");
				});
				htmlContent.querySelectorAll("#navigationLink").forEach((el) => {
					el.classList.remove("flex");
					el.classList.add("hidden");
				});
				htmlContent.querySelectorAll("#mainLogoSvg text").forEach((el) => {
					el.classList.remove("font-sans");
					el.classList.add("font-[system-ui]");
				});
				const canvas = await html2canvas(htmlContent, {
					//scale: 2,
					useCORS: true,
					logging: false,
					backgroundColor: "#ffffff",
				});

				const imgData = canvas.toDataURL("image/png");
				const pdf = new jsPDF("p", "mm", "a4");

				// A4 dimensions in mm
				const pdfWidth = pdf.internal.pageSize.getWidth();
				const pdfHeight = pdf.internal.pageSize.getHeight();

				// Define margins (in mm)
				const marginTop = 5;
				const marginRight = 5;
				const marginBottom = 5;
				const marginLeft = 5;

				// Calculate available space
				const availableWidth = pdfWidth - marginLeft - marginRight;
				const availableHeight = pdfHeight - marginTop - marginBottom;

				// Calculate image dimensions
				const imgProps = pdf.getImageProperties(imgData);
				const imgWidth = imgProps.width;
				const imgHeight = imgProps.height;

				// Calculate how the image should fit with margins
				const ratio = availableWidth / imgWidth;
				const scaledHeight = imgHeight * ratio;

				// Check if content needs multiple pages
				if (scaledHeight <= availableHeight) {
					// Single page - content fits
					pdf.addImage(
						imgData,
						"PNG",
						marginLeft,
						marginTop,
						availableWidth,
						scaledHeight,
						undefined,
						"FAST",
					);
				} else {
					// Multiple pages needed
					let heightLeft = scaledHeight;
					let position = marginTop;

					// Add first page
					pdf.addImage(
						imgData,
						"PNG",
						marginLeft,
						position,
						availableWidth,
						scaledHeight,
						undefined,
						"FAST",
					);
					heightLeft -= availableHeight;

					// Add remaining pages
					while (heightLeft > 0) {
						position = marginTop - (scaledHeight - heightLeft);
						pdf.addPage();
						pdf.addImage(
							imgData,
							"PNG",
							marginLeft,
							position,
							availableWidth,
							scaledHeight,
							undefined,
							"FAST",
						);
						heightLeft -= availableHeight;
					}
				}
				const pdfBase64 = pdf.output("dataurlstring");

				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("");
			} catch (e) {
				toast.error(
					`Errore durante l'invio dell'email: ${(e as Error).message}`,
					{
						id: "send-scheda-annuncio-email",
					},
				);
				console.error("Error during print:", e);
				setInputEmail("");
			}
		},
	});

	return (
		<div className="mx-auto max-w-4xl">
			<div className="space-y-6">
				<div className="flex items-center justify-between">
					<h1 className="font-bold text-2xl">Scheda Annuncio Stampabile</h1>
					<div className="flex gap-2">
						<Button className="print:hidden" onClick={() => reactToPrintFn()}>
							Stampa 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
										) {
											sendEmail();
										}
									}}
									type="email"
								/>
								<Button
									disabled={
										z.safeParse(z.email(), inputEmail).success === false
									}
									onClick={sendEmail}
								>
									Invia
								</Button>
							</PopoverContent>
						</Popover>
					</div>
				</div>
				<div ref={contentRef}>
					<SchedaAnnuncio data={data} />
				</div>
			</div>
		</div>
	);
}

export function SchedaAnnuncio({ data }: { data: Annunci }) {
	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,
	);
	useEffect(() => {
		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="p-4 print:border-none print: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">
									{data.disponibile_da
										? new Date(data.disponibile_da).toLocaleDateString()
										: data.consegna &&
											handleConsegna({
												aggiornamento: it.card.in_aggiornamento,
												consegna: data.consegna,
												consegna_da: it.card.consegna_da,
												mesi: it.preferenze.mesi,
												subito: it.card.consegna_subito,
											})}
								</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: {new Date().toLocaleDateString("it-IT")}
					</p>
				</div>
			</div>
		</Card>
	);
}