infoalloggi-monorepo/apps/infoalloggi/src/components/servizio/interactions.tsx

import {
	CircleCheck,
	CircleUser,
	FileBadge,
	FileText,
	Handshake,
	Navigation,
	PackageCheck,
	Phone,
	Pointer,
	TriangleAlert,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import {
	Credenza,
	CredenzaBody,
	CredenzaClose,
	CredenzaContent,
	CredenzaDescription,
	CredenzaFooter,
	CredenzaHeader,
	CredenzaTitle,
	CredenzaTrigger,
} from "~/components/custom_ui/credenza";
import LoadingButton from "~/components/custom_ui/loading-button";
import { LoadingPage } from "~/components/loading";
import { Button, type ButtonConfigs } from "~/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "~/components/ui/tooltip";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
import type { AnnunciId } from "~/schemas/public/Annunci";
import { api } from "~/utils/api";

export const Interactions = () => {
	const { servizio, servizioId } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();

	return (
		<div className="flex flex-col gap-3">
			<ContattiProprietarioModal />
			<div className="flex flex-wrap gap-3">
				{data.open_contatti_at !== null && data.user_confirmed_at == null && (
					<AnnuncioConfirm />
				)}
				{data.user_confirmed_at && !data.hasConfermaAdmin && (
					<ConfermaLavorazioneModal />
				)}
				{data.doc_conferma_added &&
					data.accettato_conferma_at == null &&
					data.hasConfermaAdmin &&
					(data.doc_conferma_ref ? (
						<Link
							aria-label="Conferma immobile"
							href={`/servizio/conferma-immobile/${servizioId}/${annuncioId}`}
						>
							<Button
								className="flex w-fit items-center gap-2"
								variant="success"
							>
								<Pointer className="size-6" />
								Confermato - Procedi ora
							</Button>
						</Link>
					) : (
						<TooltipProvider delayDuration={0}>
							<Tooltip>
								<TooltipTrigger asChild>
									<Button
										className="flex w-fit cursor-not-allowed items-center gap-2 opacity-50"
										variant="success"
									>
										<Pointer className="size-6" />
										Confermato - Procedi ora
									</Button>
								</TooltipTrigger>
								<TooltipContent>
									<p>Il documento non è più disponibile</p>
									<p>
										Se hai bisogno di una copia, contattaci via email o chat.
									</p>
								</TooltipContent>
							</Tooltip>
						</TooltipProvider>
					))}
				{data.accettato_conferma_at != null && (
					<Link
						aria-label="Conferma immobile"
						href={`/servizio/riapri-conferma/${servizioId}/${annuncioId}`}
					>
						<Button className="flex w-fit items-center gap-2" variant="success">
							<Pointer className="size-6" />
							Rivedi la conferma
						</Button>
					</Link>
				)}
			</div>
			{!servizio.isOkSaldo && data.accettato_conferma_at != null && (
				<div className="flex flex-col gap-1">
					<h3 className="font-semibold">
						Questo annuncio è stato confermato, procedi al saldo:
					</h3>
					<SaldoButton annuncioId={annuncioId} />
				</div>
			)}

			{servizio.isOkSaldo &&
				data.accettato_conferma_at != null &&
				data.doc_contratto_added == null && (
					<div className="flex flex-col gap-1">
						<h3 className="font-semibold text-green-500">
							Ci siamo quasi! Stiamo preparando il contratto per te.
						</h3>
						<h3 className="font-semibold">
							Una volta pronto, riceverai una notifica via email.
						</h3>
					</div>
				)}
			{servizio.isOkSaldo &&
				data.accettato_conferma_at != null &&
				data.doc_contratto_added && (
					<div className="flex flex-col gap-2">
						<h3 className="font-semibold">
							{servizio.isOkConsulenza
								? "Il contratto è pronto, puoi visualizzarlo:"
								: "Il contratto è pronto, puoi visualizzarlo e procedere al saldo:"}
						</h3>
						<div className="flex flex-wrap gap-2">
							{data.doc_contratto_ref ? (
								<Link
									aria-label="Visualizza contratto"
									href={`/servizio/contratto/${servizioId}/${annuncioId}`}
									target="_blank"
								>
									<Button className="flex w-fit items-center gap-2">
										<FileText className="size-6" />
										Visualizza il contratto
									</Button>
								</Link>
							) : (
								<TooltipProvider delayDuration={0}>
									<Tooltip>
										<TooltipTrigger asChild>
											<Button className="flex w-fit cursor-not-allowed items-center gap-2 opacity-50">
												<FileText className="size-6" />
												Visualizza il contratto
											</Button>
										</TooltipTrigger>
										<TooltipContent>
											<p>Il documento non è più disponibile</p>
											<p>
												Se hai bisogno di una copia, contattaci via email o
												chat.
											</p>
										</TooltipContent>
									</Tooltip>
								</TooltipProvider>
							)}

							{!servizio.isOkConsulenza && data.contratto_tipo && (
								<SaldoConsulenzaButton />
							)}

							{data.doc_registrazione_added &&
								(data.doc_registrazione_ref ? (
									<Link
										aria-label="Visualizza registrazione"
										href={`/servizio/contratto-registrazione/${servizioId}/${annuncioId}`}
										target="_blank"
									>
										<Button className="flex w-fit items-center gap-2">
											<FileBadge className="size-6" />
											Visualizza la registrazione
										</Button>
									</Link>
								) : (
									<TooltipProvider delayDuration={0}>
										<Tooltip>
											<TooltipTrigger asChild>
												<Button className="flex w-fit cursor-not-allowed items-center gap-2 opacity-50">
													<FileBadge className="size-6" />
													Visualizza la registrazione
												</Button>
											</TooltipTrigger>
											<TooltipContent>
												<p>Il documento non è più disponibile</p>
												<p>
													Se hai bisogno di una copia, contattaci via email o
													chat.
												</p>
											</TooltipContent>
										</Tooltip>
									</TooltipProvider>
								))}
						</div>
					</div>
				)}
		</div>
	);
};

export const SaldoButton = ({
	annuncioId,
	variant = "info",
	className,
}: {
	annuncioId: AnnunciId;
	variant?: ButtonConfigs["variant"];
	className?: string;
}) => {
	const { servizioId } = useServizio();
	const router = useRouter();

	const { mutate } = api.servizio.setupSaldoServizio.useMutation({
		onMutate: () => {
			toast.loading("Caricamento ...", { id: "preparazioneSaldo" });
		},
		onSuccess: async (data) => {
			toast.success("Pagamento saldo preparato", {
				id: "preparazioneSaldo",
			});

			await router.push(`/servizio/pagamento/${data}`);
		},
	});
	return (
		<Button
			aria-label="Procedi al saldo"
			className={cn("flex w-fit items-center gap-2", className)}
			onClick={() => {
				mutate({
					annuncioId,
					servizioId,
				});
			}}
			variant={variant}
		>
			<PackageCheck className="size-6" />
			Procedi al saldo
		</Button>
	);
};

const SaldoConsulenzaButton = ({
	variant = "info",
	className,
}: {
	variant?: ButtonConfigs["variant"];
	className?: string;
}) => {
	const { annuncioId } = useServizioAnnuncio();
	const { servizioId } = useServizio();
	const router = useRouter();

	const { mutate } = api.servizio.setupSaldoConsulenzaServizio.useMutation({
		onMutate: () => {
			toast.loading("Caricamento ...", { id: "preparazioneSaldo" });
		},
		onSuccess: async (data) => {
			toast.success("Pagamento saldo preparato", {
				id: "preparazioneSaldo",
			});

			await router.push(`/servizio/pagamento/${data}`);
		},
	});
	return (
		<Button
			aria-label="Procedi al saldo consulenza"
			className={cn("flex w-fit items-center gap-2", className)}
			onClick={() => {
				mutate({
					annuncioId,
					servizioId,
				});
			}}
			variant={variant}
		>
			<PackageCheck className="size-6" />
			Procedi al saldo della consulenza
		</Button>
	);
};

const AnnuncioConfirm = () => {
	const { userId, servizioId } = useServizio();
	const { annuncioId } = useServizioAnnuncio();
	const { t } = useTranslation();
	const [open, setOpen] = useState(false);
	const utils = api.useUtils();
	const { mutate, isPending } = api.servizio.userConfirmImmobile.useMutation({
		onError: (err) => {
			toast.error(err.message, { id: "updateRichiestaToast" });
		},
		onMutate: () => {
			toast.loading("Conferma in corso", { id: "updateRichiestaToast" });
		},
		onSuccess: async () => {
			toast.success("Richiesta confermata con successo", {
				id: "updateRichiestaToast",
			});

			await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
			setOpen(false);
		},
	});
	return (
		<Credenza onOpenChange={setOpen} open={open}>
			<CredenzaTrigger asChild>
				<Button
					aria-label="Conferma immobile"
					className="flex w-fit items-center gap-2"
				>
					<Handshake className="size-6" /> Conferma immobile
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle> {t.richieste.conf_title}</CredenzaTitle>
					<CredenzaDescription className="sr-only">
						{t.richieste.conf_desc}
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
					<p>{t.richieste.conferma_txt}</p>
				</CredenzaBody>
				<CredenzaFooter>
					<LoadingButton
						aria-label="Conferma immobile"
						loading={isPending}
						onClick={() => {
							mutate({
								annuncioId,
								servizioId,
							});
						}}
						variant="success"
					>
						{t.conferma}
					</LoadingButton>
					<CredenzaClose asChild>
						<Button aria-label="Chiudi modal credenza">Chiudi</Button>
					</CredenzaClose>
				</CredenzaFooter>
			</CredenzaContent>
		</Credenza>
	);
};
const ConfermaLavorazioneModal = () => {
	const { t } = useTranslation();
	const { data } = useServizioAnnuncio();
	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button
					aria-label="Conferma in lavorazione"
					className="flex w-fit items-center gap-2"
				>
					<CircleCheck className="size-7" />
					Conferma in lavorazione
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle>In attesa di conferma</CredenzaTitle>
					<CredenzaDescription className="sr-only">
						Consegna status modal
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="prose max-h-[80vh] overflow-auto pb-5">
					<p>
						Richiesta di conferma inviata il:{" "}
						{data.user_confirmed_at &&
							new Date(data.user_confirmed_at).toLocaleString("it", {
								day: "2-digit",
								hour: "2-digit",
								minute: "2-digit",
								month: "2-digit",
								year: "numeric",
							})}
					</p>
					<p>
						La conferma è ancora in lavorazione. Stiamo verificando con i
						proprietari le condizioni e dettagli della conferma per riferirteli.
						Attendi una comunicazione.
					</p>
				</CredenzaBody>

				<CredenzaFooter>
					<CredenzaClose asChild>
						<Button aria-label="Chiudi modal credenza" variant="outline">
							{t.chiudi}
						</Button>
					</CredenzaClose>
				</CredenzaFooter>
			</CredenzaContent>
		</Credenza>
	);
};

