document.addEventListener('DOMContentLoaded', (event) => {
    const pointForParcelsInput = document.getElementById('bbPointForParcel');
    const apiTokenInput = document.getElementById('bbApiToken');
    const widgetKeyInput = document.getElementsByName('CONFIG[MAIN][WIDGET_KEY]')[0];
    const pointForParcelCode = document.getElementsByName('CONFIG[MAIN][POINT_FOR_PARCEL_CODE]')[0];
    const testMode = document.getElementById('bbTestMode');
    const bbAddLinkToCustom = document.getElementById('bbAddLinkToCustom');
    const bbCustomElementId = document.getElementById('bbCustomElementId');
    const bbAddressPropType = document.getElementById('bbAddressPropType');
    const bbFioPropType = document.getElementById('bbFioPropType');

    bbAddHint(document.querySelector('#bbApiToken'), BX.message('API_TOKEN_HINT'));
    bbAddHint(document.querySelector('#bbTestMode'), BX.message('TEST_MODE_HINT'));
    bbAddHint(document.querySelector('#bbPointForParcel'), BX.message('POINT_FOR_PARCEL_HINT'));
    bbAddHint(document.querySelector('#bbOrderPrefix'), BX.message('ORDER_PREFIX_HINT'));

    BX.UI.Hint.init(BX('adm-detail-content-item-block'));

    addErrorToElement(apiTokenInput.nextElementSibling, 'apiTokenError');
    addErrorToElement(pointForParcelsInput.nextElementSibling, 'pointForParcelError');

    handleAddressPropTypeSelect(bbAddressPropType);

    bbAddressPropType.addEventListener('change', function () {
        handleAddressPropTypeSelect(this);
    });

    handleFioPropTypeSelect(bbFioPropType);

    bbFioPropType.addEventListener('change', function () {
        handleFioPropTypeSelect(this);
    });

    handleAddLinkCheckboxes();
    validateDimensionFields();
    checkDeliveryData().then(() => {
        validateApiToken(apiTokenInput, testMode, widgetKeyInput);
        validatePointForParcel(pointForParcelsInput, pointForParcelCode);
    });
    handleDatalist(pointForParcelsInput);
    createClearCacheMenu();
    createDeliveryDataUpdateMenu();


    apiTokenInput.addEventListener('blur', async function () {
        validateApiToken(this, testMode, widgetKeyInput);
    });

    pointForParcelsInput.addEventListener('blur', async function () {
        validatePointForParcel(this, pointForParcelCode);
    });

    testMode.addEventListener('change', function () {
        if (this.checked) {
            apiTokenInput.style.borderColor = '';
            hideErrorMessage('apiTokenError');
            bbErrors.apiTokenError = null;
        } else {
            apiTokenInput.dispatchEvent(new Event('blur'));
        }

        handleFormButtons();
        handleErrorTab();

    });

    if (!bbAddLinkToCustom.checked) {
        bbCustomElementId.classList.add('bbDisableField');
    }
});

function handleAddressPropTypeSelect(element) {
    const bbAddress = document.getElementById('bbAddress');
    const bbStreet = document.getElementById('bbStreet');
    const bbHouse = document.getElementById('bbHouse');
    const bbFlat = document.getElementById('bbFlat');

    const extendedProps = [
        bbStreet, bbHouse, bbFlat
    ]

    if (element.value === '1') {
        extendedProps.forEach(prop => {
            hideElementTr(prop);
        });
        showElementTr(bbAddress);
    } else {
        extendedProps.forEach(prop => {
            showElementTr(prop);
        });

        hideElementTr(bbAddress);
    }

}

function handleFioPropTypeSelect(element) {
    const bbFio = document.getElementById('bbFio');
    const bbFirstname = document.getElementById('bbFirstname');
    const bbSecondname = document.getElementById('bbSecondname');
    const bbMiddlename = document.getElementById('bbMiddlename');

    const extendedProps = [
        bbFirstname, bbSecondname, bbMiddlename
    ];

    if (element.value === '1') {
        extendedProps.forEach(prop => {
            hideElementTr(prop);
        });
        showElementTr(bbFio);
    } else {
        extendedProps.forEach(prop => {
            showElementTr(prop);
        });

        hideElementTr(bbFio);
    }
}

