// Make items draggable
const itemsPool = document.getElementById("items-pool");
const rankingArea = document.getElementById("ranking-area");
const ranksPool = document.getElementById("ranks");
const addItemBtn = document.getElementById("add-item-btn");
const addRankBtn = document.getElementById("add-rank-btn");
// Enable drag-and-drop between the pool and ranking area
const sortablePool = new Sortable(itemsPool, {
    group: {
        name: "shared", // Group name must match between lists
        pull: true,     // Allow items to be dragged out
        put: true,      // Allow items to be dropped in
    },
    animation: 150,
});

const sortableRanking = new Sortable(rankingArea, {
    group: {
        name: "shared", // Same group name as itemsPool
        pull: true,     // Allow items to be dragged out
        put: true,      // Allow items to be dropped in
    },
    animation: 150,
});

// Add new item functionality
addItemBtn.addEventListener("click", () => {
    const newItemText = prompt("Enter new item name:");
    if (newItemText) {
        const li = document.createElement("li");
        li.className = "list-group-item";
        li.textContent = newItemText;
        li.draggable = true;
        itemsPool.appendChild(li);
    }
});

// Add new item functionality
addRankBtn.addEventListener("click", () => {
    const newItemText = prompt("Enter new rank name:");
    if (newItemText) {
        const li = document.createElement("li");
        li.className = "mb-2";
        label = document.createElement('label');
        label.innerHTML = newItemText;
        input = document.createElement('input');
        input.setAttribute("type", "number");
        input.setAttribute("class", "form-control");
        input.setAttribute("placeholder", "Enter last rank for " + newItemText);
        li.appendChild(label)
        li.appendChild(input);
        //li.draggable = true;
        ranksPool.appendChild(li);
    }
});

// Save rankings and tier ranges
document.getElementById("save-btn").addEventListener("click", () => {
    // Get ranked items
    const rankedItems = Array.from(rankingArea.children).map((item) => item.textContent.trim());
    const sTierEnd = parseInt(document.getElementById("s-tier-end").value || "0");
    const aTierEnd = parseInt(document.getElementById("a-tier-end").value || "0");

    // Tier categories
    const tiers = {
        "S-Tier": rankedItems.slice(0, sTierEnd),
        "A-Tier": rankedItems.slice(sTierEnd, aTierEnd),
        "Other": rankedItems.slice(aTierEnd),
    };

    // Apply colors to items based on tiers
    Array.from(rankingArea.children).forEach((item, index) => {
        item.classList.remove("s-tier", "a-tier", "other-tier"); // Remove existing classes
        if (index < sTierEnd) {
            item.classList.add("s-tier");
        } else if (index < aTierEnd) {
            item.classList.add("a-tier");
        } else {
            item.classList.add("other-tier");
        }
    });

    // Disable dragging
    sortableRanking.option("disabled", true); // Disable drag-and-drop for ranking area
    sortablePool.option("disabled", true);   // Optionally disable pool area too

    // Send rankings to the server
    fetch("/save-rankings", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ rankedItems, tiers }),
    })
    .then((response) => response.json())
    .catch((error) => console.error("Error:", error));
});