import { useGetAICharacterList } from '@/hooks/create'
import { useState } from 'react'
import CharacterCard from './CharacterCard'
import CharacterCardAdd from './CharacterCardAdd'
import { useCurrentUser } from '@/hooks/auth'
import { isVipDrawerOpenAtom } from '@/atoms/im'
import { useSetAtom } from 'jotai'
import { VipType } from '@/services/wallet'

const AlbumSkeleton = () => (
  <div className="bg-surface-nest-normal relative animate-pulse overflow-hidden rounded-2xl pb-[134%]">
    <div className="absolute inset-0">
      <div className="h-full w-full rounded-2xl" />
    </div>
  </div>
)

const CharacterList = () => {
  const { data: characters = [], isPending } = useGetAICharacterList()
  const { data: user } = useCurrentUser()
  const { isMember, canCreateAiCount } = user || {}
  const setIsVipDrawerOpen = useSetAtom(isVipDrawerOpenAtom)

  const [hoveredCard, setHoveredCard] = useState<number | null>(null)

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

  const renderList = () => {
    if (isPending) {
      return (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
          {Array.from({ length: 3 }).map((_, index) => (
            <AlbumSkeleton key={index} />
          ))}
        </div>
      )
    }

    return (
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
        {characters.map((character) => (
          <CharacterCard
            key={character.aiId}
            character={character}
            isHovered={hoveredCard === character.aiId}
            onHover={(hovered) => setHoveredCard(hovered ? (character.aiId ?? null) : null)}
          />
        ))}
        <CharacterCardAdd />
      </div>
    )
  }

  return (
    <div className="mt-6 w-full">
      {/* 标题和按钮 */}
      <div className="mb-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <h2 className="txt-title-m text-white">Characters</h2>
          <span className="txt-title-m text-white">
            {characters.length}/{canCreateAiCount}
          </span>
        </div>
        {!isMember && (
          <div className="relative">
            <div
              className="cursor-pointer rounded-full p-px"
              style={{
                background: 'linear-gradient(to right, #ff9696, #aa90f9, #8df3e2)',
              }}
              onClick={handleUnlockMore}
            >
              <div className="bg-background-default flex h-8 w-full items-center gap-2 rounded-full px-4">
                <img src="/icons/vip.svg" alt="VIP" className="h-4 w-4" />
                <span className="txt-label-s bg-gradient-to-r from-[#ff9696] via-[#aa90f9] to-[#8df3e2] bg-clip-text text-transparent">
                  Unlock More
                </span>
              </div>
            </div>
          </div>
        )}
      </div>

      {renderList()}
    </div>
  )
}

export default CharacterList
