script.js

// Application state
const AppState = {
    WELCOME: 'welcome',
    QUIZ: 'quiz',
    RESULTS: 'results',
    REVIEW: 'review',
    HISTORY: 'history'
};

// Current application state
let currentState = AppState.WELCOME;
let selectedTopic = null;
let selectedDifficulty = null;
let selectedQuestionCount = 10; // Default to 10 questions
let selectedQuestionType = 'any'; // 'any', 'multiple', 'boolean'
let currentQuestionIndex = 0;
let userAnswers = [];
let quizStartTime = null;
let timerInterval = null;
let timeElapsed = 0;
let streakCount = 0;
let totalQuizzesTaken = 0;
let totalLearningTime = 0;
let totalCorrectAnswers = 0;
let totalQuestionsAnswered = 0;
let userXP = 0;
let userLevel = 1;
let isLoadingQuestions = false;
let apiQuestionsCache = {}; // Cache API responses

// Question bank with more engaging questions
const questions = [
    // Science questions
    {
        id: 1,
        topic: "Science 🔬",
        difficulty: "easy",
        type: "multiple_choice",
        question: "What is the chemical symbol for Gold? 💰",
        options: ["Go", "Gd", "Au", "Ag"],
        correctAnswer: "Au",
        explanation: "Gold's chemical symbol is Au from Latin 'aurum'. It's one of the least reactive chemical elements!",
        points: 10,
        timeLimit: 30
    },
    {
        id: 2,
        topic: "Science 🔬",
        difficulty: "medium",
        type: "multiple_choice",
        question: "Which planet is known as the Red Planet? 🪐",
        options: ["Venus", "Mars", "Jupiter", "Saturn"],
        correctAnswer: "Mars",
        explanation: "Mars is called the Red Planet due to iron oxide (rust) on its surface. It has the largest volcano in the solar system!",
        points: 15,
        timeLimit: 25
    },
    {
        id: 3,
        topic: "Science 🔬",
        difficulty: "hard",
        type: "true_false",
        question: "Mitochondria are known as the powerhouse of the cell. ⚡",
        options: ["True", "False"],
        correctAnswer: "True",
        explanation: "Mitochondria generate most of the cell's supply of adenosine triphosphate (ATP), used as a source of chemical energy.",
        points: 20,
        timeLimit: 20
    },
    // History questions
    {
        id: 4,
        topic: "History 📜",
        difficulty: "medium",
        type: "multiple_choice",
        question: "Who was the first President of the United States? 🇺🇸",
        options: ["Thomas Jefferson", "Abraham Lincoln", "George Washington", "John Adams"],
        correctAnswer: "George Washington",
        explanation: "George Washington served as the first U.S. President from 1789 to 1797. He's on the one-dollar bill!",
        points: 15,
        timeLimit: 25
    },
    {
        id: 5,
        topic: "History 📜",
        difficulty: "hard",
        type: "multiple_choice",
        question: "In which year did World War II end? ⚔️",
        options: ["1943", "1945", "1947", "1950"],
        correctAnswer: "1945",
        explanation: "World War II ended in 1945 with the surrender of Germany and Japan. The war lasted 6 years!",
        points: 20,
        timeLimit: 30
    },
    // Mathematics questions
    {
        id: 6,
        topic: "Mathematics 🧮",
        difficulty: "easy",
        type: "multiple_choice",
        question: "What is 15 × 6? ✖️",
        options: ["80", "90", "100", "110"],
        correctAnswer: "90",
        explanation: "15 multiplied by 6 equals 90. Multiplication is repeated addition!",
        points: 10,
        timeLimit: 20
    },
    {
        id: 7,
        topic: "Mathematics 🧮",
        difficulty: "hard",
        type: "multiple_choice",
        question: "What is the value of π (pi) rounded to two decimal places? 🥧",
        options: ["3.14", "3.16", "3.12", "3.18"],
        correctAnswer: "3.14",
        explanation: "π is approximately 3.14159, which rounds to 3.14 to two decimal places. Pi is infinite and non-repeating!",
        points: 20,
        timeLimit: 25
    },
    // Literature questions
    {
        id: 8,
        topic: "Literature 📚",
        difficulty: "medium",
        type: "multiple_choice",
        question: "Who wrote 'Romeo and Juliet'? 🎭",
        options: ["Charles Dickens", "William Shakespeare", "Jane Austen", "Mark Twain"],
        correctAnswer: "William Shakespeare",
        explanation: "'Romeo and Juliet' is a tragedy written by William Shakespeare early in his career. It's one of his most popular plays!",
        points: 15,
        timeLimit: 25
    },
    // Technology questions
    {
        id: 9,
        topic: "Technology 💻",
        difficulty: "easy",
        type: "multiple_choice",
        question: "What does 'HTML' stand for? 🌐",
        options: ["Hyper Text Markup Language", "High Tech Modern Language", "Hyper Transfer Markup Language", "Home Tool Markup Language"],
        correctAnswer: "Hyper Text Markup Language",
        explanation: "HTML stands for Hyper Text Markup Language, the standard markup language for web pages. It structures content on the web!",
        points: 10,
        timeLimit: 25
    },
    {
        id: 10,
        topic: "Technology 💻",
        difficulty: "hard",
        type: "multiple_choice",
        question: "Which programming language is known as the 'language of the web'? 🕸️",
        options: ["Python", "Java", "JavaScript", "C++"],
        correctAnswer: "JavaScript",
        explanation: "JavaScript is the primary language for interactive web content and runs in all modern web browsers. It brings websites to life!",
        points: 20,
        timeLimit: 30
    },
    // Geography questions
    {
        id: 11,
        topic: "Geography 🌍",
        difficulty: "easy",
        type: "multiple_choice",
        question: "What is the capital of France? 🇫🇷",
        options: ["London", "Berlin", "Paris", "Madrid"],
        correctAnswer: "Paris",
        explanation: "Paris is the capital and most populous city of France, known for the Eiffel Tower!",
        points: 10,
        timeLimit: 20
    },
    {
        id: 12,
        topic: "Geography 🌍",
        difficulty: "medium",
        type: "multiple_choice",
        question: "Which is the longest river in the world? 🌊",
        options: ["Amazon River", "Nile River", "Yangtze River", "Mississippi River"],
        correctAnswer: "Nile River",
        explanation: "The Nile River is approximately 6,650 km long, flowing through northeastern Africa!",
        points: 15,
        timeLimit: 25
    },
    {
        id: 13,
        topic: "Geography 🌍",
        difficulty: "hard",
        type: "multiple_choice",
        question: "Which country has the most time zones? ⏰",
        options: ["USA", "Russia", "France", "China"],
        correctAnswer: "France",
        explanation: "France has 12 time zones due to its overseas territories, more than any other country!",
        points: 20,
        timeLimit: 30
    },
    // Sports questions
    {
        id: 14,
        topic: "Sports ⚽",
        difficulty: "easy",
        type: "multiple_choice",
        question: "How many players are on a soccer team? ⚽",
        options: ["9", "10", "11", "12"],
        correctAnswer: "11",
        explanation: "A soccer team has 11 players on the field at one time, including the goalkeeper!",
        points: 10,
        timeLimit: 20
    },
    {
        id: 15,
        topic: "Sports ⚽",
        difficulty: "medium",
        type: "multiple_choice",
        question: "In which sport would you perform a slam dunk? 🏀",
        options: ["Tennis", "Basketball", "Volleyball", "Baseball"],
        correctAnswer: "Basketball",
        explanation: "A slam dunk is a basketball shot where a player jumps and scores by putting the ball directly through the hoop!",
        points: 15,
        timeLimit: 25
    },
    {
        id: 16,
        topic: "Sports ⚽",
        difficulty: "hard",
        type: "multiple_choice",
        question: "Which country has won the most FIFA World Cups? 🏆",
        options: ["Germany", "Argentina", "Brazil", "Italy"],
        correctAnswer: "Brazil",
        explanation: "Brazil has won the FIFA World Cup 5 times (1958, 1962, 1970, 1994, 2002)!",
        points: 20,
        timeLimit: 30
    },
    // More Science questions
    {
        id: 17,
        topic: "Science 🔬",
        difficulty: "easy",
        type: "multiple_choice",
        question: "What is H2O commonly known as? 💧",
        options: ["Oxygen", "Water", "Hydrogen", "Carbon Dioxide"],
        correctAnswer: "Water",
        explanation: "H2O is the chemical formula for water - 2 hydrogen atoms and 1 oxygen atom!",
        points: 10,
        timeLimit: 20
    },
    {
        id: 18,
        topic: "Science 🔬",
        difficulty: "medium",
        type: "multiple_choice",
        question: "What is the speed of light? ⚡",
        options: ["299,792 km/s", "150,000 km/s", "500,000 km/s", "100,000 km/s"],
        correctAnswer: "299,792 km/s",
        explanation: "Light travels at approximately 299,792 kilometers per second in a vacuum!",
        points: 15,
        timeLimit: 25
    },
    // More History questions
    {
        id: 19,
        topic: "History 📜",
        difficulty: "easy",
        type: "multiple_choice",
        question: "Who discovered America in 1492? ⛵",
        options: ["Marco Polo", "Christopher Columbus", "Vasco da Gama", "Ferdinand Magellan"],
        correctAnswer: "Christopher Columbus",
        explanation: "Christopher Columbus reached the Americas in 1492, though Vikings had arrived earlier!",
        points: 10,
        timeLimit: 25
    },
    {
        id: 20,
        topic: "History 📜",
        difficulty: "medium",
        type: "multiple_choice",
        question: "Which ancient wonder of the world still exists today? 🏛️",
        options: ["Hanging Gardens", "Colossus of Rhodes", "Great Pyramid of Giza", "Lighthouse of Alexandria"],
        correctAnswer: "Great Pyramid of Giza",
        explanation: "The Great Pyramid of Giza is the only ancient wonder still standing today!",
        points: 15,
        timeLimit: 30
    },
    // More Mathematics questions
    {
        id: 21,
        topic: "Mathematics 🧮",
        difficulty: "medium",
        type: "multiple_choice",
        question: "What is the square root of 144? 📐",
        options: ["10", "11", "12", "13"],
        correctAnswer: "12",
        explanation: "The square root of 144 is 12, because 12 × 12 = 144!",
        points: 15,
        timeLimit: 25
    },
    {
        id: 22,
        topic: "Mathematics 🧮",
        difficulty: "hard",
        type: "multiple_choice",
        question: "What is 25% of 200? 🔢",
        options: ["25", "50", "75", "100"],
        correctAnswer: "50",
        explanation: "25% of 200 is 50. To calculate: (25/100) × 200 = 50!",
        points: 20,
        timeLimit: 30
    },
    // More Literature questions
    {
        id: 23,
        topic: "Literature 📚",
        difficulty: "easy",
        type: "multiple_choice",
        question: "Who wrote 'Harry Potter'? 🪄",
        options: ["J.R.R. Tolkien", "J.K. Rowling", "C.S. Lewis", "Roald Dahl"],
        correctAnswer: "J.K. Rowling",
        explanation: "J.K. Rowling wrote the Harry Potter series, one of the best-selling book series in history!",
        points: 10,
        timeLimit: 20
    },
    {
        id: 24,
        topic: "Literature 📚",
        difficulty: "hard",
        type: "multiple_choice",
        question: "In which year was '1984' by George Orwell published? 📖",
        options: ["1948", "1949", "1950", "1984"],
        correctAnswer: "1949",
        explanation: "George Orwell's dystopian novel '1984' was published in 1949, not 1984!",
        points: 20,
        timeLimit: 30
    },
    // More Technology questions
    {
        id: 25,
        topic: "Technology 💻",
        difficulty: "medium",
        type: "multiple_choice",
        question: "Who is the founder of Microsoft? 🖥️",
        options: ["Steve Jobs", "Bill Gates", "Mark Zuckerberg", "Elon Musk"],
        correctAnswer: "Bill Gates",
        explanation: "Bill Gates co-founded Microsoft with Paul Allen in 1975!",
        points: 15,
        timeLimit: 25
    },
    {
        id: 26,
        topic: "Technology 💻",
        difficulty: "easy",
        type: "multiple_choice",
        question: "What does 'WWW' stand for? 🌐",
        options: ["World Wide Web", "World Web Wide", "Web World Wide", "Wide World Web"],
        correctAnswer: "World Wide Web",
        explanation: "WWW stands for World Wide Web, invented by Tim Berners-Lee in 1989!",
        points: 10,
        timeLimit: 20
    }
];

