import React, { useState, useEffect } from 'react';
import { ArrowRight, RefreshCw, Trophy } from 'lucide-react';

export default function QuizGame() {
  // Databáze citátů
  const quotes = [
    {
      text: "Jediná věc, která stojí mezi mnou a velikostí, jsou lidé, kteří mě neustále srovnávají s jinými lidmi.",
      author: "Kanye West"
    },
    {
      text: "Jsem největší umělec, kterého Bůh kdy stvořil.",
      author: "Kanye West"
    },
    {
      text: "Moje největší bolest v životě je, že nikdy neuvidím sám sebe vystupovat naživo.",
      author: "Kanye West"
    },
    {
      text: "Jsem Bůh ve zvířecí kůži.",
      author: "Kanye West"
    },
    {
      text: "Jsem více než člověk. Jsem Kanye.",
      author: "Kanye West"
    },
    {
      text: "Úspěch je největší pomstou.",
      author: "Kanye West"
    },
    {
      text: "Kdo se bojí neúspěchu, omezuje své aktivity. Neúspěch je pouze příležitostí začít znovu, tentokrát moudřeji.",
      author: "Adolf Hitler"
    },
    {
      text: "Pokud chceš osvítit národ, dej mu akci, ne filozofii.",
      author: "Adolf Hitler"
    },
    {
      text: "Slova budují mosty do neprozkoumaných oblastí.",
      author: "Adolf Hitler"
    },
    {
      text: "Velké lži jsou vždy uvěřitelnější než malé lži.",
      author: "Adolf Hitler"
    },
    {
      text: "Čím větší je lež, tím více lidí jí uvěří.",
      author: "Adolf Hitler"
    },
    {
      text: "Humanita končí tam, kde začíná rozum.",
      author: "Adolf Hitler"
    },
    {
      text: "Jsem génius, nejsem šílený. A mezi genialitou a šílenstvím je tenká hranice.",
      author: "Kanye West"
    },
    {
      text: "Mám dračí energii. Moje žena má dračí energii. Jsme dračí rodina.",
      author: "Kanye West"
    },
    {
      text: "Ti, kteří chtějí žít, nechť bojují, a ti, kteří nechtějí bojovat v tomto světě věčného boje, si nezaslouží žít.",
      author: "Adolf Hitler"
    },
    {
      text: "Vítězství patří tomu, kdo má nejvíce vytrvalosti.",
      author: "Adolf Hitler"
    }
  ];

  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [shuffledQuotes, setShuffledQuotes] = useState([]);
  const [score, setScore] = useState(0);
  const [answered, setAnswered] = useState(false);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [gameOver, setGameOver] = useState(false);
  const [quizLength] = useState(10);

  // Zamíchání citátů při načtení komponenty
  useEffect(() => {
    const shuffled = [...quotes].sort(() => 0.5 - Math.random()).slice(0, quizLength);
    setShuffledQuotes(shuffled);
  }, []);

  const handleAnswer = (answer) => {
    if (answered) return;
    
    setSelectedAnswer(answer);
    setAnswered(true);
    
    if (answer === shuffledQuotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
    
    // Kontrola, zda je to poslední otázka
    if (currentQuoteIndex === quizLength - 1) {
      setTimeout(() => {
        setGameOver(true);
      }, 1500);
    }
  };

  const nextQuestion = () => {
    if (currentQuoteIndex < quizLength - 1) {
      setCurrentQuoteIndex(currentQuoteIndex + 1);
      setAnswered(false);
      setSelectedAnswer(null);
    }
  };

  const restartGame = () => {
    const shuffled = [...quotes].sort(() => 0.5 - Math.random()).slice(0, quizLength);
    setShuffledQuotes(shuffled);
    setCurrentQuoteIndex(0);
    setScore(0);
    setAnswered(false);
    setSelectedAnswer(null);
    setGameOver(false);
  };

  // Pokud nejsou citáty ještě načteny, zobrazíme načítací obrazovku
  if (shuffledQuotes.length === 0) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-100">
        <div className="text-xl font-semibold">Načítání kvízu...</div>
      </div>
    );
  }

  // Obrazovka s výsledkem
  if (gameOver) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6">
        <div className="w-full max-w-md bg-white rounded-xl shadow-lg overflow-hidden">
          <div className="p-8 text-center">
            <Trophy className="w-16 h-16 mx-auto mb-4 text-amber-500" />
            <h2 className="text-2xl font-bold mb-4">Konec hry!</h2>
            <p className="text-xl mb-6">
              Tvé skóre: <span className="font-bold">{score}</span> z {quizLength}
            </p>
            
            {score === quizLength && (
              <p className="text-green-600 font-semibold mb-4">Perfektní skóre! Jsi expert!</p>
            )}
            
            {score >= quizLength * 0.7 && score < quizLength && (
              <p className="text-blue-600 font-semibold mb-4">Skvělý výsledek!</p>
            )}
            
            {score >= quizLength * 0.4 && score < quizLength * 0.7 && (
              <p className="text-amber-600 font-semibold mb-4">Dobrá práce!</p>
            )}
            
            {score < quizLength * 0.4 && (
              <p className="text-red-600 font-semibold mb-4">Příště to bude lepší!</p>
            )}
            
            <button
              onClick={restartGame}
              className="flex items-center justify-center mx-auto px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
            >
              <RefreshCw className="w-5 h-5 mr-2" />
              Hrát znovu
            </button>
          </div>
        </div>
      </div>
    );
  }

  const currentQuote = shuffledQuotes[currentQuoteIndex];

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div className="w-full max-w-2xl bg-white rounded-xl shadow-lg overflow-hidden">
        <div className="p-6 md:p-8">
          <div className="flex justify-between items-center mb-6">
            <div className="text-sm font-medium text-gray-500">
              Otázka {currentQuoteIndex + 1}/{quizLength}
            </div>
            <div className="text-sm font-medium">
              Skóre: <span className="text-indigo-600 font-bold">{score}</span>
            </div>
          </div>
          
          <h1 className="text-xl md:text-2xl font-bold text-center mb-8">
            Kdo to řekl?
          </h1>
          
          <div className="bg-gray-50 p-6 rounded-lg mb-8">
            <p className="text-lg md:text-xl text-center italic">
              "{currentQuote.text}"
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <button
              onClick={() => handleAnswer("Kanye West")}
              disabled={answered}
              className={`px-6 py-4 rounded-lg font-medium transition-colors ${
                answered 
                  ? selectedAnswer === "Kanye West"
                    ? currentQuote.author === "Kanye West"
                      ? "bg-green-100 border-2 border-green-500 text-green-700"
                      : "bg-red-100 border-2 border-red-500 text-red-700"
                    : currentQuote.author === "Kanye West"
                      ? "bg-green-100 border-2 border-green-500 text-green-700"
                      : "bg-gray-100 text-gray-500"
                  : "bg-amber-50 border-2 border-amber-300 text-amber-700 hover:bg-amber-100"
              }`}
            >
              Kanye West
            </button>
            
            <button
              onClick={() => handleAnswer("Adolf Hitler")}
              disabled={answered}
              className={`px-6 py-4 rounded-lg font-medium transition-colors ${
                answered 
                  ? selectedAnswer === "Adolf Hitler"
                    ? currentQuote.author === "Adolf Hitler"
                      ? "bg-green-100 border-2 border-green-500 text-green-700"
                      : "bg-red-100 border-2 border-red-500 text-red-700"
                    : currentQuote.author === "Adolf Hitler"
                      ? "bg-green-100 border-2 border-green-500 text-green-700"
                      : "bg-gray-100 text-gray-500"
                  : "bg-blue-50 border-2 border-blue-300 text-blue-700 hover:bg-blue-100"
              }`}
            >
              Adolf Hitler
            </button>
          </div>
          
          {answered && (
            <div className={`p-4 rounded-lg mb-6 ${
              selectedAnswer === currentQuote.author 
                ? "bg-green-50 text-green-800" 
                : "bg-red-50 text-red-800"
            }`}>
              <p className="font-medium">
                {selectedAnswer === currentQuote.author 
                  ? "Správně!" 
                  : "Špatně!"
                } Tento citát řekl {currentQuote.author}.
              </p>
            </div>
          )}
          
          {answered && currentQuoteIndex < quizLength - 1 && (
            <button
              onClick={nextQuestion}
              className="flex items-center justify-center mx-auto px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
            >
              Další otázka
              <ArrowRight className="w-5 h-5 ml-2" />
            </button>
          )}
        </div>
      </div>
    </div>
  );
}