import { format } from "date-fns";
import { Waypoints } from "lucide-react";
import Link from "next/link";
import { Button, type ButtonProps } from "~/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "~/components/ui/dialog";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "~/components/ui/table";
import { UserAvatar } from "~/components/user_avatar";
import { cn } from "~/lib/utils";
import type { AnnunciId } from "~/schemas/public/Annunci";
import { api } from "~/utils/api";

export const IncrociDialog = ({
	annuncioId,
	props,
}: {
	annuncioId: AnnunciId;
	props?: ButtonProps;
}) => {
	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button
					className={cn("w-full", props?.className)}
					variant={props?.variant || "info"}
					{...props}
				>
					<Waypoints /> Incroci
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-4xl">
				<DialogHeader>
					<DialogTitle>Lista Incroci</DialogTitle>
					<DialogDescription>
						Lista utenti che hanno ricevuto i contatti di questo annuncio
					</DialogDescription>
				</DialogHeader>
				<div className="max-h-[50vh] w-full overflow-auto">
					<IncrociTable annuncioId={annuncioId} />
				</div>
			</DialogContent>
		</Dialog>
	);
};

const IncrociTable = ({ annuncioId }: { annuncioId: AnnunciId }) => {
	const { data: incroci, isLoading } = api.annunci.getIncrociAnnuncio.useQuery({
		annuncioId,
	});

	return (
		<Table>
			<TableHeader>
				<TableRow>
					<TableHead>Utente</TableHead>
					<TableHead>Data</TableHead>
					<TableHead>Note</TableHead>
				</TableRow>
			</TableHeader>
			<TableBody>
				{isLoading ? (
					<p>Caricamento...</p>
				) : (
					incroci?.map((incrocio) => (
						<TableRow key={incrocio.servizio_id}>
							<TableCell>
								<Link
									aria-label="Visualizza Utente"
									className="flex items-center gap-2"
									href={`/area-riservata/admin/user-view/ricerca/${incrocio.user_id}`}
								>
									<UserAvatar
										className="size-8"
										userId={incrocio.user_id}
										username={incrocio.username}
									/>
									<span className="font-semibold text-sm">
										{incrocio.username}
									</span>
								</Link>
							</TableCell>
							<TableCell>
								<div>
									<p>
										Aggiunto: {format(incrocio.created_at, "dd/MM/yyyy HH:mm")}
									</p>
									<p>
										Aperto:{" "}
										{incrocio.open_contatti_at
											? format(incrocio.open_contatti_at, "dd/MM/yyyy HH:mm")
											: "Non aperto"}
									</p>
								</div>
							</TableCell>
							<TableCell className="whitespace-pre-wrap">
								{incrocio.note}
							</TableCell>
						</TableRow>
					))
				)}
			</TableBody>
		</Table>
	);
};