// Available topics and difficulties with icons
const topics = [
    { name: "General Knowledge 🧠", icon: "🧠", apiId: 9 },
    { name: "Science 🔬", icon: "🔬", apiId: 17 },
    { name: "History 📜", icon: "📜", apiId: 23 },
    { name: "Mathematics 🧮", icon: "🧮", apiId: 19 },
    { name: "Literature 📚", icon: "📚", apiId: 10 },
    { name: "Technology 💻", icon: "💻", apiId: 18 },
    { name: "Geography 🌍", icon: "🌍", apiId: 22 },
    { name: "Sports ⚽", icon: "⚽", apiId: 21 },
    { name: "Movies 🎬", icon: "🎬", apiId: 11 },
    { name: "Music 🎵", icon: "🎵", apiId: 12 },
    { name: "Mixed 🎲", icon: "🎲", apiId: null }
];

const difficulties = [
    { name: "Easy 😊", icon: "😊", apiValue: "easy" },
    { name: "Medium 🤔", icon: "🤔", apiValue: "medium" },
    { name: "Hard 🧠", icon: "🧠", apiValue: "hard" },
    { name: "Mixed 🎯", icon: "🎯", apiValue: null }
];

const questionCounts = [5, 10, 15, 20];

const questionTypes = [
    { name: "All Types 🎲", value: "any" },
    { name: "Multiple Choice 📝", value: "multiple" },
    { name: "True/False ✓✗", value: "boolean" }
];

