import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
import { IconButton } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { useDeleteCharacter } from "@/hooks/aiUser";
import { useState } from "react";
import { useAIUser } from "../context/aiUser";
import { useParams, useRouter } from "next/navigation";
import { useNimChat, useNimConversation, useNimMsgContext } from "@/context/NimChat/useNimChat";

const UserActionDropdown = () => {
  const router = useRouter();
  const [isDeleteCharacterDialogOpen, setIsDeleteCharacterDialogOpen] = useState(false);
  const { userId, isOwner } = useAIUser();
  const { removeConversationById } = useNimConversation();
  const { clearHistoryMessage } = useNimMsgContext();
  const { nim } = useNimChat();

  
  const { mutate: deleteCharacter, isPending: isDeleteCharacterLoading } = useDeleteCharacter({ aiId: Number(userId) });

  const handleDeleteCharacter = () => {
    setIsDeleteCharacterDialogOpen(true);
  }

  const handleDeleteCharacterConfirm = async () => {
    const conversationId = await nim.V2NIMConversationIdUtil.p2pConversationId(`${userId}@r@t` as string);
    await removeConversationById(conversationId);
    await clearHistoryMessage(conversationId);
    await deleteCharacter({ aiId: Number(userId) });
    router.replace('/profile');
  }

  if (!isOwner) return null;

  return (
    <>
      <div className="absolute top-0 right-0 left-0">
        <div className="max-w-[1120px] mx-auto px-6">
          <div className="w-full relative">
            <div className="absolute top-0 right-0">
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <IconButton iconfont="icon-More" size="large" variant="tertiaryDark" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onClick={handleDeleteCharacter}>
                    <i className="iconfont icon-trashcan !text-[16px] leading-none" />
                    <span>Delete Character</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </div>

      <AlertDialog open={isDeleteCharacterDialogOpen} onOpenChange={setIsDeleteCharacterDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Character</AlertDialogTitle>
          </AlertDialogHeader>
          <AlertDialogDescription>
            Once deleted, the character cannot be restored. To ensure a good user experience, users who have previously chatted with or made purchases for this character will still be able to interact with them.
          </AlertDialogDescription>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction variant="destructive" loading={isDeleteCharacterLoading} onClick={handleDeleteCharacterConfirm}>Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}
 
export default UserActionDropdown;