const cards = document.querySelectorAll(".card");
const dropZones = document.querySelectorAll(".drop-zone");
const pools = document.querySelectorAll(".pool");
const checkBtn = document.getElementById("checkBtn");
const retryBtn = document.getElementById("retryBtn");
const result = document.getElementById("result");

let draggedCard = null;
let selectedCard = null;

function clearHighlights() {
    dropZones.forEach(zone => {
        zone.classList.remove("correct", "incorrect");
    });
}

function resetButtonsToCheck() {
    checkBtn.classList.remove("hidden");
    retryBtn.classList.add("hidden");
    result.classList.add("hidden");
}

function moveCard(card, target) {
    if (!card || !target) return;

    clearHighlights();
    resetButtonsToCheck();

    const currentParent = card.parentElement;
    const targetCard = target.querySelector(".card");

    if (targetCard && targetCard !== card) {
        currentParent.appendChild(targetCard);
    }

    target.appendChild(card);
    selectedCard = null;
    cards.forEach(c => c.classList.remove("selected"));
}

cards.forEach(card => {
    card.addEventListener("dragstart", () => {
        draggedCard = card;
        card.classList.add("dragging");
    });

    card.addEventListener("dragend", () => {
        draggedCard = null;
        card.classList.remove("dragging");
    });

    card.addEventListener("click", () => {
        cards.forEach(c => c.classList.remove("selected"));

        if (selectedCard === card) {
            selectedCard = null;
            return;
        }

        selectedCard = card;
        card.classList.add("selected");
    });
});

[...dropZones, ...pools].forEach(zone => {
    zone.addEventListener("dragover", event => {
        event.preventDefault();
        zone.classList.add("drag-over");
    });

    zone.addEventListener("dragleave", () => {
        zone.classList.remove("drag-over");
    });

    zone.addEventListener("drop", event => {
        event.preventDefault();
        zone.classList.remove("drag-over");
        moveCard(draggedCard, zone);
    });

    zone.addEventListener("click", () => {
        if (selectedCard) {
            moveCard(selectedCard, zone);
        }
    });
});

checkBtn.addEventListener("click", () => {
    let allCorrect = true;

    dropZones.forEach(zone => {
        const card = zone.querySelector(".card");

        if (card && card.dataset.value === zone.dataset.answer) {
            zone.classList.add("correct");
            zone.classList.remove("incorrect");
        } else {
            zone.classList.add("incorrect");
            zone.classList.remove("correct");
            allCorrect = false;
        }
    });

    if (allCorrect) {
        checkBtn.classList.add("hidden");
        retryBtn.classList.add("hidden");
        result.classList.remove("hidden");
    } else {
        checkBtn.classList.add("hidden");
        retryBtn.classList.remove("hidden");
        result.classList.add("hidden");
    }
});

retryBtn.addEventListener("click", () => {
    clearHighlights();
    retryBtn.classList.add("hidden");
    checkBtn.classList.remove("hidden");
    result.classList.add("hidden");
});