import { ArrowRight, Package, PackageCheck } 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 { 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 { AnnunciCompatibili } from "./compatibili_dialog";
import {
	AnnunciSelezionatiAccordion,
	AnnunciSelezionatiDialog,
} 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 rounded-none rounded-b-md border-primary border-t-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 } = 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 variant="success">
									<span>Attiva il Servizio Ora!</span>
									<ArrowRight />
								</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 && <AnnunciSelezionatiDialog annunci={servizio.annunci} />}
					</div>
				}
				header={
					<div className="flex w-full flex-col gap-2">
						<span className="text-lg">Servizio non ancora attivato</span>
						<ServizioActions />
					</div>
				}
			/>
		);
	}
	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 />
								</ServizioAnnuncioProvider>
							);
						})}
					</>
				}
				header={
					<>
						<ServizioActions />
					</>
				}
			/>
		);
	}

	const annunciSelezionati = servizio.annunci.filter(
		(a) => a.user_confirmed_at === null,
	);

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

	return (
		<ServizioCard
			content={
				<>
					{/* <div className="flex w-full flex-col gap-8 sm:flex-row sm:items-start">
						<div className="flex flex-2 flex-col gap-2 sm:max-w-1/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>
						<div className="flex flex-col flex-wrap gap-2 sm:flex-row sm:items-center">
							<div className="flex items-center gap-2">
								<CalendarClock className="size-6 text-primary" />
								<span className="font-medium">Durata servizio:</span>
							</div>
							<span>
								{`${new Date(servizio.decorrenza).toLocaleDateString("it-IT")} - ${new Date(add(servizio.decorrenza, { days: 60 })).toLocaleDateString("it-IT")}`}
							</span>
						</div>
					</div> */}
					{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">
						<div className="flex flex-col gap-2 overflow-y-auto">
							{annunciInConferma.map((data) => {
								return (
									<ServizioAnnuncioProvider
										data={data}
										key={data.id}
										servizioId={servizio.servizio_id}
										userId={userId}
									>
										<AnnuncioCard className="border-2 border-green-500" />
									</ServizioAnnuncioProvider>
								);
							})}
						</div>
						{annunciSelezionati.length > 0 && (
							<AnnunciSelezionatiAccordion annunci={annunciSelezionati} />
						)}
						<div className="flex items-center justify-center">
							<AnnunciCompatibili />
						</div>
					</div>
				</>
			}
			header={
				<>
					<ServizioActions />
				</>
			}
			headerClassName="pb-0"
		/>
	);
};