function hideElementTr(element) {
    element.closest('tr').style.display = 'none';
}

function showElementTr(element) {
    element.closest('tr').style.display = 'table-row';
}

async function validateApiToken(element, testMode, widgetKeyInput) {
    if (testMode.checked) {
        bbErrors.apiTokenError = null;
        element.style.borderColor = '';
        hideErrorMessage('apiTokenError');
        widgetKeyInput.value = '';
        handleFormButtons();
        handleErrorTab();
        return;
    }
    const trimmedApiToken = element.value.trim();

    if (!trimmedApiToken && !testMode.checked) {
        element.style.borderColor = 'red';
        displayErrorMessage(BX.message('EMPTY_API_TOKEN_FIELD_ERROR_MESSAGE'), 'apiTokenError');
        widgetKeyInput.value = '';
        bbErrors.apiTokenError = BX.message('EMPTY_API_TOKEN_FIELD_ERROR_MESSAGE');
        handleFormButtons();
        handleErrorTab();
        return;
    }

    const saveButton = document.querySelector("#tabControl_buttons_div > div > input[name='save']");
    const applyButton = document.querySelector("#tabControl_buttons_div > div > input[name='apply']");

    testMode.disabled = true;
    saveButton.disabled = true;
    applyButton.disabled = true;

    const getKeyIntegration = await fetchData(bbAjaxUrl + 'validateApiToken&apiToken=' + trimmedApiToken)
    if (getKeyIntegration.status === 'error') {
        element.style.borderColor = 'red';
        displayErrorMessage(getKeyIntegration.errors[0].message, 'apiTokenError');
        widgetKeyInput.value = '';
        bbErrors.apiTokenError = getKeyIntegration.errors[0].message;
    } else {
        element.style.borderColor = '';
        hideErrorMessage('apiTokenError');
        widgetKeyInput.value = getKeyIntegration.data.key;
        bbErrors.apiTokenError = null;
    }

    handleFormButtons();
    handleErrorTab();

    testMode.disabled = false;

}

async function validatePointForParcel(element, pointForParcelCode) {
    const trimmedPointForParcel = element.value.trim();
    if (!trimmedPointForParcel) {
        element.style.borderColor = 'red';
        displayErrorMessage(BX.message('EMPTY_POINT_FOR_PARCEL_FIELD_ERROR_MESSAGE'), 'pointForParcelError');
        bbErrors.pointForParcelError = BX.message('EMPTY_POINT_FOR_PARCEL_FIELD_ERROR_MESSAGE');
        handleFormButtons();
        handleErrorTab();
        return;
    }

    const getPointForParcel = await fetchData(bbAjaxUrl + 'validatePointForParcel&pointForParcel=' + encodeURIComponent(trimmedPointForParcel))
    if (getPointForParcel.status === 'error') {
        element.style.borderColor = 'red';
        displayErrorMessage(getPointForParcel.errors[0].message, 'pointForParcelError');
        bbErrors.pointForParcelError = getPointForParcel.errors[0].message;
        pointForParcelCode.value = '';
    } else {
        element.style.borderColor = '';
        hideErrorMessage('pointForParcelError');
        bbErrors.pointForParcelError = null;
        pointForParcelCode.value = getPointForParcel.data.code;
    }

    handleFormButtons();
    handleErrorTab();

}

const bbAjaxUrl = '/bitrix/services/main/ajax.php?sessid=' + BX.bitrix_sessid() + '&action=boxberry:delivery.api.service.';
const bbErrors = {
    apiTokenError: null,
    pointForParcelError: null,
}

function handleErrorTab() {
    const mainTab = document.querySelector('#tab_cont_edit_MAIN');
    const ordersTab = document.querySelector('#tab_cont_edit_ORDERS');

    if (bbErrors.apiTokenError) {
        mainTab.classList.add('error-tab');
    } else {
        mainTab.classList.remove('error-tab');
    }

    if (bbErrors.pointForParcelError) {
        ordersTab.classList.add('error-tab');
    } else {
        ordersTab.classList.remove('error-tab');
    }
}

function addErrorToElement(element, id) {
    const errorElement = document.createElement('p');
    errorElement.id = id;
    errorElement.textContent = '';
    errorElement.style.color = 'red';
    errorElement.style.display = 'none';
    errorElement.style.fontWeight = 'bold';
    element.after(errorElement);

}

