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="mx-auto max-w-[1120px] px-6">
          <div className="relative w-full">
            <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