import { add } from "date-fns";
import { ArrowRight, Package, PackageCheck, Trash2 } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";
import toast from "react-hot-toast";
import { SaldoButton } from "~/components/servizio/annuncio_actions";
import {
	AnnuncioCard,
	AnnuncioDisplay,
} from "~/components/servizio/annuncio_card";
import { ServizioActions } from "~/components/servizio/servizio_actions";
import { Button } from "~/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "~/components/ui/card";
import { cn } from "~/lib/utils";
import {
	ServizioAnnuncioProvider,
	useServizio,
} from "~/providers/ServizioProvider";
import { api } from "~/utils/api";
import { Confirm } from "../confirm";
import { AlarmClockSVG } from "../svgs";
import { AnnunciCompatibili } from "./compatibili_dialog";

const ServizioCard = ({
	cardClassName,
	header,
	headerClassName,
	content,
	contentClassName,
}: {
	cardClassName?: string;
	header: React.ReactNode;
	headerClassName?: string;
	content: React.ReactNode;
	contentClassName?: string;
}) => {
	return (
		<Card
			className={cn(
				"gap-0 rounded-none rounded-b-md border-primary border-t-0 pb-0",
				cardClassName,
			)}
		>
			<CardHeader
				className={cn(
					"flex flex-col items-start justify-between gap-3 space-y-0 px-4 pb-8 sm:flex-row",
					headerClassName,
				)}
			>
				{header}
			</CardHeader>
			<CardContent className={cn("space-y-4 p-4 pt-0", contentClassName)}>
				{content}
			</CardContent>
		</Card>
	);
};

