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

import { FileBadge, FileText, PackageCheck, Pointer } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import toast from "react-hot-toast";
import { Button, type ButtonConfigs } from "~/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "~/components/ui/tooltip";
import { cn } from "~/lib/utils";
import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
import type { AnnunciId } from "~/schemas/public/Annunci";
import { api } from "~/utils/api";
import { ConfermaAnnuncioModal, ConfermaInLavorazioneModal } from "./conferma";
import { ContattiProprietarioModal } from "./modale_contatti";

const SezioneConferma = () => {
	const { servizioId } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();

	const ContattiSbloccati = data.open_contatti_at !== null;
	const ConfermaUtente = data.user_confirmed_at !== null;
	const ConfermaLavorata = data.doc_conferma_added && data.hasConfermaAdmin;
	const AccettatoConferma = data.accettato_conferma_at !== null;

	if (ContattiSbloccati && !ConfermaUtente) {
		return <ConfermaAnnuncioModal />;
	}

	if (ConfermaUtente && !data.hasConfermaAdmin) {
		return <ConfermaInLavorazioneModal />;
	}
	if (AccettatoConferma) {
		return (
			<Link
				aria-label="Conferma immobile"
				href={`/servizio/riapri-conferma/${servizioId}/${annuncioId}`}
			>
				<Button className="w-fit" variant="success">
					<Pointer className="size-6" />
					Rivedi la conferma
				</Button>
			</Link>
		);
	}
	if (ConfermaLavorata) {
		if (data.doc_conferma_ref) {
			return (
				<Link
					aria-label="Conferma immobile"
					href={`/servizio/conferma-immobile/${servizioId}/${annuncioId}`}
				>
					<Button className="w-fit" variant="success">
						<Pointer className="size-6" />
						Confermato - Procedi ora
					</Button>
				</Link>
			);
		}
		return (
			<TooltipProvider delayDuration={0}>
				<Tooltip>
					<TooltipTrigger asChild>
						<Button
							className="w-fit cursor-not-allowed 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>
		);
	}

	return null;
};

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

	const saldoPaid = servizio.isOkSaldo;
	const consulenzaPaid = servizio.isOkConsulenza;

	if (!saldoPaid) {
		return (
			<div className="flex flex-col gap-1">
				<h3 className="font-semibold">
					Questo annuncio è stato confermato, procedi al saldo:
				</h3>
				<SaldoButton annuncioId={annuncioId} />
			</div>
		);
	}
	if (!data.doc_contratto_added) {
		return (
			<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>
		);
	}

	return (
		<div className="flex flex-col gap-2">
			<h3 className="font-semibold">
				{consulenzaPaid
					? "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="w-fit">
							<FileText className="size-6" />
							Visualizza il contratto
						</Button>
					</Link>
				) : (
					<TooltipProvider delayDuration={0}>
						<Tooltip>
							<TooltipTrigger asChild>
								<Button className="w-fit cursor-not-allowed 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>
				)}

				{!consulenzaPaid && 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="w-fit">
								<FileBadge className="size-6" />
								Visualizza la registrazione
							</Button>
						</Link>
					) : (
						<TooltipProvider delayDuration={0}>
							<Tooltip>
								<TooltipTrigger asChild>
									<Button className="w-fit cursor-not-allowed 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>
	);
};

export const Interactions = () => {
	const { data } = useServizioAnnuncio();

	return (
		<div className="flex flex-col gap-3">
			<ContattiProprietarioModal />

			<SezioneConferma />

			{data.accettato_conferma_at != null && <PostConfermaSection />}
		</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("w-fit", 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("w-fit", className)}
			onClick={() => {
				mutate({
					annuncioId,
					servizioId,
				});
			}}
			variant={variant}
		>
			<PackageCheck className="size-6" />
			Procedi al saldo della consulenza
		</Button>
	);
};