import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
import { IconButton } from "@/components/ui/button";
import { CreateFormData, EditFormData, useEditFormStorage, useGetAI } from "@/hooks/create";
import dayjs from "dayjs";
import { useParams, useRouter } from "next/navigation";
import { useState } from "react";

const CloseIconButton = () => {
  const { aiId } = useParams<{ aiId: string }>()
  const router = useRouter();
  const { clearFormData, getFormData } = useEditFormStorage()
  const [isOpen, setIsOpen] = useState(false);
  const { data: ai } = useGetAI(Number(aiId));

  // 对比表单数据和AI数据是否有差异
  const compareFormDataWithAI = () => {
    if (!ai) return false;
    
    const formData = JSON.parse(getFormData() || '{}') as EditFormData
    const { type, character, dialogue, image } = formData || {};
    
    // 对比 type 数据
    const typeChanged = type && (
      type.roleCode !== ai.roleCode ||
      type.characterCode !== ai.characterCode ||
      type.tagCode !== ai.tagCode
    )
    
    // 对比 character 数据
    const characterChanged = character && (
      character.nickname !== ai.nickname ||
      character.sex !== ai.sex ||
      character.birthday !== dayjs(ai.birthday).format("YYYY-MM-DD") ||
      character.aiUserExt?.userProfile !== ai.aiUserExt?.userProfile
    )

    
    // 对比 dialogue 数据
    const dialogueChanged = dialogue && (
      dialogue.aiUserExt?.userDialogueStyle !== ai.aiUserExt?.userDialogueStyle ||
      dialogue.aiUserExt?.prologue !== ai.aiUserExt?.dialoguePrologue ||
      dialogue.aiUserExt?.voice?.tone !== ai.aiUserExt?.dialoguePitch ||
      dialogue.aiUserExt?.voice?.speed !== ai.aiUserExt?.dialogueSpeechRate
    )

    console.log(dialogue, ai)
    
    // 对比 image 数据
    const imageChanged = image && (
      image.imageUrl !== ai.imageUrl ||
      image.avatarUrl !== ai.headImg ||
      image.intro !== ai.introduction ||
      image.imageDesc !== ai.aiUserExt?.imageDesc
    )
    
    console.log(typeChanged, characterChanged, dialogueChanged, imageChanged)
    return Boolean(typeChanged || characterChanged || dialogueChanged || imageChanged)
  }

  // 判断是否需要弹窗
  const isNeedAlert = () => {
    return compareFormDataWithAI()
  }

  const handleClick = () => {
    if (true) {
      setIsOpen(true)
    } else {
      handleClose()
    }
  }

  const handleClose = () => {
    router.push(`/@${aiId}`);
  }
  
  return (
    <>
      <IconButton
        variant="ghost" 
        size="small"
        onClick={handleClick}
      >
        <i className="iconfont icon-close" />
      </IconButton>
      <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Unsaved changes</AlertDialogTitle>
            <AlertDialogDescription>Your changes haven’t been saved. Do you want to exit anyway?</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleClose}>Exit</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}
 
export default CloseIconButton;