import { useState, useRef, useEffect } from 'react'
import Game from './Game'
import Snowflakes from './Snowflakes'
import QuestionsModal from './QuestionsModal'
import { questions as initialQuestions } from '../data/questions'
import { getCookie, setCookie, deleteCookie } from '../utils/cookies'
import '../App.css'

function LocalGameApp() {
  const [isQuestionsModalOpen, setIsQuestionsModalOpen] = useState(false)
  const [questions, setQuestions] = useState(() => {
    const savedQuestions = getCookie('gameQuestions')
    return savedQuestions || initialQuestions
  })
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(() => {
    const savedIndex = getCookie('gameQuestionIndex')
    return savedIndex !== null ? savedIndex : 0
  })
  const [areAllRevealed, setAreAllRevealed] = useState(false)
  const gameRef = useRef(null)

  const currentQuestion = questions[currentQuestionIndex]

  useEffect(() => {
    if (questions.length > 0) {
      setCookie('gameQuestions', questions)
    }
  }, [questions])

  useEffect(() => {
    setCookie('gameQuestionIndex', currentQuestionIndex)
  }, [currentQuestionIndex])

  useEffect(() => {
    const checkRevealedState = () => {
      if (gameRef.current && gameRef.current.areAllAnswersRevealed) {
        setAreAllRevealed(gameRef.current.areAllAnswersRevealed())
      } else {
        setAreAllRevealed(false)
      }
    }

    checkRevealedState()
    const interval = setInterval(checkRevealedState, 200)
    return () => clearInterval(interval)
  }, [currentQuestionIndex, questions])

  const handleUpdateQuestions = (updatedQuestions) => {
    setQuestions(updatedQuestions)
    if (currentQuestionIndex >= updatedQuestions.length) {
      setCurrentQuestionIndex(0)
    }
  }

  const handleOpenPlayersModal = () => {
    if (gameRef.current) {
      gameRef.current.openPlayersModal()
    }
  }

  const handleNewGame = () => {
    if (window.confirm('Начать новую игру? Текущий прогресс будет потерян.')) {
      deleteCookie('gameQuestions')
      deleteCookie('gameQuestionIndex')
      deleteCookie('gamePlayers')
      deleteCookie('gamePlayerScores')
      deleteCookie('gameCurrentPlayerId')
      deleteCookie('gameRevealedAnswers')
      deleteCookie('gameOver')

      setQuestions(initialQuestions)
      setCurrentQuestionIndex(0)

      if (gameRef.current) {
        gameRef.current.newGame()
      }
    }
  }

  const handleShowAll = () => {
    if (gameRef.current && gameRef.current.showAllAnswers) {
      gameRef.current.showAllAnswers()
      setTimeout(() => {
        if (gameRef.current && gameRef.current.areAllAnswersRevealed) {
          setAreAllRevealed(gameRef.current.areAllAnswersRevealed())
        }
      }, 100)
    }
  }

  return (
    <div className="app">
      <Snowflakes />
      <div className="app-content">
        <div className="app-title-bar">
          <div className="app-control-buttons">
            <button
              className="control-button control-button-players"
              onClick={handleOpenPlayersModal}
              title="Управление участниками"
            >
              👥
            </button>
            <button
              className="control-button control-button-questions"
              onClick={() => setIsQuestionsModalOpen(true)}
              title="Управление вопросами"
            >
              ❓
            </button>
            <button
              className="control-button control-button-new-game"
              onClick={handleNewGame}
              title="Новая игра"
            >
              🎮
            </button>
          </div>

          <h1 className="app-title">
            <span className="title-number">100</span>
            <span className="title-to">к</span>
            <span className="title-number">1</span>
          </h1>

          {questions.length > 0 && currentQuestion && (
            <div className="question-counter-wrapper">
              <div className="question-counter">
                {currentQuestionIndex + 1}/{questions.length}
              </div>
              <button
                className="show-all-button-top"
                onClick={handleShowAll}
                title={areAllRevealed ? "Скрыть все ответы" : "Показать все ответы"}
              >
                {areAllRevealed ? "Скрыть все" : "Показать все"}
              </button>
            </div>
          )}
        </div>

        <QuestionsModal
          isOpen={isQuestionsModalOpen}
          onClose={() => setIsQuestionsModalOpen(false)}
          questions={questions}
          onUpdateQuestions={handleUpdateQuestions}
        />

        <Game
          ref={gameRef}
          questions={questions}
          currentQuestionIndex={currentQuestionIndex}
          onQuestionIndexChange={setCurrentQuestionIndex}
          onQuestionsChange={setQuestions}
        />
      </div>
    </div>
  )
}

export default LocalGameApp