import type { UsersId } from "~/schemas/public/Users";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import type { ServizioData } from "~/server/controllers/servizio.controller";
import { Package, PackageCheck, UserCircle } from "lucide-react";
import Link from "next/link";
import { Progress } from "~/components/ui/progress";
import {
  ServizioActions,
  ServizioActions2,
} from "~/components/servizio/servizio_actions";
import { SaldoButton } from "~/components/servizio/interactions";
import { api } from "~/utils/api";
import {
  ServizioAnnuncioProvider,
  ServizioProvider,
  useServizio,
} from "~/providers/ServizioProvider";
import { useRouter } from "next/router";
import { useEffect } from "react";
import toast from "react-hot-toast";
import {
  AnnunciCompatibili,
  AnnunciInConferma,
  AnnunciSelezionati,
} from "~/components/servizio/servizio_annunci_accordions";
import { AnnuncioCard } from "~/components/servizio/annuncio_card";
import { ServizioDuration } from "~/components/servizio/service-duration-display";

export const ServizioContainer = ({
  servizio,
  userId,
  isAdmin,
}: {
  servizio: ServizioData;
  userId: UsersId;
  isAdmin: boolean;
}) => {
  return (
    <ServizioProvider
      isAdmin={isAdmin}
      userId={userId}
      servizioId={servizio.servizio_id}
      servizio={servizio}
    >
      <ServizioMain />
    </ServizioProvider>
  );
};

const ServizioCard = ({
  cardClassName,
  header,
  headerClassName,
  content,
  contentClassName,
}: {
  cardClassName?: string;
  header: React.ReactNode;
  headerClassName?: string;
  content: React.ReactNode;
  contentClassName?: string;
}) => {
  return (
    <Card
      className={cn("gap-2 border-neutral-200 bg-neutral-200", cardClassName)}
    >
      <CardHeader
        className={cn(
          "flex flex-col items-start justify-between gap-3 space-y-0 px-4 pb-8 sm:flex-row",
          headerClassName,
        )}
      >
        {header}
      </CardHeader>
      <CardContent className={cn("space-y-4 p-4 pt-0", contentClassName)}>
        {content}
      </CardContent>
    </Card>
  );
};

