infoalloggi-monorepo/apps/infoalloggi/src/components/annuncio-interactions/annuncio_interactions.tsx

import { ArrowRight, BadgePlus, LogIn } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import toast from "react-hot-toast";
import { ContattoAnnuncio } from "~/components/annuncio-interactions/contatto_modal";
import LoadingButton from "~/components/custom_ui/loading-button";
import { Button } from "~/components/ui/button";
import { useAnnuncio } from "~/providers/AnnuncioProvider";
import { useServizio } from "~/providers/ServizioProvider";
import type { SessionContextType } from "~/providers/SessionProvider";
import type { AnnunciId } from "~/schemas/public/Annunci";
import type { UsersId } from "~/schemas/public/Users";
import { api } from "~/utils/api";

export const AnnuncioInteractions = ({
	session,
	disabled,
}: {
	session: SessionContextType;
	disabled?: boolean;
}) => {
	const router = useRouter();
	const { id, tipo } = useAnnuncio();

	if (disabled) {
		return (
			<div className="w-full rounded-md bg-red-500 p-2 text-center font-semibold text-base text-white">
				Richieste Temporaneamente disattivate
			</div>
		);
	}
	return (
		<div className="flex w-full flex-col justify-around gap-3 md:gap-5">
			{session.user ? (
				tipo ? (
					<ServizioInteraction
						annuncioId={id}
						tipologia={tipo}
						userId={session.user.id}
					/>
				) : (
					<span>Errore</span>
				)
			) : (
				<div className="flex w-full flex-col gap-2">
					<ContattoAnnuncio />
					<span className="w-full text-center text-sm">oppure</span>
					<Link
						aria-label="Login"
						href={{
							pathname: "/login",
							query: { redirect: router.asPath },
						}}
					>
						<Button className="w-full">
							<LogIn className="size-5" />
							<span>Accedi se hai un account</span>
						</Button>
					</Link>
				</div>
			)}
		</div>
	);
};

const ServizioInteraction = ({
	userId,
	tipologia,
	annuncioId,
}: {
	userId: UsersId;
	tipologia: string;
	annuncioId: AnnunciId;
}) => {
	const { data: servizio, isLoading } =
		api.servizio.AnnuncioServizioTipologiaMatch.useQuery({
			annuncioId,
			tipologia,
			userId,
		});

	if (isLoading) return <LoadingButton className="w-full" loading />;
	if (
		servizio === undefined ||
		servizio.status === "invalid" ||
		servizio.status === "not_found"
	) {
		return (
			<div>
				<p>Non hai un servizio attivo</p>
			</div>
		);
	}

	if (servizio.status === "already_saved") {
		return (
			<div className="flex w-full flex-col gap-2">
				<div className="w-full text-center font-semibold text-green-500">
					Annuncio già salvato!
				</div>
				<Link
					aria-label="Vai alla tua area riservata"
					href={`/area-riservata/dashboard`}
				>
					<Button className="w-full" variant="success">
						Vai alla tua area riservata <ArrowRight />
					</Button>
				</Link>
			</div>
		);
	}

	return <InteressatoButtonUserOnly annuncioId={annuncioId} />;
};

const InteressatoButtonUserOnly = ({
	annuncioId,
}: {
	annuncioId: AnnunciId;
}) => {
	const { data: hasInterest, isLoading } =
		api.intrests.hasUserInterest.useQuery({
			annuncioId,
		});
	const utils = api.useUtils();
	const { mutate: add } = api.intrests.addIntrest.useMutation({
		onSuccess: async () => {
			await utils.intrests.hasUserInterest.invalidate({
				annuncioId,
			});
			toast.success("Richiesta di interesse inviata con successo!");
		},
	});

	if (isLoading || hasInterest === undefined) {
		return (
			<Button className="w-full" disabled>
				<BadgePlus className="size-6" />
				Caricamento...
			</Button>
		);
	}
	if (hasInterest) {
		return (
			<span className="flex w-full items-center justify-center gap-2 rounded-md bg-green-500 p-2 font-semibold text-sm text-white">
				<BadgePlus className="inline size-5" />
				Hai già mandato una richiesta
			</span>
		);
	}

	return (
		<Button
			aria-label="Sono interessato"
			className="w-full"
			//size="xl"
			onClick={() => {
				add({
					annuncioId,
				});
			}}
			variant="info"
		>
			<BadgePlus className="size-6" />
			Sono interessato
		</Button>
	);
};

export const InteressatoButtonServizio = ({
	annuncioId,
}: {
	annuncioId: AnnunciId;
}) => {
	const { isAdmin, servizioId, userId } = useServizio();
	const utils = api.useUtils();

	const invalidateAll = async () => {
		await utils.intrests.getUserInterests.invalidate();
		await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
		await utils.servizio.getAnnunciAvailableToAdd.invalidate({
			servizioId,
		});
		await utils.servizio.AnnuncioServizioTipologiaMatch.invalidate({
			userId,
		});
		await utils.servizio.getCompatibileAnnunci.invalidate({
			servizioId,
		});
	};
	const { mutate: adminAdd, isPending: isAdminPending } =
		api.servizio.addServizioAnnunci.useMutation({
			onError: (error) => {
				console.error(error);
				toast.error("Errore durante l'aggiunta dell'annuncio");
			},
			onSuccess: async () => {
				await invalidateAll();

				toast.success("Annuncio aggiunto alla ricerca");
			},
		});

	const { mutate: add, isPending } = api.intrests.addIntrest.useMutation({
		onSuccess: async () => {
			await invalidateAll();
			toast.success("Richiesta di interesse inviata con successo!");
		},
	});

	return (
		<LoadingButton
			aria-label="Sono interessato"
			className="w-full"
			loading={isPending || isAdminPending}
			onClick={() => {
				if (isAdmin && servizioId) {
					adminAdd({
						servizioId,
						annunci: [annuncioId],
					});
					return;
				}

				add({
					annuncioId,
				});
			}}
			variant="info"
		>
			<BadgePlus className="size-6" />
			{isAdmin ? "Aggiungi" : "Sono interessato"}
		</LoadingButton>
	);
};