// DOM elements
const contentCard = document.getElementById('content-card');
const footerNav = document.getElementById('footer-nav');
const timerElement = document.getElementById('timer');
const overallScoreElement = document.getElementById('overall-score');
const quizzesTakenElement = document.getElementById('quizzes-taken');
const totalTimeElement = document.getElementById('total-time');
const userLevelElement = document.getElementById('user-level');
const statAccuracyElement = document.getElementById('stat-accuracy');
const statStreakElement = document.getElementById('stat-streak');
const statMasteryElement = document.getElementById('stat-mastery');
const statXPElement = document.getElementById('stat-xp');
const streakFireElement = document.getElementById('streak-fire');
const streakCountElement = document.getElementById('streak-count');
const xpProgressElement = document.getElementById('xp-progress');
const xpProgressTextElement = document.getElementById('xp-progress-text');
const notificationElement = document.getElementById('notification');
const notificationTitleElement = document.getElementById('notification-title');
const notificationMessageElement = document.getElementById('notification-message');

// Load user data from localStorage
function loadUserData() {
    const savedData = localStorage.getItem('knowledgeQuestData');
    if (savedData) {
        const data = JSON.parse(savedData);
        totalQuizzesTaken = data.totalQuizzesTaken || 0;
        totalLearningTime = data.totalLearningTime || 0;
        totalCorrectAnswers = data.totalCorrectAnswers || 0;
        totalQuestionsAnswered = data.totalQuestionsAnswered || 0;
        userXP = data.userXP || 0;
        userLevel = data.userLevel || 1;
        streakCount = data.streakCount || 0;
        
        // Update UI with loaded data
        updateUserProgress();
    }
}

// Save quiz history to localStorage
function saveQuizHistory(quizData) {
    let history = JSON.parse(localStorage.getItem('knowledgeQuestHistory') || '[]');
    
    // Add new quiz to history
    history.unshift({
        id: Date.now(),
        date: new Date().toISOString(),
        topic: selectedTopic,
        difficulty: selectedDifficulty,
        score: quizData.score,
        totalQuestions: quizData.totalQuestions,
        correctAnswers: quizData.correctAnswers,
        timeSpent: quizData.timeSpent,
        xpEarned: quizData.xpEarned
    });
    
    // Keep only last 50 quizzes
    if (history.length > 50) {
        history = history.slice(0, 50);
    }
    
    localStorage.setItem('knowledgeQuestHistory', JSON.stringify(history));
}

// Get quiz history from localStorage
function getQuizHistory() {
    return JSON.parse(localStorage.getItem('knowledgeQuestHistory') || '[]');
}

// Save user data to localStorage
function saveUserData() {
    const data = {
        totalQuizzesTaken,
        totalLearningTime,
        totalCorrectAnswers,
        totalQuestionsAnswered,
        userXP,
        userLevel,
        streakCount
    };
    localStorage.setItem('knowledgeQuestData', JSON.stringify(data));
}

// Show notification
function showNotification(title, message, type = 'success') {
    notificationTitleElement.textContent = title;
    notificationMessageElement.textContent = message;
    
    // Set color based on type
    if (type === 'success') {
        notificationElement.style.borderLeftColor = 'var(--success)';
        notificationElement.querySelector('.notification-icon').style.background = 'var(--gradient-success)';
    } else if (type === 'error') {
        notificationElement.style.borderLeftColor = 'var(--danger)';
        notificationElement.querySelector('.notification-icon').style.background = 'var(--gradient-danger)';
    } else if (type === 'warning') {
        notificationElement.style.borderLeftColor = 'var(--warning)';
        notificationElement.querySelector('.notification-icon').style.background = 'var(--gradient-warning)';
    }
    
    notificationElement.classList.add('show');
    
    // Hide after 3 seconds
    setTimeout(() => {
        notificationElement.classList.remove('show');
    }, 3000);
}

// Add XP to user
function addXP(amount, reason) {
    const oldXP = userXP;
    userXP += amount;
    
    // Check for level up
    const xpForNextLevel = userLevel * 100;
    if (userXP >= xpForNextLevel) {
        userLevel++;
        userXP = userXP - xpForNextLevel;
        showNotification(`Level Up! 🎉`, `You've reached Level ${userLevel}! Keep going!`, 'success');
        
        // Create confetti for level up
        createConfetti();
    }
    
    // Update UI
    updateUserProgress();
    
    // Show XP notification
    if (reason) {
        showNotification(`+${amount} XP!`, reason, 'success');
    }
    
    // Save data
    saveUserData();
}

// Update user progress indicators
function updateUserProgress() {
    quizzesTakenElement.textContent = totalQuizzesTaken;
    userLevelElement.textContent = userLevel;
    
    // Calculate overall score
    const overallScore = totalQuestionsAnswered > 0 
        ? Math.round((totalCorrectAnswers / totalQuestionsAnswered) * 100) 
        : 0;
    overallScoreElement.textContent = `${overallScore}%`;
    
    // Update learning time
    const hours = Math.floor(totalLearningTime / 3600);
    const minutes = Math.floor((totalLearningTime % 3600) / 60);
    
    if (hours > 0) {
        totalTimeElement.textContent = `${hours}h ${minutes}m`;
    } else {
        totalTimeElement.textContent = `${minutes}m`;
    }
    
    // Update stats
    const accuracy = totalQuestionsAnswered > 0 
        ? Math.round((totalCorrectAnswers / totalQuestionsAnswered) * 100) 
        : 0;
    statAccuracyElement.textContent = `${accuracy}%`;
    statStreakElement.textContent = `${streakCount} 🔥`;
    statXPElement.textContent = userXP;
    
    // Update mastery level based on accuracy
    let mastery = "Beginner 🐣";
    if (accuracy >= 90) mastery = "Expert 🦉";
    else if (accuracy >= 75) mastery = "Advanced 🚀";
    else if (accuracy >= 50) mastery = "Intermediate 📈";
    statMasteryElement.textContent = mastery;
    
    // Update XP progress bar
    const xpForNextLevel = userLevel * 100;
    const xpProgress = Math.min((userXP / xpForNextLevel) * 100, 100);
    xpProgressElement.style.width = `${xpProgress}%`;
    xpProgressTextElement.textContent = `${userXP}/${xpForNextLevel}`;
    
    // Update achievements
    updateAchievements();
}

// Update achievements based on user progress
function updateAchievements() {
    // First quiz achievement
    if (totalQuizzesTaken > 0) {
        document.getElementById('achievement-1').classList.add('unlocked');
    }
    
    // Streak achievement
    if (streakCount >= 5) {
        document.getElementById('achievement-2').classList.add('unlocked');
    }
    
    // Accuracy achievement
    const accuracy = totalQuestionsAnswered > 0 
        ? (totalCorrectAnswers / totalQuestionsAnswered) * 100 
        : 0;
    if (accuracy >= 90) {
        document.getElementById('achievement-3').classList.add('unlocked');
    }
}

