import { api } from "~/utils/api";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "~/components/ui/accordion";
import type { UsersId } from "~/schemas/public/Users";
import {
  AnnuncioCard,
  BasicAnnuncioCard,
} from "~/components/servizio/annuncio_card";
import { Button } from "~/components/ui/button";
import { AddButton } from "~/components/servizio/annuncio_actions";
import { InteressatoButtonBatchV } from "~/components/annuncio-interactions/annuncio_interactions";
import {
  ServizioAnnuncioProvider,
  useServizio,
} from "~/providers/ServizioProvider";
import { ExternalLink } from "lucide-react";
import Link from "next/link";
import type { ServizioData } from "~/server/controllers/servizio.controller";

export const AnnunciInConferma = ({
  annunci,
}: {
  annunci: ServizioData["annunci"];
}) => {
  if (annunci.length === 0) {
    return null; // If there are no announcements in confirmation, do not render this section
  }

  return (
    <Accordion type="single" collapsible defaultValue="in-conferma">
      <AccordionItem value="in-conferma" className="space-y-4">
        <AccordionTrigger className="rounded-md border-2 border-green-500 bg-white p-2">
          Annunci in conferma:
        </AccordionTrigger>
        <AccordionContent>
          <div className="flex flex-col flex-wrap gap-5">
            {annunci.map((data) => {
              return (
                <ServizioAnnuncioProvider data={data} key={data.id}>
                  <AnnuncioCard className="border-2 border-green-500" />
                </ServizioAnnuncioProvider>
              );
            })}
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};

export const AnnunciSelezionati = ({
  isConfirming,
  annunci,
}: {
  isConfirming: boolean;
  annunci: ServizioData["annunci"];
}) => {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue={!isConfirming ? "not-in-conferma" : undefined}
    >
      <AccordionItem value="not-in-conferma" className="space-y-4">
        <AccordionTrigger className="cursor-pointer rounded-md border-2 border-sky-500 bg-white p-2">
          Annunci Selezionati:
        </AccordionTrigger>
        <AccordionContent>
          <div className="flex flex-col flex-wrap gap-5">
            {annunci.length > 0 ? (
              annunci.map((data) => {
                return (
                  <ServizioAnnuncioProvider data={data} key={data.id}>
                    <AnnuncioCard className="border-2 border-sky-500" />
                  </ServizioAnnuncioProvider>
                );
              })
            ) : (
              <div className="flex items-center justify-center gap-1 rounded-md bg-white p-4 sm:flex">
                <span>
                  Nessun annuncio selezionato, fai una ricerca nella pagina{" "}
                  <Link
                    aria-label="Annunci Compatibili"
                    href="/annunci"
                    className="inline-flex items-center gap-1 text-blue-500 underline"
                  >
                    Annunci
                    <ExternalLink className="size-4" />
                  </Link>
                </span>
              </div>
            )}
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};

export const AnnunciCompatibili = () => {
  const { servizioId, userId, isAdmin } = useServizio();
  const { data, isLoading } = api.servizio.getCompatibileAnnunci.useQuery({
    servizioId,
  });

  const { data: userIntrests } = api.intrests.getUserInterests.useQuery({
    userId,
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <Accordion
      type="single"
      collapsible
      defaultValue={!data || data.length == 0 ? "compatibili" : undefined}
    >
      <AccordionItem value="compatibili" className="space-y-4">
        <AccordionTrigger className="cursor-pointer rounded-md border-2 border-neutral-500 bg-white p-2">
          Annunci Compatibili:
        </AccordionTrigger>
        <AccordionContent>
          <div className="flex flex-col flex-wrap gap-5">
            {!data || data.length == 0 ? (
              <div className="flex items-center justify-center gap-1 rounded-md bg-white p-4 sm:flex">
                <span>
                  Nessun annuncio compatibile trovato. Amplia la ricerca per
                  trovare annunci compatibili.
                </span>
              </div>
            ) : (
              data.map((a) => {
                return (
                  <BasicAnnuncioCard
                    key={a.id}
                    data={a}
                    className="border-2 border-neutral-500"
                  >
                    {isAdmin ? (
                      <AddButton annuncioId={a.id} />
                    ) : (
                      <InteressatoButtonBatchV
                        annuncioId={a.id}
                        hasInterest={userIntrests?.includes(a.id) || false}
                      />
                    )}
                  </BasicAnnuncioCard>
                );
              })
            )}
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};

export const AnnunciRichiesti = ({ userId }: { userId: UsersId }) => {
  const { data, isLoading } = api.intrests.getUserInterestsAnnunci.useQuery({
    userId,
  });
  if (isLoading) return <div>Loading...</div>;

  if (!data || data.length === 0) return null;

  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="compatibili" className="space-y-4">
        <AccordionTrigger className="cursor-pointer rounded-md border-2 border-pink-500 bg-white p-2">
          Annunci Richiesti:
        </AccordionTrigger>
        <AccordionContent>
          <div className="flex flex-col flex-wrap gap-5">
            {!data || data.length == 0 ? (
              <div className="flex items-center justify-center gap-1 rounded-md bg-white p-4 sm:flex">
                <span>
                  Nessun annuncio compatibile trovato. Amplia la ricerca per
                  trovare annunci compatibili.
                </span>
              </div>
            ) : (
              data.map((a) => {
                return (
                  <BasicAnnuncioCard
                    className="w-full border-2 border-pink-500"
                    data={a}
                    key={a.id}
                  >
                    <Button>Delete</Button>
                  </BasicAnnuncioCard>
                );
              })
            )}
          </div>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
};