const ContattiProprietarioModal = () => {
	const { servizioId, userId } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();
	const { t } = useTranslation();
	const [showContacts, setShowContacts] = useState<boolean>(
		data.open_contatti_at != null,
	);
	const utils = api.useUtils();

	const { mutate } = api.servizio.unlockServizioContatti.useMutation({
		onError: (err) => {
			toast.error(err.message, {
				id: "unlock-contacts",
			});
		},
		onMutate: () => {
			toast.loading("Caricamento ...", {
				id: "unlock-contacts",
			});
		},
		onSuccess: async (data) => {
			if (!data) {
				toast.error("Limite di sblocchi raggiunto", {
					id: "unlock-contacts",
				});
				return;
			}
			toast.success("Successo", {
				id: "unlock-contacts",
			});
			await utils.servizio.getAllServizioAnnunci.invalidate({
				userId,
			});
			setShowContacts(true);
		},
	});

	const d = new Date();
	const tooEarly = d.getHours() < 9;
	const tooLate = d.getHours() >= 20;

	return (
		<Credenza>
			<CredenzaTrigger asChild>
				{showContacts ? (
					<Button
						aria-label="Vedi contatti proprietario"
						className="flex w-fit items-center gap-2"
						variant="success"
					>
						<CircleUser className="size-7" />
						Vedi i contatti
					</Button>
				) : (
					<Button
						aria-label="Contatta proprietario"
						className="flex w-fit items-center gap-2"
						variant="warning"
					>
						<CircleUser className="size-7" />
						Ottieni i contatti
					</Button>
				)}
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle>{t.contatto.title}</CredenzaTitle>
					<CredenzaDescription className="sr-only">
						{t.contatto.descrizione}
					</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
					{showContacts ? (
						<ContattiProprietarioData />
					) : (
						<div className="space-y-5">
							<p>{t.contatto.disclaimer}</p>
							<p>{t.contatto.disclaimer2}</p>
							<p className="text-muted-foreground text-xs">
								{t.contatto.disclaimer3}
							</p>
							{(tooEarly || tooLate) && (
								<div className="flex items-center gap-2 rounded-md bg-yellow-200 p-2">
									<TriangleAlert className="size-8" />
									{/*TODO testare */}
									<p>
										Il proprietario riceverà la notifica alle ore 9.00{" "}
										{tooLate && "di domani"}
									</p>
								</div>
							)}
						</div>
					)}
				</CredenzaBody>
				<CredenzaFooter>
					{!showContacts && (
						<Button
							aria-label="Contatta proprietario"
							onClick={() =>
								mutate({
									annuncioId,
									servizioId,
								})
							}
							variant="success"
						>
							{t.accetta}
						</Button>
					)}
					<CredenzaClose asChild>
						<Button aria-label="Chiudi modal credenza" variant="outline">
							{t.chiudi}
						</Button>
					</CredenzaClose>
				</CredenzaFooter>
			</CredenzaContent>
		</Credenza>
	);
};

