import { CheckCircle } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "~/providers/I18nProvider";
import { useServizio } from "~/providers/ServizioProvider";
import { api } from "~/utils/api";
import { CardAnnuncio } from "../annuncio_card";
import { InteressatoButtonServizio } from "../annuncio-interactions/annuncio_interactions";
import { LoadingPage } from "../loading";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import {
	Dialog,
	DialogClose,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "../ui/dialog";
import { Label } from "../ui/label";
import { Switch } from "../ui/switch";
import { AnnuncioDettaglio } from "./annuncio_dettaglio";

export const AnnunciCompatibili = () => {
	const { servizioId, isAdmin } = useServizio();
	const { locale } = useTranslation();
	const [adminOverride, setAdminOverride] = useState(false);
	const { data, isLoading } = api.servizio.getCompatibileAnnunci.useQuery({
		servizioId,
		adminOverride,
	});
	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button className="w-full bg-purple-500 hover:bg-purple-600 sm:w-fit dark:text-white">
					{locale === "it"
						? "Esplora Annunci Compatibili"
						: "Explore Compatible Listings"}
				</Button>
			</DialogTrigger>
			<DialogContent className="max-w-xl p-2 sm:max-w-5xl sm:p-6 md:max-w-7xl 2xl:max-w-400">
				<DialogHeader className="flex-row flex-wrap items-center gap-5 pt-6">
					<DialogTitle>
						{locale === "it"
							? "Annunci compatibili con i parametri del servizio"
							: "Listings compatible with the service parameters"}
					</DialogTitle>
					{isAdmin && (
						<div className="flex flex-wrap items-center gap-x-2">
							<Label htmlFor="adminOverride">
								Ignora limitazioni parametri
							</Label>

							<Switch
								checked={adminOverride}
								className="data-[state=checked]:bg-neutral-700"
								id="adminOverride"
								onCheckedChange={setAdminOverride}
							/>
						</div>
					)}
					<DialogDescription className="sr-only"></DialogDescription>
				</DialogHeader>
				<div className="flex max-h-[80vh] flex-col gap-2 overflow-y-auto p-0.5 sm:p-2">
					{isLoading ? (
						<LoadingPage />
					) : (
						<>
							{!data || data.length === 0 ? (
								<span>
									{locale === "it"
										? "Nessun annuncio compatibile trovato. Amplia la ricerca per trovare annunci compatibili."
										: "No compatible listings found. Broaden your search to find compatible listings."}
								</span>
							) : (
								<div className="relative z-0 mx-auto grid max-w-full grid-flow-row grid-cols-1 gap-14 sm:grid-cols-2 sm:gap-6 sm:gap-y-10 lg:grid-cols-3 2xl:grid-cols-4">
									{data.map((annuncio) => (
										<div
											className="flex flex-col justify-center gap-1"
											key={annuncio.codice}
										>
											<CardAnnuncio
												{...annuncio}
												className="outline outline-neutral-500"
												noLink
												onlyFirstImage
											/>
											<div className="flex items-center justify-between gap-2">
												<div className="w-full">
													<AnnuncioDettaglio data={annuncio} />
												</div>
												<div className="w-full">
													{annuncio.alreadyRequested ? (
														<Badge
															className="flex h-9 w-full items-center justify-center gap-2 text-base [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
															variant="success"
														>
															<span>
																{locale === "it"
																	? "Richiesta inviata"
																	: "Request sent"}
															</span>
															<CheckCircle />
														</Badge>
													) : (
														<InteressatoButtonServizio
															annuncioId={annuncio.id}
														/>
													)}
												</div>
											</div>
										</div>
									))}
								</div>
							)}
						</>
					)}
				</div>

				<DialogFooter>
					<DialogClose asChild></DialogClose>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
};