import { useState } from 'react'
import Question from './Question'
import { questions } from '../data/questions'
import './Game.css'

const Game = () => {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
  const [score, setScore] = useState(0)
  const [gameOver, setGameOver] = useState(false)
  const [revealedAnswers, setRevealedAnswers] = useState([])

  const currentQuestion = questions[currentQuestionIndex]
  const isLastQuestion = currentQuestionIndex === questions.length - 1

  const handleAnswerClick = (answerIndex, points) => {
    if (revealedAnswers.includes(answerIndex)) return

    setRevealedAnswers([...revealedAnswers, answerIndex])
    setScore(score + points)

    if (revealedAnswers.length === currentQuestion.answers.length - 1) {
      setTimeout(() => {
        if (isLastQuestion) {
          setGameOver(true)
        } else {
          nextQuestion()
        }
      }, 2000)
    }
  }

  const nextQuestion = () => {
    setCurrentQuestionIndex(currentQuestionIndex + 1)
    setRevealedAnswers([])
  }

  const restartGame = () => {
    setCurrentQuestionIndex(0)
    setScore(0)
    setGameOver(false)
    setRevealedAnswers([])
  }

  if (gameOver) {
    return (
      <div className="game-over">
        <div className="game-over-content">
          <h2 className="game-over-title">🎉 Игра окончена! 🎉</h2>
          <p className="game-over-score">Ваш итоговый счёт: {score}</p>
          <button className="restart-button" onClick={restartGame}>
            Играть снова
          </button>
        </div>
      </div>
    )
  }

  return (
    <div className="game">
      <Question
        question={currentQuestion}
        questionNumber={currentQuestionIndex + 1}
        onAnswerClick={handleAnswerClick}
        revealedAnswers={revealedAnswers}
      />
    </div>
  )
}

export default Game