"use client";
import {
  Info,
  Paperclip,
  ShieldUser,
  ShoppingBag,
  User,
  UserCog,
} from "lucide-react";
import Link from "next/link";
import { cn } from "~/lib/utils";
import { Button, buttonVariants } from "~/components/ui/button";
import Image from "next/image";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "~/components/ui/popover";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertDialogCancel,
  AlertDialogAction,
} from "~/components/ui/alert-dialog";
import { api } from "~/utils/api";
import { useRouter } from "next/router";
import toast from "react-hot-toast";
import { Separator } from "~/components/ui/separator";
import { EtichetteDisplayer } from "~/components/etichette";
import type { Session } from "~/server/api/trpc";
import type { ChatUserInfo } from "~/server/services/chat.service";
import type { ChatsChatid } from "~/schemas/public/Chats";
import type { OnlineStatus } from "~/server/sse";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "~/components/ui/tooltip";
import { useCallback } from "react";
import { UserAvatar } from "~/components/user_avatar";

type ChatTopbarProps = {
  chatId: ChatsChatid;
  userData: Session;
  chatUserData: ChatUserInfo;
  onlineStatus: OnlineStatus[];
};
export default function ChatTopbar({
  chatId,
  userData,
  chatUserData,
  onlineStatus,
}: ChatTopbarProps) {
  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/dashboard");
      router.reload();
    },
  });

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

  const handleSwapUser = useCallback(() => {
    swap({ id: chatUserData.id });
  }, [chatUserData, 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">
        {!userData.isAdmin ? (
          <Image
            src={"/favicon/favicon.png"}
            alt="Infoalloggi logo"
            width={40}
            height={40}
            className="size-10 rounded-full"
          />
        ) : (
          <UserAvatar
            className="size-10"
            username={chatUserData.username}
            userId={chatUserData.id}
          />
        )}
        <div className="flex flex-col gap-1">
          <div className="flex gap-4">
            <span className="font-medium">
              {!userData.isAdmin ? "Chat Infoalloggi" : chatUserData.username}
            </span>
            {userData.isAdmin && <EtichetteDisplayer chatId={chatId} />}
          </div>
          <div className="flex flex-row items-center gap-2">
            <UserStatus onlineStatus={onlineStatus} userData={userData} />
          </div>
        </div>
      </div>

      <div>
        {userData.isAdmin && (
          <AdminPopover
            chatUserData={chatUserData}
            handleSwapUser={handleSwapUser}
            handleDeleteChat={handleDeleteChat}
          />
        )}
      </div>
    </div>
  );
}

const UserStatus = ({
  onlineStatus,
  userData,
}: {
  onlineStatus: OnlineStatus[];
  userData: Session;
}) => (
  <div className="flex flex-row items-center gap-2">
    {onlineStatus.map((user, idx) =>
      user.isAdmin ? (
        <TooltipProvider key={idx} delayDuration={0}>
          <Tooltip>
            <TooltipTrigger>
              <span
                className={cn(
                  "flex flex-row items-center text-xs font-bold text-green-500",
                )}
              >
                <ShieldUser size={15} className="mr-[0.2rem]" />
                <span>
                  {user.nome}
                  {idx < onlineStatus.length - 1 && ","}
                </span>
              </span>
            </TooltipTrigger>
            <TooltipContent>
              <p>Admin Infoalloggi</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      ) : (
        <span
          key={idx}
          className={cn("flex flex-row text-xs font-bold text-green-500")}
        >
          <span>
            {user.nome}
            {!userData.isAdmin && " (Tu)"}
            {idx < onlineStatus.length - 1 && ", "}
          </span>
        </span>
      ),
    )}
  </div>
);

const AdminPopover = ({
  chatUserData,
  handleSwapUser,
  handleDeleteChat,
}: {
  chatUserData: ChatUserInfo;
  handleSwapUser: () => void;
  handleDeleteChat: () => void;
}) => (
  <Popover>
    <PopoverTrigger
      className={cn(
        buttonVariants({ variant: "outline", size: "icon" }),
        "size-10",
        "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white",
      )}
    >
      <Info size={24} className="text-muted-foreground" />
    </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/${chatUserData.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/${chatUserData.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/${chatUserData.id}`}
        >
          <Paperclip /> Allegati
        </Link>
        <button
          aria-label="Cambia Utente"
          className={cn(
            buttonVariants({ variant: "outline" }),
            "justify-start gap-2",
          )}
          type="button"
          onClick={handleSwapUser}
        >
          <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>
);