// Start the timer
function startTimer() {
    quizStartTime = Date.now();
    timeElapsed = 0;
    
    if (timerInterval) clearInterval(timerInterval);
    
    timerInterval = setInterval(() => {
        timeElapsed++;
        const minutes = Math.floor(timeElapsed / 60);
        const seconds = timeElapsed % 60;
        timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        
        // Change color when time is running out
        if (timeElapsed > 120) {
            timerElement.style.color = 'var(--danger)';
        } else if (timeElapsed > 60) {
            timerElement.style.color = 'var(--warning)';
        }
    }, 1000);
}

// Stop the timer
function stopTimer() {
    if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
    }
    
    // Reset timer color
    timerElement.style.color = 'var(--primary)';
}

// Shuffle array (Fisher-Yates algorithm)
function 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;
}

// Current quiz data
let currentQuizQuestions = [];
let quizTimeLimit = 0;

// ==================== API INTEGRATION ====================

// Open Trivia Database API Integration
async function fetchQuestionsFromAPI(count, categoryId, difficulty, type) {
    // Create cache key
    const cacheKey = `${count}_${categoryId}_${difficulty}_${type}`;
    
    // Check cache first (valid for 5 minutes)
    const cachedData = apiQuestionsCache[cacheKey];
    if (cachedData && Date.now() - cachedData.timestamp < 300000) {
        console.log('Using cached API data');
        return cachedData.questions;
    }
    
    // Build API URL
    let apiUrl = `https://opentdb.com/api.php?amount=${count}`;
    
    if (categoryId) {
        apiUrl += `&category=${categoryId}`;
    }
    
    if (difficulty) {
        apiUrl += `&difficulty=${difficulty}`;
    }
    
    if (type && type !== 'any') {
        apiUrl += `&type=${type}`;
    }
    
    apiUrl += '&encode=url3986'; // URL encoding to handle special characters
    
    try {
        console.log('Fetching from API:', apiUrl);
        const response = await fetch(apiUrl);
        
        if (!response.ok) {
            throw new Error(`API request failed with status ${response.status}`);
        }
        
        const data = await response.json();
        
        if (data.response_code !== 0) {
            // Response codes: 0 = Success, 1 = No Results, 2 = Invalid Parameter, 3 = Token Not Found, 4 = Token Empty
            if (data.response_code === 1) {
                throw new Error('No questions available for this combination. Please try different settings.');
            } else {
                throw new Error(`API Error: Response code ${data.response_code}`);
            }
        }
        
        // Transform API questions to our format
        const transformedQuestions = data.results.map((q, index) => {
            const isMultipleChoice = q.type === 'multiple';
            const options = isMultipleChoice 
                ? [...q.incorrect_answers, q.correct_answer].sort(() => Math.random() - 0.5)
                : ['True', 'False'];
            
            // Decode URL-encoded strings
            const question = decodeURIComponent(q.question);
            const correctAnswer = decodeURIComponent(q.correct_answer);
            const decodedOptions = options.map(opt => decodeURIComponent(opt));
            const category = decodeURIComponent(q.category);
            
            // Calculate points based on difficulty
            let points = 10;
            if (q.difficulty === 'medium') points = 15;
            else if (q.difficulty === 'hard') points = 20;
            
            return {
                id: `api_${Date.now()}_${index}`,
                topic: category,
                difficulty: q.difficulty,
                type: isMultipleChoice ? 'multiple_choice' : 'true_false',
                question: question,
                options: decodedOptions,
                correctAnswer: correctAnswer,
                explanation: `This is a ${q.difficulty} level question from ${category}.`,
                points: points,
                timeLimit: isMultipleChoice ? 30 : 20
            };
        });
        
        // Cache the results
        apiQuestionsCache[cacheKey] = {
            questions: transformedQuestions,
            timestamp: Date.now()
        };
        
        return transformedQuestions;
        
    } catch (error) {
        console.error('API Error:', error);
        throw error;
    }
}

// Fetch questions with fallback to local bank
async function getQuestions(count, categoryId, difficulty, type) {
    try {
        isLoadingQuestions = true;
        const apiQuestions = await fetchQuestionsFromAPI(count, categoryId, difficulty, type);
        isLoadingQuestions = false;
        
        // If we got fewer questions than requested, pad with local questions
        if (apiQuestions.length < count) {
            console.log(`API returned ${apiQuestions.length} questions, padding with local questions`);
            const localQuestions = getFilteredLocalQuestions(count - apiQuestions.length);
            return [...apiQuestions, ...localQuestions];
        }
        
        return apiQuestions;
        
    } catch (error) {
        console.error('Failed to fetch from API, falling back to local questions:', error);
        isLoadingQuestions = false;
        
        // Show error notification
        showNotification(
            'Using Local Questions ℹ️', 
            'Could not fetch from API. Using local question bank instead.', 
            'warning'
        );
        
        // Fallback to local questions
        return getFilteredLocalQuestions(count);
    }
}

// Get filtered questions from local bank (fallback)
function getFilteredLocalQuestions(count) {
    let filtered = questions;
    
    // Filter by topic if not "Mixed"
    if (selectedTopic && selectedTopic !== "Mixed 🎲") {
        const topicName = selectedTopic.split(' ')[0]; // Remove emoji
        filtered = filtered.filter(q => q.topic.startsWith(topicName));
    }
    
    // Filter by difficulty if not "Mixed"
    if (selectedDifficulty && selectedDifficulty !== "Mixed 🎯") {
        const difficultyName = selectedDifficulty.split(' ')[0].toLowerCase(); // Remove emoji
        filtered = filtered.filter(q => q.difficulty === difficultyName);
    }
    
    // Filter by type if specified
    if (selectedQuestionType && selectedQuestionType !== 'any') {
        const typeMap = {
            'multiple': 'multiple_choice',
            'boolean': 'true_false'
        };
        filtered = filtered.filter(q => q.type === typeMap[selectedQuestionType]);
    }
    
    // Shuffle and return requested count
    const shuffled = shuffleArray(filtered);
    return shuffled.slice(0, Math.min(count, shuffled.length));
}

// ==================== END API INTEGRATION ====================

// Render the current state
function renderState() {
    // Clear previous content
    contentCard.innerHTML = '';
    footerNav.innerHTML = '';
    
    // Add fade-in animation
    contentCard.classList.remove('fade-in');
    void contentCard.offsetWidth; // Trigger reflow
    contentCard.classList.add('fade-in');
    
    // Show/hide timer based on state
    const timerContainer = document.querySelector('.timer-container');
    if (timerContainer) {
        if (currentState === AppState.QUIZ) {
            timerContainer.style.display = 'block';
        } else {
            timerContainer.style.display = 'none';
        }
    }
    
    // Render based on current state
    switch(currentState) {
        case AppState.WELCOME:
            renderWelcomeState();
            break;
        case AppState.QUIZ:
            renderQuizState();
            break;
        case AppState.RESULTS:
            renderResultsState();
            break;
        case AppState.REVIEW:
            renderReviewState();
            break;
        case AppState.HISTORY:
            renderHistoryState();
            break;
    }
    
    // Update user progress
    updateUserProgress();
}