export const ServizioContent = () => {
  const { servizio, isAdmin, userId } = useServizio();
  const utils = api.useUtils();
  const { mutate: updateServizio } = api.servizio.updateServizio.useMutation({
    onSuccess: async () => {
      toast.success("Servizio modificato con successo");
      await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
    },
    onError: (error) => {
      toast.error(error.message);
    },
  });

  const router = useRouter();
  useEffect(() => {
    const id = router.asPath.split("#")[1];
    if (id) {
      document.getElementById(id)?.scrollIntoView({
        behavior: "smooth",
      });
    }
  }, []);

  if (servizio.isInterrotto) {
    return (
      <ServizioCard
        cardClassName="bg-neutral-100 border-neutral-300"
        header={
          <>
            <div className="flex flex-col gap-4">
              <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
                <Package className="text-primary size-6" />
                Cerco Affitto {servizio.tipologia}
              </CardTitle>

              <CardDescription className="text-foreground/70 space-y-2 pl-2">
                <p>
                  aggiunto il{" "}
                  {servizio.created_at.toLocaleDateString("it", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                  })}
                </p>
              </CardDescription>
            </div>
          </>
        }
        content={
          <>
            <p className="text-lg font-medium">Servizio interrotto</p>
            <p>
              Non è possibile riutilizzare questo servizio, poichè è stato
              interrotto.
            </p>
          </>
        }
      />
    );
  }

  if (!servizio.isOkAcconto || servizio.decorrenza === null) {
    return (
      <ServizioCard
        header={
          <div className="flex w-full flex-col gap-2">
            {/* <div className="flex w-full flex-col gap-4">
              <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
                <Package className="text-primary size-6" />
                Cerco Affitto {servizio.tipologia}
              </CardTitle>
              <CardDescription className="text-foreground/70 pl-2">
                <p>Servizio non attivo</p>
              </CardDescription>
            </div> */}
            <span className="text-foreground/70 text-lg">
              Servizio non attivo
            </span>
            <ServizioActions2 />
          </div>
        }
        content={
          <div className="flex flex-col gap-4">
            <div className="flex flex-wrap gap-3">
              <Link
                href={`/servizio/onboard/${servizio.servizio_id}`}
                aria-label="Attiva Servizio"
              >
                <Button>Procedi all&apos;attivazione</Button>
              </Link>
              {isAdmin && (
                <Button
                  onClick={() =>
                    updateServizio({
                      servizioId: servizio.servizio_id,
                      data: {
                        isOkAcconto: true,
                        decorrenza: new Date(),
                      },
                    })
                  }
                  variant="success"
                >
                  Attiva Manualmente (Azione Admin)
                </Button>
              )}
            </div>
            {isAdmin && (
              <AnnunciSelezionati
                isConfirming={false}
                annunci={servizio.annunci}
              />
            )}
          </div>
        }
      />
    );
  }
  const annuncioConfermato = servizio.annunci.filter(
    (a) => a.accettato_conferma_at !== null,
  );

  if (servizio.isOkSaldo) {
    return (
      <ServizioCard
        header={
          <>
            {/* <div className="flex w-full flex-wrap items-center gap-2">
              <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
                <Package className="text-primary size-6" />
                Cerco Affitto {servizio.tipologia}
              </CardTitle>

              <CardDescription className="text-foreground/70 space-y-2 pl-2">
                <p>
                  aggiunto il{" "}
                  {servizio.created_at.toLocaleDateString("it", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                  })}
                </p>
              </CardDescription>
            </div> */}

            <ServizioActions2 />
          </>
        }
        content={
          <>
            {annuncioConfermato.map((data) => {
              return (
                <ServizioAnnuncioProvider data={data} key={data.id}>
                  <AnnuncioCard />
                </ServizioAnnuncioProvider>
              );
            })}
          </>
        }
      />
    );
  }

  const openContattiCount = servizio.annunci.filter(
    (a) => a.open_contatti_at !== null,
  ).length;

  const annunciInConferma = servizio.annunci.filter(
    (a) => a.user_confirmed_at !== null,
  );
  const annunciNotInConferma = servizio.annunci.filter(
    (a) => a.user_confirmed_at === null,
  );

  return (
    <ServizioCard
      header={
        <>
          {/* <div className="flex w-full flex-col gap-2">
            <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
              <Package className="text-primary size-6" />
              Cerco Affitto {servizio.tipologia}
            </CardTitle>

            <CardDescription className="text-foreground/70 space-y-2 pl-2">
              <p>
                aggiunto il{" "}
                {servizio.created_at.toLocaleDateString("it", {
                  year: "numeric",
                  month: "2-digit",
                  day: "2-digit",
                })}
              </p>
            </CardDescription>
          </div> */}

          <ServizioActions2 />
        </>
      }
      content={
        <>
          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <UserCircle className="text-primary size-6" />
                <span className="font-medium">Contatti sbloccati</span>
              </div>
              <span className="text-sm">{openContattiCount} / 10</span>
            </div>
            <Progress value={openContattiCount * 10} className="h-2" />
          </div>

          <ServizioDuration decorrenza={servizio.decorrenza} />

          {annuncioConfermato.length > 0 && (
            <div className="flex flex-col gap-2">
              <div className="flex items-center gap-2">
                <PackageCheck className="text-primary size-6" />
                <span className="font-medium">Saldi in attesa:</span>
              </div>
              {servizio.annunci
                .filter((a) => a.accettato_conferma_at !== null)
                .map((a) => (
                  <div
                    key={a.annunci_id}
                    className="flex items-center gap-2 rounded-md bg-sky-400 p-2"
                  >
                    <h3>
                      {a.codice} - confermato il:{" "}
                      {new Date(a.accettato_conferma_at!).toLocaleDateString(
                        "it",
                        {
                          year: "numeric",
                          month: "2-digit",
                          day: "2-digit",
                          hour: "2-digit",
                          minute: "2-digit",
                        },
                      )}
                    </h3>
                    <SaldoButton
                      variant={"outline"}
                      className="border-none"
                      annuncioId={a.annunci_id}
                    />
                  </div>
                ))}
            </div>
          )}

          <div className="space-y-2">
            <AnnunciInConferma annunci={annunciInConferma} />
            <AnnunciSelezionati
              isConfirming={annunciInConferma.length > 0}
              annunci={annunciNotInConferma}
            />
            <AnnunciCompatibili />
          </div>
        </>
      }
    />
  );
};

