script.js

const screens = document.querySelectorAll('.screen');
const subjectSelection = document.getElementById('subject-selection');
const topicSelection = document.getElementById('topic-selection');
const flashcardSection = document.getElementById('flashcard-section');
const quizSection = document.getElementById('quiz-section');
const resultScreen = document.getElementById('result-screen');
const topicUploadScreen = document.getElementById('topic-upload');

const subjectGrid = document.querySelector('.subject-grid');
const topicGrid = document.querySelector('.topic-grid');
const backBtns = document.querySelectorAll('.back-btn');
const uploadTopicBtn = document.getElementById('upload-topic-btn');
const uploadForm = document.getElementById('upload-form');

const flashcard = document.getElementById('flashcard');
const flashcardFront = document.querySelector('.flashcard-front');
const flashcardBack = document.querySelector('.flashcard-back');
const prevCardBtn = document.getElementById('prev-card-btn');
const nextCardBtn = document.getElementById('next-card-btn');
const startQuizBtn = document.getElementById('start-quiz-btn');

const questionBox = document.getElementById('question-box');
const answerButtons = document.getElementById('answer-buttons');
const scoreDisplay = document.getElementById('score-display');
const finalScoreText = document.getElementById('final-score-text');
const levelUpMessage = document.getElementById('level-up-message');
const restartBtn = document.getElementById('restart-btn');

// Sound elements
const successSound = document.getElementById('successSound');
const failSound = document.getElementById('failSound');
const flipSound = document.getElementById('flipSound');
const celebrationSound = document.getElementById('celebrationSound');

let currentSubject = '';
let currentTopic = '';
let flashcardIndex = 0;
let quizIndex = 0;
let score = 0;
let currentData = {};

// Sample Data
const data = {
    math: {
        title: 'Math',
        topics: [
            {
                name: 'Algebra',
                flashcards: [
                    { front: 'What is a variable?', back: 'A symbol for a number we don\'t know yet.' },
                    { front: 'What is an equation?', back: 'A mathematical statement with an equals sign (=).' }
                ],
                quiz: [
                    { question: 'What is the value of "x" in 2x + 4 = 10?', answers: ['2', '3', '4'], correct: '3' }
                ]
            }
        ]
    },
    science: {
        title: 'Science',
        topics: [
            {
                name: 'Biology',
                flashcards: [
                    { front: 'What is photosynthesis?', back: 'The process plants use to make food.' },
                    { front: 'What are cells?', back: 'The basic building blocks of all living things.' }
                ],
                quiz: [
                    { question: 'What is the powerhouse of the cell?', answers: ['Nucleus', 'Mitochondria', 'Cytoplasm'], correct: 'Mitochondria' }
                ]
            }
        ]
    },
    tech: {
        title: 'Technology',
        topics: [
            {
                name: 'Coding',
                flashcards: [
                    { front: 'What is a loop?', back: 'A sequence of instructions that is repeated.' },
                    { front: 'What is an algorithm?', back: 'A set of rules to solve a problem.' }
                ],
                quiz: [
                    { question: 'What does HTML stand for?', answers: ['Hyper Text Markup Language', 'High Tech Modern Language', 'Home Tool Markup Language'], correct: 'Hyper Text Markup Language' }
                ]
            }
        ]
    }
};


// --- Screen Navigation ---
function showScreen(id) {
    screens.forEach(screen => {
        screen.classList.remove('active');
    });
    document.getElementById(id).classList.add('active');
}

// --- Event Listeners ---
subjectGrid.addEventListener('click', (e) => {
    const card = e.target.closest('.subject-card');
    if (card) {
        currentSubject = card.dataset.subject;
        populateTopics(currentSubject);
        showScreen('topic-selection');
    }
});

backBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        showScreen('subject-selection');
    });
});

uploadTopicBtn.addEventListener('click', () => {
    showScreen('topic-upload');
});

uploadForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const topicName = document.getElementById('upload-topic-name').value;
    const fileInput = document.getElementById('topic-file');
    const file = fileInput.files[0];

    if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
            const content = event.target.result;
            const newTopic = parseFileContent(topicName, content);
            if (newTopic) {
                if (!data['user-uploaded']) {
                    data['user-uploaded'] = {
                        title: 'Your Uploads',
                        topics: []
                    };
                    const userCard = document.createElement('div');
                    userCard.classList.add('subject-card');
                    userCard.dataset.subject = 'user-uploaded';
                    userCard.innerHTML = `<img src="https://via.placeholder.com/150/78c850/FFFFFF?text=Uploads" alt="Uploads icon"><h3>Your Uploads</h3>`;
                    subjectGrid.appendChild(userCard);
                }
                data['user-uploaded'].topics.push(newTopic);
                
                currentSubject = 'user-uploaded';
                populateTopics(currentSubject);
                showScreen('topic-selection');
            }
        };
        reader.readAsText(file);
    } else {
        alert('Please select a file to upload!');
    }
});

// --- Content Parsing Logic ---
function parseFileContent(topicName, content) {
    const flashcards = [];
    const quiz = [];
    const lines = content.split('\n').map(line => line.trim()).filter(Boolean);

    lines.forEach(line => {
        const flashcardMatch = line.match(/^Q:\s*(.*?)\s*A:\s*(.*)/);
        if (flashcardMatch) {
            flashcards.push({ front: flashcardMatch[1], back: flashcardMatch[2] });
        }

        const quizMatch = line.match(/^Quiz:\s*(.*?)\s*Options:\s*(.*?)\s*Correct:\s*(.*)/);
        if (quizMatch) {
            const question = quizMatch[1];
            const options = quizMatch[2].split(',').map(s => s.trim());
            const correct = quizMatch[3];
            quiz.push({ question, answers: options, correct });
        }
    });

    if (flashcards.length > 0 || quiz.length > 0) {
        return {
            name: topicName,
            flashcards,
            quiz
        };
    } else {
        alert('The uploaded file does not contain valid flashcard or quiz data.');
        return null;
    }
}

