function GameBoard({ questions, usedQuestions, onSelectQuestion, currentRound, isHost }) {
  const isQuestionUsed = (category, points, questionIndex) => {
    const foundByIndex = usedQuestions.find(
      q => q.category === category && q.points === points && q.questionIndex === questionIndex
    );
    if (foundByIndex) return true;

    const usedCount = usedQuestions.filter(
      q => q.category === category && q.points === points
    ).length;
    if (usedCount === 0) return false;

    const categoryData = questions.find(cat => cat.name === category);
    const questionsWithSamePoints = categoryData?.questions
      .map((q, idx) => ({ ...q, originalIndex: idx }))
      .filter(q => q.points === points) || [];
    const positionAmongSamePoints = questionsWithSamePoints.findIndex(q => q.originalIndex === questionIndex);
    return positionAmongSamePoints >= 0 && positionAmongSamePoints < usedCount;
  }

  const getPointsForRound = (basePoints, round) => {
    return round === 2 ? basePoints * 2 : basePoints
  }

  const hasAvailableQuestions = (category) => {
    return category.questions.some((q, idx) => !isQuestionUsed(category.name, q.points, idx))
  }

  const availableCategories = questions.filter(hasAvailableQuestions)

  console.log('📋 GameBoard render:', {
    totalCategories: questions.length,
    availableCategories: availableCategories.length,
    usedQuestions: usedQuestions
  });

  return (
    <div className="glass-strong rounded-2xl p-3 md:p-5 shadow-2xl">
      {!isHost && (
        <div className="mb-3 md:mb-4 bg-gradient-to-r from-blue-600/20 to-purple-600/20 border border-blue-400/20 p-3 md:p-4 rounded-xl text-center">
          <p className="text-white text-sm md:text-base font-medium">
            🎯 Ведущий выбирает вопросы. Будьте готовы!
          </p>
        </div>
      )}
      {isHost && (
        <div className="mb-3 md:mb-4 bg-gradient-to-r from-purple-600/20 to-indigo-600/20 border border-purple-400/20 p-3 md:p-4 rounded-xl text-center">
          <p className="text-white text-sm md:text-base font-bold">
            👆 Выберите вопрос
          </p>
        </div>
      )}

      {availableCategories.length > 0 ? (
        <div className="space-y-2 md:space-y-3">
          {availableCategories.map((category, catIdx) => (
            <div key={catIdx} className="flex flex-col md:flex-row gap-2 animate-slide-up" style={{ animationDelay: `${catIdx * 0.05}s` }}>
              {/* Category name */}
              <div className="bg-gradient-to-r from-indigo-600/30 to-purple-600/30 border border-indigo-400/20 p-2.5 md:p-4 rounded-xl flex items-center justify-center md:min-w-[200px] backdrop-blur-sm">
                <h3 className="text-white font-bold text-xs md:text-base text-center leading-tight">
                  {category.name}
                </h3>
              </div>

              {/* Question buttons */}
              <div className="grid grid-cols-5 md:flex gap-1.5 md:gap-2 flex-1">
                {category.questions.map((question, questionIndex) => {
                  const displayPoints = getPointsForRound(question.points, currentRound)
                  const isUsed = isQuestionUsed(category.name, question.points, questionIndex)

                  return (
                    <button
                      key={questionIndex}
                      onClick={() => !isUsed && isHost && onSelectQuestion(category.name, question.points)}
                      disabled={isUsed || !isHost}
                      className={`flex-1 p-3 md:p-5 rounded-xl font-bold text-base md:text-xl transition-all duration-300 ${
                        isUsed
                          ? 'bg-white/3 text-gray-600 cursor-not-allowed border border-white/5'
                          : isHost
                          ? 'bg-gradient-to-br from-blue-600/60 to-indigo-700/60 text-white hover:from-blue-500/80 hover:to-indigo-600/80 cursor-pointer shadow-lg hover:shadow-blue-500/20 border border-blue-400/20 hover:border-blue-400/40 hover:scale-105 active:scale-95 backdrop-blur-sm'
                          : 'bg-gradient-to-br from-blue-600/40 to-indigo-700/40 text-white/70 cursor-default border border-blue-400/10 backdrop-blur-sm'
                      }`}
                    >
                      {isUsed ? '—' : displayPoints}
                    </button>
                  )
                })}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <div className="text-center py-8 md:py-12 glass rounded-xl">
          <p className="text-white text-lg md:text-2xl font-bold px-4">
            ✅ Все вопросы раунда {currentRound} использованы!
          </p>
        </div>
      )}
    </div>
  )
}

export default GameBoard
