// Changed card content to emojis for dogs, cats, and geckos
// We need an even number of pairs. Let's start with 6 pairs (12 cards total) for a 4x3 grid.
const cardContent = [
    '🐶', '🐶', // Dog face
    '🐱', '🐱', // Cat face
    '🦎', '🦎', // Lizard (best emoji for gecko)
    '🐾', '🐾', // Paw Prints (another animal-related emoji)
    '🦴', '🦴', // Bone
    '🐠', '🐠'  // Fish (pets too!)
    // Add more pairs if you want a larger game (e.g., more animal emojis)
    // Remember to keep the total number of cards even!
];

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
let matchedPairs = 0;
const totalPairs = cardContent.length / 2; // Dynamically get total pairs based on array length

const gameBoard = document.querySelector('.game-board');
const winMessage = document.querySelector('.win-message');
const chineseTextElement = document.querySelector('.chinese-text');

// The Chinese words to display on win
const chineseWinMessage = '醒来 吃饭了 月月';

function shuffle(array) {
    // Fisher-Yates shuffle algorithm
    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]]; // ES6 destructuring for swap
    }
}

function createCards() {
    shuffle(cardContent); // Shuffle the array before creating cards
    gameBoard.innerHTML = ''; // Clear existing cards if restarting

    cardContent.forEach(cardValue => {
        const card = document.createElement('div');
        card.classList.add('memory-card');
        card.dataset.value = cardValue; // Store the emoji as a data attribute for matching

        card.innerHTML = `
            <div class="front-face">${cardValue}</div>
            <div class="back-face">?</div>
        `;

        card.addEventListener('click', flipCard);
        gameBoard.appendChild(card);
    });
}

function flipCard() {
    if (lockBoard) return; // Prevent flipping more cards if two are already open
    if (this === firstCard) return; // Prevent double-clicking the same card

    this.classList.add('flip');

    if (!hasFlippedCard) {
        // First card flipped
        hasFlippedCard = true;
        firstCard = this;
        return;
    }

    // Second card flipped
    secondCard = this;
    checkForMatch();
}

function checkForMatch() {
    // Check if the data-value of the two flipped cards is the same
    const isMatch = firstCard.dataset.value === secondCard.dataset.value;

    isMatch ? disableCards() : unflipCards();
}

function disableCards() {
    // Remove event listeners so matched cards cannot be flipped again
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);

    // Add a 'match' class (optional, for visual feedback)
    firstCard.classList.add('match');
    secondCard.classList.add('match');

    matchedPairs++; // Increment the count of matched pairs

    // Check for win condition
    if (matchedPairs === totalPairs) {
        showWinMessage();
    }

    resetBoard(); // Reset variables for the next turn
}

function unflipCards() {
    lockBoard = true; // Lock the board to prevent more clicks during unflip animation

    setTimeout(() => {
        firstCard.classList.remove('flip');
        secondCard.classList.remove('flip');
        resetBoard(); // Reset variables after cards have flipped back
    }, 1000); // Wait 1 second (match CSS transition duration) before flipping back
}

function resetBoard() {
    // Reset state variables for the next turn
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
}

function showWinMessage() {
    gameBoard.style.display = 'none'; // Hide the game board
    winMessage.style.display = 'block'; // Show the win message container
    chineseTextElement.textContent = chineseWinMessage; // Set the Chinese text
}

function restartGame() {
    winMessage.style.display = 'none'; // Hide win message
    gameBoard.style.display = 'grid'; // Show game board
    resetBoard(); // Reset game state variables
    matchedPairs = 0; // Reset matched pairs count
    createCards(); // Re-create and shuffle cards for a new game
}

// Initialize the game when the page loads
document.addEventListener('DOMContentLoaded', createCards);