import { forwardRef, useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { motion } from 'framer-motion'
import PuzzlePieceDisplay from './PuzzlePieceDisplay'

interface PuzzlePiecePortalProps {
  residence: string
  pieceId: number
  /** 是否隐藏（飞行时隐藏原始碎片） */
  hidden?: boolean
}

/**
 * 碎片 Portal 组件
 * 将碎片渲染到 document.body，确保在最上层显示
 * 支持旋转+放大的初始出现动画
 */
const PuzzlePiecePortal = forwardRef<HTMLDivElement, PuzzlePiecePortalProps>(
  ({ residence, pieceId, hidden = false }, ref) => {
    const [isAnimating, setIsAnimating] = useState(true)

    // 当组件首次渲染时，标记动画开始
    useEffect(() => {
      setIsAnimating(true)
      // 动画完成后，重置状态以便下次出现时重新播放
      const timer = setTimeout(() => {
        setIsAnimating(false)
      }, 800) // 与动画时长一致
      return () => clearTimeout(timer)
    }, [pieceId]) // 当 pieceId 变化时重新播放动画

    return createPortal(
      <div
        style={{
          position: 'fixed',
          left: '50%',
          top: '50%',
          width: '120px',
          height: '120px',
          transform: 'translate(-50%, -50%)',
          perspective: '1000px', // 添加透视，让3D效果更明显
          zIndex: 99999,
          pointerEvents: 'none',
        }}
      >
        <motion.div
          ref={ref}
          style={{
            width: '100%',
            height: '100%',
            transformStyle: 'preserve-3d', // 保持3D变换
          }}
          initial={
            isAnimating
              ? {
                  scale: 0,
                  rotateY: -180,
                  opacity: 0,
                }
              : false
          }
          animate={
            hidden
              ? { opacity: 0, visibility: 'hidden' as const }
              : isAnimating
                ? {
                    scale: 1,
                    rotateY: 0,
                    opacity: 1,
                    visibility: 'visible' as const,
                  }
                : {
                    opacity: 1,
                    visibility: 'visible' as const,
                  }
          }
          transition={{
            duration: 0.8, // 稍微延长动画时间，让效果更舒缓
            ease: [0.25, 0.46, 0.45, 0.94], // 平滑的缓动函数，缓缓出现
            scale: {
              duration: 0.8,
              ease: [0.25, 0.46, 0.45, 0.94],
            },
            rotateY: {
              duration: 0.8,
              ease: [0.25, 0.46, 0.45, 0.94],
            },
            opacity: {
              duration: 0.6,
              ease: 'easeOut',
            },
          }}
        >
          <PuzzlePieceDisplay
            residence={residence}
            pieceId={pieceId}
            showGlow={true}
            className="w-full h-full"
          />
        </motion.div>
      </div>,
      document.body
    )
  }
)

PuzzlePiecePortal.displayName = 'PuzzlePiecePortal'

export default PuzzlePiecePortal