infoalloggi-monorepo/apps/infoalloggi/src/components/chat/chat-topbar.tsx

import { Info, Paperclip, ShoppingBag, User, UserCog } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback } from "react";
import toast from "react-hot-toast";
import { EtichetteDisplayer } from "~/components/etichette";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button, buttonVariants } from "~/components/ui/button";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "~/components/ui/popover";
import { Separator } from "~/components/ui/separator";
import { UserAvatar } from "~/components/user_avatar";
import { cn } from "~/lib/utils";
import { useChatContext } from "~/providers/ChatProvider";
import { api } from "~/utils/api";

export default function ChatTopbar() {
	const { chatId, session, userinfo } = useChatContext();
	const utils = api.useUtils();
	const { mutate: deletechat } = api.chat.deleteChat.useMutation({
		onSuccess: async () => {
			await utils.chat.getActiveChats.invalidate();
			await utils.users.getActiveUsersWithoutChat.invalidate();
			await router.push("/area-riservata/admin/chats/");
		},
	});

	const router = useRouter();
	const { mutate: swap } = api.auth.swapUser.useMutation({
		onSuccess: async () => {
			toast.success("Utente cambiato con successo");
			await router.push("/area-riservata/load-page");
		},
	});

	const handleDeleteChat = useCallback(() => {
		deletechat({ chatId });
	}, [chatId, deletechat]);

	const handleSwapUser = useCallback(() => {
		swap({ id: userinfo.id });
	}, [userinfo, swap]);

	return (
		<div className="flex h-18 w-full items-center justify-between border-b px-4 py-2">
			<div className="flex items-center gap-2">
				{!session.isAdmin ? (
					<Image
						alt="Infoalloggi logo"
						className="size-10 rounded-full"
						height={40}
						src={"/favicon/favicon.png"}
						width={40}
					/>
				) : (
					<UserAvatar
						className="size-10"
						userId={userinfo.id}
						username={userinfo.username}
					/>
				)}
				<div className="flex flex-col gap-1">
					<div className="flex gap-4">
						<span className="font-medium">
							{!session.isAdmin ? "Chat Infoalloggi" : userinfo.username}
						</span>
						{session.isAdmin && <EtichetteDisplayer chatId={chatId} />}
					</div>
				</div>
			</div>


			<div className="flex items-center gap-2">
				<Link
						aria-label="Visualizza Allegati Utente"
						className={cn(
							buttonVariants({ variant: "outline" }),
							"justify-start gap-2",
						)}
						href={`/area-riservata/admin/user-view/allegati/${userinfo.id}`}
					>
						<Paperclip /> Allegati
					</Link>
				{session.isAdmin && (
					<AdminPopover
						handleDeleteChat={handleDeleteChat}
						handleSwapUser={handleSwapUser}
					/>
				)}
			</div>
		</div>
	);
}

const AdminPopover = ({
	handleSwapUser,
	handleDeleteChat,
}: {
	handleSwapUser: () => void;
	handleDeleteChat: () => void;
}) => {
	const { userinfo } = useChatContext();
	return (
		<Popover>
			<PopoverTrigger
				className={cn(
					buttonVariants({ size: "icon", variant: "outline" }),
					"size-10",
					"dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white",
				)}
			>
				<Info className="text-muted-foreground" size={24} />
			</PopoverTrigger>
			<PopoverContent className="mr-4 w-fit px-4">
				<div className="flex flex-col gap-2">
					<Link
						aria-label="Visualizza Profilo Utente"
						className={cn(
							buttonVariants({ variant: "outline" }),
							"justify-start gap-2",
						)}
						href={`/area-riservata/admin/user-view/edit-user/${userinfo.id}`}
					>
						<UserCog /> Profilo
					</Link>

					<Link
						aria-label="Visualizza Ordini Utente"
						className={cn(
							buttonVariants({ variant: "outline" }),
							"justify-start gap-2",
						)}
						href={`/area-riservata/admin/user-view/ordini/${userinfo.id}`}
					>
						<ShoppingBag /> Ordini
					</Link>
					<Link
						aria-label="Visualizza Allegati Utente"
						className={cn(
							buttonVariants({ variant: "outline" }),
							"justify-start gap-2",
						)}
						href={`/area-riservata/admin/user-view/allegati/${userinfo.id}`}
					>
						<Paperclip /> Allegati
					</Link>
					<button
						aria-label="Cambia Utente"
						className={cn(
							buttonVariants({ variant: "outline" }),
							"justify-start gap-2",
						)}
						onClick={handleSwapUser}
						type="button"
					>
						<User /> Login
					</button>
					<Separator />
					<AlertDialog>
						<AlertDialogTrigger asChild>
							<Button size="sm" variant="destructive">
								Cancella Chat
							</Button>
						</AlertDialogTrigger>
						<AlertDialogContent>
							<AlertDialogHeader>
								<AlertDialogTitle>Sei assolutamente sicuro?</AlertDialogTitle>
								<AlertDialogDescription>
									Questa azione non può essere annullata. Questo eliminerà
									definitivamente la chat e rimuoverà i dati dai nostri server.
								</AlertDialogDescription>
							</AlertDialogHeader>
							<AlertDialogFooter>
								<AlertDialogCancel>Annulla</AlertDialogCancel>
								<AlertDialogAction
									aria-label="Continua Eliminazione Chat"
									className={cn(buttonVariants({ variant: "destructive" }))}
									onClick={handleDeleteChat}
								>
									Continua
								</AlertDialogAction>
							</AlertDialogFooter>
						</AlertDialogContent>
					</AlertDialog>
				</div>
			</PopoverContent>
		</Popover>
	);
};