import { ExternalLink, Trash2 } from "lucide-react";
import Link from "next/link";
import type { ReactNode } from "react";
import toast from "react-hot-toast";
import {
	AnnuncioCard,
	BasicAnnuncioCard,
} from "~/components/servizio/annuncio_card";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "~/components/ui/accordion";
import { Button } from "~/components/ui/button";
import {
	ServizioAnnuncioProvider,
	useServizio,
} from "~/providers/ServizioProvider";
import type { UsersId } from "~/schemas/public/Users";
import type { ServizioData } from "~/server/controllers/servizio.controller";
import { api } from "~/utils/api";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "../ui/dialog";

const DialogServizio = ({
	trigger,
	title,
	children,
}: {
	trigger: ReactNode;
	title: string;
	children: ReactNode;
}) => {
	return (
		<Dialog>
			<DialogTrigger asChild>{trigger}</DialogTrigger>
			<DialogContent className="max-w-xl p-2 sm:max-w-5xl sm:p-6 md:max-w-7xl">
				<DialogHeader>
					<DialogTitle>{title}</DialogTitle>
					<DialogDescription className="sr-only">
						Servizio Dialog
					</DialogDescription>
				</DialogHeader>
				{children}
			</DialogContent>
		</Dialog>
	);
};
export const AnnunciInConfermaDialog = ({
	annunci,
}: {
	annunci: ServizioData["annunci"];
}) => {
	const { servizioId, userId } = useServizio();
	return (
		<DialogServizio
			title="Annunci in conferma"
			trigger={
				<div className="relative">
					<Button
						className="text-lg"
						disabled={annunci.length === 0}
						size="xl"
						variant="success"
					>
						Annunci in conferma
					</Button>

					<span className="-translate-y-1/2 absolute top-0 right-0 flex min-w-6 origin-center translate-x-1/2 items-center justify-center rounded-full bg-destructive px-1 text-white">
						{annunci.length || 0}
					</span>
				</div>
			}
		>
			<div className="flex max-h-[80vh] flex-col gap-2 overflow-y-auto">
				{annunci.map((data) => {
					return (
						<ServizioAnnuncioProvider
							data={data}
							key={data.id}
							servizioId={servizioId}
							userId={userId}
						>
							<AnnuncioCard className="border-2 border-green-500" />
						</ServizioAnnuncioProvider>
					);
				})}
			</div>
		</DialogServizio>
	);
};

export const AnnunciSelezionatiDialog = ({
	annunci,
}: {
	annunci: ServizioData["annunci"];
}) => {
	const { servizioId, userId } = useServizio();
	return (
		<DialogServizio
			title="Annunci selezionati"
			trigger={
				<div className="relative flex w-full sm:w-fit">
					<Button
						className="w-full text-lg sm:w-fit"
						size="xl"
						variant="orange"
					>
						Annunci selezionati
					</Button>

					<span className="-translate-y-1/2 absolute top-0 right-0 flex min-w-6 origin-center translate-x-1/2 items-center justify-center rounded-full bg-destructive px-1 text-white">
						{annunci.length || 0}
					</span>
				</div>
			}
		>
			<div className="flex max-h-[80vh] flex-col gap-2 overflow-y-auto">
				{annunci.length > 0 ? (
					annunci.map((data) => {
						return (
							<ServizioAnnuncioProvider
								data={data}
								key={data.id}
								servizioId={servizioId}
								userId={userId}
							>
								<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"
								className="inline-flex items-center gap-1 text-blue-500 underline"
								href="/annunci"
							>
								Annunci
								<ExternalLink className="size-4" />
							</Link>
						</span>
					</div>
				)}
			</div>
		</DialogServizio>
	);
};

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

	return (
		<Accordion collapsible defaultValue="in-conferma" type="single">
			<AccordionItem className="space-y-4" value="in-conferma">
				<AccordionTrigger className="rounded-md border-2 border-green-500 bg-muted 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}
									servizioId={servizioId}
									userId={userId}
								>
									<AnnuncioCard className="border-2 border-green-500" />
								</ServizioAnnuncioProvider>
							);
						})}
					</div>
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	);
};

export const AnnunciSelezionatiAccordion = ({
	annunci,
}: {
	annunci: ServizioData["annunci"];
}) => {
	const { servizioId, userId } = useServizio();
	return (
		<Accordion collapsible defaultValue="open" type="single">
			<AccordionItem className="space-y-4" value="open">
				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-sky-500 bg-muted 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}
										servizioId={servizioId}
										userId={userId}
									>
										<AnnuncioCard className="border-2 border-sky-500" />
									</ServizioAnnuncioProvider>
								);
							})
						) : (
							<div className="flex items-center justify-center gap-1 rounded-md bg-muted p-4 sm:flex">
								<span>
									Nessun annuncio selezionato, fai una ricerca nella pagina{" "}
									<Link
										aria-label="Annunci Compatibili"
										className="inline-flex items-center gap-1 text-blue-500 underline"
										href="/annunci"
									>
										Annunci
										<ExternalLink className="size-4" />
									</Link>{" "}
									o tra gli annunci compatibili qui sotto.
								</span>
							</div>
						)}
					</div>
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	);
};

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

	const utils = api.useUtils();
	const { mutate: deleteAnnuncio } = api.intrests.removeIntrest.useMutation({
		onSuccess: async () => {
			await utils.intrests.getUserInterestsAnnunci.invalidate({ userId });
			toast.success("Annuncio rimosso con successo");
		},
	});
	if (isLoading) return <div>Loading...</div>;

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

	return (
		<Accordion collapsible type="single">
			<AccordionItem className="space-y-4" value="compatibili">
				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-pink-500 bg-muted 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-muted 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}
										interactions={
											<Button
												onClick={() => {
													deleteAnnuncio({ annuncioId: a.id, userId });
												}}
												variant="destructive"
											>
												Rimuovi
												<Trash2 className="size-4" />
											</Button>
										}
										key={a.id}
									/>
								);
							})
						)}
					</div>
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	);
};
