import { useState, useEffect } from 'react'
import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Clock } from 'lucide-react'
import type { ActiveEvent, EventType } from '@/types'
import { EVENT_INFO } from '@/types'

interface EventBannerProps {
  activeEvent: ActiveEvent
  onRefresh?: () => void
}

const EVENT_ICONS: Record<EventType, React.ReactNode> = {
  golden_hour: <Zap className="w-5 h-5" />,
  common_enemy: <Users className="w-5 h-5" />,
  double_risk: <Shield className="w-5 h-5" />,
  jackpot: <Gift className="w-5 h-5" />,
  swap: <ArrowLeftRight className="w-5 h-5" />,
  game_choice: <Gamepad2 className="w-5 h-5" />,
}

const EVENT_COLORS: Record<EventType, string> = {
  golden_hour: 'from-yellow-500/20 to-yellow-600/20 border-yellow-500/50 text-yellow-400',
  common_enemy: 'from-red-500/20 to-red-600/20 border-red-500/50 text-red-400',
  double_risk: 'from-purple-500/20 to-purple-600/20 border-purple-500/50 text-purple-400',
  jackpot: 'from-green-500/20 to-green-600/20 border-green-500/50 text-green-400',
  swap: 'from-blue-500/20 to-blue-600/20 border-blue-500/50 text-blue-400',
  game_choice: 'from-orange-500/20 to-orange-600/20 border-orange-500/50 text-orange-400',
}

function formatTime(seconds: number): string {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
  return `${minutes}:${secs.toString().padStart(2, '0')}`
}

export function EventBanner({ activeEvent, onRefresh }: EventBannerProps) {
  const [timeRemaining, setTimeRemaining] = useState(activeEvent.time_remaining_seconds)

  useEffect(() => {
    setTimeRemaining(activeEvent.time_remaining_seconds)
  }, [activeEvent.time_remaining_seconds])

  useEffect(() => {
    if (timeRemaining === null || timeRemaining <= 0) return

    const timer = setInterval(() => {
      setTimeRemaining((prev) => {
        if (prev === null || prev <= 0) {
          clearInterval(timer)
          onRefresh?.()
          return 0
        }
        return prev - 1
      })
    }, 1000)

    return () => clearInterval(timer)
  }, [timeRemaining, onRefresh])

  if (!activeEvent.event) {
    return null
  }

  const event = activeEvent.event
  const info = EVENT_INFO[event.type]
  const icon = EVENT_ICONS[event.type]
  const colorClass = EVENT_COLORS[event.type]

  return (
    <div
      className={`
        relative overflow-hidden rounded-xl border p-4
        bg-gradient-to-r ${colorClass}
        animate-pulse-slow
      `}
    >
      {/* Animated background effect */}
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full animate-shimmer" />

      <div className="relative flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg bg-white/10">
            {icon}
          </div>
          <div>
            <h3 className="font-bold text-lg">{info.name}</h3>
            <p className="text-sm opacity-80">{info.description}</p>
          </div>
        </div>

        {timeRemaining !== null && timeRemaining > 0 && (
          <div className="flex items-center gap-2 text-lg font-mono font-bold">
            <Clock className="w-4 h-4" />
            {formatTime(timeRemaining)}
          </div>
        )}

        {activeEvent.effects.points_multiplier !== 1.0 && (
          <div className="px-3 py-1 rounded-full bg-white/10 font-bold">
            x{activeEvent.effects.points_multiplier}
          </div>
        )}
      </div>
    </div>
  )
}
