import { Plus, Trash2 } from "lucide-react";
import toast from "react-hot-toast";
import { AnnuncioDisplay } from "~/components/servizio/annuncio_card";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "~/components/ui/accordion";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { cn } from "~/lib/utils";
import type { ServizioServizioId } from "~/schemas/public/Servizio";
import type { UsersId } from "~/schemas/public/Users";
import { api } from "~/utils/api";
import { LoadingPage } from "../loading";

export const AnnunciRichiesti = ({
	userId,
	servizioId,
}: {
	userId: UsersId;
	servizioId?: ServizioServizioId;
}) => {
	const { data, isLoading } = api.intrests.getUserInterestsAnnunci.useQuery({
		userId,
	});

	const utils = api.useUtils();
	const { mutate: removeIterest } = api.intrests.removeIntrest.useMutation({
		onSuccess: async () => {
			await utils.intrests.getUserInterestsAnnunci.invalidate({ userId });
			toast.success("Interesse rimosso con successo");
		},
		onError: (error) => {
			console.error(error);
			toast.error("Errore durante la rimozione dell'interesse");
		},
	});
	const { mutate: addToServizio } = api.servizio.addServizioAnnunci.useMutation(
		{
			onError: (error) => {
				console.error(error);
				toast.error("Errore durante l'aggiunta dell'annuncio");
			},
			onSuccess: async () => {
				await utils.servizio.invalidate();
				toast.success("Annuncio aggiunto");
			},
		},
	);
	if (isLoading) return <LoadingPage />;

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

	return (
		<Accordion collapsible type="single">
			<AccordionItem
				className="space-y-4 border-b dark:border-muted-foreground/50"
				value="compatibili"
			>
				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-pink-500 bg-muted p-2">
					Annunci Richiesti dall'Utente ({data.length}):
				</AccordionTrigger>
				<AccordionContent>
					<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
						{data.map((a) => {
							return (
								<Card
									className="w-full max-w-7xl gap-2 rounded-md border-2 border-pink-500 bg-muted py-3"
									key={a.id}
								>
									<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2">
										<CardTitle className="text-2xl">
											Annuncio {a.codice}
										</CardTitle>
									</CardHeader>
									<CardContent className="px-3">
										<div className="grid grid-cols-1 gap-4">
											<div
												className={cn("@container flex w-full flex-col gap-4")}
												id="container"
											>
												<AnnuncioDisplay data={a} />

												<div className="flex w-full flex-col gap-4">
													{servizioId && (
														<Button
															onClick={() => {
																addToServizio({ annunci: [a.id], servizioId });
															}}
															variant="success"
														>
															Aggiungi al servizio
															<Plus className="size-4" />
														</Button>
													)}
													<Button
														onClick={() => {
															removeIterest({ annuncioId: a.id, userId });
														}}
														variant="destructive"
													>
														Rimuovi
														<Trash2 className="size-4" />
													</Button>
												</div>
											</div>
										</div>
									</CardContent>
								</Card>
							);
						})}
						{data.length % 2 === 1 && (
							<div className="size-full rounded-md border border-(--pattern-fg) bg-[repeating-linear-gradient(45deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] dark:[--pattern-fg:#e1e1e1]" />
						)}
					</div>
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	);
};
