import { CircleCheck, ExternalLink, Trash2 } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import toast from "react-hot-toast";
import { getStorageUrl } from "~/lib/storage_utils";
import { useSession } from "~/providers/SessionProvider";
import type { UsersId } from "~/schemas/public/Users";
import type { UsersStorageUserStorageId } from "~/schemas/public/UsersStorage";
import type { CompleteUserData } from "~/server/services/user.service";
import { api } from "~/utils/api";
import { Confirm } from "../confirm";
import { LoadingPage } from "../loading";
import { LoadingSpinner } from "../spinner";
import { Button } from "../ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "../ui/card";
import { UploadModal } from "../upload_modal";

export const DocumentiPersonali = ({
	userData,
}: {
	userData: CompleteUserData;
}) => {
	const utils = api.useUtils();
	const { mutate, isPending } = api.users.editUserAnagrafica.useMutation({
		onSuccess: async () => {
			await utils.users.getClientProfilo.invalidate({
				userId: userData.id,
			});
		},
		onError: (err) => {
			toast.error(`Errore aggiornamento servizio: ${err.message}`);
		},
	});
	const handleUpload = (
		field: "doc_personale_fronte_ref" | "doc_personale_retro_ref",
		id: UsersStorageUserStorageId,
	) => {
		mutate({
			userId: userData.id,
			data: { [field]: id },
		});
	};

	const { user } = useSession();
	if (!user) return null;
	if (isPending) return <LoadingPage />;

	return (
		<Card>
			<CardHeader>
				<CardTitle>Documenti personali</CardTitle>
				<CardDescription>
					<p>I tuoi documenti sono necessari per usufruire del servizio.</p>
					<p>
						Nel caso di un unico documento (es: scansione fronte e retro del
						documento) caricarlo 2 volte.
					</p>
				</CardDescription>
			</CardHeader>
			<CardContent>
				<div className="flex flex-col gap-4">
					<DocumentiUploadSection
						document={userData.doc_personale_fronte}
						isAdmin={user.isAdmin}
						isPending={isPending}
						onRemove={() =>
							mutate({
								userId: userData.id,
								data: { doc_personale_fronte_ref: null },
							})
						}
						onUpload={(id) => handleUpload("doc_personale_fronte_ref", id)}
						title="Documento d'identità - Fronte"
						userId={userData.id}
					/>

					<DocumentiUploadSection
						document={userData.doc_personale_retro}
						isAdmin={user.isAdmin}
						isPending={isPending}
						onRemove={() =>
							mutate({
								userId: userData.id,
								data: { doc_personale_retro_ref: null },
							})
						}
						onUpload={(id) => handleUpload("doc_personale_retro_ref", id)}
						title="Documento d'identità - Retro"
						userId={userData.id}
					/>
				</div>
			</CardContent>
			<CardFooter>
				<p className="text-muted-foreground text-sm">
					I tuoi dati saranno conservati solamente per la durata del servizio,
					in conformità con la nostra{" "}
					<Link className="underline" href="/privacy-policy" target="_blank">
						Informativa sulla Privacy
					</Link>
				</p>
			</CardFooter>
		</Card>
	);
};

export const DocumentiUploadSection = ({
	title,
	document,
	onUpload,
	onRemove,
	isAdmin,
	userId,
	isPending,
	caricatoNote,
}: {
	title: string;
	document: {
		storageId: string;
		ref: UsersStorageUserStorageId | null;
	} | null;
	onUpload: (id: UsersStorageUserStorageId) => void;
	onRemove?: () => void;
	isAdmin: boolean;
	userId: UsersId;
	isPending: boolean;
	caricatoNote?: boolean;
}) => {
	if (document?.storageId) {
		return (
			<div className="flex flex-col gap-2">
				<h4 className="font-medium">{title}</h4>
				{caricatoNote && (
					<div className="flex items-center gap-2 text-green-500">
						<CircleCheck className="size-5" />
						<span>Documento caricato</span>
					</div>
				)}
				<div className="flex items-center gap-4">
					{isPending ? (
						<LoadingSpinner className="size-24 stroke-neutral-300" />
					) : (
						<Image
							alt={title}
							className="size-24 rounded-md border object-cover"
							height={96}
							src={getStorageUrl({
								storageId: document.storageId,
							})}
							width={96}
						/>
					)}
					<div className="flex flex-col justify-center gap-2">
						<Link
							href={`/area-riservata/allegato-view/${document.storageId}`}
							target="_blank"
						>
							<Button size="sm" variant="outline">
								<span>Visualizza</span>
								<ExternalLink className="size-4" />
							</Button>
						</Link>
						{onRemove && (
							<Confirm
								description="Sei sicuro di voler eliminare il documento?"
								onConfirm={onRemove}
								title="Elimina Documento"
							>
								<Button
									aria-label="Elimina documento"
									disabled={isPending}
									size="sm"
									variant="destructive"
								>
									<span>Rimuovi</span>
									<Trash2 className="size-4" />
								</Button>
							</Confirm>
						)}
					</div>
				</div>
			</div>
		);
	}

	return (
		<div className="flex flex-col gap-2">
			<h4 className="font-medium">{title}</h4>
			<UploadModal
				cb_onUpload={({ userStorageIds }) => {
					const id = userStorageIds[0];
					if (id) onUpload(id);
				}}
				isAdmin={isAdmin}
				maxFiles={1}
				userId={userId}
			/>
		</div>
	);
};