// Render welcome state
function renderWelcomeState() {
    contentCard.classList.add('welcome-state');
    
    contentCard.innerHTML = `
        <div class="welcome-header">
            <div class="welcome-icon">
                <i class="fas fa-graduation-cap"></i>
            </div>
            <h1 class="card-title">Welcome to Knowledge Quest! 🚀</h1>
        </div>
        <p class="welcome-text">
            🎯 <strong>Test your knowledge</strong> across various topics and track your learning progress!<br>
            📈 <strong>Earn XP and level up</strong> as you answer questions correctly.<br>
            🏆 <strong>Unlock achievements</strong> and build your knowledge streak!<br>
            🔥 <strong>Compete with yourself</strong> and become a knowledge master!
        </p>
        
        <h3 class="card-title"><i class="fas fa-hashtag"></i> Number of Questions 🔢</h3>
        <div class="question-count-selection" id="question-count-selection">
            ${questionCounts.map(count => `
                <div class="count-btn ${selectedQuestionCount === count ? 'selected' : ''}" data-count="${count}">
                    <div class="count-number">${count}</div>
                    <div class="count-label">Questions</div>
                </div>
            `).join('')}
        </div>
        
        <h3 class="card-title"><i class="fas fa-book-open"></i> Select a Topic 📚</h3>
        <div class="topic-selection" id="topic-selection">
            ${topics.map(topic => `
                <div class="topic-btn ${selectedTopic === topic.name ? 'selected' : ''}" data-topic="${topic.name}">
                    <div class="topic-icon">${topic.icon}</div>
                    <div>${topic.name}</div>
                </div>
            `).join('')}
        </div>
        
        <h3 class="card-title"><i class="fas fa-chart-bar"></i> Select Difficulty 🎯</h3>
        <div class="difficulty-selection" id="difficulty-selection">
            ${difficulties.map(difficulty => `
                <div class="difficulty-btn ${selectedDifficulty === difficulty.name ? 'selected' : ''}" data-difficulty="${difficulty.name}">
                    <div class="difficulty-icon">${difficulty.icon}</div>
                    <div>${difficulty.name}</div>
                </div>
            `).join('')}
        </div>
        
        <h3 class="card-title"><i class="fas fa-clipboard-question"></i> Question Type 📋</h3>
        <div class="type-selection" id="type-selection">
            ${questionTypes.map(type => `
                <div class="type-btn ${selectedQuestionType === type.value ? 'selected' : ''}" data-type="${type.value}">
                    <div>${type.name}</div>
                </div>
            `).join('')}
        </div>
    `;
    
    // Add event listeners for question count selection
    document.querySelectorAll('.count-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            selectedQuestionCount = parseInt(this.dataset.count);
            document.querySelectorAll('.count-btn').forEach(b => b.classList.remove('selected'));
            this.classList.add('selected');
            this.classList.add('bounce');
            setTimeout(() => this.classList.remove('bounce'), 1000);
        });
    });
    
    // Add event listeners for topic selection
    document.querySelectorAll('.topic-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            selectedTopic = this.dataset.topic;
            document.querySelectorAll('.topic-btn').forEach(b => b.classList.remove('selected'));
            this.classList.add('selected');
            this.classList.add('bounce');
            setTimeout(() => this.classList.remove('bounce'), 1000);
        });
    });
    
    // Add event listeners for difficulty selection
    document.querySelectorAll('.difficulty-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            selectedDifficulty = this.dataset.difficulty;
            document.querySelectorAll('.difficulty-btn').forEach(b => b.classList.remove('selected'));
            this.classList.add('selected');
            this.classList.add('bounce');
            setTimeout(() => this.classList.remove('bounce'), 1000);
        });
    });
    
    // Add event listeners for question type selection
    document.querySelectorAll('.type-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            selectedQuestionType = this.dataset.type;
            document.querySelectorAll('.type-btn').forEach(b => b.classList.remove('selected'));
            this.classList.add('selected');
            this.classList.add('bounce');
            setTimeout(() => this.classList.remove('bounce'), 1000);
        });
    });
    
    // Footer navigation for welcome state
    footerNav.innerHTML = `
        <button class="btn btn-secondary" id="view-history-btn">
            <i class="fas fa-history"></i> View History 📜
        </button>
        <button class="btn btn-primary" id="start-quiz-btn">
            <i class="fas fa-play-circle"></i> Start Quiz 🚀
        </button>
    `;
    
    document.getElementById('start-quiz-btn').addEventListener('click', startQuiz);
    document.getElementById('view-history-btn').addEventListener('click', () => {
        currentState = AppState.HISTORY;
        renderState();
    });
}

// Start the quiz
async function startQuiz() {
    if (!selectedTopic || !selectedDifficulty) {
        showNotification('Selection Required ⚠️', 'Please select both a topic and difficulty level.', 'warning');
        return;
    }
    
    // Show loading state
    const startBtn = document.getElementById('start-quiz-btn');
    const originalBtnText = startBtn.innerHTML;
    startBtn.disabled = true;
    startBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Loading Questions...';
    
    try {
        // Get category ID from selected topic
        const selectedTopicObj = topics.find(t => t.name === selectedTopic);
        const categoryId = selectedTopicObj?.apiId;
        
        // Get difficulty value
        const selectedDiffObj = difficulties.find(d => d.name === selectedDifficulty);
        const difficultyValue = selectedDiffObj?.apiValue;
        
        // Fetch questions from API (with fallback to local)
        currentQuizQuestions = await getQuestions(
            selectedQuestionCount,
            categoryId,
            difficultyValue,
            selectedQuestionType
        );
        
        if (currentQuizQuestions.length === 0) {
            showNotification('No Questions Found ⚠️', 'Please try different topic/difficulty selections.', 'warning');
            startBtn.disabled = false;
            startBtn.innerHTML = originalBtnText;
            return;
        }
        
        // Validate if we got fewer questions than requested
        if (currentQuizQuestions.length < selectedQuestionCount) {
            showNotification(
                'Fewer Questions Available ℹ️',
                `Only ${currentQuizQuestions.length} questions available for this selection.`,
                'warning'
            );
        }
        
        // Reset quiz state
        currentQuestionIndex = 0;
        userAnswers = [];
        
        // Calculate total time limit
        quizTimeLimit = currentQuizQuestions.reduce((sum, q) => sum + q.timeLimit, 0);
        
        // Start timer
        startTimer();
        
        // Show notification
        showNotification('Quiz Started! 🎉', `Good luck! You have ${currentQuizQuestions.length} questions.`, 'success');
        
        // Change state to QUIZ
        currentState = AppState.QUIZ;
        renderState();
        
    } catch (error) {
        console.error('Error starting quiz:', error);
        showNotification('Error ❌', 'Failed to start quiz. Please try again.', 'error');
        startBtn.disabled = false;
        startBtn.innerHTML = originalBtnText;
    }
}

