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

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>
	);
};
