import { useState, useEffect, useRef } from 'react'
import { useParams, Link } from 'react-router-dom'
import { marathonsApi, wheelApi, gamesApi, eventsApi, assignmentsApi, shopApi } from '@/api'
import type { Marathon, Assignment, Game, ActiveEvent, SwapCandidate, MySwapRequests, CommonEnemyLeaderboardEntry, EventAssignment, GameChoiceChallenges, ReturnedAssignment, ConsumablesStatus, ConsumableType } from '@/types'
import { NeonButton, GlassCard, StatsCard } from '@/components/ui'
import { SpinWheel } from '@/components/SpinWheel'
import { EventBanner } from '@/components/EventBanner'
import { Loader2, Upload, X, Gamepad2, ArrowLeftRight, Check, XCircle, Clock, Send, Trophy, Users, ArrowLeft, AlertTriangle, Zap, Flame, Target, Download, SkipForward, Package, Dice5, Copy, Undo2, Shuffle } from 'lucide-react'
import { useToast } from '@/store/toast'
import { useConfirm } from '@/store/confirm'
import { useShopStore } from '@/store/shop'

const MAX_IMAGE_SIZE = 15 * 1024 * 1024
const MAX_VIDEO_SIZE = 30 * 1024 * 1024
const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp']
const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov']

