window.addEventListener("message", function (event) {
    if (event.data.action !== "initializeDropdown") return;

    console.log("✅ Message received inside iframe, initializing dropdown...");

    function attachDropdownToSchoolField() {
        let schoolInput = document.querySelector("input[name$='/school']");

        if (!schoolInput) {
            console.error("❌ School Input Field Not Found!");
            return;
        }

        console.log("✅ Found School Input Field:", schoolInput);
        initializeDropdown(schoolInput);
    }

    function initializeDropdown(schoolInput) {
        let dropdown = document.createElement("ul");
        dropdown.classList.add("autocomplete-dropdown");
        dropdown.style.position = "absolute";
        dropdown.style.background = "#fff";
        dropdown.style.border = "1px solid #ccc";
        dropdown.style.listStyle = "none";
        dropdown.style.padding = "0";
        dropdown.style.margin = "0";
        dropdown.style.maxHeight = "150px";
        dropdown.style.overflowY = "auto";
        dropdown.style.width = schoolInput.offsetWidth + "px";
        dropdown.style.display = "none";
        schoolInput.parentNode.appendChild(dropdown);

        let debounceTimeout;

        schoolInput.addEventListener("input", function () {
            let query = schoolInput.value.trim();

            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(() => {
                if (query.length < 2) {
                    dropdown.innerHTML = "";
                    dropdown.style.display = "none";
                    return;
                }

                console.log("📡 Fetching Schools for:", query);

                fetch(hsafpAjax.ajax_url + "?action=hsafp_get_schools&query=" + encodeURIComponent(query))
                    .then(response => response.json())
                    .then(data => {
                        dropdown.innerHTML = "";
                        if (data.success && data.data.length > 0) {
                            data.data.forEach(school => {
                                let item = document.createElement("li");
                                item.textContent = school;
                                item.style.padding = "8px";
                                item.style.cursor = "pointer";

                                item.addEventListener("click", function () {
                                    schoolInput.value = school;
                                    dropdown.innerHTML = "";
                                    dropdown.style.display = "none";
                                });

                                dropdown.appendChild(item);
                            });
                            dropdown.style.display = "block";
                        } else {
                            dropdown.style.display = "none";
                        }
                    })
                    .catch(error => console.error("❌ Error fetching schools:", error));
            }, 300);
        });

        document.addEventListener("click", function (event) {
            if (!schoolInput.contains(event.target) && !dropdown.contains(event.target)) {
                dropdown.innerHTML = "";
                dropdown.style.display = "none";
            }
        });
    }

    attachDropdownToSchoolField();
});