import React, { useState } from 'react';
import { Volume2, Users, Trophy, Play, RotateCcw, ChevronRight } from 'lucide-react';

const HobbySportGame = () => {
  const [currentRound, setCurrentRound] = useState('intro');
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [scores, setScores] = useState({ team1: 0, team2: 0, team3: 0 });
  const [showAnswer, setShowAnswer] = useState(false);
  const [clueNumber, setClueNumber] = useState(0);

  const round1Questions = [
    {
      description: "You hear splashing water, people cheering, and a whistle blowing every few minutes. Someone shouts 'Lane 4 is the fastest!'",
      answer: "SWIMMING",
      points: 2
    },
    {
      description: "You hear wheels on pavement, someone breathing heavily, and music in earbuds. A voice says 'Kilometer 5 completed.'",
      answer: "JOGGING / RUNNING",
      points: 2
    },
    {
      description: "You hear guitar strings, someone humming, then singing. They stop and say 'Let me try that verse again.'",
      answer: "PLAYING GUITAR / MUSIC",
      points: 2
    },
    {
      description: "You hear clicking sounds, fast typing, people talking through headphones: 'Cover me! Enemy on the left!'",
      answer: "VIDEO GAMES / GAMING",
      points: 2
    },
    {
      description: "You hear pages turning, complete silence, then someone whispers 'This chapter is so exciting!' in a quiet place.",
      answer: "READING",
      points: 2
    },
    {
      description: "You hear balls bouncing, shoes squeaking on a floor, a whistle, and someone yells 'Pass it! Pass it!'",
      answer: "BASKETBALL",
      points: 2
    },
    {
      description: "You hear horses neighing, hooves on the ground, and someone says 'Good girl, easy now, let's trot.'",
      answer: "HORSE RIDING",
      points: 2
    },
    {
      description: "You hear a small ball hitting a table repeatedly - 'ping pong ping pong' - and someone shouts 'Great serve!'",
      answer: "TABLE TENNIS / PING PONG",
      points: 2
    }
  ];

  const round2Questions = [
    {
      clues: [
        "This person wakes up very early, even before sunrise.",
        "They spend a lot of time outdoors near water.",
        "They need special equipment and a lot of patience.",
        "Sometimes they catch nothing, sometimes they catch dinner!"
      ],
      answer: "FISHING",
      points: [5, 4, 3, 2]
    },
    {
      clues: [
        "This person has a very flexible body.",
        "They practice breathing techniques and meditation.",
        "They use a special mat and no shoes.",
        "They do poses with names like 'downward dog' and 'warrior.'"
      ],
      answer: "YOGA",
      points: [5, 4, 3, 2]
    },
    {
      clues: [
        "This person loves cold weather and mountains.",
        "They wear special boots and use two long sticks.",
        "They go down snowy hills very fast.",
        "They might visit places like the Alps or Colorado."
      ],
      answer: "SKIING",
      points: [5, 4, 3, 2]
    },
    {
      clues: [
        "This person needs waves and an ocean.",
        "They have excellent balance and strong legs.",
        "They stand on a board in the water.",
        "Famous places for this include Hawaii and Australia."
      ],
      answer: "SURFING",
      points: [5, 4, 3, 2]
    },
    {
      clues: [
        "This person uses colors and creativity every day.",
        "They might work on paper or canvas.",
        "They express their feelings through images.",
        "Famous people who do this include Picasso and Van Gogh."
      ],
      answer: "PAINTING / DRAWING",
      points: [5, 4, 3, 2]
    },
    {
      clues: [
        "This person wears a special uniform, usually white.",
        "They learn discipline and respect.",
        "They bow before they practice or compete.",
        "Types include karate, judo, taekwondo, and kung fu."
      ],
      answer: "MARTIAL ARTS",
      points: [5, 4, 3, 2]
    }
  ];

  const round3Questions = [
    { description: "It has two wheels, you wear a helmet, Tour de France", answer: "CYCLING", points: 3 },
    { description: "Black and white ball, offside rule, World Cup", answer: "FOOTBALL / SOCCER", points: 3 },
    { description: "Paint, brushes, canvas, colors, gallery", answer: "PAINTING", points: 3 },
    { description: "Cold, ice, mountains, lift, Alps", answer: "SKIING", points: 3 },
    { description: "Ocean, board, waves, balance, California", answer: "SURFING", points: 3 },
    { description: "Net in the middle, racket, yellow ball, Wimbledon", answer: "TENNIS", points: 3 },
    { description: "Pool, goggles, lanes, butterfly stroke, Olympics", answer: "SWIMMING", points: 3 },
    { description: "White uniform, black belt, discipline, dojo, Japan", answer: "MARTIAL ARTS / KARATE", points: 3 },
    { description: "Saddle, reins, stable, jumping, equestrian", answer: "HORSE RIDING", points: 3 },
    { description: "Small table, paddle, orange ball, fast reflexes", answer: "TABLE TENNIS", points: 3 },
    { description: "Controller, screen, online friends, missions, levels", answer: "VIDEO GAMES", points: 3 },
    { description: "Library, novels, magazines, chapters, bookstore", answer: "READING", points: 3 },
    { description: "Strings, chords, melody, concert, band", answer: "PLAYING MUSIC / GUITAR", points: 3 },
    { description: "Camera, photos, memories, Instagram, landscapes", answer: "PHOTOGRAPHY", points: 3 },
    { description: "High net, spike, serve, sand or court, 6 players", answer: "VOLLEYBALL", points: 3 }
  ];

  const bonusCategories = {
    title: "BONUS Categories Race - 90 seconds!",
    categories: [
      { name: "3 Water Sports", examples: "swimming, surfing, water polo, diving, sailing..." },
      { name: "3 Hobbies You Do Alone", examples: "reading, painting, photography, fishing..." },
      { name: "3 Hobbies With Music", examples: "playing guitar, singing, dancing, DJ-ing..." },
      { name: "3 Sports With a Ball", examples: "football, basketball, tennis, volleyball..." }
    ]
  };

  const addPoints = (team, points) => {
    setScores(prev => ({ ...prev, [team]: prev[team] + points }));
  };

  const resetGame = () => {
    setCurrentRound('intro');
    setCurrentQuestion(0);
    setScores({ team1: 0, team2: 0, team3: 0 });
    setShowAnswer(false);
    setClueNumber(0);
  };

  const nextQuestion = () => {
    setCurrentQuestion(prev => prev + 1);
    setShowAnswer(false);
    setClueNumber(0);
  };

  const renderIntro = () => (
    <div className="text-center space-y-6 p-8">
      <div className="flex justify-center">
        <Trophy className="w-24 h-24 text-yellow-500" />
      </div>
      <h1 className="text-4xl font-bold text-gray-800">Hobby & Sport Detective Challenge</h1>
      <p className="text-xl text-gray-600">A2+ Level - Team Competition Game</p>
      
      <div className="bg-blue-50 p-6 rounded-lg max-w-2xl mx-auto text-left">
        <h2 className="text-2xl font-bold mb-4 text-blue-900">Game Rules:</h2>
        <ul className="space-y-3 text-gray-700">
          <li className="flex items-start">
            <span className="font-bold mr-2">📢 Round 1:</span>
            <span>Sound Detective - Listen to descriptions and guess (2 pts each)</span>
          </li>
          <li className="flex items-start">
            <span className="font-bold mr-2">🔍 Round 2:</span>
            <span>Mystery Person - Guess from clues (5-2 pts, earlier = more points)</span>
          </li>
          <li className="flex items-start">
            <span className="font-bold mr-2">⚡ Round 3:</span>
            <span>Speed Challenge - Quick buzz-in answers (3 pts, -1 for wrong)</span>
          </li>
          <li className="flex items-start">
            <span className="font-bold mr-2">🎁 BONUS:</span>
            <span>Categories Race - 90 seconds to write (5 pts)</span>
          </li>
        </ul>
      </div>

      <div className="flex gap-4 justify-center mt-8">
        <button
          onClick={() => setCurrentRound('round1')}
          className="bg-blue-600 text-white px-8 py-4 rounded-lg text-xl font-bold hover:bg-blue-700 flex items-center gap-2"
        >
          <Play className="w-6 h-6" />
          Start Game
        </button>
      </div>
    </div>
  );

  const renderScoreboard = () => (
    <div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white p-6 rounded-lg mb-6">
      <div className="flex justify-around items-center">
        <div className="text-center">
          <Users className="w-8 h-8 mx-auto mb-2" />
          <div className="text-sm">Team 1</div>
          <div className="text-3xl font-bold">{scores.team1}</div>
        </div>
        <div className="text-center">
          <Users className="w-8 h-8 mx-auto mb-2" />
          <div className="text-sm">Team 2</div>
          <div className="text-3xl font-bold">{scores.team2}</div>
        </div>
        <div className="text-center">
          <Users className="w-8 h-8 mx-auto mb-2" />
          <div className="text-sm">Team 3</div>
          <div className="text-3xl font-bold">{scores.team3}</div>
        </div>
      </div>
    </div>
  );

  const renderRound1 = () => {
    if (currentQuestion >= round1Questions.length) {
      return (
        <div className="text-center space-y-6">
          <h2 className="text-3xl font-bold text-gray-800">Round 1 Complete! 🎉</h2>
          <button
            onClick={() => { setCurrentRound('round2'); setCurrentQuestion(0); }}
            className="bg-green-600 text-white px-8 py-4 rounded-lg text-xl font-bold hover:bg-green-700"
          >
            Go to Round 2 →
          </button>
        </div>
      );
    }

    const q = round1Questions[currentQuestion];
    return (
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h2 className="text-3xl font-bold text-gray-800">Round 1: Sound Detective 🔊</h2>
          <span className="text-xl text-gray-600">Question {currentQuestion + 1} of {round1Questions.length}</span>
        </div>

        <div className="bg-gradient-to-br from-blue-50 to-purple-50 p-8 rounded-lg border-4 border-blue-300">
          <Volume2 className="w-12 h-12 text-blue-600 mx-auto mb-4" />
          <p className="text-xl text-gray-800 text-center leading-relaxed">{q.description}</p>
        </div>

        <div className="flex gap-4 justify-center">
          <button
            onClick={() => setShowAnswer(!showAnswer)}
            className="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700"
          >
            {showAnswer ? 'Hide Answer' : 'Show Answer'}
          </button>
        </div>

        {showAnswer && (
          <div className="bg-green-100 p-6 rounded-lg border-2 border-green-400">
            <div className="text-3xl font-bold text-green-800 text-center mb-4">{q.answer}</div>
            <div className="text-center text-gray-700">Worth {q.points} points</div>
            <div className="flex gap-3 justify-center mt-4">
              <button onClick={() => addPoints('team1', q.points)} className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">+{q.points} Team 1</button>
              <button onClick={() => addPoints('team2', q.points)} className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">+{q.points} Team 2</button>
              <button onClick={() => addPoints('team3', q.points)} className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">+{q.points} Team 3</button>
            </div>
          </div>
        )}

        <div className="flex justify-end">
          <button
            onClick={nextQuestion}
            className="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 flex items-center gap-2"
          >
            Next Question <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    );
  };

  const renderRound2 = () => {
    if (currentQuestion >= round2Questions.length) {
      return (
        <div className="text-center space-y-6">
          <h2 className="text-3xl font-bold text-gray-800">Round 2 Complete! 🎉</h2>
          <button
            onClick={() => { setCurrentRound('round3'); setCurrentQuestion(0); }}
            className="bg-green-600 text-white px-8 py-4 rounded-lg text-xl font-bold hover:bg-green-700"
          >
            Go to Round 3 →
          </button>
        </div>
      );
    }

    const q = round2Questions[currentQuestion];
    return (
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h2 className="text-3xl font-bold text-gray-800">Round 2: Mystery Person 🔍</h2>
          <span className="text-xl text-gray-600">Mystery {currentQuestion + 1} of {round2Questions.length}</span>
        </div>

        <div className="bg-gradient-to-br from-yellow-50 to-orange-50 p-8 rounded-lg border-4 border-yellow-300">
          <div className="space-y-4">
            {q.clues.map((clue, idx) => (
              <div
                key={idx}
                className={`p-4 rounded-lg transition-all ${
                  idx <= clueNumber ? 'bg-white shadow-md' : 'bg-gray-200 opacity-50'
                }`}
              >
                <div className="flex justify-between items-start">
                  <span className="font-bold text-orange-600 mr-3">Clue {idx + 1}:</span>
                  <span className="flex-1 text-gray-800">{idx <= clueNumber ? clue : '???'}</span>
                  <span className="bg-orange-500 text-white px-3 py-1 rounded-full text-sm font-bold ml-3">
                    {q.points[idx]} pts
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="flex gap-4 justify-center">
          {clueNumber < 3 && (
            <button
              onClick={() => setClueNumber(prev => prev + 1)}
              className="bg-orange-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-orange-700"
            >
              Next Clue →
            </button>
          )}
          <button
            onClick={() => setShowAnswer(!showAnswer)}
            className="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700"
          >
            {showAnswer ? 'Hide Answer' : 'Show Answer'}
          </button>
        </div>

        {showAnswer && (
          <div className="bg-green-100 p-6 rounded-lg border-2 border-green-400">
            <div className="text-3xl font-bold text-green-800 text-center mb-4">{q.answer}</div>
            <div className="text-center text-gray-700 mb-4">Award points based on which clue they guessed after</div>
            <div className="flex gap-3 justify-center flex-wrap">
              {q.points.map((pts, idx) => (
                <div key={idx} className="space-y-2">
                  <div className="text-center text-sm font-bold text-gray-600">After Clue {idx + 1} ({pts} pts):</div>
                  <div className="flex gap-2">
                    <button onClick={() => addPoints('team1', pts)} className="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 text-sm">T1</button>
                    <button onClick={() => addPoints('team2', pts)} className="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 text-sm">T2</button>
                    <button onClick={() => addPoints('team3', pts)} className="bg-green-600 text-white px-3 py-1 rounded hover:bg-green-700 text-sm">T3</button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="flex justify-end">
          <button
            onClick={nextQuestion}
            className="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 flex items-center gap-2"
          >
            Next Mystery <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    );
  };

  const renderRound3 = () => {
    if (currentQuestion >= round3Questions.length) {
      return (
        <div className="text-center space-y-6">
          <h2 className="text-3xl font-bold text-gray-800">Round 3 Complete! 🎉</h2>
          <button
            onClick={() => { setCurrentRound('bonus'); setCurrentQuestion(0); }}
            className="bg-green-600 text-white px-8 py-4 rounded-lg text-xl font-bold hover:bg-green-700"
          >
            Go to BONUS Round →
          </button>
        </div>
      );
    }

    const q = round3Questions[currentQuestion];
    return (
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h2 className="text-3xl font-bold text-gray-800">Round 3: Speed Challenge ⚡</h2>
          <span className="text-xl text-gray-600">Question {currentQuestion + 1} of {round3Questions.length}</span>
        </div>

        <div className="bg-gradient-to-br from-red-50 to-pink-50 p-8 rounded-lg border-4 border-red-300">
          <div className="text-2xl font-bold text-gray-800 text-center mb-4">⚡ BUZZ IN! ⚡</div>
          <p className="text-xl text-gray-800 text-center leading-relaxed">{q.description}</p>
        </div>

        <div className="flex gap-4 justify-center">
          <button
            onClick={() => setShowAnswer(!showAnswer)}
            className="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700"
          >
            {showAnswer ? 'Hide Answer' : 'Show Answer'}
          </button>
        </div>

        {showAnswer && (
          <div className="bg-green-100 p-6 rounded-lg border-2 border-green-400">
            <div className="text-3xl font-bold text-green-800 text-center mb-4">{q.answer}</div>
            <div className="text-center text-gray-700 mb-2">Worth {q.points} points (or -1 for wrong answer)</div>
            <div className="flex gap-3 justify-center mt-4">
              <button onClick={() => addPoints('team1', q.points)} className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">✓ Team 1 (+{q.points})</button>
              <button onClick={() => addPoints('team2', q.points)} className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">✓ Team 2 (+{q.points})</button>
              <button onClick={() => addPoints('team3', q.points)} className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">✓ Team 3 (+{q.points})</button>
            </div>
            <div className="flex gap-3 justify-center mt-2">
              <button onClick={() => addPoints('team1', -1)} className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 text-sm">✗ Team 1 (-1)</button>
              <button onClick={() => addPoints('team2', -1)} className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 text-sm">✗ Team 2 (-1)</button>
              <button onClick={() => addPoints('team3', -1)} className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 text-sm">✗ Team 3 (-1)</button>
            </div>
          </div>
        )}

        <div className="flex justify-end">
          <button
            onClick={nextQuestion}
            className="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-blue-700 flex items-center gap-2"
          >
            Next Question <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    );
  };

  const renderBonus = () => (
    <div className="space-y-6">
      <h2 className="text-4xl font-bold text-gray-800 text-center">🎁 BONUS Round: Categories Race! 🎁</h2>
      
      <div className="bg-gradient-to-br from-green-50 to-teal-50 p-8 rounded-lg border-4 border-green-400">
        <div className="text-2xl font-bold text-center text-green-800 mb-6">Teams have 90 SECONDS to write:</div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          {bonusCategories.categories.map((cat, idx) => (
            <div key={idx} className="bg-white p-4 rounded-lg shadow-md">
              <div className="font-bold text-lg text-gray-800 mb-2">{cat.name}</div>
              <div className="text-sm text-gray-600 italic">Examples: {cat.examples}</div>
            </div>
          ))}
        </div>

        <div className="text-center text-xl font-bold text-green-800">
          Most correct answers = 5 BONUS POINTS! 🏆
        </div>
      </div>

      <div className="bg-yellow-100 p-6 rounded-lg border-2 border-yellow-400">
        <div className="text-center space-y-3">
          <div className="font-bold text-lg">Award 5 points to the winning team:</div>
          <div className="flex gap-3 justify-center">
            <button onClick={() => addPoints('team1', 5)} className="bg-yellow-600 text-white px-6 py-3 rounded-lg hover:bg-yellow-700 font-bold">Team 1 Wins! 🏆</button>
            <button onClick={() => addPoints('team2', 5)} className="bg-yellow-600 text-white px-6 py-3 rounded-lg hover:bg-yellow-700 font-bold">Team 2 Wins! 🏆</button>
            <button onClick={() => addPoints('team3', 5)} className="bg-yellow-600 text-white px-6 py-3 rounded-lg hover:bg-yellow-700 font-bold">Team 3 Wins! 🏆</button>
          </div>
        </div>
      </div>

      <div className="text-center mt-8">
        <button
          onClick={() => setCurrentRound('final')}
          className="bg-purple-600 text-white px-8 py-4 rounded-lg text-xl font-bold hover:bg-purple-700"
        >
          See Final Results! 🎉
        </button>
      </div>
    </div>
  );

  const renderFinal = () => {
    const winner = Object.entries(scores).reduce((a, b) => (b[1] > a[1] ? b : a));
    const winnerName = winner[0] === 'team1' ? 'Team 1' : winner[0] === 'team2' ? 'Team 2' : 'Team 3';
    
    return (
      <div className="text-center space-y-8">
        <Trophy className="w-32 h-32 text-yellow-500 mx-auto animate-bounce" />
        <h1 className="text-5xl font-bold text-gray-800">🎉 GAME OVER! 🎉</h1>
        
        <div className="bg-gradient-to-r from-yellow-400 to-orange-400 p-8 rounded-lg">
          <div className="text-4xl font-bold text-white mb-4">
            🏆 {winnerName} WINS! 🏆
          </div>
          <div className="text-6xl font-bold text-white">
            {winner[1]} points
          </div>
        </div>

        <div className="grid grid-cols-3 gap-4 max-w-2xl mx-auto">
          <div className="bg-gray-100 p-6 rounded-lg">
            <div className="text-2xl font-bold text-gray-700">Team 1</div>
            <div className="text-4xl font-bold text-blue-600">{scores.team1}</div>
          </div>
          <div className="bg-gray-100 p-6 rounded-lg">
            <div className="text-2xl font-bold text-gray-700">Team 2</div>
            <div className="text-4xl font-bold text-blue-600">{scores.team2}</div>
          </div>
          <div className="bg-gray-100 p-6 rounded-lg">
            <div className="text-2xl font-bold text-gray-700">Team 3</div>
            <div className="text-4xl font-bold text-blue-600">{scores.team3}</div>
          </div>
        </div>

        <button
          onClick={resetGame}
          className="bg-blue-600 text-white px-8 py-4 rounded-lg text-xl font-bold hover:bg-blue-700 flex items-center gap-2 mx-auto"
        >
          <RotateCcw className="w-6 h-6" />
          Play Again
        </button>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-100 to-purple-100 p-6">
      <div className="max-w-5xl mx-auto">
        {currentRound !== 'intro' && currentRound !== 'final' && renderScoreboard()}
        
        <div className="bg-white rounded-2xl shadow-2xl p-8">
          {currentRound === 'intro' && renderIntro()}
          {currentRound === 'round1' && renderRound1()}
          {currentRound === 'round2' && renderRound2()}
          {currentRound === 'round3' && renderRound3()}
          {currentRound === 'bonus' && renderBonus()}
          {currentRound === 'final' && renderFinal()}
        </div>

        {currentRound !== 'intro' && currentRound !== 'final' && (
          <div className="text-center mt-6">
            <button
              onClick={resetGame}
              className="text-gray-600 hover:text-gray-800 underline"
            >
              Reset Game
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default HobbySportGame;