const elementsFolder = 'elements/';
const structuresFolder = 'structures/';
const totalImages = 20;
const numPairs = 6;
let score = 0;
let matchedPairs = 0;
let gameOver = false;

const elementsGrid = document.getElementById('elementsGrid');
const structuresGrid = document.getElementById('structuresGrid');
const scoreDisplay = document.getElementById('score');
const gameOverDisplay = document.getElementById('gameOver');
const finalScoreDisplay = document.getElementById('finalScore');
const timerDisplay = document.getElementById('timer');

const allPairs = [];
for (let i = 1; i <= totalImages; i++) {
    allPairs.push({ png: `slide${i}.png`, jpg: `Slide${i}c.jpg` });
}

shuffleArray(allPairs);
const imagePairs = allPairs.slice(0, numPairs);

const elementImages = [];
const structureImages = [];

imagePairs.forEach(pair => {
    elementImages.push({ src: elementsFolder + pair.png, match: pair.png.replace('.png', '') });
    structureImages.push({ src: structuresFolder + pair.jpg, match: pair.png.replace('.png', '') });
});

shuffleArray(elementImages);
shuffleArray(structureImages);

function displayImages(images, grid) {
    images.forEach(imgData => {
        const imgElement = document.createElement('img');
        imgElement.src = 'question-mark.jpg';
        imgElement.dataset.actualSrc = imgData.src;
        imgElement.dataset.match = imgData.match;
        imgElement.classList.add('placeholder');
        grid.appendChild(imgElement);
    });
}

displayImages(elementImages, elementsGrid);
displayImages(structureImages, structuresGrid);

let firstSelection = null;
let firstGrid = null;

function lockGrid(grid, state) {
    grid.querySelectorAll('img').forEach(img => {
        img.dataset.locked = state ? 'true' : 'false';
    });
}

document.querySelectorAll('.grid img').forEach(img => {
    img.dataset.locked = 'false';
    img.addEventListener('click', () => {
        if (gameOver || img.classList.contains('show') || img.dataset.locked === 'true') return;

        img.classList.remove('placeholder');
        img.classList.add('show');
        img.src = img.dataset.actualSrc;

        if (!firstSelection) {
            firstSelection = img;
            firstGrid = img.closest('#elementsGrid') ? 'left' : 'right';

            if (firstGrid === 'left') {
                lockGrid(elementsGrid, true);
                lockGrid(structuresGrid, false);
            } else {
                lockGrid(structuresGrid, true);
                lockGrid(elementsGrid, false);
            }
        } else {
            lockGrid(elementsGrid, true);
            lockGrid(structuresGrid, true);

            if (firstSelection.dataset.match === img.dataset.match) {
                matchedPairs++;
                score += 3;
                scoreDisplay.textContent = score;
                firstSelection = null;

                if (matchedPairs === numPairs) {
                    gameOver = true;
                    finalScoreDisplay.textContent = score;

                    // Optional: show popup message
                    const msg = getMotivationalMessage(score);
                    // If using popup overlay:
                    setTimeout(() => {
                        document.getElementById('finalScorePopup').textContent = score;
                        document.getElementById('message').innerText = msg;
                        document.querySelector('#popupOverlay h2').textContent = "🎉 Game Completed!";
                        document.getElementById('popupOverlay').classList.remove('hidden');
                    }, 1500);
                }

                setTimeout(() => {
                    lockGrid(elementsGrid, false);
                    lockGrid(structuresGrid, false);
                }, 500);

            } else {
                setTimeout(() => {
                    firstSelection.classList.remove('show');
                    firstSelection.classList.add('placeholder');
                    firstSelection.src = 'question-mark.jpg';

                    img.classList.remove('show');
                    img.classList.add('placeholder');
                    img.src = 'question-mark.jpg';

                    score = Math.max(0, score - 1);
                    scoreDisplay.textContent = score;

                    firstSelection = null;
                    lockGrid(elementsGrid, false);
                    lockGrid(structuresGrid, false);
                }, 1000);
            }
        }
    });
});

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

function startTimer(duration, display) {
    let timer = duration, minutes, seconds;
    const interval = setInterval(() => {
        if (gameOver) {
            clearInterval(interval);
            return;
        }
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            gameOver = true;
            clearInterval(interval);

            finalScoreDisplay.textContent = score;
            document.getElementById('finalScorePopup').textContent = score;

            // Set "Time Over" message
            document.querySelector('#popupOverlay h2').textContent = "⏰ Time Over!";
            document.getElementById('message').innerText = getMotivationalMessage(score);

            // Show the popup
            document.getElementById('popupOverlay').classList.remove('hidden');
        }
    }, 1000);
}

startTimer(3 * 60, timerDisplay);

// Optional: motivational message function
function getMotivationalMessage(score) {
    if (score <= 6) return "Better luck next time! Practice harder.";
    if (score < numPairs * 3 / 2) return "Good effort! Keep practicing!";
    if (score < numPairs * 3) return "Well done! You're getting there!";
    return "Excellent! You mastered the game!";
}

// Restart button click
document.getElementById('restartBtn').addEventListener('click', () => {
    if (confirm("Do you want to restart the game?")) {
        window.location.reload();
    }
});

document.getElementById('creditsBtn').addEventListener('click', () => {
    window.location.href = 'credits.html';
});

document.getElementById('homeBtn').addEventListener('click', () => {
    window.location.href = 'home.html';
});