export const ServizioContent = () => {
	const { servizio, isAdmin, userId, servizioId } = useServizio();
	const utils = api.useUtils();
	const { mutate: updateServizio } = api.servizio.updateServizio.useMutation({
		onError: (error) => {
			toast.error(error.message);
		},
		onSuccess: async () => {
			toast.success("Servizio modificato con successo");
			await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
			await utils.servizio.getPacksSolution.invalidate({ servizioId });
		},
	});
	const { mutate } = api.servizio.removeAnnuncioServizio.useMutation({
		onError: (error) => {
			console.error(error);
			toast.error("Errore durante la rimozione dell'annuncio");
		},
		onSuccess: async () => {
			await utils.servizio.getAllServizioAnnunci.invalidate({ userId });
			await utils.servizio.getCompatibileAnnunci.invalidate({
				servizioId,
			});
			toast.success("Annuncio rimosso");
		},
	});
	const router = useRouter();
	useEffect(() => {
		const id = router.asPath.split("#")[1];
		if (id) {
			document.getElementById(id)?.scrollIntoView({
				behavior: "smooth",
			});
		}
	}, []);

	if (servizio.isInterrotto) {
		return (
			<ServizioCard
				cardClassName="gap-4"
				content={
					<>
						<p className="font-medium text-lg">Servizio interrotto</p>
						<p>
							Non è possibile riutilizzare questo servizio, poichè è stato
							interrotto.
						</p>
					</>
				}
				header={
					<>
						<div className="flex flex-col gap-4">
							<CardTitle className="flex items-center gap-2 text-xl sm:text-2xl">
								<Package className="size-6 text-primary" />
								Cerco Affitto {servizio.tipologia}
							</CardTitle>

							<CardDescription className="space-y-2 pl-2 text-foreground/70">
								<p>
									aggiunto il{" "}
									{servizio.created_at.toLocaleDateString("it", {
										day: "2-digit",
										month: "2-digit",
										year: "numeric",
									})}
								</p>
							</CardDescription>
						</div>
					</>
				}
			/>
		);
	}

	if (!servizio.isOkAcconto || servizio.decorrenza === null) {
		return (
			<ServizioCard
				content={
					<div className="flex w-full flex-col items-center justify-center gap-4">
						<div className="flex w-full max-w-md flex-col items-center justify-center gap-4 text-center">
							<AlarmClockSVG className="size-46" />
							<h1 className="text-xl">Servizio non ancora attivato</h1>
							<Link
								aria-label="Attiva Servizio"
								className="w-full"
								href={`/servizio/onboard/${servizio.servizio_id}`}
							>
								<Button className="w-full text-lg" variant="success">
									<span>Attiva il Servizio Ora!</span>
									<ArrowRight />
								</Button>
							</Link>

							{isAdmin && (
								<Button
									className="w-full"
									onClick={() =>
										updateServizio({
											data: {
												decorrenza: new Date(),
												isOkAcconto: true,
											},
											servizioId: servizio.servizio_id,
										})
									}
									variant="success"
								>
									Attiva Manualmente (Azione Admin)
								</Button>
							)}
						</div>

						{servizio.annunci.length > 0 && (
							<div className="w-full space-y-2">
								<p>
									Sono già stati selezionati {servizio.annunci.length} annunci
									che potrebbero interessarti.
								</p>
								<div className="grid gap-4 sm:grid-cols-2">
									{servizio.annunci.map((data) => (
										<div className="group relative" key={data.id}>
											<AnnuncioDisplay
												className="bg-[#e6e9ec]/50 dark:bg-card dark:outline dark:outline-foreground/10"
												data={{
													...data,
													modificato_il: data.modificato_il
														? new Date(data.modificato_il)
														: null,
													media_updated_at: data.media_updated_at
														? new Date(data.media_updated_at)
														: null,
												}}
											/>
											{isAdmin && (
												<Confirm
													description="Sei sicuro di voler rimuovere questo annuncio?"
													onConfirm={() => {
														mutate({
															annuncioId: data.annunci_id,
															servizioId: servizio.servizio_id,
														});
													}}
													title="Rimuovi Annuncio"
												>
													<Button
														aria-label="Rimuovi"
														className="absolute top-0 right-0 hidden group-hover:flex"
														size="sm"
														variant="destructive"
													>
														<Trash2 />
													</Button>
												</Confirm>
											)}
										</div>
									))}
									{servizio.annunci.length % 2 === 1 && (
										<div className="hidden 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] sm:block dark:[--pattern-fg:#e1e1e1]" />
									)}
								</div>
							</div>
						)}
					</div>
				}
				contentClassName={cn(!isAdmin && "gap-0")}
				header={
					<div className="flex w-full flex-col gap-2">
						<ServizioActions />
					</div>
				}
				headerClassName={cn(!isAdmin && "pb-0")}
			/>
		);
	}

	if (
		new Date() >
			add(servizio.decorrenza, {
				days: 60,
			}) &&
		!servizio.isOkSaldo
	) {
		return (
			<ServizioCard
				cardClassName="gap-4"
				content={
					<>
						<p className="font-medium text-lg">Servizio Scaduto</p>
						<p>
							Non è possibile riutilizzare questo servizio, poichè il periodo di
							scelta degli annunci è scaduto (60 giorni dalla data di
							decorrenza) e non è stato confermato nessun immobile.
						</p>
					</>
				}
				header={
					<>
						<ServizioActions />
					</>
				}
				headerClassName="pb-0"
			/>
		);
	}

	const annuncioConfermato = servizio.annunci.filter(
		(a) => a.accettato_conferma_at !== null,
	);

	if (servizio.isOkSaldo && annuncioConfermato.length > 0) {
		return (
			<ServizioCard
				content={
					<>
						{annuncioConfermato.map((data) => {
							return (
								<ServizioAnnuncioProvider
									data={data}
									key={data.id}
									servizioId={servizio.servizio_id}
									userId={userId}
								>
									<AnnuncioCard className="max-w-4xl rounded-md border-primary" />
								</ServizioAnnuncioProvider>
							);
						})}
					</>
				}
				header={
					<>
						<ServizioActions />
					</>
				}
			/>
		);
	}

	return (
		<ServizioCard
			cardClassName="gap-y-2"
			content={
				<>
					{annuncioConfermato.length > 0 && (
						<div className="flex flex-col gap-2">
							<div className="flex items-center gap-2">
								<PackageCheck className="size-6 text-primary" />
								<span className="font-medium">Saldi in attesa:</span>
							</div>
							{servizio.annunci
								.filter((a) => a.accettato_conferma_at !== null)
								.map((a) => (
									<div
										className="flex items-center gap-2 rounded-md bg-sky-400 p-2"
										key={a.annunci_id}
									>
										<h3>
											{a.codice} - confermato il:{" "}
											{a.accettato_conferma_at &&
												new Date(a.accettato_conferma_at).toLocaleDateString(
													"it",
													{
														day: "2-digit",
														hour: "2-digit",
														minute: "2-digit",
														month: "2-digit",
														year: "numeric",
													},
												)}
										</h3>
										<SaldoButton
											annuncioId={a.annunci_id}
											className="border-none"
											variant={"outline"}
										/>
									</div>
								))}
						</div>
					)}
					<div className="flex flex-col gap-4">
						{servizio.annunci.map((data) => {
							return (
								<ServizioAnnuncioProvider
									data={data}
									key={data.id}
									servizioId={servizio.servizio_id}
									userId={userId}
								>
									<AnnuncioCard className="max-w-4xl rounded-md border-primary" />
								</ServizioAnnuncioProvider>
							);
						})}

						<div className="flex items-center justify-center">
							<AnnunciCompatibili />
						</div>
					</div>
				</>
			}
			header={
				<>
					<ServizioActions />
				</>
			}
			headerClassName="pb-0"
		/>
	);
};
