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

function App() {
  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 gameRef = useRef(null)

  const currentQuestion = questions[currentQuestionIndex]

  // Сохраняем вопросы в cookies при изменении
  useEffect(() => {
    if (questions.length > 0) {
      setCookie('gameQuestions', questions)
    }
  }, [questions])

  // Сохраняем индекс вопроса в cookies при изменении
  useEffect(() => {
    setCookie('gameQuestionIndex', currentQuestionIndex)
  }, [currentQuestionIndex])

  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()
    }
  }

  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="Показать все ответы"
              >
                Показать все
              </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 App