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

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

  return (
    <>
      <ContattiProprietarioModal />
      {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 variant="success" className="flex w-fit items-center gap-2">
              <Pointer className="size-6" />
              Confermato - Procedi ora
            </Button>
          </Link>
        ) : (
          <TooltipProvider delayDuration={0}>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="success"
                  className="flex w-fit cursor-not-allowed items-center gap-2 opacity-50"
                >
                  <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>
        ))}
      {!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>
      )}
      {data.accettato_conferma_at != null && (
        <Link
          aria-label="Conferma immobile"
          href={`/servizio/riapri-conferma/${servizioId}/${annuncioId}`}
        >
          <Button variant="success" className="flex w-fit items-center gap-2">
            <Pointer className="size-6" />
            Rivedi la conferma
          </Button>
        </Link>
      )}
      {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>
        )}
    </>
  );
};

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"
      variant={variant}
      className={cn("flex w-fit items-center gap-2", className)}
      onClick={() => {
        mutate({
          servizioId,
          annuncioId,
        });
      }}
    >
      <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"
      variant={variant}
      className={cn("flex w-fit items-center gap-2", className)}
      onClick={() => {
        mutate({
          servizioId,
          annuncioId,
        });
      }}
    >
      <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({
    onMutate: () => {
      toast.loading("Conferma in corso", { id: "updateRichiestaToast" });
    },
    onError: (err) => {
      toast.error(err.message, { id: "updateRichiestaToast" });
    },
    onSuccess: async () => {
      toast.success("Richiesta confermata con successo", {
        id: "updateRichiestaToast",
      });

      await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
      setOpen(false);
    },
  });
  return (
    <Credenza open={open} onOpenChange={setOpen}>
      <CredenzaTrigger asChild>
        <Button
          className="flex w-fit items-center gap-2"
          aria-label="Conferma immobile"
        >
          <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}
            variant="success"
            onClick={() => {
              mutate({
                annuncioId,
                servizioId,
              });
            }}
          >
            {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
          className="flex w-fit items-center gap-2"
          aria-label="Conferma in lavorazione"
        >
          <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",
                month: "2-digit",
                year: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })}
          </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 variant="outline" aria-label="Chiudi modal credenza">
              {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({
    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);
    },
    onError: (err) => {
      toast.error(err.message, {
        id: "unlock-contacts",
      });
    },
  });

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

  return (
    <Credenza>
      <CredenzaTrigger asChild>
        {showContacts ? (
          <Button
            variant="success"
            className="flex w-fit items-center gap-2"
            aria-label="Vedi contatti proprietario"
          >
            <CircleUser className="size-7" />
            Vedi i contatti
          </Button>
        ) : (
          <Button
            variant="warning"
            className="flex w-fit items-center gap-2"
            aria-label="Contatta proprietario"
          >
            <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"
              variant="success"
              onClick={() =>
                mutate({
                  servizioId,
                  annuncioId,
                })
              }
            >
              {t.accetta}
            </Button>
          )}
          <CredenzaClose asChild>
            <Button variant="outline" aria-label="Chiudi modal credenza">
              {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
        href={`tel:${data.propData.numero}`}
        className="flex items-center gap-2"
      >
        <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
        target="_blank"
        rel="noreferrer"
        href={navigationUrl}
        className="border-border flex w-fit items-center gap-2 rounded-md border px-3 py-2"
      >
        <Navigation /> <span>{t.contatto.apri_nav}</span>
      </a>
      <br />
      <p>
        {t.contatto.sbloccato_il}:{" "}
        {data.opened_at.toLocaleString("it", {
          day: "2-digit",
          month: "2-digit",
          year: "numeric",
          hour: "2-digit",
          minute: "2-digit",
        })}
      </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>
  );
};