import { useState, useRef } 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 './App.css'

function App() {
  const [isQuestionsModalOpen, setIsQuestionsModalOpen] = useState(false)
  const [questions, setQuestions] = useState(initialQuestions)
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
  const gameRef = useRef(null)

  const currentQuestion = questions[currentQuestionIndex]

  const handleUpdateQuestions = (updatedQuestions) => {
    setQuestions(updatedQuestions)
    // Если текущий вопрос был удален, сбрасываем индекс
    if (currentQuestionIndex >= updatedQuestions.length) {
      setCurrentQuestionIndex(0)
    }
  }

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

  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>
          </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">
              {currentQuestionIndex + 1}/{questions.length}
            </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