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

import {
	CircleCheck,
	FileBadge,
	FileText,
	Handshake,
	PackageCheck,
	Pointer,
} from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { 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 { 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";
import { ContattiProprietarioModal } from "./modale_contatti";

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>
	);
};