import { useState, useEffect, useRef } from 'react';
import { Check, X, RefreshCw } from 'lucide-react';

export default function QuoteGuessingGame() {
  const [quotes, setQuotes] = useState([
    {
      text: "Edukacja to fundament nowoczesnego społeczeństwa. Musimy inwestować w szkoły i nauczycieli.",
      author: "Trzaskowski"
    },
    {
      text: "Warszawa musi być miastem dla wszystkich, niezależnie od poglądów politycznych, wyznania czy orientacji.",
      author: "Trzaskowski"
    },
    {
      text: "Samorządy są fundamentem demokracji. To w nich obywatele mają największy wpływ na swoje otoczenie.",
      author: "Trzaskowski"
    },
    {
      text: "Musimy chronić planetę dla przyszłych pokoleń. Zmiany klimatyczne to jedno z największych wyzwań naszych czasów.",
      author: "Trzaskowski"
    },
    {
      text: "Polska zasługuje na miejsce w sercu Europy. Nasza przyszłość jest związana z wartościami europejskimi.",
      author: "Trzaskowski"
    },
    {
      text: "Wolne media są fundamentem demokracji. Bez nich nie ma kontroli władzy.",
      author: "Trzaskowski"
    },
    {
      text: "Śmierć jednego człowieka to tragedia. Śmierć milionów to statystyka.",
      author: "Stalin"
    },
    {
      text: "Idee są potężniejsze niż broń. Nie pozwalamy naszym wrogom mieć broni, dlaczego mielibyśmy pozwolić im mieć idee?",
      author: "Stalin"
    },
    {
      text: "Kiedy umiera jeden człowiek, to tragedia. Kiedy umierają miliony, to statystyka.",
      author: "Stalin"
    },
    {
      text: "Edukacja jest bronią, której efekt zależy od tego, kto ją trzyma w swoich rękach i kogo nią uderza.",
      author: "Stalin"
    },
    {
      text: "Nie można rządzić bez stali, czołgów i broni.",
      author: "Stalin"
    },
    {
      text: "Wdzięczność to choroba psów.",
      author: "Stalin"
    }
  ]);
  
  const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0);
  const [shuffledQuotes, setShuffledQuotes] = useState([]);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [selectedAuthor, setSelectedAuthor] = useState(null);
  const [gameOver, setGameOver] = useState(false);
  
  // Shuffle quotes at the beginning
  useEffect(() => {
    const shuffled = [...quotes].sort(() => Math.random() - 0.5);
    setShuffledQuotes(shuffled);
  }, []);
  
  const handleGuess = (author) => {
    setSelectedAuthor(author);
    setShowAnswer(true);
    
    if (author === shuffledQuotes[currentQuoteIndex].author) {
      setScore(score + 1);
    }
    
    setTimeout(() => {
      if (currentQuoteIndex < shuffledQuotes.length - 1) {
        setCurrentQuoteIndex(currentQuoteIndex + 1);
        setShowAnswer(false);
        setSelectedAuthor(null);
      } else {
        setGameOver(true);
      }
    }, 1500);
  };
  
  const resetGame = () => {
    const shuffled = [...quotes].sort(() => Math.random() - 0.5);
    setShuffledQuotes(shuffled);
    setCurrentQuoteIndex(0);
    setScore(0);
    setShowAnswer(false);
    setSelectedAuthor(null);
    setGameOver(false);
  };
  
  if (shuffledQuotes.length === 0) {
    return <div className="flex items-center justify-center h-screen">Ładowanie...</div>;
  }
  
  return (
    <div className="min-h-screen bg-slate-100 flex flex-col items-center justify-center p-6 font-sans">
      <div className="w-full max-w-2xl bg-white rounded-xl shadow-lg overflow-hidden">
        <div className="bg-indigo-800 text-white p-6 text-center">
          <h1 className="text-2xl font-bold mb-2">Kto to powiedział?</h1>
          <p className="text-indigo-200">Zgadnij, czy autorem cytatu jest Stalin czy Trzaskowski</p>
        </div>
        
        {!gameOver ? (
          <div className="p-8">
            <div className="flex justify-between mb-4 text-sm">
              <div className="text-indigo-800 font-semibold">
                Wynik: {score}/{shuffledQuotes.length}
              </div>
              <div className="text-gray-600">
                Pytanie {currentQuoteIndex + 1} z {shuffledQuotes.length}
              </div>
            </div>
            
            <div className="bg-indigo-50 p-6 rounded-lg mb-8 relative">
              <div className="text-xl font-serif italic text-gray-800 text-center">
                "{shuffledQuotes[currentQuoteIndex].text}"
              </div>
              
              {showAnswer && (
                <div className={`absolute -top-3 -right-3 rounded-full p-2 ${
                  selectedAuthor === shuffledQuotes[currentQuoteIndex].author 
                    ? 'bg-green-500' 
                    : 'bg-red-500'
                } text-white`}>
                  {selectedAuthor === shuffledQuotes[currentQuoteIndex].author 
                    ? <Check size={20} /> 
                    : <X size={20} />}
                </div>
              )}
            </div>
            
            <div className="grid grid-cols-2 gap-4">
              <button
                onClick={() => !showAnswer && handleGuess("Trzaskowski")}
                disabled={showAnswer}
                className={`p-4 rounded-lg text-white font-medium transition-all ${
                  showAnswer 
                    ? shuffledQuotes[currentQuoteIndex].author === "Trzaskowski"
                      ? "bg-green-600"
                      : selectedAuthor === "Trzaskowski"
                        ? "bg-red-600"
                        : "bg-gray-400"
                    : "bg-blue-600 hover:bg-blue-700"
                }`}
              >
                Trzaskowski
              </button>
              
              <button
                onClick={() => !showAnswer && handleGuess("Stalin")}
                disabled={showAnswer}
                className={`p-4 rounded-lg text-white font-medium transition-all ${
                  showAnswer 
                    ? shuffledQuotes[currentQuoteIndex].author === "Stalin"
                      ? "bg-green-600"
                      : selectedAuthor === "Stalin"
                        ? "bg-red-600"
                        : "bg-gray-400"
                    : "bg-red-700 hover:bg-red-800"
                }`}
              >
                Stalin
              </button>
            </div>
            
            {showAnswer && (
              <div className="mt-6 text-center">
                <p className="text-gray-700">
                  Prawidłowa odpowiedź: <span className="font-bold">{shuffledQuotes[currentQuoteIndex].author}</span>
                </p>
              </div>
            )}
          </div>
        ) : (
          <div className="p-8 text-center">
            <h2 className="text-2xl font-bold mb-4">Koniec gry!</h2>
            <p className="text-xl mb-6">Twój wynik: {score} z {shuffledQuotes.length}</p>
            
            <div className="mb-8">
              {score === shuffledQuotes.length ? (
                <p className="text-green-600 font-medium">Doskonale! Wszystkie odpowiedzi poprawne!</p>
              ) : score >= shuffledQuotes.length * 0.7 ? (
                <p className="text-amber-600 font-medium">Bardzo dobrze! Większość odpowiedzi poprawna.</p>
              ) : (
                <p className="text-indigo-600 font-medium">Warto spróbować jeszcze raz!</p>
              )}
            </div>
            
            <button
              onClick={resetGame}
              className="flex items-center justify-center mx-auto bg-indigo-700 text-white px-6 py-3 rounded-lg hover:bg-indigo-800 transition-colors"
            >
              <RefreshCw size={18} className="mr-2" />
              Zagraj ponownie
            </button>
          </div>
        )}
      </div>
      
      <p className="mt-6 text-sm text-gray-500 text-center max-w-lg">
        Ta gra ma charakter edukacyjny i ma na celu pokazanie kontrastu między wypowiedziami tych dwóch postaci.
      </p>
    </div>
  );
}