document.addEventListener("DOMContentLoaded", function () {
    const monsterNames = document.querySelectorAll(".monster-name");
    const familyDropdown = document.getElementById("familyDropdown");
    const monsterDropdown = document.getElementById("monsterDropdown");

    // Add click event listener to each monster name
    monsterNames.forEach(name => {
        name.addEventListener("click", function () {
            const selectedMonster = this.dataset.name;

            // Update the monsterDropdown and trigger iframes update
            updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown);
        });
    });
});

function updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown) {
    // Check if both familyDropdown and monsterDropdown exist
    if (familyDropdown && monsterDropdown) {
        // Update the monsterDropdown value
        monsterDropdown.value = selectedMonster;

        // Update families dropdown
        updateMonstersDropdown(familyDropdown);

        // Trigger updateIframes function
        updateIframes(familyDropdown, monsterDropdown);
    }
}

function updateMonstersDropdown(familyDropdown) {
    // Check if familyDropdown exists
    if (familyDropdown) {
        const selectedFamily = familyDropdown.value;

        // Fetch monsters data from the server based on the selected family
        fetch(`/get_monsters?family=${selectedFamily}`)
            .then(response => response.json())
            .then(data => populateDropdown(monsterDropdown, data))
            .catch(error => console.error("Error fetching monsters:", error));
    }
}

function updateIframes(familyDropdown, monsterDropdown) {
    // Check if both familyDropdown and monsterDropdown exist
    if (familyDropdown && monsterDropdown) {
        const selectedFamily = familyDropdown.value;
        const selectedMonster = monsterDropdown.value;

        // Update monsterIframe src based on selected family and monster
        const monsterIframeSrc = selectedMonster
            ? `/monster/${selectedMonster}`
            : selectedFamily
            ? `/monster/${selectedFamily}`
            : "about:blank";

        // Assuming you have these iframe elements defined somewhere
        const monsterIframe = document.getElementById("monsterIframe");
        const breedingIframe = document.getElementById("breedingIframe");

        monsterIframe.src = monsterIframeSrc;

        // Update breedingIframe src based on the selected monster
        const breedingIframeSrc = selectedMonster
            ? `/get_breeding_combinations?monster=${selectedMonster}`
            : "about:blank";

        breedingIframe.src = breedingIframeSrc;
    }
}

function populateDropdown(dropdown, data) {
    // Check if dropdown exists
    if (dropdown) {
        // Clear existing options
        dropdown.innerHTML = '<option value="">All</option>';

        // Populate dropdown options
        data.forEach(item => {
            const option = document.createElement("option");
            option.value = item;
            option.text = item;
            dropdown.appendChild(option);
        });
    }
}