export function PlayPage() {
  const { id } = useParams<{ id: string }>()
  const toast = useToast()
  const confirm = useConfirm()

  const [marathon, setMarathon] = useState<Marathon | null>(null)
  const [currentAssignment, setCurrentAssignment] = useState<Assignment | null>(null)
  const [games, setGames] = useState<Game[]>([])
  const [activeEvent, setActiveEvent] = useState<ActiveEvent | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  const [proofFiles, setProofFiles] = useState<File[]>([])
  const [proofUrl, setProofUrl] = useState('')
  const [comment, setComment] = useState('')
  const [isCompleting, setIsCompleting] = useState(false)
  const [isDropping, setIsDropping] = useState(false)

  const [selectedGameId, setSelectedGameId] = useState<number | null>(null)
  const [gameChoiceChallenges, setGameChoiceChallenges] = useState<GameChoiceChallenges | null>(null)
  const [isLoadingChallenges, setIsLoadingChallenges] = useState(false)
  const [isSelectingChallenge, setIsSelectingChallenge] = useState(false)

  const [swapCandidates, setSwapCandidates] = useState<SwapCandidate[]>([])
  const [swapRequests, setSwapRequests] = useState<MySwapRequests>({ incoming: [], outgoing: [] })
  const [isSwapLoading, setIsSwapLoading] = useState(false)
  const [sendingRequestTo, setSendingRequestTo] = useState<number | null>(null)
  const [processingRequestId, setProcessingRequestId] = useState<number | null>(null)

  const [commonEnemyLeaderboard, setCommonEnemyLeaderboard] = useState<CommonEnemyLeaderboardEntry[]>([])

  type PlayTab = 'spin' | 'event'
  const [activeTab, setActiveTab] = useState<PlayTab>('spin')

  const [eventAssignment, setEventAssignment] = useState<EventAssignment | null>(null)
  const [eventProofFile, setEventProofFile] = useState<File | null>(null)
  const [eventProofUrl, setEventProofUrl] = useState('')
  const [eventComment, setEventComment] = useState('')
  const [isEventCompleting, setIsEventCompleting] = useState(false)

  const [returnedAssignments, setReturnedAssignments] = useState<ReturnedAssignment[]>([])

  // Consumables
  const [consumablesStatus, setConsumablesStatus] = useState<ConsumablesStatus | null>(null)
  const [isUsingConsumable, setIsUsingConsumable] = useState<ConsumableType | null>(null)

  // Bonus challenge completion
  const [expandedBonusId, setExpandedBonusId] = useState<number | null>(null)
  const [bonusProofFiles, setBonusProofFiles] = useState<File[]>([])
  const [bonusProofUrl, setBonusProofUrl] = useState('')
  const [bonusComment, setBonusComment] = useState('')
  const [isCompletingBonus, setIsCompletingBonus] = useState(false)

  const bonusFileInputRef = useRef<HTMLInputElement>(null)

  const fileInputRef = useRef<HTMLInputElement>(null)
  const eventFileInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    loadData()
  }, [id])

  useEffect(() => {
    if (activeEvent?.event?.type !== 'game_choice') {
      setSelectedGameId(null)
      setGameChoiceChallenges(null)
    }
  }, [activeEvent?.event?.type])

  useEffect(() => {
    if (activeEvent?.event?.type === 'swap') {
      loadSwapRequests()
      if (currentAssignment) {
        loadSwapCandidates()
      }
    }
  }, [activeEvent?.event?.type, currentAssignment])

  useEffect(() => {
    if (activeEvent?.event?.type === 'common_enemy') {
      loadCommonEnemyLeaderboard()
      const interval = setInterval(loadCommonEnemyLeaderboard, 10000)
      return () => clearInterval(interval)
    }
  }, [activeEvent?.event?.type])

  const loadGameChoiceChallenges = async (gameId: number) => {
    if (!id) return
    setIsLoadingChallenges(true)
    try {
      const challenges = await eventsApi.getGameChoiceChallenges(parseInt(id), gameId)
      setGameChoiceChallenges(challenges)
    } catch (error) {
      console.error('Failed to load game choice challenges:', error)
      toast.error('Не удалось загрузить челленджи для этой игры')
    } finally {
      setIsLoadingChallenges(false)
    }
  }

  const loadSwapCandidates = async () => {
    if (!id) return
    setIsSwapLoading(true)
    try {
      const candidates = await eventsApi.getSwapCandidates(parseInt(id))
      setSwapCandidates(candidates)
    } catch (error) {
      console.error('Failed to load swap candidates:', error)
    } finally {
      setIsSwapLoading(false)
    }
  }

  const loadSwapRequests = async () => {
    if (!id) return
    try {
      const requests = await eventsApi.getSwapRequests(parseInt(id))
      setSwapRequests(requests)
    } catch (error) {
      console.error('Failed to load swap requests:', error)
    }
  }

  const loadCommonEnemyLeaderboard = async () => {
    if (!id) return
    try {
      const leaderboard = await eventsApi.getCommonEnemyLeaderboard(parseInt(id))
      setCommonEnemyLeaderboard(leaderboard)
    } catch (error) {
      console.error('Failed to load common enemy leaderboard:', error)
    }
  }

  const validateAndSetFile = (
    file: File | null,
    setFile: (file: File | null) => void,
    inputRef: React.RefObject<HTMLInputElement | null>
  ) => {
    if (!file) {
      setFile(null)
      return
    }

    const ext = file.name.split('.').pop()?.toLowerCase() || ''
    const isImage = IMAGE_EXTENSIONS.includes(ext)
    const isVideo = VIDEO_EXTENSIONS.includes(ext)

    if (!isImage && !isVideo) {
      toast.error('Неподдерживаемый формат файла')
      if (inputRef.current) inputRef.current.value = ''
      return
    }

    const maxSize = isImage ? MAX_IMAGE_SIZE : MAX_VIDEO_SIZE
    const maxSizeMB = isImage ? 15 : 30

    if (file.size > maxSize) {
      toast.error(`Файл слишком большой. Максимум ${maxSizeMB} МБ для ${isImage ? 'изображений' : 'видео'}`)
      if (inputRef.current) inputRef.current.value = ''
      return
    }

    setFile(file)
  }

  const loadData = async () => {
    if (!id) return
    try {
      const [marathonData, assignment, availableGamesData, eventData, eventAssignmentData, returnedData, consumablesData] = await Promise.all([
        marathonsApi.get(parseInt(id)),
        wheelApi.getCurrentAssignment(parseInt(id)),
        gamesApi.getAvailableGames(parseInt(id)),
        eventsApi.getActive(parseInt(id)),
        eventsApi.getEventAssignment(parseInt(id)),
        assignmentsApi.getReturnedAssignments(parseInt(id)),
        shopApi.getConsumablesStatus(parseInt(id)).catch(() => null),
      ])
      setMarathon(marathonData)
      setCurrentAssignment(assignment)
      setGames(availableGamesData)
      setActiveEvent(eventData)
      setEventAssignment(eventAssignmentData)
      setReturnedAssignments(returnedData)
      setConsumablesStatus(consumablesData)
    } catch (error) {
      console.error('Failed to load data:', error)
    } finally {
      setIsLoading(false)
    }
  }

  const refreshEvent = async () => {
    if (!id) return
    try {
      const eventData = await eventsApi.getActive(parseInt(id))
      setActiveEvent(eventData)
    } catch (error) {
      console.error('Failed to refresh event:', error)
    }
  }

  const handleSpin = async (): Promise<Game | null> => {
    if (!id) return null
    try {
      const result = await wheelApi.spin(parseInt(id))
      return result.game
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось крутить')
      return null
    }
  }

  const handleSpinComplete = async () => {
    setTimeout(async () => {
      await loadData()
    }, 500)
  }

  const handleComplete = async () => {
    if (!currentAssignment) return

    // For playthrough: allow file, URL, or comment
    // For challenges: require file or URL
    if (currentAssignment.is_playthrough) {
      if (proofFiles.length === 0 && !proofUrl && !comment) {
        toast.warning('Пожалуйста, предоставьте доказательство (файл, ссылку или комментарий)')
        return
      }
    } else {
      if (proofFiles.length === 0 && !proofUrl) {
        toast.warning('Пожалуйста, предоставьте доказательство (файл или ссылку)')
        return
      }
    }

    setIsCompleting(true)
    try {
      const result = await wheelApi.complete(currentAssignment.id, {
        proof_files: proofFiles.length > 0 ? proofFiles : undefined,
        proof_url: proofUrl || undefined,
        comment: comment || undefined,
      })
      toast.success(`Выполнено! +${result.points_earned} очков (бонус серии: +${result.streak_bonus})`)
      setProofFiles([])
      setProofUrl('')
      setComment('')
      await loadData()
      // Refresh coins balance
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось выполнить')
    } finally {
      setIsCompleting(false)
    }
  }

  const handleDrop = async () => {
    if (!currentAssignment) return

    const penalty = currentAssignment.drop_penalty
    const confirmed = await confirm({
      title: 'Пропустить задание?',
      message: `Вы потеряете ${penalty} очков.`,
      confirmText: 'Пропустить',
      cancelText: 'Отмена',
      variant: 'warning',
    })
    if (!confirmed) return

    setIsDropping(true)
    try {
      const result = await wheelApi.drop(currentAssignment.id)
      toast.info(`Пропущено. Штраф: -${result.penalty} очков`)
      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось пропустить')
    } finally {
      setIsDropping(false)
    }
  }

  const handleBonusComplete = async (bonusId: number) => {
    if (!currentAssignment) return
    if (bonusProofFiles.length === 0 && !bonusProofUrl && !bonusComment) {
      toast.warning('Прикрепите файл, ссылку или комментарий')
      return
    }

    setIsCompletingBonus(true)
    try {
      const result = await assignmentsApi.completeBonusAssignment(
        currentAssignment.id,
        bonusId,
        {
          proof_files: bonusProofFiles.length > 0 ? bonusProofFiles : undefined,
          proof_url: bonusProofUrl || undefined,
          comment: bonusComment || undefined,
        }
      )
      toast.success(`Бонус отмечен! +${result.points_earned} очков начислится при завершении игры`)
      setBonusProofFiles([])
      setBonusProofUrl('')
      setBonusComment('')
      setExpandedBonusId(null)
      if (bonusFileInputRef.current) bonusFileInputRef.current.value = ''
      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось выполнить бонус')
    } finally {
      setIsCompletingBonus(false)
    }
  }

  const handleEventComplete = async () => {
    if (!eventAssignment?.assignment) return
    if (!eventProofFile && !eventProofUrl) {
      toast.warning('Пожалуйста, предоставьте доказательство (файл или ссылку)')
      return
    }

    setIsEventCompleting(true)
    try {
      const result = await eventsApi.completeEventAssignment(eventAssignment.assignment.id, {
        proof_file: eventProofFile || undefined,
        proof_url: eventProofUrl || undefined,
        comment: eventComment || undefined,
      })
      toast.success(`Выполнено! +${result.points_earned} очков`)
      setEventProofFile(null)
      setEventProofUrl('')
      setEventComment('')
      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось выполнить')
    } finally {
      setIsEventCompleting(false)
    }
  }

  const handleGameSelect = async (gameId: number) => {
    setSelectedGameId(gameId)
    await loadGameChoiceChallenges(gameId)
  }

  const handleChallengeSelect = async (challengeId: number) => {
    if (!id) return

    const hasActiveAssignment = !!currentAssignment
    const confirmed = await confirm({
      title: 'Выбрать челлендж?',
      message: hasActiveAssignment
        ? 'Текущее задание будет заменено без штрафа.'
        : 'Вы уверены, что хотите выбрать этот челлендж?',
      confirmText: 'Выбрать',
      cancelText: 'Отмена',
      variant: 'info',
    })
    if (!confirmed) return

    setIsSelectingChallenge(true)
    try {
      const result = await eventsApi.selectGameChoiceChallenge(parseInt(id), challengeId)
      toast.success(result.message)
      setSelectedGameId(null)
      setGameChoiceChallenges(null)
      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось выбрать челлендж')
    } finally {
      setIsSelectingChallenge(false)
    }
  }

  const handleSendSwapRequest = async (participantId: number, participantName: string, theirChallenge: string) => {
    if (!id) return

    const confirmed = await confirm({
      title: 'Отправить запрос на обмен?',
      message: `Вы предлагаете обменяться с ${participantName} на:\n"${theirChallenge}"\n\n${participantName} должен будет подтвердить обмен.`,
      confirmText: 'Отправить',
      cancelText: 'Отмена',
      variant: 'info',
    })
    if (!confirmed) return

    setSendingRequestTo(participantId)
    try {
      await eventsApi.createSwapRequest(parseInt(id), participantId)
      toast.success('Запрос на обмен отправлен!')
      await loadSwapRequests()
      await loadSwapCandidates()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось отправить запрос')
    } finally {
      setSendingRequestTo(null)
    }
  }

  const handleAcceptSwapRequest = async (requestId: number) => {
    if (!id) return

    const confirmed = await confirm({
      title: 'Принять обмен?',
      message: 'Задания будут обменяны сразу после подтверждения.',
      confirmText: 'Принять',
      cancelText: 'Отмена',
      variant: 'info',
    })
    if (!confirmed) return

    setProcessingRequestId(requestId)
    try {
      await eventsApi.acceptSwapRequest(parseInt(id), requestId)
      toast.success('Обмен выполнен!')
      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось выполнить обмен')
    } finally {
      setProcessingRequestId(null)
    }
  }

  const handleDeclineSwapRequest = async (requestId: number) => {
    if (!id) return
    setProcessingRequestId(requestId)
    try {
      await eventsApi.declineSwapRequest(parseInt(id), requestId)
      await loadSwapRequests()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось отклонить запрос')
    } finally {
      setProcessingRequestId(null)
    }
  }

  const handleCancelSwapRequest = async (requestId: number) => {
    if (!id) return
    setProcessingRequestId(requestId)
    try {
      await eventsApi.cancelSwapRequest(parseInt(id), requestId)
      await loadSwapRequests()
      await loadSwapCandidates()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось отменить запрос')
    } finally {
      setProcessingRequestId(null)
    }
  }

  // Consumable handlers
  const handleUseSkip = async () => {
    if (!currentAssignment || !id) return
    setIsUsingConsumable('skip')
    try {
      await shopApi.useConsumable({
        item_code: 'skip',
        marathon_id: parseInt(id),
        assignment_id: currentAssignment.id,
      })
      toast.success('Задание пропущено без штрафа!')
      await loadData()
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось использовать Skip')
    } finally {
      setIsUsingConsumable(null)
    }
  }

  const handleUseSkipExile = async () => {
    if (!currentAssignment || !id) return
    const confirmed = await confirm({
      title: 'Скип с изгнанием?',
      message: 'Задание будет пропущено без штрафа, а игра навсегда удалена из вашего пула.',
      confirmText: 'Использовать',
      cancelText: 'Отмена',
      variant: 'warning',
    })
    if (!confirmed) return

    setIsUsingConsumable('skip_exile')
    try {
      await shopApi.useConsumable({
        item_code: 'skip_exile',
        marathon_id: parseInt(id),
        assignment_id: currentAssignment.id,
      })
      toast.success('Задание пропущено, игра изгнана из пула!')
      await loadData()
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось использовать Skip с изгнанием')
    } finally {
      setIsUsingConsumable(null)
    }
  }

  const handleUseBoost = async () => {
    if (!id) return
    setIsUsingConsumable('boost')
    try {
      await shopApi.useConsumable({
        item_code: 'boost',
        marathon_id: parseInt(id),
      })
      toast.success('Boost активирован! x1.5 очков за текущее задание.')
      await loadData()
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось активировать Boost')
    } finally {
      setIsUsingConsumable(null)
    }
  }

  // Wild Card modal state
  const [showWildCardModal, setShowWildCardModal] = useState(false)

  const handleUseWildCard = async (gameId: number) => {
    if (!currentAssignment || !id) return
    setIsUsingConsumable('wild_card')
    try {
      const result = await shopApi.useConsumable({
        item_code: 'wild_card',
        marathon_id: parseInt(id),
        assignment_id: currentAssignment.id,
        game_id: gameId,
      })
      toast.success(result.effect_description)
      setShowWildCardModal(false)
      await loadData()
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось использовать Wild Card')
    } finally {
      setIsUsingConsumable(null)
    }
  }

  const handleUseLuckyDice = async () => {
    if (!id) return
    setIsUsingConsumable('lucky_dice')
    try {
      const result = await shopApi.useConsumable({
        item_code: 'lucky_dice',
        marathon_id: parseInt(id),
      })
      const multiplier = result.effect_data?.multiplier as number
      toast.success(`Lucky Dice: x${multiplier} множитель!`)
      await loadData()
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось использовать Lucky Dice')
    } finally {
      setIsUsingConsumable(null)
    }
  }

  // Copycat modal state
  const [showCopycatModal, setShowCopycatModal] = useState(false)
  const [copycatCandidates, setCopycatCandidates] = useState<SwapCandidate[]>([])
  const [isLoadingCopycatCandidates, setIsLoadingCopycatCandidates] = useState(false)

  const loadCopycatCandidates = async () => {
    if (!id) return
    setIsLoadingCopycatCandidates(true)
    try {
      const candidates = await shopApi.getCopycatCandidates(parseInt(id))
      setCopycatCandidates(candidates)
    } catch (error) {
      console.error('Failed to load copycat candidates:', error)
    } finally {
      setIsLoadingCopycatCandidates(false)
    }
  }

  const handleUseCopycat = async (targetParticipantId: number) => {
    if (!currentAssignment || !id) return
    setIsUsingConsumable('copycat')
    try {
      const result = await shopApi.useConsumable({
        item_code: 'copycat',
        marathon_id: parseInt(id),
        assignment_id: currentAssignment.id,
        target_participant_id: targetParticipantId,
      })
      toast.success(result.effect_description)
      setShowCopycatModal(false)
      await loadData()
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось использовать Copycat')
    } finally {
      setIsUsingConsumable(null)
    }
  }

  const handleUseUndo = async () => {
    if (!id) return
    const confirmed = await confirm({
      title: 'Использовать Undo?',
      message: 'Это вернёт очки и серию от последнего пропуска.',
      confirmText: 'Использовать',
      cancelText: 'Отмена',
      variant: 'info',
    })
    if (!confirmed) return

    setIsUsingConsumable('undo')
    try {
      const result = await shopApi.useConsumable({
        item_code: 'undo',
        marathon_id: parseInt(id),
      })
      toast.success(result.effect_description)
      await loadData()
      useShopStore.getState().loadBalance()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      toast.error(error.response?.data?.detail || 'Не удалось использовать Undo')
    } finally {
      setIsUsingConsumable(null)
    }
  }

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center py-24">
        <Loader2 className="w-12 h-12 animate-spin text-neon-500 mb-4" />
        <p className="text-gray-400">Загрузка...</p>
      </div>
    )
  }

  if (!marathon) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-400">Марафон не найден</p>
      </div>
    )
  }

  const marathonEndDate = marathon.end_date ? new Date(marathon.end_date) : null
  const isMarathonExpired = marathonEndDate && new Date() > marathonEndDate
  const isMarathonEnded = marathon.status === 'finished' || isMarathonExpired

  if (isMarathonEnded) {
    return (
      <div className="max-w-2xl mx-auto">
        <Link
          to={`/marathons/${id}`}
          className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
        >
          <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
          К марафону
        </Link>

        <GlassCard className="text-center py-12">
          <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-yellow-500/20 border border-yellow-500/30 flex items-center justify-center">
            <Trophy className="w-10 h-10 text-yellow-400" />
          </div>
          <h2 className="text-2xl font-bold text-white mb-2">Марафон завершён</h2>
          <p className="text-gray-400 mb-6">
            {marathon.status === 'finished'
              ? 'Этот марафон был завершён организатором.'
              : 'Этот марафон завершился по истечении срока.'}
          </p>
          <Link to={`/marathons/${id}/leaderboard`}>
            <NeonButton icon={<Trophy className="w-4 h-4" />}>
              Посмотреть итоговый рейтинг
            </NeonButton>
          </Link>
        </GlassCard>
      </div>
    )
  }

  const participation = marathon.my_participation

  return (
    <div className="max-w-2xl mx-auto">
      {/* Back button */}
      <Link
        to={`/marathons/${id}`}
        className="inline-flex items-center gap-2 text-gray-400 hover:text-neon-400 mb-6 transition-colors group"
      >
        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
        К марафону
      </Link>

      {/* Header stats */}
      <div className="grid grid-cols-3 gap-4 mb-6">
        <StatsCard
          label="Очков"
          value={participation?.total_points || 0}
          icon={<Zap className="w-6 h-6" />}
          color="neon"
        />
        <StatsCard
          label="Серия"
          value={participation?.current_streak || 0}
          icon={<Flame className="w-6 h-6" />}
          color="purple"
        />
        <StatsCard
          label="Пропусков"
          value={participation?.drop_count || 0}
          icon={<Target className="w-6 h-6" />}
          color="default"
        />
      </div>

      {/* Active event banner */}
      {activeEvent?.event && (
        <div className="mb-6">
          <EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
        </div>
      )}

      {/* Returned assignments warning */}
      {returnedAssignments.length > 0 && (
        <GlassCard className="mb-6 border-orange-500/30">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
              <AlertTriangle className="w-5 h-5 text-orange-400" />
            </div>
            <div>
              <h3 className="font-semibold text-orange-400">Возвращённые задания</h3>
              <p className="text-sm text-gray-400">{returnedAssignments.length} заданий</p>
            </div>
          </div>
          <p className="text-gray-400 text-sm mb-4">
            Эти задания были оспорены. После текущего задания вам нужно будет их переделать.
          </p>
          <div className="space-y-2">
            {returnedAssignments.map((ra) => (
              <div
                key={ra.id}
                className="p-3 bg-orange-500/10 border border-orange-500/20 rounded-xl"
              >
                <div className="flex items-start justify-between">
                  <div>
                    {ra.is_playthrough ? (
                      <>
                        <p className="text-white font-medium">Прохождение: {ra.game_title}</p>
                        <p className="text-gray-400 text-sm">Прохождение игры</p>
                      </>
                    ) : ra.challenge ? (
                      <>
                        <p className="text-white font-medium">{ra.challenge.title}</p>
                        <p className="text-gray-400 text-sm">{ra.challenge.game.title}</p>
                      </>
                    ) : null}
                  </div>
                  {!ra.is_playthrough && ra.challenge && (
                    <span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs rounded-lg border border-green-500/30">
                      +{ra.challenge.points}
                    </span>
                  )}
                </div>
                <p className="text-orange-300 text-xs mt-2">
                  Причина: {ra.dispute_reason}
                </p>
              </div>
            ))}
          </div>
        </GlassCard>
      )}

      {/* Consumables Panel */}
      {consumablesStatus && marathon?.allow_consumables && (
        <GlassCard className="mb-6 border-purple-500/30">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-10 h-10 rounded-xl bg-purple-500/20 flex items-center justify-center">
              <Package className="w-5 h-5 text-purple-400" />
            </div>
            <div>
              <h3 className="font-semibold text-purple-400">Расходники</h3>
              <p className="text-sm text-gray-400">Используйте для облегчения задания</p>
            </div>
          </div>

          {/* Active effects */}
          {(consumablesStatus.has_active_boost || consumablesStatus.has_lucky_dice) && (
            <div className="mb-4 p-3 bg-green-500/10 border border-green-500/30 rounded-xl">
              <p className="text-green-400 text-sm font-medium mb-2">Активные эффекты:</p>
              <div className="flex flex-wrap gap-2">
                {consumablesStatus.has_active_boost && (
                  <span className="px-2 py-1 bg-yellow-500/20 text-yellow-400 text-xs rounded-lg border border-yellow-500/30 flex items-center gap-1">
                    <Zap className="w-3 h-3" /> Boost x1.5
                  </span>
                )}
                {consumablesStatus.has_lucky_dice && (
                  <span className="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded-lg border border-purple-500/30 flex items-center gap-1">
                    <Dice5 className="w-3 h-3" /> Lucky Dice x{consumablesStatus.lucky_dice_multiplier}
                  </span>
                )}
              </div>
            </div>
          )}

          {/* Consumables grid */}
          <div className="grid grid-cols-2 gap-3">
            {/* Skip */}
            <div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <SkipForward className="w-4 h-4 text-orange-400" />
                  <span className="text-white font-medium">Skip</span>
                </div>
                <span className="text-gray-400 text-sm">{consumablesStatus.skips_available} шт.</span>
              </div>
              <p className="text-gray-500 text-xs mb-2">Пропустить без штрафа</p>
              <NeonButton
                size="sm"
                variant="outline"
                onClick={handleUseSkip}
                disabled={consumablesStatus.skips_available === 0 || !currentAssignment || isUsingConsumable !== null}
                isLoading={isUsingConsumable === 'skip'}
                className="w-full"
              >
                Использовать
              </NeonButton>
            </div>

            {/* Skip with Exile */}
            <div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <XCircle className="w-4 h-4 text-red-400" />
                  <span className="text-white font-medium">Skip + Изгнание</span>
                </div>
                <span className="text-gray-400 text-sm">{consumablesStatus.skip_exiles_available} шт.</span>
              </div>
              <p className="text-gray-500 text-xs mb-2">Скип + убрать игру из пула</p>
              <NeonButton
                size="sm"
                variant="outline"
                onClick={handleUseSkipExile}
                disabled={consumablesStatus.skip_exiles_available === 0 || !currentAssignment || isUsingConsumable !== null}
                isLoading={isUsingConsumable === 'skip_exile'}
                className="w-full"
              >
                Использовать
              </NeonButton>
            </div>

            {/* Boost */}
            <div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Zap className="w-4 h-4 text-yellow-400" />
                  <span className="text-white font-medium">Boost</span>
                </div>
                <span className="text-gray-400 text-sm">
                  {consumablesStatus.has_active_boost ? 'Активен' : `${consumablesStatus.boosts_available} шт.`}
                </span>
              </div>
              <p className="text-gray-500 text-xs mb-2">x1.5 очков</p>
              <NeonButton
                size="sm"
                variant="outline"
                onClick={handleUseBoost}
                disabled={consumablesStatus.has_active_boost || consumablesStatus.boosts_available === 0 || isUsingConsumable !== null}
                isLoading={isUsingConsumable === 'boost'}
                className="w-full"
              >
                {consumablesStatus.has_active_boost ? 'Активен' : 'Активировать'}
              </NeonButton>
            </div>

            {/* Wild Card */}
            <div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Shuffle className="w-4 h-4 text-green-400" />
                  <span className="text-white font-medium">Wild Card</span>
                </div>
                <span className="text-gray-400 text-sm">{consumablesStatus.wild_cards_available} шт.</span>
              </div>
              <p className="text-gray-500 text-xs mb-2">Выбрать игру</p>
              <NeonButton
                size="sm"
                variant="outline"
                onClick={() => setShowWildCardModal(true)}
                disabled={consumablesStatus.wild_cards_available === 0 || !currentAssignment || isUsingConsumable !== null}
                isLoading={isUsingConsumable === 'wild_card'}
                className="w-full"
              >
                Выбрать
              </NeonButton>
            </div>

            {/* Lucky Dice */}
            <div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Dice5 className="w-4 h-4 text-purple-400" />
                  <span className="text-white font-medium">Lucky Dice</span>
                </div>
                <span className="text-gray-400 text-sm">
                  {consumablesStatus.has_lucky_dice ? `x${consumablesStatus.lucky_dice_multiplier}` : `${consumablesStatus.lucky_dice_available} шт.`}
                </span>
              </div>
              <p className="text-gray-500 text-xs mb-2">Случайный множитель</p>
              <NeonButton
                size="sm"
                variant="outline"
                onClick={handleUseLuckyDice}
                disabled={consumablesStatus.has_lucky_dice || consumablesStatus.lucky_dice_available === 0 || isUsingConsumable !== null}
                isLoading={isUsingConsumable === 'lucky_dice'}
                className="w-full"
              >
                {consumablesStatus.has_lucky_dice ? `x${consumablesStatus.lucky_dice_multiplier}` : 'Бросить'}
              </NeonButton>
            </div>

            {/* Copycat */}
            <div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Copy className="w-4 h-4 text-cyan-400" />
                  <span className="text-white font-medium">Copycat</span>
                </div>
                <span className="text-gray-400 text-sm">{consumablesStatus.copycats_available} шт.</span>
              </div>
              <p className="text-gray-500 text-xs mb-2">Скопировать задание</p>
              <NeonButton
                size="sm"
                variant="outline"
                onClick={() => {
                  setShowCopycatModal(true)
                  loadCopycatCandidates()
                }}
                disabled={consumablesStatus.copycats_available === 0 || !currentAssignment || isUsingConsumable !== null}
                isLoading={isUsingConsumable === 'copycat'}
                className="w-full"
              >
                Выбрать
              </NeonButton>
            </div>

            {/* Undo */}
            <div className="p-3 bg-dark-700/50 rounded-xl border border-dark-600">
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <Undo2 className="w-4 h-4 text-red-400" />
                  <span className="text-white font-medium">Undo</span>
                </div>
                <span className="text-gray-400 text-sm">{consumablesStatus.undos_available} шт.</span>
              </div>
              <p className="text-gray-500 text-xs mb-2">Отменить дроп</p>
              <NeonButton
                size="sm"
                variant="outline"
                onClick={handleUseUndo}
                disabled={!consumablesStatus.can_undo || consumablesStatus.undos_available === 0 || isUsingConsumable !== null}
                isLoading={isUsingConsumable === 'undo'}
                className="w-full"
              >
                {consumablesStatus.can_undo ? 'Отменить' : 'Нет дропа'}
              </NeonButton>
            </div>
          </div>
        </GlassCard>
      )}

      {/* Wild Card Modal */}
      {showWildCardModal && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <GlassCard className="w-full max-w-md max-h-[80vh] overflow-y-auto">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-white">Выберите игру</h3>
              <button
                onClick={() => setShowWildCardModal(false)}
                className="p-2 text-gray-400 hover:text-white"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <p className="text-gray-400 text-sm mb-4">
              Вы получите случайное задание из выбранной игры
            </p>
            <div className="space-y-2">
              {games.map((game) => (
                <button
                  key={game.id}
                  onClick={() => handleUseWildCard(game.id)}
                  disabled={isUsingConsumable === 'wild_card'}
                  className="w-full p-3 bg-dark-700/50 hover:bg-dark-700 rounded-xl text-left transition-colors border border-dark-600 hover:border-green-500/30 disabled:opacity-50"
                >
                  <p className="text-white font-medium">{game.title}</p>
                  <p className="text-gray-400 text-xs">{game.challenges_count} челленджей</p>
                </button>
              ))}
            </div>
          </GlassCard>
        </div>
      )}

      {/* Copycat Modal */}
      {showCopycatModal && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
          <GlassCard className="w-full max-w-md max-h-[80vh] overflow-y-auto">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-bold text-white">Скопировать задание</h3>
              <button
                onClick={() => setShowCopycatModal(false)}
                className="p-2 text-gray-400 hover:text-white"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <p className="text-gray-400 text-sm mb-4">
              Выберите участника, чьё задание хотите скопировать
            </p>
            {isLoadingCopycatCandidates ? (
              <div className="flex justify-center py-8">
                <Loader2 className="w-8 h-8 animate-spin text-cyan-400" />
              </div>
            ) : copycatCandidates.length === 0 ? (
              <p className="text-center text-gray-500 py-8">Нет доступных заданий для копирования</p>
            ) : (
              <div className="space-y-2">
                {copycatCandidates.map((candidate) => {
                  const displayTitle = candidate.is_playthrough
                    ? `Прохождение: ${candidate.game_title}`
                    : candidate.challenge_title || ''
                  const displayDetails = candidate.is_playthrough
                    ? `${candidate.playthrough_points || 0} очков`
                    : `${candidate.game_title} • ${candidate.challenge_points} очков • ${candidate.challenge_difficulty}`
                  return (
                  <button
                    key={candidate.participant_id}
                    onClick={() => handleUseCopycat(candidate.participant_id)}
                    disabled={isUsingConsumable === 'copycat'}
                    className="w-full p-3 bg-dark-700/50 hover:bg-dark-700 rounded-xl text-left transition-colors border border-dark-600 hover:border-cyan-500/30 disabled:opacity-50"
                  >
                    <p className="text-white font-medium">{candidate.user.nickname}</p>
                    <p className="text-cyan-400 text-sm">{displayTitle}</p>
                    <p className="text-gray-500 text-xs">
                      {displayDetails}
                    </p>
                  </button>
                  )
                })}
              </div>
            )}
          </GlassCard>
        </div>
      )}

      {/* Tabs for Common Enemy event */}
      {activeEvent?.event?.type === 'common_enemy' && (
        <div className="flex gap-2 mb-6">
          <NeonButton
            variant={activeTab === 'spin' ? 'primary' : 'outline'}
            onClick={() => setActiveTab('spin')}
            className="flex-1"
          >
            Мой прокрут
          </NeonButton>
          <NeonButton
            variant={activeTab === 'event' ? 'primary' : 'outline'}
            onClick={() => setActiveTab('event')}
            className="flex-1 relative"
            color="purple"
          >
            Общий враг
            {eventAssignment?.assignment && !eventAssignment.is_completed && (
              <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse" />
            )}
          </NeonButton>
        </div>
      )}

      {/* Event tab content (Common Enemy) */}
      {activeTab === 'event' && activeEvent?.event?.type === 'common_enemy' && (
        <>
          {/* Common Enemy Leaderboard */}
          <GlassCard className="mb-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-xl bg-red-500/20 flex items-center justify-center">
                <Users className="w-5 h-5 text-red-400" />
              </div>
              <div>
                <h3 className="font-semibold text-white">Выполнили челлендж</h3>
                <p className="text-sm text-gray-400">{commonEnemyLeaderboard.length} чел.</p>
              </div>
            </div>

            {commonEnemyLeaderboard.length === 0 ? (
              <div className="text-center py-8">
                <p className="text-gray-500">Пока никто не выполнил. Будь первым!</p>
              </div>
            ) : (
              <div className="space-y-2">
                {commonEnemyLeaderboard.map((entry) => (
                  <div
                    key={entry.participant_id}
                    className={`
                      flex items-center gap-3 p-3 rounded-xl border
                      ${entry.rank === 1 ? 'bg-yellow-500/10 border-yellow-500/30' :
                        entry.rank === 2 ? 'bg-gray-400/10 border-gray-400/30' :
                        entry.rank === 3 ? 'bg-orange-600/10 border-orange-600/30' :
                        'bg-dark-700/50 border-dark-600'}
                    `}
                  >
                    <div className={`
                      w-8 h-8 rounded-lg flex items-center justify-center font-bold text-sm
                      ${entry.rank === 1 ? 'bg-yellow-500 text-black' :
                        entry.rank === 2 ? 'bg-gray-400 text-black' :
                        entry.rank === 3 ? 'bg-orange-600 text-white' :
                        'bg-dark-600 text-gray-300'}
                    `}>
                      {entry.rank && entry.rank <= 3 ? (
                        <Trophy className="w-4 h-4" />
                      ) : (
                        entry.rank
                      )}
                    </div>
                    <div className="flex-1">
                      <p className="text-white font-medium">{entry.user.nickname}</p>
                    </div>
                    {entry.bonus_points > 0 && (
                      <span className="text-green-400 text-sm font-semibold">
                        +{entry.bonus_points} бонус
                      </span>
                    )}
                  </div>
                ))}
              </div>
            )}
          </GlassCard>

          {/* Event Assignment Card */}
          {eventAssignment?.assignment && !eventAssignment.is_completed ? (
            <GlassCard variant="neon">
              <div className="text-center mb-6">
                <span className="px-4 py-1.5 bg-red-500/20 text-red-400 rounded-full text-sm font-medium border border-red-500/30">
                  Задание события "Общий враг"
                </span>
              </div>

              <div className="mb-4">
                <p className="text-gray-400 text-sm mb-1">Игра</p>
                <p className="text-xl font-bold text-white">
                  {eventAssignment.assignment.challenge?.game.title}
                </p>
              </div>

              <div className="mb-4">
                <p className="text-gray-400 text-sm mb-1">Задание</p>
                <p className="text-xl font-bold text-neon-400 mb-2">
                  {eventAssignment.assignment.challenge?.title}
                </p>
                <p className="text-gray-300">
                  {eventAssignment.assignment.challenge?.description}
                </p>
              </div>

              <div className="flex items-center gap-3 mb-6 flex-wrap">
                <span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30">
                  +{eventAssignment.assignment.challenge?.points} очков
                </span>
                <span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600">
                  {eventAssignment.assignment.challenge?.difficulty}
                </span>
                {eventAssignment.assignment.challenge?.estimated_time && (
                  <span className="text-gray-400 text-sm flex items-center gap-1">
                    <Clock className="w-4 h-4" />
                    ~{eventAssignment.assignment.challenge.estimated_time} мин
                  </span>
                )}
              </div>

              {eventAssignment.assignment.challenge?.proof_hint && (
                <div className="mb-6 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
                  <p className="text-sm text-gray-400">
                    <strong className="text-white">Нужно доказательство:</strong> {eventAssignment.assignment.challenge.proof_hint}
                  </p>
                </div>
              )}

              <div className="space-y-4 mb-6">
                <div>
                  <label className="block text-sm font-medium text-gray-300 mb-2">
                    Загрузить доказательство ({eventAssignment.assignment.challenge?.proof_type})
                  </label>

                  <input
                    ref={eventFileInputRef}
                    type="file"
                    accept="image/*,video/*"
                    className="hidden"
                    onChange={(e) => validateAndSetFile(e.target.files?.[0] || null, setEventProofFile, eventFileInputRef)}
                  />

                  {eventProofFile ? (
                    <div className="flex items-center gap-2 p-3 bg-dark-700/50 rounded-xl border border-dark-600">
                      <span className="text-white flex-1 truncate">{eventProofFile.name}</span>
                      <button
                        onClick={() => setEventProofFile(null)}
                        className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
                      >
                        <X className="w-4 h-4" />
                      </button>
                    </div>
                  ) : (
                    <div>
                      <NeonButton
                        variant="outline"
                        className="w-full"
                        onClick={() => eventFileInputRef.current?.click()}
                        icon={<Upload className="w-4 h-4" />}
                      >
                        Выбрать файл
                      </NeonButton>
                      <p className="text-xs text-gray-500 mt-2 text-center">
                        Макс. 15 МБ для изображений, 30 МБ для видео
                      </p>
                    </div>
                  )}
                </div>

                <div className="text-center text-gray-500">или</div>

                <input
                  type="text"
                  className="input"
                  placeholder="Вставьте ссылку (YouTube, профиль Steam и т.д.)"
                  value={eventProofUrl}
                  onChange={(e) => setEventProofUrl(e.target.value)}
                />

                <textarea
                  className="input min-h-[80px] resize-none"
                  placeholder="Комментарий (необязательно)"
                  value={eventComment}
                  onChange={(e) => setEventComment(e.target.value)}
                />
              </div>

              <NeonButton
                className="w-full"
                onClick={handleEventComplete}
                isLoading={isEventCompleting}
                disabled={!eventProofFile && !eventProofUrl}
                icon={<Check className="w-4 h-4" />}
              >
                Выполнено
              </NeonButton>
            </GlassCard>
          ) : eventAssignment?.is_completed ? (
            <GlassCard className="text-center py-12">
              <div className="w-20 h-20 mx-auto mb-4 rounded-2xl bg-green-500/20 border border-green-500/30 flex items-center justify-center">
                <Check className="w-10 h-10 text-green-400" />
              </div>
              <h3 className="text-xl font-bold text-white mb-2">Задание выполнено!</h3>
              <p className="text-gray-400">
                Вы уже завершили челлендж события "Общий враг"
              </p>
              {eventAssignment.assignment && (
                <p className="text-green-400 font-semibold mt-2">
                  +{eventAssignment.assignment.points_earned} очков
                </p>
              )}
            </GlassCard>
          ) : (
            <GlassCard className="text-center py-12">
              <Loader2 className="w-8 h-8 animate-spin text-neon-400 mx-auto mb-4" />
              <p className="text-gray-400">Загрузка задания события...</p>
            </GlassCard>
          )}
        </>
      )}

      {/* Spin tab content */}
      {(activeTab === 'spin' || activeEvent?.event?.type !== 'common_enemy') && (
        <>
          {/* Game Choice section */}
          {activeEvent?.event?.type === 'game_choice' && (
            <GlassCard className="mb-6 border-orange-500/30">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-xl bg-orange-500/20 flex items-center justify-center">
                  <Gamepad2 className="w-5 h-5 text-orange-400" />
                </div>
                <div>
                  <h3 className="font-semibold text-orange-400">Выбор игры</h3>
                  <p className="text-sm text-gray-400">
                    {currentAssignment ? 'Текущее задание будет заменено без штрафа!' : 'Выберите игру и челлендж'}
                  </p>
                </div>
              </div>

              {!selectedGameId ? (
                <div className="grid grid-cols-2 gap-2">
                  {games.map((game) => (
                    <button
                      key={game.id}
                      onClick={() => handleGameSelect(game.id)}
                      className="p-3 bg-dark-700/50 hover:bg-dark-700 rounded-xl text-left transition-colors border border-dark-600 hover:border-orange-500/30"
                    >
                      <p className="text-white font-medium truncate">{game.title}</p>
                      <p className="text-gray-400 text-xs">{game.challenges_count} челленджей</p>
                    </button>
                  ))}
                </div>
              ) : (
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <h4 className="text-white font-medium">
                      {gameChoiceChallenges?.game_title || 'Загрузка...'}
                    </h4>
                    <NeonButton
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        setSelectedGameId(null)
                        setGameChoiceChallenges(null)
                      }}
                      icon={<ArrowLeft className="w-4 h-4" />}
                    >
                      Назад
                    </NeonButton>
                  </div>

                  {isLoadingChallenges ? (
                    <div className="flex justify-center py-8">
                      <Loader2 className="w-8 h-8 animate-spin text-orange-400" />
                    </div>
                  ) : gameChoiceChallenges?.challenges.length ? (
                    <div className="space-y-3">
                      {gameChoiceChallenges.challenges.map((challenge) => (
                        <div
                          key={challenge.id}
                          className="p-4 bg-dark-700/50 rounded-xl border border-dark-600"
                        >
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1 min-w-0">
                              <p className="text-white font-medium">{challenge.title}</p>
                              <p className="text-gray-400 text-sm mt-1">{challenge.description}</p>
                              <div className="flex items-center gap-2 mt-2 text-xs flex-wrap">
                                <span className="px-2 py-0.5 bg-green-500/20 text-green-400 rounded-lg border border-green-500/30">
                                  +{challenge.points} очков
                                </span>
                                <span className="px-2 py-0.5 bg-dark-600 text-gray-300 rounded-lg">
                                  {challenge.difficulty}
                                </span>
                                {challenge.estimated_time && (
                                  <span className="text-gray-500">~{challenge.estimated_time} мин</span>
                                )}
                              </div>
                            </div>
                            <NeonButton
                              size="sm"
                              onClick={() => handleChallengeSelect(challenge.id)}
                              isLoading={isSelectingChallenge}
                              disabled={isSelectingChallenge}
                            >
                              Выбрать
                            </NeonButton>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-center text-gray-500 py-8">
                      Нет доступных челленджей
                    </p>
                  )}
                </div>
              )}
            </GlassCard>
          )}

          {/* No active assignment - show spin wheel */}
          {!currentAssignment && (
            <GlassCard>
              <div className="text-center mb-6">
                <h2 className="text-2xl font-bold text-white mb-2">Крутите колесо!</h2>
                <p className="text-gray-400">
                  Получите случайную игру и задание для выполнения
                </p>
              </div>
              <SpinWheel
                games={games}
                onSpin={handleSpin}
                onSpinComplete={handleSpinComplete}
              />
            </GlassCard>
          )}

          {/* Active assignment */}
          {currentAssignment && (
            <>
              <GlassCard variant="neon">
                <div className="text-center mb-6">
                  <span className={`px-4 py-1.5 rounded-full text-sm font-medium border ${
                    currentAssignment.is_playthrough
                      ? 'bg-accent-500/20 text-accent-400 border-accent-500/30'
                      : 'bg-neon-500/20 text-neon-400 border-neon-500/30'
                  }`}>
                    {currentAssignment.is_playthrough ? 'Прохождение игры' : 'Активное задание'}
                  </span>
                </div>

                <div className="mb-4">
                  <p className="text-gray-400 text-sm mb-1">Игра</p>
                  <div className="flex items-center justify-between gap-3 flex-wrap">
                    <p className="text-xl font-bold text-white">
                      {currentAssignment.is_playthrough
                        ? currentAssignment.game?.title
                        : currentAssignment.challenge?.game.title}
                    </p>
                    {(currentAssignment.is_playthrough
                      ? currentAssignment.game?.download_url
                      : currentAssignment.challenge?.game.download_url) && (
                      <a
                        href={currentAssignment.is_playthrough
                          ? currentAssignment.game?.download_url
                          : currentAssignment.challenge?.game.download_url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="px-3 py-1.5 bg-neon-500/20 text-neon-400 rounded-lg text-sm font-medium border border-neon-500/30 flex items-center gap-1.5 hover:bg-neon-500/30 transition-colors"
                      >
                        <Download className="w-4 h-4" />
                        Скачать игру
                      </a>
                    )}
                  </div>
                </div>

                {currentAssignment.is_playthrough ? (
                  // Playthrough task
                  <>
                    <div className="mb-4">
                      <p className="text-gray-400 text-sm mb-1">Задача</p>
                      <p className="text-xl font-bold text-accent-400 mb-2">
                        Пройти игру
                      </p>
                      <p className="text-gray-300">
                        {currentAssignment.playthrough_info?.description}
                      </p>
                    </div>

                    <div className="flex items-center gap-3 mb-6 flex-wrap">
                      {/* Points - calculated from tracked time if available */}
                      {currentAssignment.tracked_time_minutes !== undefined && currentAssignment.tracked_time_minutes > 0 ? (
                        <span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30">
                          ~{Math.floor(currentAssignment.tracked_time_minutes / 60 * 30)} очков
                        </span>
                      ) : (
                        <span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30">
                          +{currentAssignment.playthrough_info?.points} очков
                        </span>
                      )}
                      {/* Time tracker indicator */}
                      {currentAssignment.tracked_time_minutes !== undefined && currentAssignment.tracked_time_minutes > 0 ? (
                        <span className="px-3 py-1.5 bg-neon-500/20 text-neon-400 rounded-lg text-sm font-medium border border-neon-500/30 flex items-center gap-1.5">
                          <Clock className="w-4 h-4" />
                          {Math.floor(currentAssignment.tracked_time_minutes / 60)}ч {currentAssignment.tracked_time_minutes % 60}м
                        </span>
                      ) : (
                        <span className="px-3 py-1.5 bg-gray-500/20 text-gray-400 rounded-lg text-sm font-medium border border-gray-500/30 flex items-center gap-1.5">
                          <Clock className="w-4 h-4" />
                          Установите трекер
                        </span>
                      )}
                    </div>

                    {currentAssignment.playthrough_info?.proof_hint && (
                      <div className="mb-6 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
                        <p className="text-sm text-gray-400">
                          <strong className="text-white">Нужно доказательство:</strong> {currentAssignment.playthrough_info.proof_hint}
                        </p>
                      </div>
                    )}

                    {/* Bonus challenges */}
                    {currentAssignment.bonus_challenges && currentAssignment.bonus_challenges.length > 0 && (
                      <div className="mb-6 p-4 bg-accent-500/10 rounded-xl border border-accent-500/20">
                        <p className="text-accent-400 font-medium mb-3">
                          Бонусные челленджи (опционально) — {currentAssignment.bonus_challenges.filter(b => b.status === 'completed').length}/{currentAssignment.bonus_challenges.length}
                        </p>
                        <div className="space-y-2">
                          {currentAssignment.bonus_challenges.map((bonus) => (
                            <div
                              key={bonus.id}
                              className={`rounded-lg border overflow-hidden ${
                                bonus.status === 'completed'
                                  ? 'bg-green-500/10 border-green-500/30'
                                  : 'bg-dark-700/50 border-dark-600'
                              }`}
                            >
                              {/* Bonus header */}
                              <div
                                className={`p-3 flex items-center justify-between ${
                                  bonus.status === 'pending' ? 'cursor-pointer hover:bg-dark-600/50' : ''
                                }`}
                                onClick={() => {
                                  if (bonus.status === 'pending') {
                                    setExpandedBonusId(expandedBonusId === bonus.id ? null : bonus.id)
                                    setBonusProofFiles([])
                                    setBonusProofUrl('')
                                    setBonusComment('')
                                    if (bonusFileInputRef.current) bonusFileInputRef.current.value = ''
                                  }
                                }}
                              >
                                <div className="flex-1">
                                  <div className="flex items-center gap-2">
                                    {bonus.status === 'completed' && (
                                      <Check className="w-4 h-4 text-green-400" />
                                    )}
                                    <p className="text-white font-medium text-sm">{bonus.challenge.title}</p>
                                  </div>
                                  <p className="text-gray-400 text-xs mt-0.5">{bonus.challenge.description}</p>
                                </div>
                                <div className="text-right shrink-0 ml-2">
                                  {bonus.status === 'completed' ? (
                                    <span className="text-green-400 text-sm font-medium">+{bonus.points_earned}</span>
                                  ) : (
                                    <span className="text-accent-400 text-sm">+{bonus.challenge.points}</span>
                                  )}
                                </div>
                              </div>

                              {/* Expanded form for completing */}
                              {expandedBonusId === bonus.id && bonus.status === 'pending' && (
                                <div className="p-3 border-t border-dark-600 bg-dark-800/50 space-y-3">
                                  {bonus.challenge.proof_hint && (
                                    <p className="text-xs text-gray-400">
                                      <strong className="text-white">Пруф:</strong> {bonus.challenge.proof_hint}
                                    </p>
                                  )}

                                  {/* File upload */}
                                  <input
                                    ref={bonusFileInputRef}
                                    type="file"
                                    accept="image/*,video/*"
                                    multiple
                                    className="hidden"
                                    onChange={(e) => {
                                      e.stopPropagation()
                                      const files = Array.from(e.target.files || [])
                                      setBonusProofFiles(prev => [...prev, ...files])
                                      e.target.value = ''
                                    }}
                                  />
                                  {bonusProofFiles.length > 0 ? (
                                    <div className="space-y-2">
                                      {bonusProofFiles.map((file, index) => (
                                        <div key={index} className="flex items-center gap-2 p-2 bg-dark-700/50 rounded-lg border border-dark-600">
                                          <span className="text-white text-sm flex-1 truncate">{file.name}</span>
                                          <button
                                            onClick={(e) => {
                                              e.stopPropagation()
                                              setBonusProofFiles(prev => prev.filter((_, i) => i !== index))
                                            }}
                                            className="p-1 rounded text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
                                          >
                                            <X className="w-3 h-3" />
                                          </button>
                                        </div>
                                      ))}
                                      <button
                                        onClick={(e) => {
                                          e.stopPropagation()
                                          bonusFileInputRef.current?.click()
                                        }}
                                        className="w-full p-2 border border-dashed border-neon-500/30 rounded-lg text-neon-400 hover:border-neon-500/50 hover:bg-neon-500/5 transition-all text-sm flex items-center justify-center gap-2"
                                      >
                                        <Upload className="w-4 h-4" />
                                        Добавить еще файл
                                      </button>
                                    </div>
                                  ) : (
                                    <button
                                      onClick={(e) => {
                                        e.stopPropagation()
                                        bonusFileInputRef.current?.click()
                                      }}
                                      className="w-full p-2 border border-dashed border-dark-500 rounded-lg text-gray-400 text-sm hover:border-accent-400 hover:text-accent-400 transition-colors flex items-center justify-center gap-2"
                                    >
                                      <Upload className="w-4 h-4" />
                                      Загрузить файл
                                    </button>
                                  )}

                                  <div className="text-center text-gray-500 text-xs">или</div>

                                  <input
                                    type="text"
                                    className="input text-sm"
                                    placeholder="Ссылка на пруф (YouTube, Steam и т.д.)"
                                    value={bonusProofUrl}
                                    onChange={(e) => setBonusProofUrl(e.target.value)}
                                    onClick={(e) => e.stopPropagation()}
                                  />
                                  <textarea
                                    className="input text-sm resize-none"
                                    placeholder="Комментарий (необязательно)"
                                    rows={2}
                                    value={bonusComment}
                                    onChange={(e) => setBonusComment(e.target.value)}
                                    onClick={(e) => e.stopPropagation()}
                                  />
                                  <div className="flex gap-2">
                                    <NeonButton
                                      size="sm"
                                      onClick={(e) => {
                                        e.stopPropagation()
                                        handleBonusComplete(bonus.id)
                                      }}
                                      isLoading={isCompletingBonus}
                                      disabled={bonusProofFiles.length === 0 && !bonusProofUrl && !bonusComment}
                                      icon={<Check className="w-3 h-3" />}
                                    >
                                      Выполнено
                                    </NeonButton>
                                    <NeonButton
                                      size="sm"
                                      variant="outline"
                                      onClick={(e) => {
                                        e.stopPropagation()
                                        setBonusProofFiles([])
                                        setBonusProofUrl('')
                                        setBonusComment('')
                                        setExpandedBonusId(null)
                                        if (bonusFileInputRef.current) bonusFileInputRef.current.value = ''
                                      }}
                                    >
                                      Отмена
                                    </NeonButton>
                                  </div>
                                </div>
                              )}
                            </div>
                          ))}
                        </div>
                        <p className="text-xs text-gray-500 mt-2">
                          Нажмите на бонус, чтобы отметить. Очки начислятся при завершении игры.
                        </p>
                      </div>
                    )}
                  </>
                ) : (
                  // Regular challenge
                  <>
                    <div className="mb-4">
                      <p className="text-gray-400 text-sm mb-1">Задание</p>
                      <p className="text-xl font-bold text-neon-400 mb-2">
                        {currentAssignment.challenge?.title}
                      </p>
                      <p className="text-gray-300">
                        {currentAssignment.challenge?.description}
                      </p>
                    </div>

                    <div className="flex items-center gap-3 mb-6 flex-wrap">
                      <span className="px-3 py-1.5 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium border border-green-500/30">
                        +{currentAssignment.challenge?.points} очков
                      </span>
                      <span className="px-3 py-1.5 bg-dark-700 text-gray-300 rounded-lg text-sm border border-dark-600">
                        {currentAssignment.challenge?.difficulty}
                      </span>
                      {currentAssignment.challenge?.estimated_time && (
                        <span className="text-gray-400 text-sm flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          ~{currentAssignment.challenge.estimated_time} мин
                        </span>
                      )}
                    </div>

                    {currentAssignment.challenge?.proof_hint && (
                      <div className="mb-6 p-4 bg-dark-700/50 rounded-xl border border-dark-600">
                        <p className="text-sm text-gray-400">
                          <strong className="text-white">Нужно доказательство:</strong> {currentAssignment.challenge.proof_hint}
                        </p>
                      </div>
                    )}
                  </>
                )}

                <div className="space-y-4 mb-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">
                      Загрузить доказательство ({currentAssignment.is_playthrough
                        ? currentAssignment.playthrough_info?.proof_type
                        : currentAssignment.challenge?.proof_type})
                    </label>

                    <input
                      ref={fileInputRef}
                      type="file"
                      accept="image/*,video/*"
                      multiple
                      className="hidden"
                      onChange={(e) => {
                        const files = Array.from(e.target.files || [])
                        setProofFiles(prev => [...prev, ...files])
                        // Reset input to allow selecting same files again
                        e.target.value = ''
                      }}
                    />

                    {proofFiles.length > 0 ? (
                      <div className="space-y-2">
                        {proofFiles.map((file, index) => (
                          <div key={index} className="flex items-center gap-2 p-3 bg-dark-700/50 rounded-xl border border-dark-600">
                            <span className="text-white flex-1 truncate">{file.name}</span>
                            <button
                              onClick={() => setProofFiles(proofFiles.filter((_, i) => i !== index))}
                              className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-dark-600 transition-colors"
                            >
                              <X className="w-4 h-4" />
                            </button>
                          </div>
                        ))}
                        <NeonButton
                          variant="outline"
                          className="w-full"
                          onClick={() => fileInputRef.current?.click()}
                          icon={<Upload className="w-4 h-4" />}
                        >
                          Добавить ещё файлы
                        </NeonButton>
                      </div>
                    ) : (
                      <div>
                        <NeonButton
                          variant="outline"
                          className="w-full"
                          onClick={() => fileInputRef.current?.click()}
                          icon={<Upload className="w-4 h-4" />}
                        >
                          Выбрать файлы
                        </NeonButton>
                        <p className="text-xs text-gray-500 mt-2 text-center">
                          Можно выбрать несколько файлов. Макс. 15 МБ для изображений, 30 МБ для видео
                        </p>
                      </div>
                    )}
                  </div>

                  <div className="text-center text-gray-500">или</div>

                  <input
                    type="text"
                    className="input"
                    placeholder="Вставьте ссылку (YouTube, профиль Steam и т.д.)"
                    value={proofUrl}
                    onChange={(e) => setProofUrl(e.target.value)}
                  />

                  <textarea
                    className="input min-h-[80px] resize-none"
                    placeholder="Комментарий (необязательно)"
                    value={comment}
                    onChange={(e) => setComment(e.target.value)}
                  />
                </div>

                <div className="flex gap-3">
                  <NeonButton
                    className="flex-1"
                    onClick={handleComplete}
                    isLoading={isCompleting}
                    disabled={currentAssignment.is_playthrough
                      ? (proofFiles.length === 0 && !proofUrl && !comment)
                      : (proofFiles.length === 0 && !proofUrl)
                    }
                    icon={<Check className="w-4 h-4" />}
                  >
                    Выполнено
                  </NeonButton>
                  <NeonButton
                    variant="danger"
                    onClick={handleDrop}
                    isLoading={isDropping}
                    icon={<XCircle className="w-4 h-4" />}
                  >
                    Пропустить (-{currentAssignment.drop_penalty})
                  </NeonButton>
                </div>
              </GlassCard>

              {/* Swap section */}
              {activeEvent?.event?.type === 'swap' && (
                <GlassCard className="mt-6 border-neon-500/30">
                  <div className="flex items-center gap-3 mb-4">
                    <div className="w-10 h-10 rounded-xl bg-neon-500/20 flex items-center justify-center">
                      <ArrowLeftRight className="w-5 h-5 text-neon-400" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-neon-400">Обмен заданиями</h3>
                      <p className="text-sm text-gray-400">Требует подтверждения с обеих сторон</p>
                    </div>
                  </div>

                  {/* Incoming swap requests */}
                  {swapRequests.incoming.length > 0 && (
                    <div className="mb-6">
                      <h4 className="text-sm font-medium text-yellow-400 mb-3 flex items-center gap-2">
                        <Clock className="w-4 h-4" />
                        Входящие запросы ({swapRequests.incoming.length})
                      </h4>
                      <div className="space-y-3">
                        {swapRequests.incoming.map((request) => {
                          const challengeTitle = request.from_challenge.is_playthrough
                            ? `Прохождение: ${request.from_challenge.game_title}`
                            : request.from_challenge.title || ''
                          const challengeDetails = request.from_challenge.is_playthrough
                            ? `${request.from_challenge.playthrough_points || 0} очков`
                            : `${request.from_challenge.game_title} • ${request.from_challenge.points} очков`
                          return (
                          <div
                            key={request.id}
                            className="p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-xl"
                          >
                            <div className="flex items-start justify-between gap-3">
                              <div className="flex-1 min-w-0">
                                <p className="text-white font-medium">
                                  {request.from_user.nickname} предлагает обмен
                                </p>
                                <p className="text-yellow-400 text-sm mt-1">
                                  Вы получите: <span className="font-medium">{challengeTitle}</span>
                                </p>
                                <p className="text-gray-400 text-xs">
                                  {challengeDetails}
                                </p>
                              </div>
                              <div className="flex flex-col gap-2">
                                <NeonButton
                                  size="sm"
                                  onClick={() => handleAcceptSwapRequest(request.id)}
                                  isLoading={processingRequestId === request.id}
                                  disabled={processingRequestId !== null}
                                  icon={<Check className="w-4 h-4" />}
                                >
                                  Принять
                                </NeonButton>
                                <NeonButton
                                  size="sm"
                                  variant="outline"
                                  className="border-red-500/30 text-red-400"
                                  onClick={() => handleDeclineSwapRequest(request.id)}
                                  isLoading={processingRequestId === request.id}
                                  disabled={processingRequestId !== null}
                                  icon={<XCircle className="w-4 h-4" />}
                                >
                                  Отклонить
                                </NeonButton>
                              </div>
                            </div>
                          </div>
                          )
                        })}
                      </div>
                    </div>
                  )}

                  {/* Outgoing swap requests */}
                  {swapRequests.outgoing.length > 0 && (
                    <div className="mb-6">
                      <h4 className="text-sm font-medium text-accent-400 mb-3 flex items-center gap-2">
                        <Send className="w-4 h-4" />
                        Отправленные запросы ({swapRequests.outgoing.length})
                      </h4>
                      <div className="space-y-3">
                        {swapRequests.outgoing.map((request) => {
                          const challengeTitle = request.to_challenge.is_playthrough
                            ? `Прохождение: ${request.to_challenge.game_title}`
                            : request.to_challenge.title || ''
                          return (
                          <div
                            key={request.id}
                            className="p-4 bg-accent-500/10 border border-accent-500/30 rounded-xl"
                          >
                            <div className="flex items-start justify-between gap-3">
                              <div className="flex-1 min-w-0">
                                <p className="text-white font-medium">
                                  Запрос к {request.to_user.nickname}
                                </p>
                                <p className="text-accent-400 text-sm mt-1">
                                  Вы получите: <span className="font-medium">{challengeTitle}</span>
                                </p>
                                <p className="text-gray-500 text-xs mt-1">
                                  Ожидание подтверждения...
                                </p>
                              </div>
                              <NeonButton
                                size="sm"
                                variant="outline"
                                onClick={() => handleCancelSwapRequest(request.id)}
                                isLoading={processingRequestId === request.id}
                                disabled={processingRequestId !== null}
                                icon={<X className="w-4 h-4" />}
                              >
                                Отменить
                              </NeonButton>
                            </div>
                          </div>
                          )
                        })}
                      </div>
                    </div>
                  )}

                  {/* Swap candidates */}
                  <div>
                    <h4 className="text-sm font-medium text-gray-300 mb-3">
                      Доступные для обмена
                    </h4>
                    {isSwapLoading ? (
                      <div className="flex justify-center py-8">
                        <Loader2 className="w-8 h-8 animate-spin text-neon-400" />
                      </div>
                    ) : swapCandidates.filter(c =>
                        !swapRequests.outgoing.some(r => r.to_user.id === c.user.id) &&
                        !swapRequests.incoming.some(r => r.from_user.id === c.user.id)
                      ).length === 0 ? (
                      <div className="text-center py-8 text-gray-500">
                        Нет участников для обмена
                      </div>
                    ) : (
                      <div className="space-y-3">
                        {swapCandidates
                          .filter(c =>
                            !swapRequests.outgoing.some(r => r.to_user.id === c.user.id) &&
                            !swapRequests.incoming.some(r => r.from_user.id === c.user.id)
                          )
                          .map((candidate) => {
                            const displayTitle = candidate.is_playthrough
                              ? `Прохождение: ${candidate.game_title}`
                              : candidate.challenge_title || ''
                            const displayDetails = candidate.is_playthrough
                              ? `${candidate.playthrough_points || 0} очков`
                              : `${candidate.game_title} • ${candidate.challenge_points} очков • ${candidate.challenge_difficulty}`
                            return (
                          <div
                            key={candidate.participant_id}
                            className="p-4 bg-dark-700/50 rounded-xl border border-dark-600"
                          >
                            <div className="flex items-start justify-between gap-3">
                              <div className="flex-1 min-w-0">
                                <p className="text-white font-medium">
                                  {candidate.user.nickname}
                                </p>
                                <p className="text-neon-400 text-sm font-medium truncate">
                                  {displayTitle}
                                </p>
                                <p className="text-gray-400 text-xs mt-1">
                                  {displayDetails}
                                </p>
                              </div>
                              <NeonButton
                                size="sm"
                                variant="outline"
                                onClick={() => handleSendSwapRequest(
                                  candidate.participant_id,
                                  candidate.user.nickname,
                                  displayTitle
                                )}
                                isLoading={sendingRequestTo === candidate.participant_id}
                                disabled={sendingRequestTo !== null}
                                icon={<ArrowLeftRight className="w-4 h-4" />}
                              >
                                Предложить
                              </NeonButton>
                            </div>
                          </div>
                            )
                        })}
                      </div>
                    )}
                  </div>
                </GlassCard>
              )}
            </>
          )}
        </>
      )}
    </div>
  )
}