import {
	FileBadge,
	FileText,
	FolderKanban,
	Info,
	Mail,
	PackageCheck,
	Pointer,
	Printer,
	Trash2,
	Wrench,
} from "lucide-react";
import Link from "next/link";
import toast from "react-hot-toast";
import {
	AlertDialog,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button, type ButtonConfigs } from "~/components/ui/button";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "~/components/ui/tooltip";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import { useServizio, useServizioAnnuncio } from "~/providers/ServizioProvider";
import type { AnnunciId } from "~/schemas/public/Annunci";
import OrderTypeEnum from "~/schemas/public/OrderTypeEnum";
import { api } from "~/utils/api";
import { Confirm } from "../confirm";
import { AdminLavoraConferma } from "./admin_conferma";
import { AdminContratto } from "./admin_contratto";
import { ConfermaAnnuncioModal, ConfermaInLavorazioneModal } from "./conferma";
import { ContattiProprietarioModal } from "./modale_contatti";

export const AdminActions = () => {
	const { servizioId, isAdmin } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();

	const utils = api.useUtils();
	const { mutate } = api.servizio.removeAnnuncioServizio.useMutation({
		onError: (error) => {
			console.error(error);
			toast.error("Errore durante la rimozione dell'annuncio");
		},
		onSuccess: async () => {
			await utils.servizio.invalidate();
			toast.success("Annuncio rimosso");
		},
	});
	if (!isAdmin) return null;

	return (
		<>
			<h3 className="ml-1 font-semibold">Azioni Admin:</h3>
			<div className="flex w-full max-w-fit flex-wrap justify-start gap-3">
				<AdminAnnuncioContatti />
				<AdminSendScheda />
				{data.user_confirmed_at != null && <AdminLavoraConferma />}
				{data.accettato_conferma_at != null && (
					<>
						<AdminContratto />
						{data.gestionale_id && (
							<Link
								aria-label="Open Gestionale"
								href={`https://win-jk822fggr6b:480/id/${data.gestionale_id}`}
								target="_blank"
							>
								<Button size="sm">
									<FolderKanban /> Gestionale
								</Button>
							</Link>
						)}
					</>
				)}
				{/* <Link href={`/annuncio/${data.codice}`} target="_blank">
				<Button size="sm" type="button" variant="outline">
					<Eye /> pubblica
				</Button>
			</Link> */}
				<Link
					href={`/area-riservata/admin/edit-annuncio/${annuncioId}`}
					target="_blank"
				>
					<Button
						aria-label="Edit Annuncio"
						className="w-fit"
						size="sm"
						variant="secondary"
					>
						<Wrench />
						<span>Modifica Annuncio</span>
					</Button>
				</Link>

				<Link
					href={`/area-riservata/scheda-annuncio-stampa/${data.id}`}
					target="_blank"
				>
					<Button size="sm" type="button" variant="outline">
						<Printer /> Scheda
					</Button>
				</Link>

				<Confirm
					description="Sei sicuro di voler eliminare l'annuncio?"
					onConfirm={() => {
						mutate({
							annuncioId,
							servizioId,
						});
					}}
					title="Elimina annuncio"
				>
					<Button
						aria-label="Delete Annuncio"
						className="w-fit"
						size="sm"
						variant="destructive"
					>
						<Trash2 />
						<span>Elimina</span>
					</Button>
				</Confirm>
			</div>
		</>
	);
};

const AdminSendScheda = () => {
	const { userId } = useServizio();
	const { annuncioId } = useServizioAnnuncio();

	const { mutate } = api.comunicazioni.sendSchedaAnnuncioServizio.useMutation({
		onMutate: () => {
			toast.loading("Invio email in corso...", {
				id: "send-scheda-annuncio-email",
			});
		},
		onSuccess: () => {
			toast.success("Email inviata con successo!", {
				id: "send-scheda-annuncio-email",
			});
		},
		onError: (error) => {
			toast.error(`Errore durante l'invio dell'email: ${error.message}`, {
				id: "send-scheda-annuncio-email",
			});
		},
	});

	return (
		<Confirm
			description="Sei sicuro di voler inviare l'email con la scheda dell'annuncio?"
			onConfirm={() => {
				mutate({
					annuncioId,
					userId,
				});
			}}
			title="Invia email scheda"
		>
			<Button className="w-fit" size="sm" variant="outline">
				<Mail />
				<span>Invia Scheda</span>
			</Button>
		</Confirm>
	);
};

