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

"use client";

import { useEffect, useRef, useState } from "react";
import { useReactToPrint } from "react-to-print";
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 { IconMatrix } from "./IconComponents";
import { GoogleMapsIcon, LogoSvg, WhatsAppIcon } from "./svgs";

export function SchedaAnnuncioStampabile({ data }: { data: Annunci }) {
	const contentRef = useRef<HTMLDivElement>(null);
	const reactToPrintFn = useReactToPrint({
		contentRef,
		//print: async (target) => {console.log("Printing...", target.contentDocument);},
	});

	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>

					<Button className="print:hidden" onClick={() => reactToPrintFn()}>
						Stampa
					</Button>
				</div>
				<div ref={contentRef}>
					<SchedaAnnuncio data={data} />
				</div>
			</div>
		</div>
	);
}

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 [&>g]:fill-red-500 [&>text]:fill-primary [&>text]:stroke-primary" />
					</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}
									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 className="">
											<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="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>
	);
}