import { useState, useCallback, useMemo } from 'react'
import type { Game } from '@/types'
import { Gamepad2, Loader2 } from 'lucide-react'

interface SpinWheelProps {
  games: Game[]
  onSpin: () => Promise<Game | null>
  onSpinComplete: (game: Game) => void
  disabled?: boolean
}

const SPIN_DURATION = 5000 // ms
const EXTRA_ROTATIONS = 5

// Цветовая палитра секторов
const SECTOR_COLORS = [
  { bg: '#0d9488', border: '#14b8a6' }, // teal
  { bg: '#7c3aed', border: '#8b5cf6' }, // violet
  { bg: '#0891b2', border: '#06b6d4' }, // cyan
  { bg: '#c026d3', border: '#d946ef' }, // fuchsia
  { bg: '#059669', border: '#10b981' }, // emerald
  { bg: '#7c2d12', border: '#ea580c' }, // orange
  { bg: '#1d4ed8', border: '#3b82f6' }, // blue
  { bg: '#be123c', border: '#e11d48' }, // rose
]

export function SpinWheel({ games, onSpin, onSpinComplete, disabled }: SpinWheelProps) {
  const [isSpinning, setIsSpinning] = useState(false)
  const [rotation, setRotation] = useState(0)

  // Размеры колеса
  const wheelSize = 400
  const centerX = wheelSize / 2
  const centerY = wheelSize / 2
  const radius = wheelSize / 2 - 10

  // Рассчитываем углы секторов
  const sectorAngle = games.length > 0 ? 360 / games.length : 360

  // Создаём path для сектора
  const createSectorPath = useCallback((index: number, total: number) => {
    const angle = 360 / total
    const startAngle = index * angle - 90 // Начинаем сверху
    const endAngle = startAngle + angle

    const startRad = (startAngle * Math.PI) / 180
    const endRad = (endAngle * Math.PI) / 180

    const x1 = centerX + radius * Math.cos(startRad)
    const y1 = centerY + radius * Math.sin(startRad)
    const x2 = centerX + radius * Math.cos(endRad)
    const y2 = centerY + radius * Math.sin(endRad)

    const largeArcFlag = angle > 180 ? 1 : 0

    return `M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`
  }, [centerX, centerY, radius])

  // Позиция текста в секторе
  const getTextPosition = useCallback((index: number, total: number) => {
    const angle = 360 / total
    const midAngle = index * angle + angle / 2 - 90
    const midRad = (midAngle * Math.PI) / 180
    const textRadius = radius * 0.65

    return {
      x: centerX + textRadius * Math.cos(midRad),
      y: centerY + textRadius * Math.sin(midRad),
      rotation: midAngle + 90, // Текст читается от центра к краю
    }
  }, [centerX, centerY, radius])

  const handleSpin = useCallback(async () => {
    if (isSpinning || disabled || games.length === 0) return

    setIsSpinning(true)

    // Получаем результат от API
    const resultGame = await onSpin()
    if (!resultGame) {
      setIsSpinning(false)
      return
    }

    // Находим индекс выигравшей игры
    const targetIndex = games.findIndex(g => g.id === resultGame.id)
    if (targetIndex === -1) {
      setIsSpinning(false)
      onSpinComplete(resultGame)
      return
    }

    // Рассчитываем угол для остановки
    // Указатель находится сверху (на 0°/360°)
    // Нам нужно чтобы нужный сектор оказался под указателем
    const targetSectorMidAngle = targetIndex * sectorAngle + sectorAngle / 2

    // Полные обороты + угол до центра сектора
    // Колесо крутится по часовой стрелке, указатель сверху
    // Чтобы сектор оказался сверху, нужно повернуть на (360 - targetSectorMidAngle)
    const baseRotation = rotation % 360
    const fullRotations = EXTRA_ROTATIONS * 360
    const finalAngle = fullRotations + (360 - targetSectorMidAngle) + baseRotation

    setRotation(rotation + finalAngle)

    // Ждём окончания анимации
    setTimeout(() => {
      setIsSpinning(false)
      onSpinComplete(resultGame)
    }, SPIN_DURATION)
  }, [isSpinning, disabled, games, rotation, sectorAngle, onSpin, onSpinComplete])

  // Сокращаем название игры для отображения
  const truncateText = (text: string, maxLength: number) => {
    if (text.length <= maxLength) return text
    return text.slice(0, maxLength - 2) + '...'
  }

  // Мемоизируем секторы для производительности
  const sectors = useMemo(() => {
    return games.map((game, index) => {
      const color = SECTOR_COLORS[index % SECTOR_COLORS.length]
      const path = createSectorPath(index, games.length)
      const textPos = getTextPosition(index, games.length)
      const maxTextLength = games.length > 8 ? 10 : games.length > 5 ? 14 : 18

      return { game, color, path, textPos, maxTextLength }
    })
  }, [games, createSectorPath, getTextPosition])

  if (games.length === 0) {
    return (
      <div className="glass rounded-2xl p-12 text-center">
        <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-700 flex items-center justify-center">
          <Gamepad2 className="w-8 h-8 text-gray-600" />
        </div>
        <p className="text-gray-400">Нет доступных игр для прокрутки</p>
      </div>
    )
  }

  return (
    <div className="flex flex-col items-center gap-6">
      {/* Контейнер колеса */}
      <div className="relative">
        {/* Внешнее свечение */}
        <div className={`
          absolute -inset-4 rounded-full transition-all duration-500
          ${isSpinning
            ? 'bg-neon-500/30 blur-2xl animate-pulse'
            : 'bg-neon-500/10 blur-xl'
          }
        `} />

        {/* Указатель (стрелка сверху) */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 z-20">
          <div className={`
            relative transition-all duration-300
            ${isSpinning ? 'scale-110' : ''}
          `}>
            {/* Свечение указателя */}
            <div className={`
              absolute inset-0 blur-sm transition-opacity duration-300
              ${isSpinning ? 'opacity-100' : 'opacity-50'}
            `}>
              <svg width="40" height="50" viewBox="0 0 40 50">
                <path
                  d="M20 50 L5 15 L20 0 L35 15 Z"
                  fill="#22d3ee"
                />
              </svg>
            </div>
            {/* Указатель */}
            <svg width="40" height="50" viewBox="0 0 40 50" className="relative">
              <defs>
                <linearGradient id="pointerGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#22d3ee" />
                  <stop offset="100%" stopColor="#0891b2" />
                </linearGradient>
              </defs>
              <path
                d="M20 50 L5 15 L20 0 L35 15 Z"
                fill="url(#pointerGradient)"
                stroke="#67e8f9"
                strokeWidth="2"
              />
            </svg>
          </div>
        </div>

        {/* Колесо */}
        <div
          className="relative"
          style={{ width: wheelSize, height: wheelSize }}
        >
          {/* Внешний ободок */}
          <div className={`
            absolute inset-0 rounded-full
            border-4 transition-all duration-300
            ${isSpinning
              ? 'border-neon-400 shadow-[0_0_30px_rgba(34,211,238,0.5),inset_0_0_30px_rgba(34,211,238,0.1)]'
              : 'border-neon-500/50 shadow-[0_0_15px_rgba(34,211,238,0.2)]'
            }
          `} />

          {/* SVG колесо */}
          <svg
            width={wheelSize}
            height={wheelSize}
            className="relative z-10 transition-transform"
            style={{
              transform: `rotate(${rotation}deg)`,
              transitionProperty: isSpinning ? 'transform' : 'none',
              transitionDuration: isSpinning ? `${SPIN_DURATION}ms` : '0ms',
              transitionTimingFunction: 'cubic-bezier(0.17, 0.67, 0.12, 0.99)',
            }}
          >
            <defs>
              {/* Тени для секторов */}
              <filter id="sectorShadow" x="-20%" y="-20%" width="140%" height="140%">
                <feDropShadow dx="0" dy="0" stdDeviation="2" floodColor="#000" floodOpacity="0.3" />
              </filter>
            </defs>

            {/* Секторы */}
            {sectors.map(({ game, color, path, textPos, maxTextLength }, index) => (
              <g key={game.id}>
                {/* Сектор */}
                <path
                  d={path}
                  fill={color.bg}
                  stroke={color.border}
                  strokeWidth="2"
                  filter="url(#sectorShadow)"
                />

                {/* Текст названия игры */}
                <text
                  x={textPos.x}
                  y={textPos.y}
                  transform={`rotate(${textPos.rotation}, ${textPos.x}, ${textPos.y})`}
                  textAnchor="middle"
                  dominantBaseline="middle"
                  fill="white"
                  fontSize={games.length > 10 ? "10" : games.length > 6 ? "11" : "13"}
                  fontWeight="bold"
                  style={{
                    textShadow: '0 1px 3px rgba(0,0,0,0.8)',
                    pointerEvents: 'none',
                  }}
                >
                  {truncateText(game.title, maxTextLength)}
                </text>

                {/* Разделительная линия */}
                <line
                  x1={centerX}
                  y1={centerY}
                  x2={centerX + radius * Math.cos((index * sectorAngle - 90) * Math.PI / 180)}
                  y2={centerY + radius * Math.sin((index * sectorAngle - 90) * Math.PI / 180)}
                  stroke="rgba(255,255,255,0.3)"
                  strokeWidth="1"
                />
              </g>
            ))}

            {/* Центральный круг */}
            <circle
              cx={centerX}
              cy={centerY}
              r="50"
              fill="url(#centerGradient)"
              stroke="#22d3ee"
              strokeWidth="3"
            />
            <defs>
              <radialGradient id="centerGradient" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="#1e293b" />
                <stop offset="100%" stopColor="#0f172a" />
              </radialGradient>
            </defs>
          </svg>

          {/* Кнопка КРУТИТЬ в центре */}
          <button
            onClick={handleSpin}
            disabled={isSpinning || disabled}
            className={`
              absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
              w-24 h-24 rounded-full z-20
              flex flex-col items-center justify-center gap-1
              font-bold text-sm uppercase tracking-wider
              transition-all duration-300
              disabled:cursor-not-allowed
              ${isSpinning
                ? 'bg-dark-800 text-neon-400 shadow-[0_0_20px_rgba(34,211,238,0.4)]'
                : 'bg-gradient-to-br from-neon-500 to-cyan-600 text-white hover:shadow-[0_0_30px_rgba(34,211,238,0.6)] hover:scale-105 active:scale-95'
              }
              ${disabled && !isSpinning ? 'opacity-50' : ''}
            `}
          >
            {isSpinning ? (
              <Loader2 className="w-8 h-8 animate-spin" />
            ) : (
              <>
                <span className="text-xs">КРУТИТЬ</span>
              </>
            )}
          </button>
        </div>

        {/* Декоративные элементы при вращении */}
        {isSpinning && (
          <>
            <div className="absolute inset-0 rounded-full border-2 border-neon-400/30 animate-ping" />
            <div
              className="absolute inset-0 rounded-full border border-accent-400/20"
              style={{ animation: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite 0.5s' }}
            />
          </>
        )}
      </div>

      {/* Подсказка */}
      <p className={`
        text-sm transition-all duration-300
        ${isSpinning ? 'text-neon-400 animate-pulse' : 'text-gray-500'}
      `}>
        {isSpinning ? 'Колесо вращается...' : 'Нажмите на колесо, чтобы крутить!'}
      </p>
    </div>
  )
}
