document.addEventListener("DOMContentLoaded", function () {
    // Load saved reference on page load (with retry for dynamic content)
    loadSavedReferenceWithRetry();

    // Ajax submission
    document.addEventListener("submit", function (e) {
        if (e.target && e.target.id === "order_reference_form") {
            e.preventDefault();
            const form = e.target;
            const url = typeof ajax_url !== "undefined" ? ajax_url : null;
            const input = document.querySelector("#order_reference_input");
            const inputValue = input.value.trim();

            fetch(url, {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    Accept: "application/json",
                },
                body:
                    "ajax=1&order_reference_input=" +
                    encodeURIComponent(inputValue),
            })
                .then((response) => response.json())
                .then((data) => {
                    if (data.success) {
                        // Save to localStorage
                        localStorage.setItem("order_reference", inputValue);
                        displaySavedReference(inputValue);
                        input.value = "";
                    }
                    alertFadeOut(form, data);
                })
                .catch((error) => {
                    console.error(error);
                    alertFadeOut(form, {
                        success: false,
                        message: "An error occurred",
                    });
                });
        }
    });

    // Load saved reference with retry mechanism for dynamic content
    function loadSavedReferenceWithRetry(attempts = 0, maxAttempts = 10) {
        const savedReference = localStorage.getItem("order_reference");
        if (savedReference) {
            const success = displaySavedReference(savedReference);

            if (!success && attempts < maxAttempts) {
                setTimeout(() => {
                    loadSavedReferenceWithRetry(attempts + 1, maxAttempts);
                }, 100);
            }
        }
    }

    function displaySavedReference(value) {
        const form = document.querySelector("#order_reference_form");
        if (!form) return false;

        const lastSubmittedContainer = form.querySelector(
            ".last-submitted-container",
        );
        if (lastSubmittedContainer) {
            const lastSubmittedSpan =
                lastSubmittedContainer.querySelector(".last-submitted");
            if (lastSubmittedSpan) {
                lastSubmittedSpan.textContent = value;
                lastSubmittedContainer.classList.remove("d-none");
                return true;
            }
        }
        return false;
    }

    // Reset alert to initial state
    function resetAlert(alert, messageEl) {
        alert.classList.add("d-none");
        alert.classList.remove("alert-success", "alert-danger", "fade-out");
        messageEl.textContent = "";
    }

    // Fade out alert and reset
    function alertFadeOut(form, data) {
        const alert = form.querySelector(".alert");
        if (!alert) return;

        const messageEl = alert.querySelector(".alert-message");
        if (!messageEl) return;

        // Show alert with appropriate class and message
        alert.classList.remove("d-none");
        alert.classList.add(data.success ? "alert-success" : "alert-danger");
        messageEl.textContent = data.message;

        // Fade out after delay
        setTimeout(() => {
            alert.classList.add("fade-out");
            setTimeout(() => {
                resetAlert(alert, messageEl);
            }, 750); // 750ms for fade-out animation - make sure it matches in styles.css
        }, 5000);
    }
});