export const UserActions = () => {
	const { servizioId } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();
	const { locale } = useTranslation();
	const ContattiSbloccati = data.open_contatti_at !== null;
	const ConfermaUtente = data.user_confirmed_at !== null;
	const ConfermaLavorata = data.doc_conferma_added && data.hasConfermaAdmin;
	const AccettatoConferma = data.accettato_conferma_at !== null;

	return (
		<>
			<div className="flex w-full flex-col flex-wrap gap-2 sm:flex-row">
				<ContattiProprietarioModal />
				{ConfermaUtente
					? !data.hasConfermaAdmin && <ConfermaInLavorazioneModal />
					: ContattiSbloccati && <ConfermaAnnuncioModal />}

				{AccettatoConferma ? (
					<Link
						aria-label={
							locale === "it" ? "Rivedi la conferma" : "Review the confirmation"
						}
						href={`/servizio/riapri-conferma/${servizioId}/${annuncioId}`}
					>
						<Button className="w-full sm:w-fit" variant="success">
							<Pointer />
							{locale === "it"
								? "Rivedi la conferma"
								: "Review the confirmation"}
						</Button>
					</Link>
				) : (
					ConfermaLavorata &&
					(data.doc_conferma_ref ? (
						<Link
							aria-label={locale === "it" ? "Confermato" : "Confirmed"}
							href={`/servizio/conferma-immobile/${servizioId}/${annuncioId}`}
						>
							<Button className="w-full sm:w-fit" variant="success">
								<Pointer />
								{locale === "it"
									? "Confermato - Procedi ora"
									: "Confirmed - Proceed now"}
							</Button>
						</Link>
					) : (
						<TooltipProvider delayDuration={0}>
							<Tooltip>
								<TooltipTrigger asChild>
									<Button
										className="w-full cursor-not-allowed opacity-50 sm:w-fit"
										variant="success"
									>
										<Pointer />
										{locale === "it"
											? "Confermato - Procedi ora"
											: "Confirmed - Proceed now"}
									</Button>
								</TooltipTrigger>
								<TooltipContent>
									<p>
										{locale === "it"
											? "Il documento non è più disponibile"
											: "The document is no longer available"}
									</p>
									<p>
										{locale === "it"
											? "Se hai bisogno di una copia, contattaci via email o chat."
											: "If you need a copy, contact us via email or chat."}
									</p>
								</TooltipContent>
							</Tooltip>
						</TooltipProvider>
					))
				)}
			</div>

			{data.accettato_conferma_at != null && <PostConfermaSection />}
		</>
	);
};
const AdminAnnuncioContatti = () => {
	const { data } = useServizioAnnuncio();
	const { data: annuncio, isLoading } = api.annunci.getAnnuncioFull.useQuery({
		id: data.id,
	});
	return (
		<AlertDialog>
			<AlertDialogTrigger asChild>
				<Button size="sm" variant="outline">
					<Info />
					<span>Dati Contatto</span>
				</Button>
			</AlertDialogTrigger>
			<AlertDialogContent>
				<AlertDialogHeader>
					<AlertDialogTitle>Contatti Annuncio {data.codice}</AlertDialogTitle>
					<AlertDialogDescription className="sr-only">
						desc
					</AlertDialogDescription>
				</AlertDialogHeader>
				<div className="flex w-full flex-col gap-4">
					<div>
						<span className="font-semibold">Contatti Aperti il: </span>
						{data.open_contatti_at
							? new Date(data.open_contatti_at).toLocaleString("it-IT")
							: "Non ancora aperti"}
					</div>
					{isLoading ? (
						<div className="flex h-24 w-full items-center justify-center">
							Loading...
						</div>
					) : (
						<>
							<div>
								<span className="font-semibold">Locatore/Incaricato: </span>
								{annuncio?.locatore || "N/A"}
							</div>
							<div>
								<span className="font-semibold">Email: </span>
								{annuncio?.email || "N/A"}
							</div>
							<div>
								<span className="font-semibold">Telefono: </span>
								{annuncio?.numero || "N/A"}
							</div>
						</>
					)}
				</div>
				<AlertDialogFooter>
					<AlertDialogCancel>Chiudi</AlertDialogCancel>
				</AlertDialogFooter>
			</AlertDialogContent>
		</AlertDialog>
	);
};