const ContattiProprietarioData = () => {
	const { servizioId } = useServizio();
	const { annuncioId } = useServizioAnnuncio();
	const { data, isLoading } = api.annunci.getProprietarioData.useQuery({
		annuncioId,
		servizioId,
	});
	const [navigationUrl, setNavigationUrl] = useState<string | undefined>(
		undefined,
	);
	const { t } = useTranslation();
	useEffect(() => {
		if (!data || !data.propData) 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.propData.lat},${data.propData.lon}`,
			);
		} else {
			setNavigationUrl(
				`https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=${data.propData.lat},${data.propData.lon}`,
			);
		}
	}, [data]);

	if (isLoading) {
		return (
			<div className="flex justify-center">
				<LoadingPage />
			</div>
		);
	}
	if (!data || !data.propData) {
		return <p>{t.contatto.error}</p>;
	}

	return (
		<div className="flex flex-col gap-2">
			<h3 className="font-semibold">{t.contatto.propietario}:</h3>
			<p>
				{t.contatto.nome}: {data.propData.locatore}
			</p>
			<a
				className="flex items-center gap-2"
				href={`tel:${data.propData.numero}`}
			>
				<Phone />:
				<span className="text-blue-600 underline">{data.propData.numero}</span>
			</a>
			<br />
			<h3 className="font-semibold">{t.contatto.immobile}:</h3>
			<p>
				{t.contatto.indirizzo}: {data.propData.indirizzo},{" "}
				{data.propData.civico} {data.propData.comune} ({data.propData.provincia}
				)
			</p>
			<a
				className="flex w-fit items-center gap-2 rounded-md border border-border px-3 py-2"
				href={navigationUrl}
				rel="noreferrer"
				target="_blank"
			>
				<Navigation /> <span>{t.contatto.apri_nav}</span>
			</a>
			<br />
			<p>
				{t.contatto.sbloccato_il}:{" "}
				{data.opened_at.toLocaleString("it", {
					day: "2-digit",
					hour: "2-digit",
					minute: "2-digit",
					month: "2-digit",
					year: "numeric",
				})}
			</p>
			<div className="flex items-center gap-2 rounded-md bg-sky-200 p-2">
				<TriangleAlert className="size-8" />
				<div>
					<p>{t.contatto.contatta}</p>
					<p className="font-semibold">{t.contatto.orari}</p>
				</div>
			</div>
		</div>
	);
};