import { Package, PackageCheck, UserCircle } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";
import toast from "react-hot-toast";
import { AnnuncioCard } from "~/components/servizio/annuncio_card";
import { SaldoButton } from "~/components/servizio/interactions";
import { ServizioDuration } from "~/components/servizio/service-duration-display";
import { ServizioActions2 } from "~/components/servizio/servizio_actions";
import { Button } from "~/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "~/components/ui/card";
import { Progress } from "~/components/ui/progress";
import { cn } from "~/lib/utils";
import {
	ServizioAnnuncioProvider,
	useServizio,
} from "~/providers/ServizioProvider";
import { api } from "~/utils/api";
import {
	AnnunciCompatibili,
	AnnunciSelezionati,
} from "./servizio_annunci_accordions";

const ServizioCard = ({
	cardClassName,
	header,
	headerClassName,
	content,
	contentClassName,
}: {
	cardClassName?: string;
	header: React.ReactNode;
	headerClassName?: string;
	content: React.ReactNode;
	contentClassName?: string;
}) => {
	return (
		<Card
			className={cn("gap-2 border-neutral-200 bg-neutral-200", 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 } = 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 });
		},
	});

	const router = useRouter();
	useEffect(() => {
		const id = router.asPath.split("#")[1];
		if (id) {
			document.getElementById(id)?.scrollIntoView({
				behavior: "smooth",
			});
		}
	}, []);

	if (servizio.isInterrotto) {
		return (
			<ServizioCard
				cardClassName="bg-neutral-100 border-neutral-300"
				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 flex-col gap-4">
						<div className="flex flex-wrap gap-3">
							<Link
								aria-label="Attiva Servizio"
								href={`/servizio/onboard/${servizio.servizio_id}`}
							>
								<Button>Procedi all&apos;attivazione</Button>
							</Link>
							{isAdmin && (
								<Button
									onClick={() =>
										updateServizio({
											data: {
												decorrenza: new Date(),
												isOkAcconto: true,
											},
											servizioId: servizio.servizio_id,
										})
									}
									variant="success"
								>
									Attiva Manualmente (Azione Admin)
								</Button>
							)}
						</div>
						{isAdmin && <AnnunciSelezionati annunci={servizio.annunci} />}
					</div>
				}
				header={
					<div className="flex w-full flex-col gap-2">
						<span className="text-foreground/70 text-lg">
							Servizio non attivo
						</span>
						<ServizioActions2 />
					</div>
				}
			/>
		);
	}
	const annuncioConfermato = servizio.annunci.filter(
		(a) => a.accettato_conferma_at !== null,
	);

	if (servizio.isOkSaldo) {
		return (
			<ServizioCard
				content={
					<>
						{annuncioConfermato.map((data) => {
							return (
								<ServizioAnnuncioProvider data={data} key={data.id}>
									<AnnuncioCard />
								</ServizioAnnuncioProvider>
							);
						})}
					</>
				}
				header={
					<>
						<ServizioActions2 />
					</>
				}
			/>
		);
	}

	const openContattiAnnunci = servizio.annunci.filter(
		(a) => a.open_contatti_at !== null && a.user_confirmed_at === null,

	);

	const annunciInConferma = servizio.annunci.filter(
		(a) => a.user_confirmed_at !== null,
	);
	const annunciNotInConferma = servizio.annunci.filter(
		(a) => a.user_confirmed_at === null,
	);

	return (
		<ServizioCard
			content={
				<>
					<div className="flex flex-col gap-2">
						<div className="flex items-center justify-between">
							<div className="flex items-center gap-2">
								<UserCircle className="size-6 text-primary" />
								<span className="font-medium">Contatti sbloccati</span>
							</div>
							<span className="text-sm">{openContattiAnnunci.length} / 10</span>
						</div>
						<Progress className="h-2" value={openContattiAnnunci.length * 10} />
					</div>

					<ServizioDuration decorrenza={servizio.decorrenza} />

					{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:{" "}
											{/** biome-ignore lint/style/noNonNullAssertion: <already checked above> */}
											{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">
						<div className="flex flex-col gap-2 overflow-y-auto">
							{openContattiAnnunci.map((data) => {
								return (
									<ServizioAnnuncioProvider data={data} key={data.id}>
										<AnnuncioCard className="border-2 border-green-500" />
									</ServizioAnnuncioProvider>
								);
							})}
						</div>
						<div className="flex flex-col gap-2 overflow-y-auto">
							{annunciInConferma.map((data) => {
								return (
									<ServizioAnnuncioProvider data={data} key={data.id}>
										<AnnuncioCard className="border-2 border-green-500" />
									</ServizioAnnuncioProvider>
								);
							})}
						</div>

						<div className="flex flex-col items-center gap-4 sm:flex-row">
							<AnnunciSelezionati annunci={annunciNotInConferma} />
							<AnnunciCompatibili />
						</div>
					</div>
				</>
			}
			header={
				<>
					<ServizioActions2 />
				</>
			}
		/>
	);
};