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

"use client";

import { useRef } 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 type { Annunci } from "~/schemas/public/Annunci";
import { IconMatrix } from "./IconComponents";
import { LogoSvg } 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="text-2xl font-bold">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";
	return (
		<Card className="p-4 print:border-none print:shadow-none">
			<div className="space-y-6">
				<div className="flex items-start justify-between">
					<div>
						<LogoSvg className="[&>text]:fill-primary [&>text]:stroke-primary h-10 w-auto [&>g]:fill-red-500" />
					</div>

					<div className="relative">
						<p className="font-semibold text-lg text-right">Arcenia Srl</p>
						<p className="text-sm whitespace-pre-line text-right">
							{companyAddress}
						</p>
					</div>
				</div>
				{/* Property Header */}
				<div className="space-y-2 text-center">
					<h2 className="text-xl font-bold text-primary">
						{data.titolo_it || "Immobile in Affitto"}
					</h2>
					<p className="text-lg text-muted-foreground">
						Riferimento: <strong>{data.codice}</strong>
					</p>
				</div>

				{/* Property Details Grid */}
				<div className="grid grid-cols-2 gap-6">
					{/* Location Details */}
					<div className="space-y-3">
						<h3 className="text-lg font-semibold border-b pb-1">
							📍 Ubicazione
						</h3>
						<div className="space-y-2 text-sm">
							<p>
								<span className="font-medium">Comune:</span> {data.comune} (
								{data.provincia})
							</p>
							<p>
								<span className="font-medium">CAP:</span> {data.cap}
							</p>
							<p>
								<span className="font-medium">Indirizzo:</span> {data.indirizzo}
								, {data.civico}
							</p>
							{data.piano_palazzo && (
								<p>
									<span className="font-medium">Piano:</span>{" "}
									{data.piano_palazzo}
								</p>
							)}
						</div>
					</div>

					{/* Property Characteristics */}
					<div className="space-y-3">
						<h3 className="text-lg font-semibold border-b pb-1">
							🏠 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="bg-gray-50 p-3 rounded">
								<p className="font-medium text-primary">Tipologia</p>
								<p className="text-xl font-bold">Affitto {data.tipo}</p>
							</div>
						)}
						{data.prezzo && (
							<div className="bg-gray-50 p-3 rounded">
								<p className="font-medium text-primary">Canone Mensile</p>
								<p className="text-xl font-bold">
									€ {data.prezzo.toLocaleString()}
								</p>
							</div>
						)}
						{(data.disponibile_da || data.consegna) && (
							<div className="bg-gray-50 p-3 rounded">
								<p className="font-medium text-primary">Disponibile da</p>
								<p className="text-xl font-bold">
									{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="text-lg font-semibold border-b pb-1">
						✨ Dotazioni e Servizi
					</h3>
					<div className="grid grid-cols-4 gap-2 text-sm">
						{data.caratteristiche &&
							filteredCaratteristiche(data.caratteristiche).map(
								(item, index) => {
									if (!item.value) return null;
									return (
										<div
											className="flex items-center gap-2 justify-center"
											key={index}
										>
											<span className="">
												<IconMatrix type={item.icon} />
											</span>
											<span>
												{item.text}: {item.value}
											</span>
										</div>
									);
								},
							)}
					</div>
				</div>
				<div className="bg-primary/5 p-4 rounded-lg">
					<h3 className="text-lg font-semibold text-primary mb-2">
						📞 Contatti
					</h3>
					<div className="text-sm space-y-1">
						<p>{data.locatore}</p>
						{data.numero && <p>Tel. {data.numero}</p>}
					</div>
				</div>
				{/* Description */}
				{data.desc_it && (
					<>
						<div className="space-y-3">
							<h3 className="text-lg font-semibold border-b pb-1">
								📝 Descrizione
							</h3>
							<div className="text-sm leading-relaxed text-justify">
								<p
									dangerouslySetInnerHTML={{
										__html: replaceWithBr(data.desc_it),
									}}
								></p>
							</div>
						</div>
					</>
				)}

				<div className="text-muted-foreground pt-2 text-center text-xs">
					<p>{footer}</p>
					<p className="mt-1">
						Documento generato in data: {new Date().toLocaleDateString("it-IT")}
					</p>
				</div>
			</div>
		</Card>
	);
}