import type { UsersId } from "~/schemas/public/Users";
import { api } from "~/utils/api";
import { LoadingPage } from "~/components/loading";
import { Package } from "lucide-react";
import { ServizioProvider } from "~/providers/ServizioProvider";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "~/components/ui/collapsible";
import { useState } from "react";
import type { ServizioData } from "~/server/controllers/servizio.controller";
import { ServizioContent } from "~/components/servizio/main";

export const TabRicerca = ({
  userId,
  isAdmin,
}: {
  userId: UsersId;
  isAdmin: boolean;
}) => {
  const { data, isLoading } = api.servizio.getAllServizioAnnunci.useQuery({
    userId,
  });

  if (isLoading) return <LoadingPage />;
  if (!data || data.length === 0) {
    return (
      <div className="m-4 rounded-md bg-yellow-100 p-4 text-yellow-900">
        Nessun servizio attualmente inserito
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-2">
      {data.map((servizio, idx) => {
        return (
          <Row
            key={idx}
            servizio={servizio}
            userId={userId}
            isAdmin={isAdmin}
            defaultOpen={idx === 0}
          />
        );
      })}
    </div>
  );
};

const Row = ({
  servizio,
  userId,
  isAdmin,
  defaultOpen = false,
}: {
  servizio: ServizioData;
  userId: UsersId;
  isAdmin: boolean;
  defaultOpen: boolean;
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);
  return (
    <ServizioProvider
      isAdmin={isAdmin}
      userId={userId}
      servizioId={servizio.servizio_id}
      servizio={servizio}
    >
      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
        <div className="border-border flex items-center rounded-md border py-2 shadow-sm hover:shadow-md">
          <CollapsibleTrigger className="grid w-full cursor-pointer grid-cols-10 items-center">
            <div className="col-span-2 sm:col-span-1">
              <span className="text-xl">{isOpen ? "👇" : "👉"}</span>
            </div>
            <div className="col-span-6 flex items-center gap-2 font-semibold sm:text-lg">
              <Package className="text-primary size-6" />
              Affitto {servizio.tipologia}
            </div>
            <div className="col-span-2">
              {servizio.isInterrotto ? (
                <span className="text-red-500">Interrotto</span>
              ) : servizio.isOkAcconto && servizio.decorrenza !== null ? (
                <span className="text-green-500">Attivo</span>
              ) : (
                <span className="text-neutral-500">Inattivo</span>
              )}
            </div>
            <div className="hidden text-sm sm:col-span-2 sm:contents sm:text-base">
              {servizio.created_at.toLocaleDateString("it", {
                month: "short",
                day: "2-digit",
              })}
            </div>
          </CollapsibleTrigger>
        </div>

        <CollapsibleContent className="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up mt-2 overflow-hidden transition-all duration-300 ease-in-out">
          <ServizioProvider
            isAdmin={isAdmin}
            userId={userId}
            servizioId={servizio.servizio_id}
            servizio={servizio}
          >
            <ServizioContent />
          </ServizioProvider>
        </CollapsibleContent>
      </Collapsible>
    </ServizioProvider>
  );
};