let w = window.innerWidth;

function delay() {
    setTimeout(async function() {
        let currentUrl;
        try {
            currentUrl = window.top.location.href;
        } catch (e) {
            currentUrl = document.location.href;
        }
        await warrantyFormFunction(currentUrl);
    }, 1000);
}

if (document.readyState === "complete") {
    delay();
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {
            delay();
        }
    }
}


async function warrantyFormFunction(currentUrl) {
    // remove after testing
    // const iframe = document.getElementById('hs-form-iframe-0').contentWindow.document;
    const isAcademy = currentUrl.includes("academy");
    console.log(`--- Warranty${isAcademy ? "/Academy" : ""} Form ---`);

    const urlObj = new URL(currentUrl);
    const serialNumber = urlObj.searchParams.get("serial_number") || urlObj.searchParams.get("sn");
    let errorMessage = "Produkt mit der Seriennummer konnte nicht gefunden werden: ";
    let errorMessageNotLongEnough = "Die Seriennummer ist zu kurz. Bitte geben Sie eine gültige Seriennummer ein.";

    if(currentUrl.includes("en_gb")){
        errorMessage = "Product with the serial number could not be found: ";
        errorMessageNotLongEnough = "The serial number is too short. Please enter a valid serial number.";
    } else if(currentUrl.includes("fr_fr")){
        errorMessage = "Le produit avec le numéro de série n'a pas pu être trouvé: ";
        errorMessageNotLongEnough = "Le numéro de série est trop court. Veuillez entrer un numéro de série valide.";
    } else if(currentUrl.includes("nl_nl")){
        errorMessage = "Product met het serienummer kon niet worden gevonden: ";
        errorMessageNotLongEnough = "Het serienummer is te kort. Voer een geldig serienummer in.";
    }

    const inputs = document.querySelectorAll('input[type="text"], input[type="email"]');
    inputs.forEach(input => {
        input.addEventListener('blur', () => {
            setTimeout(() => {
                editUnorderedListProperties();
            }, 500);
        });
    });

    const picture = document.querySelectorAll(".hs-main-font-element > img");

    // align existing image to input field
    const pictureContainer = picture[0].parentElement;
    pictureContainer.style.display = "grid";
    pictureContainer.style.gridTemplateAreas = '"label input" ". legend" ". error"';
    pictureContainer.style.gridTemplateColumns = `${isAcademy || w < 768 ? "0" : "18.75"}vw auto`;
    picture[0].style.gridArea = "input";

    let portal = "";
    let supplier = "";
    if(currentUrl.includes("kal")){
        portal="Kalkhoff";
        supplier="KH";
    }else if (currentUrl.includes("foc")){
        portal="Focus";
        supplier="FOC";
    }

    // SEND BUTTON
    const submitBtn = document.querySelector('input.hs-button.primary.large');
    if (submitBtn) {
        submitBtn.setAttribute('aria-label', 'Senden'); //we need this for Silktide screen reader
    }

    // UPLOAD FILE
    const inputFile = document.getElementById('2-123284980/receipt_or_leasing_contract_end_consumer-bf379710-e3b9-4783-b2e3-4114b6e5f4b6');
    if(inputFile){
        inputFile.setAttribute('aria-label', 'Rechnung oder Leasingvertrag'); //we need this for Silktide screen reader
    }

    // UNDORDERED LIST
    editUnorderedListProperties()
    let debounceTimer;

    // SERIAL NUMBER FIELD
    const input = document.getElementsByName("2-123284980/serial_number")[0];
    const wrapper = document.createElement("div");
    wrapper.style.display = "grid";
    wrapper.style.gridTemplateColumns = "auto 1fr";
    input.parentNode.insertBefore(wrapper, input);
    input.value = serialNumber;

    // SERIAL NUMBER PREFIX
    const prefix = document.createElement("div");
    prefix.setAttribute("aria-hidden", "true");
    prefix.textContent = "KH";
    prefix.style.fontFamily = "'KalkhoffTTNormsPro', Arial, sans-serif";
    prefix.style.marginRight = "5px";
    prefix.style.paddingTop = "1rem";
    prefix.style.paddingBottom = "1rem";
    prefix.style.paddingLeft = "1.25rem";
    prefix.style.paddingRight = "1.25rem";
    prefix.style.border = "2px solid #949494";
    prefix.style.lineHeight = isAcademy ? "2.5rem" : "1.7rem";
    prefix.style.fontSize = "1rem";
    prefix.style.fontWeight = "500";
    wrapper.appendChild(prefix);
    wrapper.appendChild(input);

    input.type = 'number';
    input.onwheel = function() { this.blur() };
    input.onkeydown = function(e) {
        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') return false;
        else return true;
    }
    const exampleDiv = input?.parentElement.parentElement;
    input?.addEventListener("blur", (e) => {
        if(e.target.value.length < 10){
            checkIfEmpty(e);
            return;
        }
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            updateValue(e);
        }, 1000);
    });

    input?.addEventListener("input", (e) => {
        if(e.target.value.length < 10){
            checkIfEmpty(e);
            return;
        }
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            updateValue(e);
        }, 1000);
    });

    if (serialNumber) {
        await updateValue(serialNumber);
    }

    //BIRTHDAY FIELD
    const birthDateInput = document.getElementsByName("date_of_birth")[0];
    birthDateInput?.addEventListener("change", checkBirthday);
    let lastValue = birthDateInput?.value;
    setInterval(() => {
        const currentValue = birthDateInput?.value;
        if (currentValue !== lastValue) {
            lastValue = currentValue;
            checkBirthday({ target: birthDateInput });
        }
        updateSubmitButtonState();
    }, 500);


    async function checkIfEmpty(e) {
        let errorDiv = document.querySelector(".error-message");
        let productInfoDiv = document.querySelector(".product-info");
        if(e.target.value === ""){

            // if input is empty, remove error message and product info
            if(errorDiv){
                console.log("Removing error message div");
                exampleDiv.removeChild(errorDiv);
            }
            if(productInfoDiv){
                console.log("Removing product info div");
                exampleDiv.removeChild(productInfoDiv);
            }
            determineGridTemplateAreas(document.createElement("div"));
            updateSubmitButtonState();
            return;
        } else if (e.target.value.length <= 10) {
            console.log(e.target.value.length, errorMessageNotLongEnough)
            // If input is valid, proceed with the next steps
            GenerateErrorMessage(`${errorMessageNotLongEnough}`, errorDiv, productInfoDiv);
            updateSubmitButtonState();
            return;
        }
    }

    function checkBirthday(e) {
        const {value} = e.target || {}
        let errorDiv = document.querySelector(".datebirth-error-message");

        const birthDate = normalizeDateInput(value)
        const today = new Date();
        const legalAge = new Date(birthDate);
        legalAge.setFullYear(legalAge.getFullYear() + 18);

        if(errorDiv){
            console.log("Removing error message div");
            errorDiv.remove();
        }

        if(today < legalAge) {
            const newErrorDiv = document.createElement("div");
            newErrorDiv.className = "datebirth-error-message";
            newErrorDiv.textContent = "Du musst mindestens 18 Jahre alt sein, um das Formular auszufüllen.";
            newErrorDiv.style.color = "red";
            newErrorDiv.style.fontSize = "1rem !important";
            newErrorDiv.style.fontFamily = "'KalkhoffTTNormsPro', Arial, sans-serif !important";
            newErrorDiv.style.marginTop = "8px";
            e.target.insertAdjacentElement("afterend", newErrorDiv);
        }
    }

    window.addEventListener("resize", function(event) {
        w = window.innerWidth;
        let errorDiv = document.querySelector(".error-message");

        console.log(input.value)
        if(input.value === "") {
            determineGridTemplateAreas(document.createElement("div"))
            return;
        }

        determineGridTemplateAreas(errorDiv);
    })

    async function updateValue(e) {
        const serialNumber = typeof e === 'string' ? e : e.target.value;
        console.log("Input value changed to: " + serialNumber);
        let errorDiv = document.querySelector(".error-message");
        let productInfoDiv = document.querySelector(".product-info");

        // test value = 4000490783
        const response = await fetch(`https://pon-dev.elixirsync.com/ordering-api/api/retrieve-form-data/${serialNumber}`, {
            method: "GET",
            headers: {
                "Access-Control-Allow-Origin": "no-cors"
            },
        });
        const json = await response.json();

        determineGridTemplateAreas(errorDiv);

        if (json.success === false) {
            console.log("Error: " + json.error);
            GenerateErrorMessage(`${errorMessage} ${serialNumber}`, errorDiv, productInfoDiv);
            return;
        }

        if(json?.results?.supplier !== supplier){
            GenerateErrorMessage(`${errorMessage} ${serialNumber}`, errorDiv, productInfoDiv);
            return;
        }

        // remove error message
        if (errorDiv) {
            exampleDiv.removeChild(errorDiv);
        }

        const node = document.createElement("div");

        let example = document.createElement("img");

        if(json?.results?.productName){
            // product label
            const productLabel = document.createElement("label");
            productLabel.className = "product-name";
            const textnode = document.createTextNode(json?.results?.productName);
            productLabel.style.padding = "20px 0px";
            productLabel.appendChild(textnode);
            node.appendChild(productLabel);

            node.style.display = "flex";
            node.style.flexDirection = "column";
            node.style.alignItems = "center";
            node.style.gridArea = "product";
            node.className = "product-info";
            node.style.padding = "00px 0px 20px 0px";
            node.style.width = isAcademy ? "90%" : "100%"; /* Bugfix for image centered in Academy form  */
        }

        if(json?.results?.images.length > 0){
            example.className = "product-image";
            example.style.display = "block";
            const rawImageUrl = json?.results?.images[0];
            const imageUrlArray = rawImageUrl.split("/");
            imageUrlArray.splice(Number(imageUrlArray.length - 1), 0, "w_300");
            example.src = imageUrlArray.join("/");

            // update image
            node.appendChild(example);
        }

        if(!productInfoDiv){
            exampleDiv.appendChild(node);
        } else {
            exampleDiv.removeChild(productInfoDiv);
            exampleDiv.appendChild(node);
        }
        determineGridTemplateAreas();

        removeImages();
        updateSubmitButtonState();
    }

    function GenerateErrorMessage(message, errorDiv, productInfoDiv) {

        if(productInfoDiv){
            productInfoDiv.style.display = "none";
        }

        removeImages();

        const node = document.createElement("div");
        node.className = "error-message hs-error-msg";
        node.innerHTML = `<ul class="no-list hs-error-msgs inputs-list custom-error" role="alert"><li><label class="hs-error-msg hs-main-font-element">${message}</label></li></ul>`
        node.style.color = "red";
        node.style.gridArea = "error";

        console.log( node.childNodes[0])
        // node.appendChild(textnode);

        if(!errorDiv){
            exampleDiv.appendChild(node);
        } else {
            exampleDiv.removeChild(errorDiv);
            exampleDiv.appendChild(node);
        }

        determineGridTemplateAreas(node);
    }

    function removeImages() {

        if (picture[1]?.parentElement){
            picture[1].parentElement.style.display = "none";
        }
        if (picture[0]?.parentElement){
            picture[0].parentElement.style.display = "none";
        }
    }

    function determineGridTemplateAreas(errorDiv = undefined) {
        console.log("Determining grid template areas with errorDiv: ", errorDiv);
        if (errorDiv) {
            if (w < 768){
                exampleDiv.style.gridTemplateAreas = '"label label" "input input" "legend legend" "error error"';
                return
            }
            exampleDiv.style.gridTemplateAreas = '"label input" ". legend" ". error"';
            return;
        }
        if (w < 768){
            exampleDiv.style.gridTemplateAreas = '"label label" "input input" "legend legend" "product product"';
            return;
        }
        exampleDiv.style.gridTemplateAreas = '"label input" ". legend" ". product"';
    }

    console.log("--- DOM fully loaded and parsed ---");

    function updateSubmitButtonState() {
        const errorMessages = document.querySelectorAll('.error-message, .datebirth-error-message');
        const hasVisibleErrors = Array.from(errorMessages).some(el => {
            return el.offsetParent !== null;
        });

        const submitButton = document.querySelector('input[type="submit"]');

        if (submitButton) {
            submitButton.disabled = hasVisibleErrors;
            if (hasVisibleErrors) {
                submitButton.style.backgroundColor = "#ccc";
                submitButton.style.color = "#666";
                submitButton.style.cursor = "not-allowed";
                submitButton.style.opacity = "0.6";
            } else {
                submitButton.style.backgroundColor = "";
                submitButton.style.color = "";
                submitButton.style.cursor = "";
                submitButton.style.opacity = "";
            }
        }
    }


    function normalizeDateInput(input) {
        if (!input) return null;
        // Desktop format "DD.MM.YYYY"
        if (/^\d{2}\.\d{2}\.\d{4}$/.test(input)) {
            const [day, month, year] = input.split(".");
            return new Date(`${year}-${month}-${day}`);
        }
        // Mobile format "YYYY-MM-DD"
        if (/^\d{4}-\d{2}-\d{2}$/.test(input)) {
            return new Date(input);
        }
        return null;
    }
}


function editUnorderedListProperties() {
    const unorderedList = document.querySelectorAll('ul.inputs-list');
    if (unorderedList) {
        unorderedList.forEach(ul => {
            ul.setAttribute('role', 'none')
            const listItem = ul.querySelectorAll('li')
            listItem.forEach(li => li.setAttribute('role', 'none'))
            const checkBoxList = ul.querySelectorAll('input[type="checkbox"]')
            checkBoxList && checkBoxList.forEach(
                input => {
                    const label = input.closest('label');
                    if (label) {
                        const paragraph = label.querySelector('p');
                        if (paragraph) {
                            paragraph.setAttribute('aria-hidden', 'true')
                            const generatedId = input.id + '-desc';
                            paragraph.id = generatedId;
                            input.setAttribute('aria-labelledby', generatedId);
                        }
                    }
                }
            )
        })
    }
}