import { useState, useCallback, useEffect } from 'react'
import { motion } from 'framer-motion'
import { useSocket } from '../../hooks/useSocket'
import { useGameStore } from '../../stores/gameStore'
import { useThemeStyles } from '../../themes/ThemeProvider'

const EMOJIS = ['👏', '😮', '😂', '🔥', '💀', '🎉', '😭', '🤔']
const COOLDOWN_MS = 3000 // 3 seconds cooldown

export default function EmojiReactions() {
  const { sendReaction } = useSocket()
  const { room, playerName } = useGameStore()
  const { config } = useThemeStyles()
  const [isDisabled, setIsDisabled] = useState(false)
  const [cooldownRemaining, setCooldownRemaining] = useState(0)

  // Handle cooldown timer display
  useEffect(() => {
    if (!isDisabled) return

    const interval = setInterval(() => {
      setCooldownRemaining((prev) => {
        if (prev <= 100) {
          setIsDisabled(false)
          return 0
        }
        return prev - 100
      })
    }, 100)

    return () => clearInterval(interval)
  }, [isDisabled])

  const handleEmojiClick = useCallback(
    (emoji: string) => {
      if (isDisabled || !room?.code) return

      // Send the reaction via socket
      sendReaction(emoji, room.code, playerName)

      // Enable cooldown
      setIsDisabled(true)
      setCooldownRemaining(COOLDOWN_MS)
    },
    [isDisabled, room?.code, playerName, sendReaction]
  )

  if (!room) return null

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="flex items-center gap-2 px-4 py-2 rounded-full"
      style={{
        backgroundColor: `${config.colors.bg}CC`,
        backdropFilter: 'blur(8px)',
        border: `1px solid ${config.colors.primary}40`,
      }}
    >
      {EMOJIS.map((emoji) => (
        <motion.button
          key={emoji}
          onClick={() => handleEmojiClick(emoji)}
          disabled={isDisabled}
          whileHover={!isDisabled ? { scale: 1.2 } : {}}
          whileTap={!isDisabled ? { scale: 0.9 } : {}}
          className={`text-2xl p-2 rounded-lg transition-all ${
            isDisabled ? 'opacity-40 cursor-not-allowed grayscale' : 'cursor-pointer hover:bg-white/10'
          }`}
          title={isDisabled ? `Espera ${Math.ceil(cooldownRemaining / 1000)}s` : emoji}
        >
          {emoji}
        </motion.button>
      ))}

      {/* Cooldown indicator */}
      {isDisabled && (
        <motion.div
          initial={{ width: '100%' }}
          animate={{ width: '0%' }}
          transition={{ duration: COOLDOWN_MS / 1000, ease: 'linear' }}
          className="absolute bottom-0 left-0 h-1 rounded-full"
          style={{ backgroundColor: config.colors.primary }}
        />
      )}
    </motion.div>
  )
}