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

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

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 text-base font-semibold 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
            userId={session.user.id}
            tipologia={tipo}
            annuncioId={id}
          />
        ) : (
          <span>Errore</span>
        )
      ) : (
        <div className="flex w-full flex-col gap-2">
          <Link
            aria-label="Login"
            className={cn(buttonVariants({ variant: "default" }))}
            href={{
              pathname: "/login",
              query: { redirect: router.asPath },
            }}
          >
            <LogIn className="mr-1 size-7" /> Accedi se hai un account
          </Link>
          <span className="w-full text-center text-sm">oppure</span>
          <ContattoAnnuncio />
        </div>
      )}
    </div>
  );
};

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

  if (isLoading) return <LoadingButton loading className="w-full" />;
  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
          href={`/area-riservata/dashboard`}
          aria-label="Vai alla tua area riservata"
        >
          <Button variant="success" className="flex w-full items-center gap-2">
            Vai alla tua area riservata <ArrowRight />
          </Button>
        </Link>
      </div>
    );
  }

  return (
    //todo join table annuncioId e userId richieste di sblocco,per mostrare testo se già inviate, stessa funzionalità in pag ricerca con annunci compatibili con questo bottone
    //todo email di richiesta di sblocco deve avere un bottone che rimanda alla pagina di richiesta per poterla accettare o rifiutare
    //todo paginina di sunto per richiesta con info minime e link a annuncio e utente
    <InteressatoButton annuncioId={annuncioId} />
  );
};

export const InteressatoButton = ({
  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="flex w-full items-center gap-2" 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 text-sm font-semibold text-white">
        <BadgePlus className="inline size-5" />
        Hai già mandato una richiesta
      </span>
    );
  }

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

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

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

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