import { forwardRef } from 'react'
import { getStaticImage } from '@/lib/utils'

export interface PuzzlePieceDisplayProps {
  /** 故居名称，如 'chenyun' */
  residence: string
  /** 碎片ID */
  pieceId: number
  /** 是否显示发光动画 */
  showGlow?: boolean
  /** 在容器内按真实比例等比贴边展示 */
  fitContain?: boolean
  /** 自定义类名 */
  className?: string
}

/**
 * 拼图碎片显示组件
 * - 显示碎片图片
 * - 支持发光动画效果
 * - 可以被 ref 引用，用于飞行动画
 */
const PuzzlePieceDisplay = forwardRef<HTMLDivElement, PuzzlePieceDisplayProps>(
  ({ residence, pieceId, showGlow = true, fitContain = false, className = '' }, ref) => {
    // 碎片图片路径
    const pieceImage = getStaticImage(`puzzle/${residence}/${pieceId}`)

    return (
      <div
        ref={ref}
        className={`relative ${fitContain ? 'h-full w-full overflow-visible' : 'inline-block'} ${className}`}
        style={{
          animation: showGlow ? 'puzzleGlow 1s ease-in-out infinite' : 'none',
        }}
      >
        <style>{`
          @keyframes puzzleGlow {
            0%, 100% {
              filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.6));
            }
            50% {
              filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1)) drop-shadow(0 0 32px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 48px rgba(255, 255, 255, 0.6));
            }
          }
        `}</style>
        <img
          src={pieceImage}
          alt={`碎片 ${pieceId}`}
          className={fitContain ? 'absolute inset-0 block h-full w-full object-contain' : 'w-full'}
        />
      </div>
    )
  }
)

PuzzlePieceDisplay.displayName = 'PuzzlePieceDisplay'

export default PuzzlePieceDisplay