function displayErrorMessage(message, elementId) {
    const errorMessageElement = document.getElementById(elementId);
    errorMessageElement.textContent = message;
    errorMessageElement.style.display = 'block';
}

function hideErrorMessage(elementId) {
    const errorMessageElement = document.getElementById(elementId);
    errorMessageElement.textContent = '';
    errorMessageElement.style.display = 'none';
}

function handleFormButtons() {
    const saveButton = document.querySelector("#tabControl_buttons_div > div > input[name='save']");
    const applyButton = document.querySelector("#tabControl_buttons_div > div > input[name='apply']");

    if (bbErrors.apiTokenError || bbErrors.pointForParcelError) {
        saveButton.disabled = true;
        applyButton.disabled = true;

    } else {
        saveButton.disabled = false;
        applyButton.disabled = false;
    }

}

function createClearCacheMenu() {
    const toolbar = document.querySelector(".adm-detail-toolbar-right");
    if (!toolbar) {
        return;
    }

    let button = document.createElement('a');
    button.href = '#';
    button.textContent = BX.message('CLEAR_CACHE_MENU_HEADER');
    button.className = 'adm-btn adm-btn-menu';
    toolbar.prepend(button);

    let menuItems = [
        {TEXT: BX.message('WIDGET_SETTINGS_CLEAR_CACHE_MENU'), ONCLICK: 'deleteCache("settings")'},
        {TEXT: BX.message('CALC_CLEAR_CACHE_MENU'), ONCLICK: 'deleteCache("calculator")'},
        {TEXT: BX.message('ZIPS_CLEAR_CACHE_MENU'), ONCLICK: 'deleteCache("zips")'},
        {TEXT: BX.message('ALL_API_DATA_CLEAR_CACHE_MENU'), ONCLICK: 'deleteCache("api")'},
        {TEXT: BX.message('FOUNDED_LOCATIONS_CLEAR_CACHE_MENU'), ONCLICK: 'deleteCache("locations")'},
        {TEXT: BX.message('ALL_CLEAR_CACHE_MENU'), ONCLICK: 'deleteCache("all")'},
    ];

    button.onclick = function (event) {
        event.preventDefault();
        BX.adminShowMenu(button, menuItems, {active_class: 'adm-btn-active', public_frame: '0'});
    };
}

function createDeliveryDataUpdateMenu() {
    const toolbar = document.querySelector(".adm-detail-toolbar-right");
    if (!toolbar) {
        return;
    }

    let button = document.createElement('a');
    button.href = '#';
    button.textContent = BX.message('UPDATE_API_DATA_MENU_HEADER');
    button.className = 'adm-btn adm-btn-menu';
    toolbar.prepend(button);

    let menuItems = [
        {TEXT: BX.message('CITIES_UPDATE_MENU'), ONCLICK: 'forceUpdateDeliveryDataFromMenu("cities")'},
        {
            TEXT: BX.message('POINTS_FOR_PARCELS_UPDATE_MENU'),
            ONCLICK: 'forceUpdateDeliveryDataFromMenu("pointsForParcels")'
        },
        {TEXT: BX.message('ALL_UPDATE_MENU'), ONCLICK: 'forceUpdateDeliveryDataFromMenu("all")'},
    ];

    button.onclick = function (event) {
        event.preventDefault();
        BX.adminShowMenu(button, menuItems, {active_class: 'adm-btn-active', public_frame: '0'});
    };
}

function forceUpdateDeliveryDataFromMenu(type) {
    let dialog = createCDialog(BX.message('DATA_UPDATE_DIALOG_TITLE'), BX.message('DATA_UPDATE_DIALOG_CONTENT'));
    dialog.Show();

    updateDeliveryData(type).then(data => {
        showAndCloseDialog(dialog, data.status === 'success' ? data.data.message : data.errors[0].message)
    }).catch(error => {
        console.error(BX.message('ERROR_WITH_COLON_TEXT'), error);
        dialog.ShowError(BX.message('ERROR_WITH_COLON_TEXT') + ' ' + error.message);
    });

}

function createCDialog(title, content) {
    return new BX.CDialog({
        title: title,
        content: '<p style="font-size: 20px;">' + content + '</p>',
        resizable: false,
        draggable: false,
        height: '150',
        width: '500'
    });
}

