import { useState, useEffect } from 'react'
import { useParams, useLocation, useNavigate } from 'react-router-dom'
import socket from '../socket'
import GameBoard from '../components/GameBoard'
import QuestionModal from '../components/QuestionModal'
import TeamScores from '../components/TeamScores'

function Game() {
  const { gameCode } = useParams()
  const location = useLocation()
  const navigate = useNavigate()

  // Попытка восстановить сессию из localStorage при перезагрузке
  const getSessionData = () => {
    if (location.state) {
      return location.state
    }

    // Если state пустой, попробуем восстановить из localStorage
    const savedSession = localStorage.getItem('gameSession')
    if (savedSession) {
      const session = JSON.parse(savedSession)
      // Проверяем что это та же игра
      if (session.gameCode === gameCode) {
        return session
      }
    }

    return {}
  }

  const { teamName, isHost, hostName } = getSessionData()

  const [game, setGame] = useState(null)
  const [questions, setQuestions] = useState([])
  const [currentQuestion, setCurrentQuestion] = useState(null)
  const [timer, setTimer] = useState(null)
  const [myTeam, setMyTeam] = useState(null)
  const [answerMedia, setAnswerMedia] = useState(null)
  const [shouldFinishAfterMedia, setShouldFinishAfterMedia] = useState(false)

  // Если нет teamName и не хост, редиректим на главную
  useEffect(() => {
    if (!teamName && !isHost) {
      console.warn('No team name or host status, redirecting to home')
      navigate('/')
    }
  }, [teamName, isHost, navigate])

  // Подключаемся к игре (хост или команда)
  useEffect(() => {
    if (isHost) {
      socket.emit('host-join-game', { gameCode })
    } else if (teamName) {
      // Команда переподключается к игре
      socket.emit('join-game', { gameCode, teamName })
    }
  }, [isHost, teamName, gameCode])

  useEffect(() => {
    // Socket обработчики
    socket.on('game-updated', (updatedGame) => {
      setGame(updatedGame)

      if (!isHost && teamName) {
        const team = updatedGame.teams.find(t => t.name === teamName)
        setMyTeam(team)
      }

      // Обновляем selectedCategories когда игра обновляется
      if (updatedGame.selectedCategories) {
        setQuestions(updatedGame.selectedCategories)
      }
    })

    socket.on('game-started', (game) => {
      setGame(game)

      if (!isHost && teamName) {
        const team = game.teams.find(t => t.name === teamName)
        setMyTeam(team)
      }

      if (game.selectedCategories) {
        setQuestions(game.selectedCategories)
      }
    })

    socket.on('host-game-loaded', (loadedGame) => {
      setGame(loadedGame)
      if (loadedGame.selectedCategories) {
        setQuestions(loadedGame.selectedCategories)
      }
    })

    socket.on('question-selected', ({ category, points, questionIndex, timer }) => {
      // Ищем вопрос в selectedCategories игры по индексу
      const categoryData = game?.selectedCategories?.find(cat => cat.name === category)

      // Если есть questionIndex, используем его, иначе ищем по баллам (для обратной совместимости)
      const questionData = questionIndex !== undefined
        ? categoryData?.questions[questionIndex]
        : categoryData?.questions.find(q => q.points === points)

      console.log(`📥 Question selected: category="${category}", points=${points}, questionIndex=${questionIndex}`, questionData);

      setCurrentQuestion({ ...questionData, category, points })
      setTimer(timer)
    })

    socket.on('timer-update', ({ timer }) => {
      setTimer(timer)
    })

    socket.on('time-up', ({ answerMedia, shouldFinish }) => {
      if (answerMedia) {
        setAnswerMedia(answerMedia)
        if (shouldFinish) {
          setShouldFinishAfterMedia(true)
        }
      }
      setCurrentQuestion(null)
      setTimer(null)
    })

    socket.on('team-buzzing', ({ teamId, teamName }) => {
      console.log(`${teamName} buzzing!`)
    })

    socket.on('answer-result', ({ teamId, isCorrect, questionClosed, answerMedia, shouldFinish }) => {
      console.log('Answer result:', { teamId, isCorrect, questionClosed, answerMedia, shouldFinish })
      if (questionClosed) {
        // Правильный ответ - закрываем вопрос
        if (answerMedia) {
          setAnswerMedia(answerMedia)
          if (shouldFinish) {
            setShouldFinishAfterMedia(true)
          }
        }
        setTimeout(() => {
          setCurrentQuestion(null)
          setTimer(null)
        }, 2000)
      } else {
        // Неправильный ответ - продолжаем игру
        console.log('Incorrect answer, waiting for other teams')
      }
    })

    socket.on('round-changed', ({ round }) => {
      console.log(`Round ${round} started`)
      // Принудительно обновляем состояние игры после смены раунда
      // Сервер отправит game-updated сразу после, но мы сбрасываем локальное состояние
      setCurrentQuestion(null)
      setTimer(null)
      setAnswerMedia(null)
    })

    socket.on('game-finished', (finishedGame) => {
      setGame(finishedGame)
    })

    return () => {
      socket.off('game-updated')
      socket.off('game-started')
      socket.off('host-game-loaded')
      socket.off('question-selected')
      socket.off('timer-update')
      socket.off('time-up')
      socket.off('team-buzzing')
      socket.off('answer-result')
      socket.off('round-changed')
      socket.off('game-finished')
    }
  }, [teamName, questions, isHost])

  const handleStartGame = () => {
    socket.emit('start-game', { gameCode })
  }

  const handleSelectQuestion = (category, points) => {
    // Только хост может выбирать вопросы
    if (isHost) {
      socket.emit('select-question', { gameCode, category, points })
    }
  }

  const handleBuzzIn = () => {
    if (myTeam) {
      socket.emit('buzz-in', { gameCode, teamId: myTeam.id })
    }
  }

  const handleSubmitAnswer = (isCorrect) => {
    // Теперь только ведущий отправляет ответ
    console.log('handleSubmitAnswer called', { isHost, answeringTeam: game.answeringTeam, isCorrect })
    if (isHost && game.answeringTeam) {
      console.log('Sending submit-answer', { gameCode, teamId: game.answeringTeam, isCorrect })
      socket.emit('submit-answer', { gameCode, teamId: game.answeringTeam, isCorrect })
    } else {
      console.log('Not sending: isHost=', isHost, 'answeringTeam=', game.answeringTeam)
    }
  }

  const handleCloseQuestion = () => {
    // Ведущий может досрочно закрыть вопрос
    if (isHost) {
      socket.emit('close-question', { gameCode })
    }
  }

  const handleFinishGame = () => {
    // Ведущий завершает игру
    if (isHost) {
      socket.emit('finish-game', { gameCode })
    }
  }

  const handleCloseAnswerMedia = () => {
    setAnswerMedia(null)
    if (shouldFinishAfterMedia && isHost) {
      setShouldFinishAfterMedia(false)
      socket.emit('finish-game', { gameCode })
    }
  }

  if (!game) {
    return (
      <div className="flex items-center justify-center min-h-screen px-4">
        <div className="text-center">
          <h2 className="text-2xl md:text-3xl font-bold text-game-gold mb-4">Загрузка...</h2>
        </div>
      </div>
    )
  }

  // Экран результатов
  if (game.status === 'finished') {
    const sortedTeams = [...game.teams].sort((a, b) => b.score - a.score)
    const winner = sortedTeams[0]

    return (
      <div className="min-h-screen p-4 md:p-8">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8 md:mb-12">
            <h1 className="text-3xl md:text-6xl font-bold text-game-gold mb-4">ИГРА ЗАВЕРШЕНА!</h1>
            <div className="bg-gradient-to-r from-yellow-400 to-yellow-600 p-6 md:p-8 rounded-lg mb-6 md:mb-8">
              <p className="text-2xl md:text-4xl font-bold text-gray-900 mb-2">🏆 ПОБЕДИТЕЛЬ 🏆</p>
              <p className="text-3xl md:text-5xl font-bold text-gray-900">{winner.name}</p>
              <p className="text-xl md:text-3xl font-bold text-gray-900 mt-2">{winner.score} баллов</p>
            </div>
          </div>

          <div className="bg-gray-800 p-4 md:p-8 rounded-lg mb-6 md:mb-8">
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 md:mb-6 text-center">Итоговая таблица</h2>
            <div className="space-y-3 md:space-y-4">
              {sortedTeams.map((team, index) => (
                <div
                  key={team.id}
                  className={`flex justify-between items-center p-4 md:p-6 rounded-lg ${
                    index === 0
                      ? 'bg-gradient-to-r from-yellow-600 to-yellow-700'
                      : index === 1
                      ? 'bg-gradient-to-r from-gray-400 to-gray-500'
                      : index === 2
                      ? 'bg-gradient-to-r from-orange-600 to-orange-700'
                      : 'bg-gray-700'
                  }`}
                >
                  <div className="flex items-center gap-2 md:gap-4">
                    <span className="text-2xl md:text-4xl font-bold text-white">#{index + 1}</span>
                    <span className="text-base md:text-2xl font-bold text-white">{team.name}</span>
                  </div>
                  <span className="text-xl md:text-3xl font-bold text-white">{team.score}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="text-center">
            <button
              onClick={() => navigate('/')}
              className="bg-game-gold text-game-blue font-bold py-3 md:py-4 px-8 md:px-12 rounded-lg text-base md:text-xl hover:bg-yellow-500 transition"
            >
              Вернуться на главную
            </button>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen p-4 md:p-8 bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900">
      <div className="max-w-7xl mx-auto">
        {/* Заголовок */}
        <div className="text-center mb-6 md:mb-8">
          <h1 className="text-3xl md:text-5xl font-bold text-blue-400 mb-3 md:mb-4">
            СВОЯ ИГРА
          </h1>
          <div className="bg-slate-800 rounded-xl p-3 md:p-4 inline-block border border-slate-700">
            <p className="text-sm md:text-xl text-gray-300">
              Код игры: <span className="text-blue-400 font-bold tracking-wider">{gameCode}</span>
            </p>
            {isHost && (
              <p className="text-xs md:text-md text-gray-400 mt-2">
                Ведущий: {hostName}
              </p>
            )}
            <div className="mt-2 md:mt-3 inline-block bg-blue-600 text-white px-4 md:px-6 py-1 md:py-2 rounded-lg font-bold shadow-lg text-sm md:text-base">
              Раунд {game.currentRound}
            </div>
          </div>
        </div>

        {/* Счет команд */}
        <TeamScores teams={game.teams} myTeamId={myTeam?.id} />

        {/* Статус игры */}
        {game.status === 'waiting' && isHost && (
          <div className="text-center my-6 md:my-8">
            <p className="text-white text-base md:text-lg mb-4">
              Ожидание команд... ({game.teams.length} команд(ы) присоединилось)
            </p>
            {game.teams.length > 0 && (
              <button
                onClick={handleStartGame}
                className="bg-green-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-lg text-lg md:text-xl hover:bg-green-700 transition"
              >
                Начать игру
              </button>
            )}
            {game.teams.length === 0 && (
              <p className="text-gray-400 text-sm md:text-base">
                Отправьте код игры командам для присоединения
              </p>
            )}
          </div>
        )}

        {game.status === 'waiting' && !isHost && (
          <div className="text-center my-6 md:my-8">
            <p className="text-white text-base md:text-lg">
              Ожидание начала игры ведущим...
            </p>
          </div>
        )}

        {/* Игровое поле */}
        {game.status === 'playing' && (
          <>
            <GameBoard
              questions={questions}
              usedQuestions={game.usedQuestions}
              onSelectQuestion={handleSelectQuestion}
              currentRound={game.currentRound}
              isHost={isHost}
            />
          </>
        )}

        {/* Модальное окно с вопросом */}
        {currentQuestion && (
          <QuestionModal
            question={currentQuestion}
            timer={timer}
            onSubmitAnswer={handleSubmitAnswer}
            answeringTeamName={game.teams.find(t => t.id === game.answeringTeam)?.name}
            isHost={isHost}
            onBuzzIn={handleBuzzIn}
            canBuzzIn={!isHost && !game.answeringTeam && myTeam && !(game.answeredTeams || []).includes(myTeam.id)}
            onCloseQuestion={handleCloseQuestion}
            gameCode={gameCode}
            socket={socket}
          />
        )}

        {/* Модальное окно с ответом (песня) - показываем всем */}
        {answerMedia && (
          <div className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4">
            <div className="bg-gradient-to-br from-blue-900 to-slate-900 p-6 md:p-12 rounded-2xl max-w-4xl w-full border-4 border-blue-400 shadow-2xl">
              <h2 className="text-2xl md:text-4xl font-bold text-blue-400 mb-6 md:mb-8 text-center">
                Правильный ответ
              </h2>

              <div className="bg-slate-800 p-6 md:p-8 rounded-lg mb-6 md:mb-8">
                <audio
                  controls
                  autoPlay
                  src={`${window.location.protocol}//${window.location.host}${answerMedia}`}
                  className="w-full"
                >
                  Ваш браузер не поддерживает аудио элемент.
                </audio>
              </div>

              <div className="text-center">
                <button
                  onClick={handleCloseAnswerMedia}
                  className="bg-blue-600 text-white font-bold py-3 md:py-4 px-8 md:px-12 rounded-lg text-lg md:text-xl hover:bg-blue-700 transition shadow-lg"
                >
                  Закрыть
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Кнопка следующего раунда */}
        {isHost && game.usedQuestions.length >= 25 && game.status === 'playing' && (
          <div className="text-center mt-6 md:mt-8">
            <button
              onClick={() => socket.emit('next-round', { gameCode })}
              className="bg-blue-600 text-white font-bold py-3 md:py-4 px-6 md:px-8 rounded-lg text-lg md:text-xl hover:bg-blue-700 transition"
            >
              Следующий раунд
            </button>
          </div>
        )}

        {/* Кнопка завершить игру для ведущего */}
        {isHost && game.status === 'playing' && (
          <div className="text-center mt-6 md:mt-8">
            <button
              onClick={handleFinishGame}
              className="bg-red-600 text-white font-bold py-2 md:py-3 px-6 md:px-8 rounded-lg text-base md:text-lg hover:bg-red-700 transition"
            >
              Завершить игру
            </button>
          </div>
        )}
      </div>
    </div>
  )
}

export default Game