const ServizioMain = () => {
  const { servizio, isAdmin, userId } = useServizio();
  const utils = api.useUtils();
  const { mutate: updateServizio } = api.servizio.updateServizio.useMutation({
    onSuccess: async () => {
      toast.success("Servizio modificato con successo");
      await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
    },
    onError: (error) => {
      toast.error(error.message);
    },
  });

  const router = useRouter();
  useEffect(() => {
    const id = router.asPath.split("#")[1];
    if (id) {
      document.getElementById(id)?.scrollIntoView({
        behavior: "smooth",
      });
    }
  }, []);

  if (servizio.isInterrotto) {
    return (
      <ServizioCard
        cardClassName="bg-neutral-100 border-neutral-300"
        header={
          <>
            <div className="flex flex-col gap-4">
              <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
                <Package className="text-primary size-6" />
                Cerco Affitto {servizio.tipologia}
              </CardTitle>

              <CardDescription className="text-foreground/70 space-y-2 pl-2">
                <p>
                  aggiunto il{" "}
                  {servizio.created_at.toLocaleDateString("it", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                  })}
                </p>
              </CardDescription>
            </div>
          </>
        }
        content={
          <>
            <p className="text-lg font-medium">Servizio interrotto</p>
            <p>
              Non è possibile riutilizzare questo servizio, poichè è stato
              interrotto.
            </p>
          </>
        }
      />
    );
  }

  if (!servizio.isOkAcconto || servizio.decorrenza === null) {
    return (
      <ServizioCard
        header={
          <>
            <div className="flex w-full flex-col gap-4">
              <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
                <Package className="text-primary size-6" />
                Cerco Affitto {servizio.tipologia}
              </CardTitle>
              <CardDescription className="text-foreground/70 pl-2">
                <p>Servizio non attivo</p>
              </CardDescription>
            </div>
            <ServizioActions />
          </>
        }
        content={
          <div className="flex flex-col gap-4">
            <div className="flex flex-wrap gap-3">
              <Link
                href={`/servizio/onboard/${servizio.servizio_id}`}
                aria-label="Attiva Servizio"
              >
                <Button>Procedi all&apos;attivazione</Button>
              </Link>
              {isAdmin && (
                <Button
                  onClick={() =>
                    updateServizio({
                      servizioId: servizio.servizio_id,
                      data: {
                        isOkAcconto: true,
                        decorrenza: new Date(),
                      },
                    })
                  }
                  variant="success"
                >
                  Attiva Manualmente (Azione Admin)
                </Button>
              )}
            </div>
            {isAdmin && (
              <AnnunciSelezionati
                isConfirming={false}
                annunci={servizio.annunci}
              />
            )}
          </div>
        }
      />
    );
  }
  const annuncioConfermato = servizio.annunci.filter(
    (a) => a.accettato_conferma_at !== null,
  );

  if (servizio.isOkSaldo) {
    return (
      <ServizioCard
        header={
          <>
            <div className="flex w-full flex-wrap items-center gap-2">
              <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
                <Package className="text-primary size-6" />
                Cerco Affitto {servizio.tipologia}
              </CardTitle>

              <CardDescription className="text-foreground/70 space-y-2 pl-2">
                <p>
                  aggiunto il{" "}
                  {servizio.created_at.toLocaleDateString("it", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                  })}
                </p>
              </CardDescription>
            </div>

            <ServizioActions />
          </>
        }
        content={
          <>
            {annuncioConfermato.map((data) => {
              return (
                <ServizioAnnuncioProvider data={data} key={data.id}>
                  <AnnuncioCard />
                </ServizioAnnuncioProvider>
              );
            })}
          </>
        }
      />
    );
  }

  const openContattiCount = servizio.annunci.filter(
    (a) => a.open_contatti_at !== null,
  ).length;

  const annunciInConferma = servizio.annunci.filter(
    (a) => a.user_confirmed_at !== null,
  );
  const annunciNotInConferma = servizio.annunci.filter(
    (a) => a.user_confirmed_at === null,
  );

  return (
    <ServizioCard
      header={
        <>
          <div className="flex w-full flex-col gap-2">
            <CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
              <Package className="text-primary size-6" />
              Cerco Affitto {servizio.tipologia}
            </CardTitle>

            <CardDescription className="text-foreground/70 space-y-2 pl-2">
              <p>
                aggiunto il{" "}
                {servizio.created_at.toLocaleDateString("it", {
                  year: "numeric",
                  month: "2-digit",
                  day: "2-digit",
                })}
              </p>
            </CardDescription>
          </div>

          <ServizioActions />
        </>
      }
      content={
        <>
          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <UserCircle className="text-primary size-6" />
                <span className="font-medium">Contatti sbloccati</span>
              </div>
              <span className="text-sm">{openContattiCount} / 10</span>
            </div>
            <Progress value={openContattiCount * 10} className="h-2" />
          </div>

          <ServizioDuration decorrenza={servizio.decorrenza} />

          {annuncioConfermato.length > 0 && (
            <div className="flex flex-col gap-2">
              <div className="flex items-center gap-2">
                <PackageCheck className="text-primary size-6" />
                <span className="font-medium">Saldi in attesa:</span>
              </div>
              {servizio.annunci
                .filter((a) => a.accettato_conferma_at !== null)
                .map((a) => (
                  <div
                    key={a.annunci_id}
                    className="flex items-center gap-2 rounded-md bg-sky-400 p-2"
                  >
                    <h3>
                      {a.codice} - confermato il:{" "}
                      {new Date(a.accettato_conferma_at!).toLocaleDateString(
                        "it",
                        {
                          year: "numeric",
                          month: "2-digit",
                          day: "2-digit",
                          hour: "2-digit",
                          minute: "2-digit",
                        },
                      )}
                    </h3>
                    <SaldoButton
                      variant={"outline"}
                      className="border-none"
                      annuncioId={a.annunci_id}
                    />
                  </div>
                ))}
            </div>
          )}

          <div className="space-y-2">
            <AnnunciInConferma annunci={annunciInConferma} />
            <AnnunciSelezionati
              isConfirming={annunciInConferma.length > 0}
              annunci={annunciNotInConferma}
            />
            <AnnunciCompatibili />
          </div>
        </>
      }
    />
  );
};