// Render quiz state - FIXED INTERACTION ISSUE
function renderQuizState() {
    contentCard.classList.remove('welcome-state');
    const question = currentQuizQuestions[currentQuestionIndex];
    
    contentCard.innerHTML = `
        <div class="question-header">
            <div class="question-counter">
                Question ${currentQuestionIndex + 1} of ${currentQuizQuestions.length}
            </div>
            <div class="question-points">
                ${question.points} Points ⭐
            </div>
        </div>
        <h2 class="question-text">${question.question}</h2>
        
        <div class="options-container" id="options-container">
            ${question.options.map((option, index) => `
                <div class="option" data-option="${option}">
                    <div class="option-letter">${String.fromCharCode(65 + index)}</div>
                    <div class="option-text">${option}</div>
                </div>
            `).join('')}
        </div>
        
        <div class="question-dots" id="question-dots">
            ${currentQuizQuestions.map((_, index) => `
                <div class="question-dot ${index < currentQuestionIndex ? 'answered' : ''} ${index === currentQuestionIndex ? 'current' : ''}" data-index="${index}"></div>
            `).join('')}
        </div>
    `;
    
    // Add event listeners for options - FIXED VERSION
    const optionElements = document.querySelectorAll('.option');
    optionElements.forEach(option => {
        option.addEventListener('click', function() {
            // If already answered, don't allow changing
            if (userAnswers[currentQuestionIndex] && userAnswers[currentQuestionIndex].answered) return;
            
            const selectedOption = this.dataset.option;
            const isCorrect = selectedOption === question.correctAnswer;
            
            // Record answer
            userAnswers[currentQuestionIndex] = {
                questionId: question.id,
                selectedOption,
                isCorrect,
                answered: true,
                timeSpent: timeElapsed - (userAnswers[currentQuestionIndex]?.startTime || 0)
            };
            
            // Update UI to show selected option
            optionElements.forEach(opt => {
                opt.classList.remove('selected');
                if (opt.dataset.option === selectedOption) {
                    opt.classList.add('selected');
                    opt.classList.add(isCorrect ? 'correct' : 'incorrect');
                }
                
                // Also show correct answer if user got it wrong
                if (!isCorrect && opt.dataset.option === question.correctAnswer) {
                    opt.classList.add('correct');
                }
            });
            
            // Update streak and XP
            if (isCorrect) {
                streakCount++;
                totalCorrectAnswers++;
                
                // Add XP for correct answer
                addXP(question.points, `Correct answer! +${question.points} XP`);
                
                // Show streak fire animation
                streakFireElement.style.animation = 'pulse 0.5s 3';
                setTimeout(() => {
                    streakFireElement.style.animation = 'pulse 2s infinite';
                }, 1500);
                
                // Create confetti effect for streaks of 3 or more
                if (streakCount >= 3) {
                    createConfetti();
                    showNotification(`🔥 Streak of ${streakCount}!`, `Amazing! Keep it going!`, 'success');
                }
            } else {
                streakCount = 0;
                showNotification('Try Again! 💪', `The correct answer was: ${question.correctAnswer}`, 'error');
            }
            
            // Update total questions answered
            totalQuestionsAnswered++;
            
            // Update streak display
            statStreakElement.textContent = `${streakCount} 🔥`;
            
            // Update user progress
            updateUserProgress();
            
            // Auto-advance after 2 seconds
            setTimeout(() => {
                if (currentQuestionIndex < currentQuizQuestions.length - 1) {
                    nextQuestion();
                } else {
                    // If last question, show results
                    finishQuiz();
                }
            }, 2000);
        });
    });
    
    // Add event listeners for question dots
    document.querySelectorAll('.question-dot').forEach(dot => {
        dot.addEventListener('click', function() {
            const index = parseInt(this.dataset.index);
            if (index <= currentQuestionIndex || (userAnswers[index] && userAnswers[index].answered)) {
                currentQuestionIndex = index;
                renderState();
            }
        });
    });
    
    // Record start time for this question if not already answered
    if (!userAnswers[currentQuestionIndex]) {
        userAnswers[currentQuestionIndex] = { startTime: timeElapsed };
    }
    
    // Footer navigation for quiz state
    footerNav.innerHTML = `
        <button class="btn btn-secondary" id="prev-question-btn" ${currentQuestionIndex === 0 ? 'disabled' : ''}>
            <i class="fas fa-arrow-left"></i> Previous
        </button>
        <div>
            <button class="btn btn-danger" id="quit-quiz-btn">
                <i class="fas fa-times"></i> Quit Quiz
            </button>
            <button class="btn btn-primary" id="next-question-btn" ${currentQuestionIndex === currentQuizQuestions.length - 1 ? 'disabled' : ''}>
                Next <i class="fas fa-arrow-right"></i>
            </button>
        </div>
    `;
    
    // Add event listeners for navigation buttons
    document.getElementById('prev-question-btn').addEventListener('click', prevQuestion);
    document.getElementById('next-question-btn').addEventListener('click', nextQuestion);
    document.getElementById('quit-quiz-btn').addEventListener('click', quitQuiz);
}

// Navigate to previous question
function prevQuestion() {
    if (currentQuestionIndex > 0) {
        currentQuestionIndex--;
        renderState();
    }
}

// Navigate to next question
function nextQuestion() {
    if (currentQuestionIndex < currentQuizQuestions.length - 1) {
        currentQuestionIndex++;
        renderState();
    }
}

// Quit the quiz
function quitQuiz() {
    if (confirm('Are you sure you want to quit the quiz? Your progress will be lost.')) {
        stopTimer();
        currentState = AppState.WELCOME;
        renderState();
        showNotification('Quiz Cancelled', 'Your progress was not saved.', 'warning');
    }
}

// Finish the quiz and show results
function finishQuiz() {
    stopTimer();
    
    // Calculate results
    const totalQuestions = currentQuizQuestions.length;
    const correctAnswers = userAnswers.filter(answer => answer?.isCorrect).length;
    const score = Math.round((correctAnswers / totalQuestions) * 100);
    const timePerQuestion = Math.round(timeElapsed / totalQuestions);
    
    // Calculate bonus XP based on performance
    let bonusXP = 0;
    if (score === 100) bonusXP = 100;
    else if (score >= 90) bonusXP = 75;
    else if (score >= 75) bonusXP = 50;
    else if (score >= 60) bonusXP = 25;
    
    // Add XP for completing quiz
    addXP(bonusXP, `Quiz completed! Bonus: +${bonusXP} XP`);
    
    // Update user data
    totalQuizzesTaken++;
    totalLearningTime += timeElapsed;
    
    // Save quiz to history
    saveQuizHistory({
        score: score,
        totalQuestions: totalQuestions,
        correctAnswers: correctAnswers,
        timeSpent: timeElapsed,
        xpEarned: bonusXP
    });
    
    // Save user data
    saveUserData();
    
    // Change state to RESULTS
    currentState = AppState.RESULTS;
    renderState();
}

