Trivy/frontend/src/components/chat/ReactionOverlay.tsx

import { useEffect, useRef, useMemo } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { useGameStore } from '../../stores/gameStore'
import { useThemeStyles } from '../../themes/ThemeProvider'

const REACTION_DURATION_MS = 2000 // Auto-remove after 2 seconds

export default function ReactionOverlay() {
  const { reactions, removeReaction } = useGameStore()
  const { config } = useThemeStyles()
  const timeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map())

  // Auto-remove reactions after duration
  useEffect(() => {
    reactions.forEach((reaction) => {
      // Only set timeout if we haven't already set one for this reaction
      if (!timeoutsRef.current.has(reaction.id)) {
        const timeout = setTimeout(() => {
          removeReaction(reaction.id)
          timeoutsRef.current.delete(reaction.id)
        }, REACTION_DURATION_MS)
        timeoutsRef.current.set(reaction.id, timeout)
      }
    })

    // Cleanup removed reactions
    return () => {
      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout))
    }
  }, [reactions, removeReaction])

  // Pre-calculate random positions for each reaction to avoid recalculation on re-render
  const reactionPositions = useMemo(() => {
    const positions = new Map<string, number>()
    reactions.forEach((reaction) => {
      if (!positions.has(reaction.id)) {
        positions.set(reaction.id, 10 + Math.random() * 80)
      }
    })
    return positions
  }, [reactions])

  return (
    <div className="fixed inset-0 pointer-events-none overflow-hidden z-40">
      <AnimatePresence>
        {reactions.map((reaction) => {
          // Use pre-calculated random horizontal position (10% to 90% of screen width)
          const randomX = reactionPositions.get(reaction.id) || 50

          return (
            <motion.div
              key={reaction.id}
              initial={{
                opacity: 0,
                y: '100vh',
                x: `${randomX}vw`,
                scale: 0.5,
              }}
              animate={{
                opacity: 1,
                y: '20vh',
                scale: 1,
              }}
              exit={{
                opacity: 0,
                y: '-10vh',
                scale: 0.8,
              }}
              transition={{
                duration: REACTION_DURATION_MS / 1000,
                ease: 'easeOut',
              }}
              className="absolute flex flex-col items-center"
              style={{
                transform: `translateX(-50%)`,
              }}
            >
              {/* Emoji */}
              <motion.span
                className="text-5xl"
                animate={{
                  scale: [1, 1.2, 1],
                }}
                transition={{
                  duration: 0.3,
                  repeat: 2,
                  repeatType: 'reverse',
                }}
              >
                {reaction.emoji}
              </motion.span>

              {/* Player name badge */}
              <motion.div
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.1 }}
                className="mt-1 px-2 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
                style={{
                  backgroundColor:
                    reaction.team === 'A'
                      ? `${config.colors.primary}CC`
                      : `${config.colors.secondary}CC`,
                  color: config.colors.bg,
                  backdropFilter: 'blur(4px)',
                }}
              >
                {reaction.player_name}
              </motion.div>
            </motion.div>
          )
        })}
      </AnimatePresence>
    </div>
  )
}