import { motion } from 'framer-motion';
import React from 'react';

import { SongHero, SongItem } from './SongItem';

interface BackgroundSongCardProps {
  song: SongHero;
  side: 'left' | 'right';
  containerRef: React.RefObject<HTMLDivElement | null>;
  isCardsAnimated: boolean;
  isEntranceComplete: boolean;
  onSongClick: () => void;
  onLikeClick: () => void;
}

export const BackgroundSongCard: React.FC<BackgroundSongCardProps> = ({
  song,
  side,
  isEntranceComplete,
  onSongClick,
  onLikeClick,
}) => {
  const isLeft = side === 'left';
  const entranceXOffset = isLeft ? -200 : 200;
  const entranceYOffset = isLeft ? -150 : 150;
  const rotateZ = isLeft ? -8 : 8;
  const rotateY = isLeft ? 0 : 0;
  const positionClass = isLeft ? 'left-0' : 'right-0';

  // Generate random values for floating animation
  const floatRange = 15; // Maximum pixels to move
  const randomX1 = (Math.random() - 0.5) * floatRange;
  const randomY1 = (Math.random() - 0.5) * floatRange;
  const randomX2 = (Math.random() - 0.5) * floatRange;
  const randomY2 = (Math.random() - 0.5) * floatRange;
  const randomDuration = 4 + Math.random() * 2; // 4-6 seconds

  return (
    <motion.div
      className={`absolute ${positionClass} top-1/2 hidden w-40 md:w-48 lg:block lg:w-52`}
      style={{
        perspective: '1000px',
        transformStyle: 'preserve-3d',
        translateY: '-50%',
      }}
      initial={{
        x: entranceXOffset,
        y: entranceYOffset,
        z: 50,
        rotateZ,
        rotateY,
        scale: 1.15,
        opacity: 0,
      }}
      animate={
        isEntranceComplete
          ? {
              x: [0, randomX1, randomX2, 0],
              y: [0, randomY1, randomY2, 0],
              z: 50,
              rotateZ: [
                rotateZ,
                rotateZ + (isLeft ? -2 : 2),
                rotateZ - (isLeft ? -2 : 2),
                rotateZ,
              ],
              rotateY,
              scale: 1.15,
              opacity: 1,
              transition: {
                x: {
                  duration: randomDuration,
                  ease: 'easeInOut',
                  repeat: Infinity,
                  repeatType: 'reverse',
                },
                y: {
                  duration: randomDuration,
                  ease: 'easeInOut',
                  repeat: Infinity,
                  repeatType: 'reverse',
                },
                rotateZ: {
                  duration: randomDuration * 1.2,
                  ease: 'easeInOut',
                  repeat: Infinity,
                  repeatType: 'reverse',
                },
              },
            }
          : {
              x: 0,
              y: 0,
              z: 50,
              rotateZ,
              rotateY,
              scale: 1.15,
              opacity: 1,
              transition: {
                duration: 1,
                ease: [0.4, 0, 0.2, 1],
                opacity: {
                  duration: 1,
                  ease: 'easeOut',
                },
              },
            }
      }
    >
      <motion.div
        className='cursor-pointer shadow-2xl'
        style={{
          filter:
            'blur(1.1px) brightness(0.5) drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5))',
          transition: 'filter 0.5s ease-out',
        }}
        whileHover={{
          scale: 1.05,
          rotateY: isLeft ? 10 : -10,
          transition: { duration: 0.5, ease: 'easeOut' },
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.filter =
            'blur(0px) brightness(1) drop-shadow(0 25px 50px rgba(0, 0, 0, 0.8))';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.filter =
            'blur(1.1px) brightness(0.5) drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5))';
        }}
      >
        <SongItem
          song={song}
          onClick={onSongClick}
          audioUrl={song.audioUrl}
          handleLike={onLikeClick}
          variant='background'
        />
      </motion.div>
    </motion.div>
  );
};