import { useState, useEffect, useRef } from 'react'
import { useParams, Link } from 'react-router-dom'
import { marathonsApi, wheelApi, gamesApi, eventsApi } from '@/api'
import type { Marathon, Assignment, SpinResult, Game, ActiveEvent, SwapCandidate, MySwapRequests, CommonEnemyLeaderboardEntry, EventAssignment, GameChoiceChallenges } from '@/types'
import { Button, Card, CardContent } 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 } from 'lucide-react'

export function PlayPage() {
  const { id } = useParams<{ id: string }>()

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

  // Complete state
  const [proofFile, setProofFile] = useState<File | null>(null)
  const [proofUrl, setProofUrl] = useState('')
  const [comment, setComment] = useState('')
  const [isCompleting, setIsCompleting] = useState(false)

  // Drop state
  const [isDropping, setIsDropping] = useState(false)

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

  // Swap state
  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)

  // Common Enemy leaderboard state
  const [commonEnemyLeaderboard, setCommonEnemyLeaderboard] = useState<CommonEnemyLeaderboardEntry[]>([])

  // Tab state for Common Enemy
  type PlayTab = 'spin' | 'event'
  const [activeTab, setActiveTab] = useState<PlayTab>('spin')

  // Event assignment state (Common Enemy)
  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 fileInputRef = useRef<HTMLInputElement>(null)
  const eventFileInputRef = useRef<HTMLInputElement>(null)

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

  // Reset game choice state when event changes or ends
  useEffect(() => {
    if (activeEvent?.event?.type !== 'game_choice') {
      setSelectedGameId(null)
      setGameChoiceChallenges(null)
    }
  }, [activeEvent?.event?.type])

  // Load swap candidates and requests when swap event is active
  useEffect(() => {
    if (activeEvent?.event?.type === 'swap') {
      loadSwapRequests()
      if (currentAssignment) {
        loadSwapCandidates()
      }
    }
  }, [activeEvent?.event?.type, currentAssignment])

  // Load common enemy leaderboard when common_enemy event is active
  useEffect(() => {
    if (activeEvent?.event?.type === 'common_enemy') {
      loadCommonEnemyLeaderboard()
      // Poll for updates every 10 seconds
      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)
      alert('Не удалось загрузить челленджи для этой игры')
    } 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 loadData = async () => {
    if (!id) return
    try {
      const [marathonData, assignment, gamesData, eventData, eventAssignmentData] = await Promise.all([
        marathonsApi.get(parseInt(id)),
        wheelApi.getCurrentAssignment(parseInt(id)),
        gamesApi.list(parseInt(id), 'approved'),
        eventsApi.getActive(parseInt(id)),
        eventsApi.getEventAssignment(parseInt(id)),
      ])
      setMarathon(marathonData)
      setCurrentAssignment(assignment)
      setGames(gamesData)
      setActiveEvent(eventData)
      setEventAssignment(eventAssignmentData)
    } 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))
      setSpinResult(result)
      return result.game
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      alert(error.response?.data?.detail || 'Не удалось крутить')
      return null
    }
  }

  const handleSpinComplete = async () => {
    // Small delay then reload data to show the assignment
    setTimeout(async () => {
      await loadData()
    }, 500)
  }

  const handleComplete = async () => {
    if (!currentAssignment) return
    if (!proofFile && !proofUrl) {
      alert('Пожалуйста, предоставьте доказательство (файл или ссылку)')
      return
    }

    setIsCompleting(true)
    try {
      const result = await wheelApi.complete(currentAssignment.id, {
        proof_file: proofFile || undefined,
        proof_url: proofUrl || undefined,
        comment: comment || undefined,
      })

      alert(`Выполнено! +${result.points_earned} очков (бонус серии: +${result.streak_bonus})`)

      // Reset form
      setProofFile(null)
      setProofUrl('')
      setComment('')
      setSpinResult(null)

      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      alert(error.response?.data?.detail || 'Не удалось выполнить')
    } finally {
      setIsCompleting(false)
    }
  }

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

    const penalty = spinResult?.drop_penalty || 0
    if (!confirm(`Пропустить это задание? Вы потеряете ${penalty} очков.`)) return

    setIsDropping(true)
    try {
      const result = await wheelApi.drop(currentAssignment.id)
      alert(`Пропущено. Штраф: -${result.penalty} очков`)

      setSpinResult(null)
      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      alert(error.response?.data?.detail || 'Не удалось пропустить')
    } finally {
      setIsDropping(false)
    }
  }

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

    setIsEventCompleting(true)
    try {
      const result = await eventsApi.completeEventAssignment(eventAssignment.assignment.id, {
        proof_file: eventProofFile || undefined,
        proof_url: eventProofUrl || undefined,
        comment: eventComment || undefined,
      })

      alert(`Выполнено! +${result.points_earned} очков`)

      // Reset form
      setEventProofFile(null)
      setEventProofUrl('')
      setEventComment('')

      await loadData()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { detail?: string } } }
      alert(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 confirmMessage = hasActiveAssignment
      ? 'Выбрать этот челлендж? Текущее задание будет заменено без штрафа.'
      : 'Выбрать этот челлендж?'

    if (!confirm(confirmMessage)) return

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

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

    if (!confirm(`Отправить запрос на обмен с ${participantName}?\n\nВы предлагаете обменяться на: "${theirChallenge}"\n\n${participantName} должен будет подтвердить обмен.`)) return

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

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

    if (!confirm('Принять обмен? Задания будут обменяны сразу после подтверждения.')) return

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

  if (isLoading) {
    return (
      <div className="flex justify-center py-12">
        <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
      </div>
    )
  }

  if (!marathon) {
    return <div>Марафон не найден</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-white mb-4 transition-colors">
        <ArrowLeft className="w-4 h-4" />
        К марафону
      </Link>

      {/* Header stats */}
      <div className="grid grid-cols-3 gap-4 mb-6">
        <Card>
          <CardContent className="text-center py-3">
            <div className="text-xl font-bold text-primary-500">
              {participation?.total_points || 0}
            </div>
            <div className="text-xs text-gray-400">Очков</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="text-center py-3">
            <div className="text-xl font-bold text-yellow-500">
              {participation?.current_streak || 0}
            </div>
            <div className="text-xs text-gray-400">Серия</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="text-center py-3">
            <div className="text-xl font-bold text-gray-400">
              {participation?.drop_count || 0}
            </div>
            <div className="text-xs text-gray-400">Пропусков</div>
          </CardContent>
        </Card>
      </div>

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

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

      {/* Event tab content (Common Enemy) */}
      {activeTab === 'event' && activeEvent?.event?.type === 'common_enemy' && (
        <>
          {/* Common Enemy Leaderboard */}
          <Card className="mb-6">
            <CardContent>
              <div className="flex items-center gap-2 mb-4">
                <Users className="w-5 h-5 text-red-500" />
                <h3 className="text-lg font-bold text-white">Выполнили челлендж</h3>
                {commonEnemyLeaderboard.length > 0 && (
                  <span className="ml-auto text-gray-400 text-sm">
                    {commonEnemyLeaderboard.length} чел.
                  </span>
                )}
              </div>

              {commonEnemyLeaderboard.length === 0 ? (
                <div className="text-center py-4 text-gray-500">
                  Пока никто не выполнил. Будь первым!
                </div>
              ) : (
                <div className="space-y-2">
                  {commonEnemyLeaderboard.map((entry) => (
                    <div
                      key={entry.participant_id}
                      className={`
                        flex items-center gap-3 p-3 rounded-lg
                        ${entry.rank === 1 ? 'bg-yellow-500/20 border border-yellow-500/30' :
                          entry.rank === 2 ? 'bg-gray-400/20 border border-gray-400/30' :
                          entry.rank === 3 ? 'bg-orange-600/20 border border-orange-600/30' :
                          'bg-gray-800'}
                      `}
                    >
                      <div className={`
                        w-8 h-8 rounded-full 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-gray-700 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-medium">
                          +{entry.bonus_points} бонус
                        </span>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

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

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

                {/* Challenge */}
                <div className="mb-4">
                  <h3 className="text-lg font-medium text-gray-400 mb-1">Задание</h3>
                  <p className="text-xl font-bold text-white mb-2">
                    {eventAssignment.assignment.challenge.title}
                  </p>
                  <p className="text-gray-300">
                    {eventAssignment.assignment.challenge.description}
                  </p>
                </div>

                {/* Points */}
                <div className="flex items-center gap-4 mb-6 text-sm">
                  <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full">
                    +{eventAssignment.assignment.challenge.points} очков
                  </span>
                  <span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full">
                    {eventAssignment.assignment.challenge.difficulty}
                  </span>
                  {eventAssignment.assignment.challenge.estimated_time && (
                    <span className="text-gray-400">
                      ~{eventAssignment.assignment.challenge.estimated_time} мин
                    </span>
                  )}
                </div>

                {/* Proof hint */}
                {eventAssignment.assignment.challenge.proof_hint && (
                  <div className="mb-6 p-3 bg-gray-900 rounded-lg">
                    <p className="text-sm text-gray-400">
                      <strong>Нужно доказательство:</strong> {eventAssignment.assignment.challenge.proof_hint}
                    </p>
                  </div>
                )}

                {/* Proof upload */}
                <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>

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

                    {eventProofFile ? (
                      <div className="flex items-center gap-2 p-3 bg-gray-900 rounded-lg">
                        <span className="text-white flex-1 truncate">{eventProofFile.name}</span>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => setEventProofFile(null)}
                        >
                          <X className="w-4 h-4" />
                        </Button>
                      </div>
                    ) : (
                      <Button
                        variant="secondary"
                        className="w-full"
                        onClick={() => eventFileInputRef.current?.click()}
                      >
                        <Upload className="w-4 h-4 mr-2" />
                        Выбрать файл
                      </Button>
                    )}
                  </div>

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

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

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

                {/* Actions */}
                <div className="flex gap-3">
                  <Button
                    className="flex-1"
                    onClick={handleEventComplete}
                    isLoading={isEventCompleting}
                    disabled={!eventProofFile && !eventProofUrl}
                  >
                    Выполнено
                  </Button>
                </div>
              </CardContent>
            </Card>
          ) : eventAssignment?.is_completed ? (
            <Card>
              <CardContent className="text-center py-8">
                <div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Check className="w-8 h-8 text-green-500" />
                </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 mt-2">
                    +{eventAssignment.assignment.points_earned} очков
                  </p>
                )}
              </CardContent>
            </Card>
          ) : (
            <Card>
              <CardContent className="text-center py-8">
                <Loader2 className="w-8 h-8 animate-spin text-gray-500 mx-auto mb-4" />
                <p className="text-gray-400">Загрузка задания события...</p>
              </CardContent>
            </Card>
          )}
        </>
      )}

      {/* Spin tab content - only show when spin tab is active or no common_enemy event */}
      {(activeTab === 'spin' || activeEvent?.event?.type !== 'common_enemy') && (
        <>
          {/* Common Enemy Leaderboard - show on spin tab too for context */}
          {activeEvent?.event?.type === 'common_enemy' && activeTab === 'spin' && commonEnemyLeaderboard.length > 0 && (
            <Card className="mb-6">
              <CardContent>
                <div className="flex items-center gap-2 mb-4">
                  <Users className="w-5 h-5 text-red-500" />
                  <h3 className="text-lg font-bold text-white">Выполнили челлендж</h3>
                  {commonEnemyLeaderboard.length > 0 && (
                    <span className="ml-auto text-gray-400 text-sm">
                      {commonEnemyLeaderboard.length} чел.
                    </span>
                  )}
                </div>

                {commonEnemyLeaderboard.length === 0 ? (
                  <div className="text-center py-4 text-gray-500">
                    Пока никто не выполнил. Будь первым!
                  </div>
                ) : (
                  <div className="space-y-2">
                    {commonEnemyLeaderboard.map((entry) => (
                      <div
                        key={entry.participant_id}
                        className={`
                          flex items-center gap-3 p-3 rounded-lg
                          ${entry.rank === 1 ? 'bg-yellow-500/20 border border-yellow-500/30' :
                            entry.rank === 2 ? 'bg-gray-400/20 border border-gray-400/30' :
                            entry.rank === 3 ? 'bg-orange-600/20 border border-orange-600/30' :
                            'bg-gray-800'}
                        `}
                      >
                        <div className={`
                          w-8 h-8 rounded-full 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-gray-700 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-medium">
                            +{entry.bonus_points} бонус
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          )}

          {/* Game Choice section - show ABOVE spin wheel during game_choice event (works with or without assignment) */}
          {activeEvent?.event?.type === 'game_choice' && (
            <Card className="mb-6">
              <CardContent>
                <div className="flex items-center gap-2 mb-4">
                  <Gamepad2 className="w-5 h-5 text-orange-500" />
                  <h3 className="text-lg font-bold text-white">Выбор игры</h3>
                </div>
                <p className="text-gray-400 text-sm mb-4">
                  Выберите игру и один из 3 челленджей. {currentAssignment ? 'Текущее задание будет заменено без штрафа!' : ''}
                </p>

                {/* Game selection */}
                {!selectedGameId && (
                  <div className="grid grid-cols-2 gap-2">
                    {games.map((game) => (
                      <button
                        key={game.id}
                        onClick={() => handleGameSelect(game.id)}
                        className="p-3 bg-gray-900 hover:bg-gray-800 rounded-lg text-left transition-colors"
                      >
                        <p className="text-white font-medium truncate">{game.title}</p>
                        <p className="text-gray-400 text-xs">{game.challenges_count} челленджей</p>
                      </button>
                    ))}
                  </div>
                )}

                {/* Challenge selection */}
                {selectedGameId && (
                  <div>
                    <div className="flex items-center justify-between mb-4">
                      <h4 className="text-white font-medium">
                        {gameChoiceChallenges?.game_title || 'Загрузка...'}
                      </h4>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => {
                          setSelectedGameId(null)
                          setGameChoiceChallenges(null)
                        }}
                      >
                        <ArrowLeft className="w-4 h-4 mr-1" />
                        Назад
                      </Button>
                    </div>

                    {isLoadingChallenges ? (
                      <div className="flex justify-center py-4">
                        <Loader2 className="w-6 h-6 animate-spin text-gray-500" />
                      </div>
                    ) : gameChoiceChallenges?.challenges.length ? (
                      <div className="space-y-3">
                        {gameChoiceChallenges.challenges.map((challenge) => (
                          <div
                            key={challenge.id}
                            className="p-4 bg-gray-900 rounded-lg"
                          >
                            <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">
                                  <span className="px-2 py-0.5 bg-green-500/20 text-green-400 rounded">
                                    +{challenge.points} очков
                                  </span>
                                  <span className="px-2 py-0.5 bg-gray-700 text-gray-300 rounded">
                                    {challenge.difficulty}
                                  </span>
                                  {challenge.estimated_time && (
                                    <span className="text-gray-500">~{challenge.estimated_time} мин</span>
                                  )}
                                </div>
                              </div>
                              <Button
                                size="sm"
                                onClick={() => handleChallengeSelect(challenge.id)}
                                isLoading={isSelectingChallenge}
                                disabled={isSelectingChallenge}
                              >
                                Выбрать
                              </Button>
                            </div>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <p className="text-center text-gray-500 py-4">
                        Нет доступных челленджей для этой игры
                      </p>
                    )}
                  </div>
                )}
              </CardContent>
            </Card>
          )}

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

      {/* Active assignment */}
      {currentAssignment && (
        <>
        <Card>
          <CardContent>
            <div className="text-center mb-6">
              <span className="px-3 py-1 bg-primary-500/20 text-primary-400 rounded-full text-sm">
                Активное задание
              </span>
            </div>

            {/* Game */}
            <div className="mb-4">
              <h3 className="text-lg font-medium text-gray-400 mb-1">Игра</h3>
              <p className="text-xl font-bold text-white">
                {currentAssignment.challenge.game.title}
              </p>
            </div>

            {/* Challenge */}
            <div className="mb-4">
              <h3 className="text-lg font-medium text-gray-400 mb-1">Задание</h3>
              <p className="text-xl font-bold text-white mb-2">
                {currentAssignment.challenge.title}
              </p>
              <p className="text-gray-300">
                {currentAssignment.challenge.description}
              </p>
            </div>

            {/* Points */}
            <div className="flex items-center gap-4 mb-6 text-sm">
              <span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full">
                +{currentAssignment.challenge.points} очков
              </span>
              <span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full">
                {currentAssignment.challenge.difficulty}
              </span>
              {currentAssignment.challenge.estimated_time && (
                <span className="text-gray-400">
                  ~{currentAssignment.challenge.estimated_time} мин
                </span>
              )}
            </div>

            {/* Proof hint */}
            {currentAssignment.challenge.proof_hint && (
              <div className="mb-6 p-3 bg-gray-900 rounded-lg">
                <p className="text-sm text-gray-400">
                  <strong>Нужно доказательство:</strong> {currentAssignment.challenge.proof_hint}
                </p>
              </div>
            )}

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

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

                {proofFile ? (
                  <div className="flex items-center gap-2 p-3 bg-gray-900 rounded-lg">
                    <span className="text-white flex-1 truncate">{proofFile.name}</span>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setProofFile(null)}
                    >
                      <X className="w-4 h-4" />
                    </Button>
                  </div>
                ) : (
                  <Button
                    variant="secondary"
                    className="w-full"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <Upload className="w-4 h-4 mr-2" />
                    Выбрать файл
                  </Button>
                )}
              </div>

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

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

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

            {/* Actions */}
            <div className="flex gap-3">
              <Button
                className="flex-1"
                onClick={handleComplete}
                isLoading={isCompleting}
                disabled={!proofFile && !proofUrl}
              >
                Выполнено
              </Button>
              <Button
                variant="danger"
                onClick={handleDrop}
                isLoading={isDropping}
              >
                Пропустить (-{spinResult?.drop_penalty || 0})
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Swap section - show during swap event when user has active assignment */}
        {activeEvent?.event?.type === 'swap' && (
          <Card className="mt-6">
            <CardContent>
              <div className="flex items-center gap-2 mb-4">
                <ArrowLeftRight className="w-5 h-5 text-blue-500" />
                <h3 className="text-lg font-bold text-white">Обмен заданиями</h3>
              </div>
              <p className="text-gray-400 text-sm mb-4">
                Обмен требует подтверждения с обеих сторон
              </p>

              {/* 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) => (
                      <div
                        key={request.id}
                        className="p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg"
                      >
                        <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">{request.from_challenge.title}</span>
                            </p>
                            <p className="text-gray-400 text-xs">
                              {request.from_challenge.game_title} • {request.from_challenge.points} очков
                            </p>
                            <p className="text-gray-500 text-sm mt-1">
                              Взамен на: <span className="font-medium">{request.to_challenge.title}</span>
                            </p>
                          </div>
                          <div className="flex flex-col gap-2">
                            <Button
                              size="sm"
                              onClick={() => handleAcceptSwapRequest(request.id)}
                              isLoading={processingRequestId === request.id}
                              disabled={processingRequestId !== null}
                            >
                              <Check className="w-4 h-4 mr-1" />
                              Принять
                            </Button>
                            <Button
                              size="sm"
                              variant="danger"
                              onClick={() => handleDeclineSwapRequest(request.id)}
                              isLoading={processingRequestId === request.id}
                              disabled={processingRequestId !== null}
                            >
                              <XCircle className="w-4 h-4 mr-1" />
                              Отклонить
                            </Button>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Outgoing swap requests */}
              {swapRequests.outgoing.length > 0 && (
                <div className="mb-6">
                  <h4 className="text-sm font-medium text-blue-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) => (
                      <div
                        key={request.id}
                        className="p-3 bg-blue-500/10 border border-blue-500/30 rounded-lg"
                      >
                        <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-blue-400 text-sm mt-1">
                              Вы получите: <span className="font-medium">{request.to_challenge.title}</span>
                            </p>
                            <p className="text-gray-400 text-xs">
                              {request.to_challenge.game_title} • {request.to_challenge.points} очков
                            </p>
                            <p className="text-gray-500 text-xs mt-1">
                              Ожидание подтверждения...
                            </p>
                          </div>
                          <Button
                            size="sm"
                            variant="secondary"
                            onClick={() => handleCancelSwapRequest(request.id)}
                            isLoading={processingRequestId === request.id}
                            disabled={processingRequestId !== null}
                          >
                            <X className="w-4 h-4 mr-1" />
                            Отменить
                          </Button>
                        </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-4">
                    <Loader2 className="w-6 h-6 animate-spin text-gray-500" />
                  </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-4 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) => (
                      <div
                        key={candidate.participant_id}
                        className="p-3 bg-gray-900 rounded-lg"
                      >
                        <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-blue-400 text-sm font-medium truncate">
                              {candidate.challenge_title}
                            </p>
                            <p className="text-gray-400 text-xs mt-1">
                              {candidate.game_title} • {candidate.challenge_points} очков • {candidate.challenge_difficulty}
                            </p>
                          </div>
                          <Button
                            size="sm"
                            variant="secondary"
                            onClick={() => handleSendSwapRequest(
                              candidate.participant_id,
                              candidate.user.nickname,
                              candidate.challenge_title
                            )}
                            isLoading={sendingRequestTo === candidate.participant_id}
                            disabled={sendingRequestTo !== null}
                          >
                            <ArrowLeftRight className="w-4 h-4 mr-1" />
                            Предложить
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        )}
        </>
      )}
        </>
      )}
    </div>
  )
}