$ = jQuery;
$(document).ready(function () {

    console.log("ajax loaded...");
    class WPapiClass_Salesmango {
        constructor() {
            this.mouseX = 0; //prueba
            this.mouseY = 0;
            this.method_ = "POST";
            this.running = $('<div class="spinner is-active owl360-d-none" style="position:fixed;top:50px;left:50px;z-index: 1000;width: 50px;height: 50px;background-size: contain;"></div>', {
                id: "loading-indicator"
            });
            $(document).on('click', (event) => {
                this.mouseX = event.clientX;
                this.mouseY = event.clientY;
            });
            $('body').append(this.running);
        }

        method(method_) {
            this.method_ = method_;
            return this;
        }

        get class() {
            return this;
        }

        async go(action, data, nameParam = "data") {
            return await this.ajax(action, data, nameParam);
        }

        async call(action, data, nameParam = "data") {
            console.log("api Call:", action);
            return await this.ajax(action, {
                [nameParam]: { ...data }
            }, nameParam);
        }

        async ajax(action, data, nameParam = "data") {
            const ajaxParams = { url: ajax_Salesmango.ajax_url, nonce: ajax_Salesmango.nonce, ajax_module: ajax_Salesmango.ajax_module };

            let bodyParams = new URLSearchParams({
                action: action,
                security: ajaxParams.nonce,
                ajax_module: ajaxParams.ajax_module
            });

            for (let [key, value] of Object.entries(data)) {
                if (typeof value === 'object' && value !== null) {
                    value = JSON.stringify(value);
                }
                bodyParams.append(key, value);
            }
            const requestOptions = {
                method: this.method_,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: bodyParams.toString()
            };
            this.showRunning(true)
            try {
                const response = await fetch(ajaxParams.url, requestOptions);
                const jsonResponse = await response.json();

                if (jsonResponse.success) {
                    if (jsonResponse.data.callBack) {
                        console.log("callBack:", jsonResponse.data.callBack);
                        window.location.href = jsonResponse.data.callBack;
                    }
                    if (jsonResponse.data.message) this.showAlert(jsonResponse.data.message, 20);
                    this.showRunning(false)
                    return jsonResponse.data ? { data: jsonResponse.data, status: true } : jsonResponse;
                } else {
                    if (jsonResponse.data.error) this.showAlert(jsonResponse.data.error, 30);
                    else if (jsonResponse.data.status === false && jsonResponse.data.msg) this.showAlert(jsonResponse.data.msg, 30);
                    console.error(`Error calling ${action} with ${nameParam}=`, jsonResponse);
                    this.showRunning(false)
                    return { status: false, error: jsonResponse };
                }
            } catch (error) {
                console.error(`${action} Error:`, error);
                this.showRunning(false)
                return { status: false, error: "Error:" + error.message };
            }
        }
        async showAlert(msg, time = 30) {
            const alertId = 'owl360-custom-alert';
            if (!$('#' + alertId).length) {
                var alertElement = $('<div></div>', {
                    id: alertId,
                    css: {
                        position: 'fixed',
                        top: '120px',
                        right: '30px',
                        zIndex: 2147483647,
                        minWidth: '300px',
                        backgroundColor: '#000000',
                        color: '#ffffff',
                        border: '2px solid #3a3a3a',
                        borderRadius: '10px',
                        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
                        padding: '22px',
                        fontSize: '18px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        textShadow: '2px 2px 4px rgba(128, 128, 128, 1)'
                    }
                });
                var messageElement = $('<span></span>', {
                    text: msg,
                    css: {
                        fontWeight: 'bold'
                    }
                });
                var closeButton = $('<button></button>', {
                    text: '×',
                    css: {
                        background: 'none',
                        border: 'none',
                        fontSize: '20px',
                        color: '#ffffff',
                        cursor: 'pointer'
                    },
                    click: function () {
                        $('#' + alertId).remove();
                    }
                });
                alertElement.append(messageElement);
                alertElement.append(closeButton);
                $('body').append(alertElement);
            } else {
                $('#' + alertId).html('<span style="font-weight: bold;">' + msg + '</span><button type="button" style="background: none; border: none; font-size: 20px; color: #ffffff; cursor: pointer;">×</button>');
                $('#' + alertId).css({
                    backgroundColor: '#000000',
                    color: '#ffffff',
                    border: '2px solid #3a3a3a',
                    borderRadius: '10px',
                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
                    padding: '20px',
                    fontSize: '22px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    textShadow: '2px 2px 4px rgba(128, 128, 128, 1)'
                });
                $('#' + alertId + ' button').click(function () {
                    $('#' + alertId).remove();
                });
            }

            setTimeout(function () {
                $('#' + alertId).remove();
            }, time * 1000);
        }


        showRunning(show) {
            if (this.running) {
                if (show) {
                    this.running.css({ top: this.mouseY + 'px', left: this.mouseX + 'px', transform: 'translate(-50%, -50%)' });
                    this.running.removeClass('owl360-d-none').addClass('owl360-d-block');
                } else this.running.removeClass('owl360-d-block').addClass('owl360-d-none');
            }
        }

    }



    const apiLoaded = new WPapiClass_Salesmango();
    window.$api_Salesmango = apiLoaded; // Asigna directamente la instancia para usar sus métodos
    window.showAlert = apiLoaded.showAlert;
    window.showRunning = apiLoaded.showRunning;

});