function showAndCloseDialog(dialog, content, timeout = 2000) {
    dialog.Show();
    dialog.SetContent('<p style="font-size: 20px;">' + content + '</p>');
    setTimeout(() => {
        dialog.Close();
    }, timeout);

}

async function deleteCache(type) {
    let dialog = createCDialog(BX.message('CLEAR_CACHE_DIALOG_TITLE'), '');
    const url = bbAjaxUrl + 'clearCache&type=' + type;

    try {
        const data = await fetchData(url);
        showAndCloseDialog(dialog, data.status === 'success' ? data.data.message : data.errors[0].message)
    } catch (error) {
        console.error('Error:', error);
        dialog.ShowError(BX.message('ERROR_WITH_COLON_TEXT') + ' ' + error.message);
    }
}

async function fetchData(url, params) {
    try {
        const response = await fetch(url, params);
        return await response.json();
    } catch (error) {
        console.error(BX.message('ERROR_WITH_COLON_TEXT'), error);
        return null;
    }
}

async function getEmptyDeliveryData() {
    const url = bbAjaxUrl + 'getEmptyDeliveryData';
    return await fetchData(url);
}

async function updateDeliveryData(type) {
    const apiToken = document.querySelector('#bbApiToken').value;
    const url = bbAjaxUrl + 'updateDeliveryData&apiToken=' + apiToken + '&updateDataType=' + type;
    return await fetchData(url);
}

async function checkDeliveryData() {
    let dialog = createCDialog(BX.message('CITIES_AND_POINTS_UPDATE_DIALOG_TITLE'), BX.message('DATA_UPDATE_DIALOG_CONTENT'));

    try {
        const data = await getEmptyDeliveryData();
        if (data.status === 'error') {
            dialog.Show();
            if (data.errors.length > 1) {
                const updateData = await updateDeliveryData('all');
                if (updateData.status === 'error') {
                    dialog.ShowError(updateData.errors[0].message);
                } else {
                    dialog.SetContent('<p style="font-size: 20px;">' + updateData.data.message + '</p>');
                    setTimeout(() => {
                        dialog.Close();
                    }, 2000);
                }
            } else {
                const updateData = await updateDeliveryData(data.errors[0].message);
                if (updateData.status === 'error') {
                    dialog.ShowError(updateData.errors[0].message);
                } else {
                    dialog.SetContent('<p style="font-size: 20px;">' + updateData.data.message + '</p>');
                    setTimeout(() => {
                        dialog.Close();
                    }, 2000);
                }
            }
        }
    } catch (error) {
        console.error(BX.message('DATA_UPDATE_DIALOG_ERROR') + ' ', error);
    }
}

function validateDimensionFields() {
    let dimensionFieldsNames = ['bbDefaultWeight', 'bbDefaultDepth', 'bbDefaultWidth', 'bbDefaultHeight'];

    dimensionFieldsNames.forEach(fieldName => {
        let field = document.querySelector('#' + fieldName);
        if (field) {
            field.addEventListener('input', function () {
                let value = parseInt(this.value);
                if (isNaN(value) || value <= 0) {
                    this.value = '';
                } else {
                    this.value = value;
                }
            });
        }
    });
}

function handleAddLinkCheckboxes() {
    const elementIds = ['bbAddLinkDefault', 'bbAddLinkToDescription', 'bbAddLinkAfterDescription', 'bbAddLinkToPeriod', 'bbAddLinkToCustom'];
    const bbAddLinkToCustom = document.getElementById('bbAddLinkToCustom');
    const bbCustomElementId = document.getElementById('bbCustomElementId')

    elementIds.forEach(id => {
        const checkbox = document.getElementById(id);
        if (checkbox) {
            checkbox.addEventListener('change', function () {
                if (this.checked) {
                    elementIds.forEach(otherId => {
                        if (otherId !== id) {
                            const otherCheckbox = document.getElementById(otherId);
                            if (otherCheckbox) {
                                otherCheckbox.checked = false;
                            }
                        }
                    });
                }

                if (!bbAddLinkToCustom.checked) {
                    bbCustomElementId.classList.add('bbDisableField');
                } else {
                    bbCustomElementId.classList.remove('bbDisableField');
                }
            });
        }
    });
}