jQuery(document).ready(function($) {
    var registeredButtons = clickbutton_ajax.registered_buttons;

    if (registeredButtons.length === 0) {
        console.log('CLICKBUTTON: No hay botones registrados para rastrear.');
    } else {
        console.log('CLICKBUTTON: Botones registrados:', registeredButtons);
    }

    $.each(registeredButtons, function(index, css_id) {
        // Usar delegación de eventos para manejar elementos dinámicos
        $(document).on('click', '#' + css_id, function(e) {
            console.log('CLICKBUTTON: Clic detectado en elemento con ID:', css_id);

            var page_url = window.location.href;
            var user_agent = navigator.userAgent;

            // Enviar datos mediante sendBeacon si está disponible
            if (navigator.sendBeacon) {
                console.log('CLICKBUTTON: Usando sendBeacon para enviar datos.');
                var data = new FormData();
                data.append('action', 'clickbutton_track');
                data.append('css_id', css_id);
                data.append('page_url', page_url);
                data.append('user_agent', user_agent);
                data.append('nonce', clickbutton_ajax.nonce);

                navigator.sendBeacon(clickbutton_ajax.ajax_url, data);
            } else {
                // Fallback a AJAX asíncrono
                console.log('CLICKBUTTON: Usando AJAX para enviar datos.');
                $.ajax({
                    type: 'POST',
                    url: clickbutton_ajax.ajax_url,
                    data: {
                        action: 'clickbutton_track',
                        css_id: css_id,
                        page_url: page_url,
                        user_agent: user_agent,
                        nonce: clickbutton_ajax.nonce
                    },
                    async: true,
                    success: function(response) {
                        if (response.success) {
                            console.log('CLICKBUTTON: Click registrado correctamente para:', css_id);
                        } else {
                            console.log('CLICKBUTTON: Error al registrar el click para:', css_id, ' - ', response.data);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log('CLICKBUTTON: Error en la solicitud AJAX para:', css_id, ' - ', error);
                    }
                });
            }

            // No prevenir el comportamiento por defecto; permitir que el elemento maneje su acción
        });
    });
});