// Render results state
function renderResultsState() {
    // Calculate results
    const totalQuestions = currentQuizQuestions.length;
    const correctAnswers = userAnswers.filter(answer => answer?.isCorrect).length;
    const score = Math.round((correctAnswers / totalQuestions) * 100);
    const timePerQuestion = Math.round(timeElapsed / totalQuestions);
    
    // Determine performance message
    let performanceMessage = '';
    let performanceEmoji = '';
    let performanceColor = '';
    
    if (score === 100) {
        performanceMessage = 'Perfect Score! You are a genius! 🧠';
        performanceEmoji = '🏆';
        performanceColor = 'var(--success)';
        createConfetti();
    } else if (score >= 90) {
        performanceMessage = 'Outstanding! You know your stuff! 🚀';
        performanceEmoji = '⭐';
        performanceColor = 'var(--success)';
        createConfetti();
    } else if (score >= 75) {
        performanceMessage = 'Great Job! Keep learning! 📚';
        performanceEmoji = '👍';
        performanceColor = 'var(--primary)';
    } else if (score >= 50) {
        performanceMessage = 'Good Effort! Practice makes perfect! 💪';
        performanceEmoji = '✨';
        performanceColor = 'var(--warning)';
    } else {
        performanceMessage = 'Keep Practicing! You can do better! 🔥';
        performanceEmoji = '📈';
        performanceColor = 'var(--danger)';
    }
    
    contentCard.innerHTML = `
        <div class="results-container">
            <h1 class="card-title"><i class="fas fa-chart-pie"></i> Quiz Results 📊</h1>
            
            <div class="score-display" style="color: ${performanceColor};">
                ${score}%
            </div>
            <div class="performance-message">${performanceMessage} ${performanceEmoji}</div>
            
            <div class="results-stats">
                <div class="result-stat">
                    <div class="result-stat-value">${correctAnswers}/${totalQuestions}</div>
                    <div class="result-stat-label">Correct Answers ✅</div>
                </div>
                <div class="result-stat">
                    <div class="result-stat-value">${timeElapsed}s</div>
                    <div class="result-stat-label">Total Time ⏱️</div>
                </div>
                <div class="result-stat">
                    <div class="result-stat-value">${timePerQuestion}s</div>
                    <div class="result-stat-label">Avg. Time/Question 🎯</div>
                </div>
                <div class="result-stat">
                    <div class="result-stat-value">${streakCount}</div>
                    <div class="result-stat-label">Best Streak 🔥</div>
                </div>
            </div>
            
            <h3 class="card-title"><i class="fas fa-medal"></i> Performance Breakdown 📈</h3>
            <div class="results-stats">
                <div class="result-stat">
                    <div class="result-stat-value" style="color: ${score >= 90 ? 'var(--success)' : score >= 75 ? 'var(--primary)' : score >= 50 ? 'var(--warning)' : 'var(--danger)'}">
                        ${score >= 90 ? 'A' : score >= 75 ? 'B' : score >= 50 ? 'C' : 'D'}
                    </div>
                    <div class="result-stat-label">Grade 📝</div>
                </div>
                <div class="result-stat">
                    <div class="result-stat-value">${selectedTopic}</div>
                    <div class="result-stat-label">Topic 🎯</div>
                </div>
                <div class="result-stat">
                    <div class="result-stat-value">${selectedDifficulty}</div>
                    <div class="result-stat-label">Difficulty ⚡</div>
                </div>
                <div class="result-stat">
                    <div class="result-stat-value">${getRank(score)}</div>
                    <div class="result-stat-label">Rank 🏅</div>
                </div>
            </div>
            
            <div class="achievements-container">
                <h3 class="card-title"><i class="fas fa-trophy"></i> Unlocked Achievements 🎖️</h3>
                <div class="achievements">
                    ${totalQuizzesTaken > 0 ? `
                        <div class="achievement unlocked">
                            <div class="achievement-icon">
                                <i class="fas fa-rocket"></i>
                            </div>
                            <div class="achievement-label">First Quiz</div>
                        </div>
                    ` : ''}
                    ${streakCount >= 5 ? `
                        <div class="achievement unlocked">
                            <div class="achievement-icon">
                                <i class="fas fa-bolt"></i>
                            </div>
                            <div class="achievement-label">5 Streak</div>
                        </div>
                    ` : ''}
                    ${score >= 90 ? `
                        <div class="achievement unlocked">
                            <div class="achievement-icon">
                                <i class="fas fa-percentage"></i>
                            </div>
                            <div class="achievement-label">90% Accuracy</div>
                        </div>
                    ` : ''}
                </div>
            </div>
        </div>
    `;
    
    // Footer navigation for results state
    footerNav.innerHTML = `
        <button class="btn btn-warning" id="retry-quiz-btn">
            <i class="fas fa-redo"></i> Retry Quiz 🔄
        </button>
        <div>
            <button class="btn btn-secondary" id="new-quiz-btn">
                <i class="fas fa-plus-circle"></i> New Quiz 🆕
            </button>
            <button class="btn btn-primary" id="review-answers-btn">
                <i class="fas fa-search"></i> Review Answers 📖
            </button>
        </div>
    `;
    
    // Add event listeners for results navigation
    document.getElementById('retry-quiz-btn').addEventListener('click', retryQuiz);
    document.getElementById('new-quiz-btn').addEventListener('click', newQuiz);
    document.getElementById('review-answers-btn').addEventListener('click', reviewAnswers);
}

// Get rank based on score
function getRank(score) {
    if (score === 100) return "Legend 🏆";
    if (score >= 95) return "Master 🧠";
    if (score >= 85) return "Expert 🚀";
    if (score >= 70) return "Advanced 📈";
    if (score >= 50) return "Intermediate 💪";
    return "Beginner 🌱";
}

// Retry the same quiz
function retryQuiz() {
    // Reset quiz state
    currentQuestionIndex = 0;
    userAnswers = [];
    
    // Start timer
    startTimer();
    
    // Change state to QUIZ
    currentState = AppState.QUIZ;
    renderState();
    
    showNotification('Retry Quiz!', 'Good luck on your second attempt!', 'success');
}

// Start a new quiz
function newQuiz() {
    // Reset selections
    selectedTopic = null;
    selectedDifficulty = null;
    
    // Change state to WELCOME
    currentState = AppState.WELCOME;
    renderState();
}

// Review answers
function reviewAnswers() {
    currentState = AppState.REVIEW;
    renderState();
}

