import { useState, useEffect } from 'react'
import { Zap, Users, Shield, Gift, ArrowLeftRight, Gamepad2, Clock, Sparkles } 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, {
  gradient: string
  border: string
  text: string
  glow: string
  iconBg: string
}> = {
  golden_hour: {
    gradient: 'from-yellow-500/20 via-yellow-500/10 to-transparent',
    border: 'border-yellow-500/50',
    text: 'text-yellow-400',
    glow: 'shadow-[0_0_30px_rgba(234,179,8,0.3)]',
    iconBg: 'bg-yellow-500/20',
  },
  common_enemy: {
    gradient: 'from-red-500/20 via-red-500/10 to-transparent',
    border: 'border-red-500/50',
    text: 'text-red-400',
    glow: 'shadow-[0_0_30px_rgba(239,68,68,0.3)]',
    iconBg: 'bg-red-500/20',
  },
  double_risk: {
    gradient: 'from-purple-500/20 via-purple-500/10 to-transparent',
    border: 'border-purple-500/50',
    text: 'text-purple-400',
    glow: 'shadow-[0_0_20px_rgba(139,92,246,0.25)]',
    iconBg: 'bg-purple-500/20',
  },
  jackpot: {
    gradient: 'from-green-500/20 via-green-500/10 to-transparent',
    border: 'border-green-500/50',
    text: 'text-green-400',
    glow: 'shadow-[0_0_30px_rgba(34,197,94,0.3)]',
    iconBg: 'bg-green-500/20',
  },
  swap: {
    gradient: 'from-neon-500/20 via-neon-500/10 to-transparent',
    border: 'border-neon-500/50',
    text: 'text-neon-400',
    glow: 'shadow-[0_0_20px_rgba(34,211,238,0.25)]',
    iconBg: 'bg-neon-500/20',
  },
  game_choice: {
    gradient: 'from-orange-500/20 via-orange-500/10 to-transparent',
    border: 'border-orange-500/50',
    text: 'text-orange-400',
    glow: 'shadow-[0_0_30px_rgba(249,115,22,0.3)]',
    iconBg: 'bg-orange-500/20',
  },
}

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 colors = EVENT_COLORS[event.type]

  return (
    <div
      className={`
        relative overflow-hidden rounded-2xl border p-5
        glass ${colors.border} ${colors.glow}
        animate-pulse-slow
      `}
    >
      {/* Background gradient */}
      <div className={`absolute inset-0 bg-gradient-to-r ${colors.gradient}`} />

      {/* Animated shimmer effect */}
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full animate-shimmer" />

      {/* Grid pattern */}
      <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:20px_20px]" />

      <div className="relative flex items-center justify-between gap-4 flex-wrap">
        <div className="flex items-center gap-4">
          <div className={`p-3 rounded-xl ${colors.iconBg} ${colors.text}`}>
            {icon}
          </div>
          <div>
            <div className="flex items-center gap-2 mb-1">
              <h3 className={`font-bold text-lg ${colors.text}`}>{info.name}</h3>
              <Sparkles className={`w-4 h-4 ${colors.text} animate-pulse`} />
            </div>
            <p className="text-sm text-gray-400">{info.description}</p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          {activeEvent.effects.points_multiplier !== 1.0 && (
            <div className={`px-4 py-2 rounded-xl ${colors.iconBg} font-bold ${colors.text} border ${colors.border}`}>
              x{activeEvent.effects.points_multiplier}
            </div>
          )}

          {timeRemaining !== null && timeRemaining > 0 && (
            <div className={`flex items-center gap-2 px-4 py-2 rounded-xl bg-dark-700/50 border border-dark-600 font-mono font-bold ${colors.text}`}>
              <Clock className="w-4 h-4" />
              {formatTime(timeRemaining)}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
