import React, { useState, useEffect } from 'react';
import { Volume2, Star, Heart, Award } from 'lucide-react';

const ThreeLevelsQuiz = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState(null);
  const [showExplanation, setShowExplanation] = useState(false);
  const [gameComplete, setGameComplete] = useState(false);
  const [shuffledQuestions, setShuffledQuestions] = useState([]);

  // בנק השאלות עם ערבוב אסטרטגי
  const questions = [
    {
      id: 1,
      text: "ליהנות מאוכל טעים",
      correctAnswer: "cat",
      explanation: "כל יצור חי נהנה מטעם טוב - זה צורך בסיסי של החיים!",
      level: "בסיסי"
    },
    {
      id: 2, 
      text: "להתרגש כשבעל הבית חוזר",
      correctAnswer: "dog",
      explanation: "כלבים יוצרים קשר רגשי עמוק, בעוד שחתולים יותר עצמאיים ולא תמיד מתרגשים מחזרה.",
      level: "רגשי"
    },
    {
      id: 3,
      text: "להבין בדיחה ולהתפוצץ מצחוק",
      correctAnswer: "human",
      explanation: "הומור דורש הבנת משמעויות כפולות ואירוניה - זה ייחודי לנשמה האנושית!",
      level: "נשמתי"
    },
    {
      id: 4,
      text: "לישון במקום נוח וחם", 
      correctAnswer: "cat",
      explanation: "זה צורך בסיסי של כל בעל חיים - גם החתול הכי פשוט מחפש מקום נוח לישון.",
      level: "בסיסי"
    },
    {
      id: 5,
      text: "להרגיש עצוב כשנעזבים לבד",
      correctAnswer: "dog", 
      explanation: "כלבים הם חיות להקה שזקוקות לחברה, בעוד שחתולים הרבה יותר עצמאיים.",
      level: "רגשי"
    },
    {
      id: 6,
      text: "להתרגש מסיפור או ספר",
      correctAnswer: "human",
      explanation: "דמיון ויכולת להיכנס לעולמות לא קיימים - זה כוח מיוחד של הנשמה האנושית!",
      level: "נשמתי"
    },
    {
      id: 7,
      text: "ליהנות מליטוף עדין",
      correctAnswer: "cat",
      explanation: "חתולים אוהבים מגע נעים (כשהם במצב רוח...) - זה הנאה חושית בסיסית.",
      level: "בסיסי"
    },
    {
      id: 8,
      text: "לשמח מישהו שעצוב",
      correctAnswer: "dog",
      explanation: "כלבים מרגישים רגשות של אחרים ומגיבים באמפתיה טבעית.",
      level: "רגשי"
    },
    {
      id: 9,
      text: "לחלום על העתיד ולתכנן",
      correctAnswer: "human", 
      explanation: "רק אנחנו חיים בעתיד ולא רק בהווה - זה כוח מיוחד של הנשמה!",
      level: "נשמתי"
    },
    {
      id: 10,
      text: "להרגיש בטוח במקום מוכר",
      correctAnswer: "cat",
      explanation: "גם חתול מרגיש יותר רגוע בטריטוריה שלו - זה צורך בסיסי של בטחון.",
      level: "בסיסי"
    },
    {
      id: 11,
      text: "ללמוד להביא חפץ ולהיות גאה על זה",
      correctAnswer: "dog",
      explanation: "כלבים אוהבים לרצות ומרגישים הצלחה כשעושים משהו נכון.",
      level: "רגשי"
    },
    {
      id: 12,
      text: "להכיר בטעות ולהתנצל מהלב",
      correctAnswer: "human",
      explanation: "הכרה מוסרית והחלטה לשנות - זה דורש נשמה עם מצפון!",
      level: "נשמתי"
    },
    {
      id: 13,
      text: "ליהנות מחום השמש",
      correctAnswer: "cat",
      explanation: "תראו איך חתולים מחפשים את כתם השמש בבית - זה הנאה טבעית!",
      level: "בסיסי"
    },
    {
      id: 14,
      text: "להזדהות עם כאב של האדם",
      correctAnswer: "dog",
      explanation: "כלבים מפתחים אמפתיה אמיתית ומרגישים כשהבעלים שלהם כואבים.",
      level: "רגשי"
    },
    {
      id: 15,
      text: "ליצור משהו יפה שלא היה קיים",
      correctAnswer: "human",
      explanation: "יצירתיות מקורית ורצון ליופי - זה כוח אלוהי שיש רק לנשמה האנושית!",
      level: "נשמתי"
    }
  ];

  // ערבוב השאלות באופן אסטרטגי
  useEffect(() => {
    const basicQuestions = questions.filter(q => q.level === "בסיסי");
    const emotionalQuestions = questions.filter(q => q.level === "רגשי");  
    const soulQuestions = questions.filter(q => q.level === "נשמתי");
    
    // ערבוב בתוך כל קטגוריה
    const shuffleArray = (array) => {
      const shuffled = [...array];
      for (let i = shuffled.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
      }
      return shuffled;
    };

    const shuffledBasic = shuffleArray(basicQuestions);
    const shuffledEmotional = shuffleArray(emotionalQuestions);
    const shuffledSoul = shuffleArray(soulQuestions);

    // חלוקה מעורבבת: בסיסי, רגשי, נשמתי, בסיסי, רגשי, נשמתי...
    const mixed = [];
    const maxLength = Math.max(shuffledBasic.length, shuffledEmotional.length, shuffledSoul.length);
    
    for (let i = 0; i < maxLength; i++) {
      if (shuffledBasic[i]) mixed.push(shuffledBasic[i]);
      if (shuffledEmotional[i]) mixed.push(shuffledEmotional[i]);
      if (shuffledSoul[i]) mixed.push(shuffledSoul[i]);
    }

    setShuffledQuestions(mixed);
  }, []);

  // אפקט קולי
  const playSound = (isCorrect) => {
    // יצירת צליל פשוט עם Web Audio API
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    
    if (isCorrect) {
      // צליל נכון - נעים וחיובי
      oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
      oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
      oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2); // G5
    } else {
      // צליל שגוי - נמוך יותר
      oscillator.frequency.setValueAtTime(220, audioContext.currentTime); // A3
      oscillator.frequency.setValueAtTime(196, audioContext.currentTime + 0.15); // G3
    }
    
    oscillator.type = 'sine';
    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
    
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.3);
  };

  const handleAnswer = (answer) => {
    if (selectedAnswer !== null) return;
    
    setSelectedAnswer(answer);
    const isCorrect = answer === shuffledQuestions[currentQuestion]?.correctAnswer;
    
    playSound(isCorrect);
    
    if (isCorrect) {
      setScore(score + 1);
    }
    
    setShowExplanation(true);
  };

  const nextQuestion = () => {
    if (currentQuestion < shuffledQuestions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
      setSelectedAnswer(null);
      setShowExplanation(false);
    } else {
      setGameComplete(true);
    }
  };

  const resetQuiz = () => {
    setCurrentQuestion(0);
    setScore(0);
    setSelectedAnswer(null);
    setShowExplanation(false);
    setGameComplete(false);
    // ערבוב חדש של השאלות
    window.location.reload();
  };

  const getAnswerColor = (answer) => {
    if (!showExplanation) return 'bg-white hover:bg-gray-50';
    
    const correct = shuffledQuestions[currentQuestion]?.correctAnswer;
    if (answer === correct) return 'bg-green-200 border-green-500';
    if (answer === selectedAnswer && answer !== correct) return 'bg-red-200 border-red-500';
    return 'bg-gray-100';
  };

  const getProgressMessage = () => {
    const progress = ((currentQuestion + 1) / shuffledQuestions.length) * 100;
    if (progress <= 33) return "מתחילות לגלות את המיוחדות שלנו! 🌱";
    if (progress <= 66) return "מבינות יותר ויותר כמה אנחנו מיוחדות! ✨";
    return "כמעט גילינו את כל הסוד של הנשמה שלנו! 💎";
  };

  if (shuffledQuestions.length === 0) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-pink-100 to-purple-200">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
          <p className="text-lg text-purple-700">מכינה את השאלות המיוחדות...</p>
        </div>
      </div>
    );
  }

  if (gameComplete) {
    const percentage = Math.round((score / shuffledQuestions.length) * 100);
    let message = "";
    let emoji = "";
    
    if (percentage >= 80) {
      message = "מדהים! הבנת בדיוק כמה אנחנו מיוחדות! יש לנו נשמה אלוהית שאף יצור אחר אין לו!";
      emoji = "👑";
    } else if (percentage >= 60) {
      message = "מעולה! את מבינה שיש לנו משהו מיוחד שאף חיה אחרת אין לה!";
      emoji = "⭐";
    } else {
      message = "טוב מאוד! המשיכי לחשוב על מה שעושה אותנו מיוחדות כבנות אדם!";
      emoji = "💫";
    }

    return (
      <div className="min-h-screen bg-gradient-to-br from-pink-100 to-purple-200 p-4">
        <div className="max-w-2xl mx-auto">
          <div className="bg-white rounded-3xl shadow-2xl p-8 text-center">
            <div className="text-6xl mb-6">{emoji}</div>
            <h1 className="text-3xl font-bold text-purple-800 mb-4">כל הכבוד!</h1>
            <div className="text-2xl font-bold text-pink-600 mb-6">
              ענית נכון על {score} מתוך {shuffledQuestions.length} שאלות ({percentage}%)
            </div>
            <p className="text-lg text-gray-700 mb-8 leading-relaxed">{message}</p>
            
            <div className="bg-gradient-to-r from-yellow-100 to-pink-100 p-6 rounded-2xl mb-8">
              <h3 className="text-xl font-bold text-purple-800 mb-4">💎 הגילוי הגדול:</h3>
              <p className="text-lg text-gray-800 leading-relaxed">
                יש לנו <span className="font-bold text-pink-600">15 הנאות מיוחדות</span> שאף יצור אחר בעולם לא יכול לחוות!
                זה בגלל שיש לנו <span className="font-bold text-purple-600">נשמה אלוהית</span> שנותנת לנו לחוות את החיים 
                ברמה עמוקה ומשמעותית. ✨
              </p>
            </div>

            <button
              onClick={resetQuiz}
              className="bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xl font-bold py-4 px-8 rounded-2xl hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg"
            >
              🔄 בואי נשחק שוב!
            </button>
          </div>
        </div>
      </div>
    );
  }

  const currentQ = shuffledQuestions[currentQuestion];

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-100 to-purple-200 p-4">
      <div className="max-w-4xl mx-auto">
        {/* כותרת ומידע עליון */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-purple-800 mb-2">🌟 שלוש רמות החיים 🌟</h1>
          <p className="text-lg text-gray-700">מי יכול להרגיש מה?</p>
        </div>

        {/* פס התקדמות */}
        <div className="bg-white rounded-2xl p-6 mb-8 shadow-lg">
          <div className="flex justify-between items-center mb-4">
            <span className="text-lg font-semibold text-purple-700">
              שאלה {currentQuestion + 1} מתוך {shuffledQuestions.length}
            </span>
            <span className="text-lg font-semibold text-pink-600">
              ניקוד: {score}/{shuffledQuestions.length}
            </span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-3 mb-4">
            <div 
              className="bg-gradient-to-r from-purple-500 to-pink-500 h-3 rounded-full transition-all duration-500"
              style={{ width: `${((currentQuestion + 1) / shuffledQuestions.length) * 100}%` }}
            ></div>
          </div>
          <p className="text-center text-purple-600 font-medium">{getProgressMessage()}</p>
        </div>

        {/* השאלה */}
        <div className="bg-white rounded-3xl shadow-2xl p-8 mb-8">
          <div className="text-center mb-8">
            <h2 className="text-2xl font-bold text-gray-800 mb-4">
              מי יכול לחוות את זה?
            </h2>
            <div className="bg-gradient-to-r from-yellow-100 to-orange-100 p-6 rounded-2xl">
              <p className="text-3xl font-bold text-purple-800">
                {currentQ?.text}
              </p>
            </div>
          </div>

          {/* אפשרויות התשובה */}
          <div className="grid md:grid-cols-3 gap-6">
            {/* חתול */}
            <button
              onClick={() => handleAnswer('cat')}
              disabled={selectedAnswer !== null}
              className={`${getAnswerColor('cat')} border-2 border-gray-300 rounded-2xl p-6 transition-all transform hover:scale-105 disabled:cursor-not-allowed`}
            >
              <div className="text-6xl mb-4">🐱</div>
              <h3 className="text-xl font-bold text-orange-600 mb-2">גם לחתול יש</h3>
              <p className="text-gray-600">הנאה בסיסית שכל חיה יכולה לחוות</p>
            </button>

            {/* כלב */}
            <button
              onClick={() => handleAnswer('dog')}
              disabled={selectedAnswer !== null}
              className={`${getAnswerColor('dog')} border-2 border-gray-300 rounded-2xl p-6 transition-all transform hover:scale-105 disabled:cursor-not-allowed`}
            >
              <div className="text-6xl mb-4">🐕</div>
              <h3 className="text-xl font-bold text-blue-600 mb-2">גם לכלב יש</h3>
              <p className="text-gray-600">הנאה רגשית וחברתית</p>
            </button>

            {/* אדם */}
            <button
              onClick={() => handleAnswer('human')}
              disabled={selectedAnswer !== null}
              className={`${getAnswerColor('human')} border-2 border-gray-300 rounded-2xl p-6 transition-all transform hover:scale-105 disabled:cursor-not-allowed`}
            >
              <div className="text-6xl mb-4">👧</div>
              <h3 className="text-xl font-bold text-purple-600 mb-2">רק לאדם יש</h3>
              <p className="text-gray-600">הנאת נשמה מיוחדת</p>
            </button>
          </div>
        </div>

        {/* הסבר */}
        {showExplanation && (
          <div className="bg-white rounded-2xl shadow-lg p-6 mb-8">
            <div className="flex items-center mb-4">
              <Volume2 className="text-purple-600 mr-3" size={24} />
              <h3 className="text-xl font-bold text-purple-800">הסבר:</h3>
            </div>
            <p className="text-lg text-gray-700 mb-6 leading-relaxed">
              {currentQ?.explanation}
            </p>
            
            {/* הודעת עידוד */}
            <div className="bg-gradient-to-r from-green-100 to-blue-100 p-4 rounded-xl mb-6">
              <p className="text-center text-lg font-medium text-green-800">
                {selectedAnswer === currentQ?.correctAnswer 
                  ? "🎉 כל הכבוד! המשיכי לגלות כמה את מיוחדת!" 
                  : "💭 זה בסדר! כל שאלה עוזרת לנו להבין יותר על עצמנו!"}
              </p>
            </div>

            <div className="text-center">
              <button
                onClick={nextQuestion}
                className="bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xl font-bold py-3 px-8 rounded-2xl hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105 shadow-lg"
              >
                {currentQuestion < shuffledQuestions.length - 1 ? '⬅️ השאלה הבאה' : '🏆 לראות תוצאות'}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default ThreeLevelsQuiz;