// Render review state
function renderReviewState() {
    contentCard.innerHTML = `
        <h1 class="card-title"><i class="fas fa-search"></i> Review Your Answers 📖</h1>
        
        ${currentQuizQuestions.map((question, index) => {
            const userAnswer = userAnswers[index];
            const isCorrect = userAnswer?.isCorrect;
            const selectedOption = userAnswer?.selectedOption;
            
            return `
                <div class="review-item">
                    <div class="review-question">
                        <span>${index + 1}. ${question.question}</span>
                        <span class="review-status ${isCorrect ? 'correct' : 'incorrect'}">
                            ${isCorrect ? '✅ Correct' : '❌ Incorrect'}
                        </span>
                    </div>
                    
                    <div class="options-container">
                        ${question.options.map((option, optIndex) => {
                            let optionClass = 'option';
                            let isUserAnswer = option === selectedOption;
                            let isCorrectAnswer = option === question.correctAnswer;
                            
                            if (isUserAnswer && isCorrectAnswer) {
                                optionClass += ' correct';
                            } else if (isUserAnswer && !isCorrectAnswer) {
                                optionClass += ' incorrect';
                            } else if (isCorrectAnswer) {
                                optionClass += ' correct';
                            }
                            
                            return `
                                <div class="${optionClass}">
                                    <div class="option-letter">${String.fromCharCode(65 + optIndex)}</div>
                                    <div class="option-text">${option}</div>
                                </div>
                            `;
                        }).join('')}
                    </div>
                    
                    <div class="review-explanation">
                        <strong>💡 Explanation:</strong> ${question.explanation}
                    </div>
                </div>
            `;
        }).join('')}
    `;
    
    // Footer navigation for review state
    footerNav.innerHTML = `
        <button class="btn btn-secondary" id="back-to-results-btn">
            <i class="fas fa-arrow-left"></i> Back to Results
        </button>
        <div>
            <button class="btn btn-primary" id="new-quiz-from-review-btn">
                <i class="fas fa-plus-circle"></i> New Quiz 🆕
            </button>
        </div>
    `;
    
    // Add event listeners for review navigation
    document.getElementById('back-to-results-btn').addEventListener('click', () => {
        currentState = AppState.RESULTS;
        renderState();
    });
    
    document.getElementById('new-quiz-from-review-btn').addEventListener('click', newQuiz);
}

// Create confetti effect
function createConfetti() {
    const colors = ['#6C63FF', '#FF6584', '#36D399', '#FFB347', '#4ECDC4'];
    const emojis = ['🎉', '🎊', '⭐', '✨', '🏆', '🚀', '🧠', '💫'];
    
    for (let i = 0; i < 150; i++) {
        const confetti = document.createElement('div');
        confetti.className = 'confetti';
        confetti.style.left = `${Math.random() * 100}vw`;
        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        
        // Random size
        const size = Math.random() * 20 + 10;
        confetti.style.width = `${size}px`;
        confetti.style.height = `${size}px`;
        
        // Random opacity
        confetti.style.opacity = `${Math.random() * 0.7 + 0.3}`;
        
        // Random animation duration
        confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
        
        // Random rotation
        confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
        
        // Sometimes add emoji
        if (Math.random() > 0.7) {
            confetti.textContent = emojis[Math.floor(Math.random() * emojis.length)];
            confetti.style.fontSize = `${size}px`;
            confetti.style.lineHeight = `${size}px`;
            confetti.style.textAlign = 'center';
            confetti.style.background = 'transparent';
        }
        
        document.body.appendChild(confetti);
        
        // Remove confetti after animation completes
        setTimeout(() => {
            if (confetti.parentNode) {
                confetti.remove();
            }
        }, 5000);
    }
}

// Render history state
function renderHistoryState() {
    const history = getQuizHistory();
    
    contentCard.innerHTML = `
        <div class="history-header">
            <h1 class="card-title"><i class="fas fa-history"></i> Quiz History 📜</h1>
            <p class="welcome-text">Track your learning journey and review past quiz results!</p>
        </div>
        
        ${history.length === 0 ? `
            <div class="empty-state">
                <div class="empty-icon">📭</div>
                <h3>No Quiz History Yet!</h3>
                <p>Start taking quizzes to build your learning history.</p>
            </div>
        ` : `
            <div class="history-stats">
                <div class="history-stat">
                    <div class="history-stat-value">${history.length}</div>
                    <div class="history-stat-label">Total Quizzes 📊</div>
                </div>
                <div class="history-stat">
                    <div class="history-stat-value">${Math.round(history.reduce((sum, h) => sum + h.score, 0) / history.length)}%</div>
                    <div class="history-stat-label">Avg Score 🎯</div>
                </div>
                <div class="history-stat">
                    <div class="history-stat-value">${history.reduce((sum, h) => sum + h.xpEarned, 0)}</div>
                    <div class="history-stat-label">Total XP Earned ⭐</div>
                </div>
                <div class="history-stat">
                    <div class="history-stat-value">${Math.round(history.reduce((sum, h) => sum + h.timeSpent, 0) / 60)}m</div>
                    <div class="history-stat-label">Total Time ⏱️</div>
                </div>
            </div>
            
            <div class="history-list">
                ${history.map((quiz, index) => {
                    const date = new Date(quiz.date);
                    const dateStr = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                    const timeStr = date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
                    const scoreColor = quiz.score >= 90 ? 'var(--success)' : quiz.score >= 75 ? 'var(--primary)' : quiz.score >= 50 ? 'var(--warning)' : 'var(--danger)';
                    const grade = quiz.score >= 90 ? 'A' : quiz.score >= 75 ? 'B' : quiz.score >= 50 ? 'C' : 'D';
                    
                    return `
                        <div class="history-item">
                            <div class="history-item-header">
                                <div class="history-item-title">
                                    <span class="history-item-number">#${history.length - index}</span>
                                    <span>${quiz.topic} - ${quiz.difficulty}</span>
                                </div>
                                <div class="history-item-date">${dateStr} at ${timeStr}</div>
                            </div>
                            <div class="history-item-content">
                                <div class="history-item-score" style="color: ${scoreColor}">
                                    ${quiz.score}%
                                    <span class="history-item-grade">(${grade})</span>
                                </div>
                                <div class="history-item-details">
                                    <span><i class="fas fa-check-circle"></i> ${quiz.correctAnswers}/${quiz.totalQuestions}</span>
                                    <span><i class="fas fa-clock"></i> ${quiz.timeSpent}s</span>
                                    <span><i class="fas fa-star"></i> +${quiz.xpEarned} XP</span>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('')}
            </div>
        `}
    `;
    
    // Footer navigation for history state
    footerNav.innerHTML = `
        <button class="btn btn-secondary" id="back-to-welcome-btn">
            <i class="fas fa-arrow-left"></i> Back to Home
        </button>
        <button class="btn btn-danger" id="clear-history-btn" ${history.length === 0 ? 'disabled' : ''}>
            <i class="fas fa-trash"></i> Clear History 🗑️
        </button>
    `;
    
    document.getElementById('back-to-welcome-btn').addEventListener('click', () => {
        currentState = AppState.WELCOME;
        renderState();
    });
    
    if (history.length > 0) {
        document.getElementById('clear-history-btn').addEventListener('click', () => {
            if (confirm('Are you sure you want to clear your entire quiz history? This action cannot be undone.')) {
                localStorage.removeItem('knowledgeQuestHistory');
                showNotification('History Cleared', 'Your quiz history has been deleted.', 'warning');
                renderState();
            }
        });
    }
}

// Initialize the application
function init() {
    // Load user data
    loadUserData();
    
    // Set initial streak fire animation
    streakFireElement.style.animation = 'pulse 2s infinite';
    
    // Render initial state
    renderState();
    
    // Update streak count display
    streakCountElement.textContent = '3';
}

// Start the application when page loads
window.addEventListener('DOMContentLoaded', init);