const PostConfermaSection = () => {
	const { servizio, servizioId } = useServizio();
	const { data, annuncioId } = useServizioAnnuncio();
	const { locale } = useTranslation();
	const saldoPaid = servizio.isOkSaldo;
	const consulenzaPaid = servizio.isOkConsulenza;

	const doc_non_disponibile =
		locale === "it"
			? "Il documento non è più disponibile"
			: "The document is no longer available";
	const contatta_supporto =
		locale === "it"
			? "Se hai bisogno di una copia, contattaci via email o chat."
			: "If you need a copy, contact us via email or chat.";

	if (!saldoPaid) {
		return (
			<div className="flex flex-col gap-1">
				<h3 className="font-semibold">
					{locale === "it"
						? "Questo annuncio è stato confermato, procedi al saldo:"
						: "This listing has been confirmed, proceed to payment:"}
				</h3>
				<SaldoButton annuncioId={annuncioId} />
			</div>
		);
	}
	if (!data.doc_contratto_added) {
		return (
			<div className="flex flex-col gap-1 rounded-md border border-card bg-card p-4">
				<h3 className="font-semibold text-green-500">
					{locale === "it"
						? "Ci siamo quasi! Stiamo preparando il contratto per te."
						: "Almost there! We are preparing the contract for you."}
				</h3>
				<h3 className="font-semibold">
					{locale === "it"
						? "Una volta pronto, riceverai una notifica via email."
						: "Once ready, you will receive a notification via email."}
				</h3>
			</div>
		);
	}

	return (
		<div className="flex flex-col gap-2">
			<h3 className="font-semibold">
				{consulenzaPaid
					? locale === "it"
						? "Il contratto è pronto, puoi visualizzarlo:"
						: "The contract is ready, you can view it:"
					: locale === "it"
						? "Il contratto è pronto, puoi visualizzarlo e procedere al saldo:"
						: "The contract is ready, you can view it and proceed to payment:"}
			</h3>
			<div className="flex w-full flex-wrap gap-2">
				{data.doc_contratto_ref ? (
					<Link
						aria-label={
							locale === "it" ? "Visualizza contratto" : "View contract"
						}
						className="w-full sm:w-fit"
						href={`/servizio/contratto/${servizioId}/${annuncioId}`}
						target="_blank"
					>
						<Button className="w-full">
							<FileText />
							{locale === "it"
								? "Visualizza il contratto"
								: "View the contract"}
						</Button>
					</Link>
				) : (
					<TooltipProvider delayDuration={0}>
						<Tooltip>
							<TooltipTrigger asChild>
								<Button className="w-fit cursor-not-allowed opacity-50">
									<FileText />
									{locale === "it"
										? "Visualizza il contratto"
										: "View the contract"}
								</Button>
							</TooltipTrigger>
							<TooltipContent>
								<p>{doc_non_disponibile}</p>
								<p>{contatta_supporto}</p>
							</TooltipContent>
						</Tooltip>
					</TooltipProvider>
				)}

				{!consulenzaPaid &&
					servizio.ordini.some(
						(o) => o.type === OrderTypeEnum.Consulenza && !o.isActive,
					) &&
					data.contratto_tipo && <SaldoConsulenzaButton />}

				{data.doc_registrazione_added &&
					(data.doc_registrazione_ref ? (
						<Link
							aria-label={
								locale === "it" ? "Visualizza registrazione" : "View recording"
							}
							className="w-full sm:w-fit"
							href={`/servizio/contratto-registrazione/${servizioId}/${annuncioId}`}
							target="_blank"
						>
							<Button className="w-full">
								<FileBadge />
								{locale === "it"
									? "Visualizza la registrazione"
									: "View the recording"}
							</Button>
						</Link>
					) : (
						<TooltipProvider delayDuration={0}>
							<Tooltip>
								<TooltipTrigger asChild>
									<Button className="w-fit cursor-not-allowed opacity-50">
										<FileBadge />
										{locale === "it"
											? "Visualizza la registrazione"
											: "View the recording"}
									</Button>
								</TooltipTrigger>
								<TooltipContent>
									<p>{doc_non_disponibile}</p>
									<p>{contatta_supporto}</p>
								</TooltipContent>
							</Tooltip>
						</TooltipProvider>
					))}
			</div>
		</div>
	);
};

export const SaldoButton = ({
	variant = "info",
	className,
}: {
	annuncioId: AnnunciId;
	variant?: ButtonConfigs["variant"];
	className?: string;
}) => {
	const { locale } = useTranslation();
	const { servizioId } = useServizio();

	return (
		<Link
			className="w-full sm:w-fit"
			href={`/servizio/pagamento/${servizioId}?type=${OrderTypeEnum.Saldo}`}
		>
			<Button
				aria-label={locale === "it" ? "Procedi al saldo" : "Proceed to payment"}
				className={cn("w-full", className)}
				variant={variant}
			>
				<PackageCheck />
				{locale === "it" ? "Procedi al saldo" : "Proceed to payment"}
			</Button>
		</Link>
	);
};

const SaldoConsulenzaButton = ({
	variant = "info",
	className,
}: {
	variant?: ButtonConfigs["variant"];
	className?: string;
}) => {
	const { locale } = useTranslation();
	const { servizioId } = useServizio();

	return (
		<Link
			className="w-full sm:w-fit"
			href={`/servizio/pagamento/${servizioId}?type=${OrderTypeEnum.Consulenza}`}
		>
			<Button
				aria-label={
					locale === "it"
						? "Procedi al saldo consulenza"
						: "Proceed to payment for the consultation"
				}
				className={cn("w-full", className)}
				variant={variant}
			>
				<PackageCheck />
				{locale === "it"
					? "Procedi al saldo della consulenza"
					: "Proceed to payment for the consultation"}
			</Button>
		</Link>
	);
};