import { useCurrentUser } from '@/hooks/auth'
import { useGetAICharacterList } from '@/hooks/create'
import useCreatorNavigation from '@/hooks/useCreatorNavigation'
import Image from 'next/image'
import { useSetAtom } from 'jotai'
import { isVipDrawerOpenAtom } from '@/atoms/im'
import { VipType } from '@/services/wallet'

const CharacterCardAdd = () => {
  const { routerToCreate } = useCreatorNavigation()
  const { data: user } = useCurrentUser()
  const { isMember, canCreateAiCount } = user || {}
  const { data: characters = [] } = useGetAICharacterList()
  const isFull = characters.length >= (canCreateAiCount || 0)
  const setIsVipDrawerOpen = useSetAtom(isVipDrawerOpenAtom)

  const handleVip = () => {
    setIsVipDrawerOpen({ open: true, vipType: VipType.ADD_CREATE_AI })
  }

  if (isMember && isFull) {
    return null
  }

  if (!isMember && isFull) {
    return (
      <div className="cursor-pointer" onClick={handleVip}>
        <div className="bg-surface-element-normal rounded-m pointer-events-none relative w-full pb-[133%]">
          <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
            <Image src="/icons/vip.svg" alt="VIP" width={24} height={24} />
            <span className="bg-gradient-to-r from-[#ff9696] via-[#aa90f9] to-[#8df3e2] bg-clip-text text-base font-medium text-transparent">
              Add More Characters
            </span>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="cursor-pointer" onClick={routerToCreate}>
      <div className="bg-surface-element-normal rounded-m relative w-full pb-[133%]">
        <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
          <i className="iconfont icon-add text-txt-tertiary-normal !text-[24px]" />
          <span className="text-txt-tertiary-normal txt-body-l">Create a Character</span>
        </div>
      </div>
    </div>
  )
}

export default CharacterCardAdd