// --- Subject & Topic Selection ---
function populateTopics(subject) {
    topicGrid.innerHTML = '';
    const topics = data[subject].topics;
    topics.forEach(topic => {
        const card = document.createElement('div');
        card.classList.add('topic-card');
        card.dataset.topic = topic.name;
        card.innerHTML = `<h3>${topic.name}</h3>`;
        topicGrid.appendChild(card);
    });
}

topicGrid.addEventListener('click', (e) => {
    const card = e.target.closest('.topic-card');
    if (card) {
        currentTopic = card.dataset.topic;
        currentData = data[currentSubject].topics.find(t => t.name === currentTopic);
        startFlashcards();
    }
});

// --- Flashcard Logic ---
function startFlashcards() {
    flashcardIndex = 0;
    flashcard.classList.remove('flipped');
    updateFlashcard();
    showScreen('flashcard-section');
}

function updateFlashcard() {
    if (currentData.flashcards.length > 0) {
        const cardData = currentData.flashcards[flashcardIndex];
        flashcardFront.textContent = cardData.front;
        flashcardBack.textContent = cardData.back;

        prevCardBtn.disabled = flashcardIndex === 0;
        nextCardBtn.disabled = flashcardIndex === currentData.flashcards.length - 1;

        flashcard.classList.remove('flipped');
    } else {
        flashcardFront.textContent = "No flashcards for this topic.";
        flashcardBack.textContent = "Try uploading your own!";
        prevCardBtn.disabled = true;
        nextCardBtn.disabled = true;
    }
}

flashcard.addEventListener('click', () => {
    flashcard.classList.toggle('flipped');
    flipSound.play();
});

prevCardBtn.addEventListener('click', () => {
    if (flashcardIndex > 0) {
        flashcardIndex--;
        updateFlashcard();
    }
});

nextCardBtn.addEventListener('click', () => {
    if (flashcardIndex < currentData.flashcards.length - 1) {
        flashcardIndex++;
        updateFlashcard();
    }
});

startQuizBtn.addEventListener('click', () => {
    startQuiz();
});

// --- Quiz Logic ---
function startQuiz() {
    quizIndex = 0;
    score = 0;
    updateScoreDisplay(); // Initialize the score display
    showScreen('quiz-section');
    nextQuestion();
}

function updateScoreDisplay() {
    scoreDisplay.textContent = `${score*10} / ${currentData.quiz.length*10}`;
}

function nextQuestion() {
    resetQuizState();
    if (quizIndex < currentData.quiz.length) {
        const currentQuizItem = currentData.quiz[quizIndex];
        questionBox.textContent = currentQuizItem.question;
        currentQuizItem.answers.forEach(answer => {
            const button = document.createElement('button');
            button.textContent = answer;
            button.classList.add('btn', 'answer-btn');
            if (answer === currentQuizItem.correct) {
                button.dataset.correct = true;
            }
            button.addEventListener('click', selectAnswer);
            answerButtons.appendChild(button);
        });
    } else {
        showResults();
    }
}

function resetQuizState() {
    while (answerButtons.firstChild) {
        answerButtons.removeChild(answerButtons.firstChild);
    }
}

function selectAnswer(e) {
    const selectedButton = e.target;
    const correct = selectedButton.dataset.correct;

    if (correct) {
        score++;
        updateScoreDisplay(); // Update score display on correct answer
        selectedButton.classList.add('correct');
        createPointsAnimation();
        successSound.play();
    } else {
        selectedButton.classList.add('wrong');
        failSound.play();
    }

    Array.from(answerButtons.children).forEach(button => {
        button.disabled = true;
        if (button.dataset.correct) {
            button.classList.add('correct');
        }
    });

    setTimeout(() => {
        quizIndex++;
        nextQuestion();
    }, 1500);
}

function createPointsAnimation() {
    const anim = document.createElement('div');
    anim.classList.add('feedback-animation');
    anim.textContent = `+10 Points! 🌟`;
    quizSection.appendChild(anim);
    setTimeout(() => anim.remove(), 1000);
}

// --- Results & Animations ---
function showResults() {
    finalScoreText.textContent = `You scored ${score} out of ${currentData.quiz.length}!`;
    let message = '';
    if (score === currentData.quiz.length) {
        message = 'Amazing! You\'re a STEM Superstar! 🏆';
        createConfetti();
        celebrationSound.play();
    } else if (score > currentData.quiz.length / 2) {
        message = 'Great Job! Keep up the good work! 👍';
    } else {
        message = 'You did your best! Let\'s try again. 💪';
    }
    levelUpMessage.textContent = message;
    showScreen('result-screen');
}

restartBtn.addEventListener('click', () => {
    showScreen('subject-selection');
});

function createConfetti() {
    const confettiContainer = document.getElementById('confetti-container');
    const colors = ['#f00', '#0f0', '#00f', '#ff0', '#0ff', '#f0f'];
    for (let i = 0; i < 50; i++) {
        const confetti = document.createElement('div');
        confetti.classList.add('confetti');
        confetti.style.left = `${Math.random() * 100}vw`;
        confetti.style.animationDelay = `${Math.random() * 2}s`;
        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        confettiContainer.appendChild(confetti);
        setTimeout(() => confetti.remove(), 3000);
    }
}