function showConversation(conversationIndex) {
    var row = document.getElementById('popup-row-' + conversationIndex);
    row.style.display = 'table-row';  // Muestra el popup debajo de la conversación
}


function createConversionChart(data) {
    const canvas = document.getElementById('barGraph');
    if (!canvas) {
        console.error("⚠️ No se encontró el elemento canvas con ID 'barGraph'.");
        return;
    }

    const ctx = canvas.getContext("2d");

    const dpi = window.devicePixelRatio || 1;
    canvas.width = canvas.clientWidth * dpi;
    canvas.height = canvas.clientHeight * dpi;
    ctx.scale(dpi, dpi);


    // Si existe un gráfico previo, lo destruimos
    if (window.conversionChart) {
        window.conversionChart.destroy();
    }

    // Creamos gradientes para cada dataset (relleno):
    const gradient1 = ctx.createLinearGradient(0, 0, 0, 350);
    gradient1.addColorStop(0, 'rgba(173, 129, 255, 0.4)'); // color en la parte superior
    gradient1.addColorStop(1, 'rgba(173, 129, 255, 0)');  // transparente abajo

    const gradient2 = ctx.createLinearGradient(0, 0, 0, 350);
    gradient2.addColorStop(0, 'rgba(129, 60, 255, 0.4)');
    gradient2.addColorStop(1, 'rgba(129, 60, 255, 0)');

    const gradient3 = ctx.createLinearGradient(0, 0, 0, 350);
    gradient3.addColorStop(0, 'rgba(84, 25, 174, 0.4)');
    gradient3.addColorStop(1, 'rgba(84, 25, 174, 0)');

    // Datos de ejemplo (31 puntos) simulando variaciones
    const labels = Array.from({ length: 31 }, (_, i) => i + 1); // días 1 al 31
    // Datos hardcodeados para pruebas
    // const visitantesData = [10, 50, 40, 80, 70, 35, 60, 90, 20, 25, 75, 55, 30, 85, 65, 45, 10, 35, 50, 80, 70, 90, 100, 60, 40, 35, 30, 45, 20, 15, 5];
    // const conversacionesData = [5, 20, 15, 35, 30, 20, 25, 40, 10, 15, 45, 25, 20, 50, 40, 30, 15, 25, 35, 45, 40, 50, 60, 30, 25, 20, 15, 25, 10, 8, 2];
    const conversionData = [40, 45, 37, 55, 50, 30, 40, 70, 15, 20, 60, 45, 25, 60, 50, 40, 15, 35, 40, 55, 50, 60, 70, 40, 30, 25, 20, 35, 10, 5, 0];

    // Configuración del gráfico
    const config = {
        type: 'line',
        data: {
            labels: labels,
            datasets: [
                {
                    label: "Visitantes",
                    data: data.total_visits_month_array,
                    borderColor: 'rgba(173, 129, 255, 1)',
                    backgroundColor: gradient1,
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3,
                    pointRadius: 3,
                    pointBackgroundColor: 'rgba(173, 129, 255, 1)'
                },
                {
                    label: "Conversaciones",
                    data: data.total_chats_month_array,
                    borderColor: 'rgba(129, 60, 255, 1)',
                    backgroundColor: gradient2,
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3,
                    pointRadius: 3,
                    pointBackgroundColor: 'rgba(129, 60, 255, 1)'
                },
            ]
        },
        options: {
            animation: {
                duration: 200, // Duración de la anmación en milisegundos
                easing: 'easeInOutQuart' // Función de animación
            },
            responsive: true,
            // Si quieres respetar siempre la proporción, pon true; 
            // si no, deja en false para forzar el 100% del contenedor.
            maintainAspectRatio: false,
            layout: {
                padding: {
                    bottom: 30,
                }
            },
            scales: {
                x: {
                    grid: {
                        color: 'rgba(0,0,0,0.05)',  // líneas suaves en X
                        drawBorder: false,
                    },
                    ticks: {
                        color: '#666' // color de las etiquetas del eje X
                    }
                },
                y: {
                    grid: {
                        color: 'rgba(0,0,0,0.05)',  // líneas suaves en Y
                        drawBorder: false,
                    },
                    ticks: {
                        color: '#666', // color de las etiquetas del eje Y
                        stepSize: 10
                    },
                    beginAtZero: true,
                    // Ajusta el max en función de tus valores reales
                    max: 30 
                }
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        color: '#666',  // color del texto en la leyenda
                        font: {
                            family: "'Arial', sans-serif", // Usa una fuente nítida
                            size: 14,
                            weight: 'bold'
                        }
                    }
                },
                tooltip: {
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    titleColor: '#fff',
                    bodyColor: '#fff',
                    displayColors: false, // oculta el recuadro de color en el tooltip
                    titleFont: {
                        size: 14
                    },
                    bodyFont: {
                        size: 13
                    }
                }
            },
            elements: {
                line: {
                    borderCapStyle: 'round',
                    borderJoinStyle: 'round'
                }
            }
        }
    };

    window.conversionChart = new Chart(ctx, config);
}

function compibotInitToast() {
  const toast = document.querySelector('.toast');
  const progress = document.querySelector('.progress');
  const closeIcon = document.querySelector('.close');

  if (!toast || !progress || !closeIcon) return;

  let timer1 = setTimeout(() => toast.classList.remove('active'), 5000);
  let timer2 = setTimeout(() => progress.classList.remove('active'), 5300);

  closeIcon.addEventListener('click', () => {
    toast.classList.remove('active');
    clearTimeout(timer1);
    clearTimeout(timer2);
    setTimeout(() => progress.classList.remove('active'), 300);
  });
}

document.addEventListener('DOMContentLoaded', function () {
  compibotInitToast();
});

document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById('scan-form');
  if (!form) return;

  const scanTypeHidden = document.getElementById('scan-type-hidden');
  const submitButton = form.querySelector('.btn-scan');
  const scanSpinner = document.getElementById('compibot-scan-spinner');

  form.addEventListener('submit', function (e) {
    e.preventDefault();

    const selectedTypes = [];
    const pages = document.getElementById('scan-pages');
    const posts = document.getElementById('scan-posts');
    const woo = document.getElementById('scan-woocommerce');

    if (pages && pages.checked) selectedTypes.push('pages');
    if (posts && posts.checked) selectedTypes.push('posts');
    if (woo && woo.checked) selectedTypes.push('woocommerce');

    if (scanTypeHidden) {
      scanTypeHidden.value = JSON.stringify(selectedTypes);
    }

    if (submitButton && scanSpinner) {
      submitButton.style.display = 'none';
      scanSpinner.style.display = 'inline-block';
    }

    setTimeout(() => form.submit(), 2000);
  });
});


function mostrarSpinner() {
    let spinner = document.getElementById('compibot-scan-spinner');

    if (!spinner) {
        spinner = document.createElement('span');
        spinner.id = 'compibot-scan-spinner';
        spinner.className = 'compibot-spinner-loader';
        spinner.style.display = 'inline-block';

        // Insertamos el spinner después del botón de escaeo
        const botonEscaneo = document.querySelector("#scan-form button[type='submit']");
        if (botonEscaneo) {
            botonEscaneo.insertAdjacentElement('afterend', spinner);
        }
    }

    return spinner;
}

function ocultarSpinner() {
    const spinner = document.getElementById('compibot-scan-spinner');
    if (spinner) {
        spinner.style.display = "none"; // Ocultar spinner
    }
}

function mostrarIntroJs(scanned) {
    /*** ====== NUEVA FUNCIONALIDAD DE INTRO.JS ======= ***/
    const botonEscaneo = document.querySelector("#scan-form button[type='submit']"); // Botón de escaneo
    const checkboxesEscaneo = document.querySelectorAll(".scan-checkbox__trigger"); // Checkboxes correctos de escaneo
    const escaneoCompletado = scanned; // Estado del escaneo almacenado en la API
    // const escaneoCompletado = false;
    const escaneoCompletadoLocal = localStorage.getItem("compibot_escaneo_completado"); // Estado del escaneo almacenado en localStorage
    const introTutorial = introJs.tour(); // Inicializar Intro.js

    // Verificamos que los elementos están bien detectados antes de iniciar
    if (!botonEscaneo || checkboxesEscaneo.length === 0) {
        console.error("⚠️ Error: No se encontraron elementos de escaneo.");
        return;
    }


    // Función para inyectar el CSS SOLO CUANDO SE INICIE JS
    function addIntroJsStyles() {
        const style = document.createElement("style");
        style.id = "introjs-custom-styles";
        style.innerHTML = `
            /* Permitir interacción con el menú lateral de WordPress */
            #adminmenu, #adminmenuwrap, #adminmenuback {
                z-index: 10000 !important;
            }

            /* Ajustar la opacidad del fondo para que solo cubra el área del contenido */
            .introjs-overlay {
                background: rgba(0, 0, 0, 0.8) !important;
                z-index: 9999 !important;
                position: fixed !important;
                top: 0;
                left: var(--admin-menu-width, 160px) !important; /* Desplazar desde la izquierda */
                right: 0 !important; /* Mantiene el ancho completo sin afectar el adminmenu */
                height: 100vh;
            }
        `;
        document.head.appendChild(style);

        // Detectamos el ancho real del menu de WordPress y lo almacenamos en una variable CSS
        const adminMenu = document.getElementById("adminmenuback");
        if (adminMenu) {
            document.documentElement.style.setProperty("--admin-menu-width", `${adminMenu.offsetWidth}px`);
        }


    }

    function removeIntroJsStyles() {
        const style = document.getElementById("introjs-custom-styles");
        if (style) {
            style.remove();
        }
    }

    // Si el escaneo NO se ha completado, iniciamos Intro.js en "modal mode"
    if (!escaneoCompletado && !escaneoCompletadoLocal) {
        setTimeout(() => { // Pequeño retraso para asegurar carga completa
            introTutorial.setOptions({
                showStepNumbers: true, // Mostramos el número de pasos
                exitOnOverlayClick: false, // Bloquea clics fuera del modal
                // disableInteraction: true, // Bloquea la interacción en otros elementos
                overlayOpacity: 0.8,
                showBullets: false, // Quita los puntos de navegación
                showProgress: true, // Mostramos la barra de progreso
                doneLabel: "", // Elimina el botón "Done"
                nextLabel: "Siguiente", // Cambia "Next" por "Siguiente"
                prevLabel: "Anterior", // Cambia "Previous" por "Anterior"
                hidePrev: true, // Oculta "Previous"
                hideNext: true, // Oculta "Next"
                steps: [
                    {
                        intro: "¡Bienvenido a Compibot! Antes de poder usar el plugin, necesitamos realizar un escaneo de tu sitio web para detectar elementos importantes. ¡Vamos a empezar!",
                    },
                    {
                        element: ".scan-options", // Apunta a los checkboxes correctos
                        intro: "Paso 1.- Selecciona los elementos que quieres incluir en el escaneo.",
                        position: "bottom"
                    },
                    {
                        element: "#scan-form button[type='submit']", // Apunta al botón de escaneo
                        intro: "Paso 2.- Haz clic en 'Realizar escaneo' para comenzar el escaneo de su sitio.",
                        position: "bottom"
                    }
                ]
            });

            // Inyectamos el CSS
            addIntroJsStyles();


            // Evento para detectar clic en "Realizar escaneo"
            botonEscaneo.addEventListener("click", function () {
                
                // Insertamos el spinner
                const spinner = mostrarSpinner();
                spinner.style.display = "inline-block";

                localStorage.setItem("compibot_escaneo_completado", "true"); // Almacenar en localStorage

                // Simulación de escaneo (ajusta según tu lógica real)
                setTimeout(() => {
                    ocultarSpinner();                    

                    removeIntroJsStyles(); // Eliminar estilos de Intro.js
                    introTutorial.exit(); // Cerrar Intro.js
                }, 3000); // Simulación de escaneo
            }, { once: true }); // Se ejecuta solo una vez

            introTutorial.onexit(removeIntroJsStyles); // Eliminar estilos al salir

            // Iniciar Intro.js
            introTutorial.start();
        }, 5000); // Pequeño retraso para asegurar renderizado
    }
}


/*** ========== Función para comprobar los módulos contratados de manera dinámica ============ ***/
function updateModulesStatus(data) {
    // Obtenemos la lista de módulos activos desde la API
    const activeModules = data.addons || [];
    // Seleccionamos todas las tarjetas de módulos
    document.querySelectorAll('.module-card').forEach(moduleCard => {
        const moduleName = moduleCard.getAttribute("data-module"); // Nombre del módulo
        const statusElement = moduleCard.querySelector('.module-status'); // Elemento de estado
        const buttonElement = moduleCard.querySelector(".module-btn"); // Botón de "Activar mod"
        const footerElement = moduleCard.querySelector(".module-footer"); // Pie de módulo

        if (!statusElement) {
            console.warn(`⚠️ Elemento de estado no encontrado para el módulo: ${moduleName}`);
            return; // Si no hay SPAN, salimos del código
        }

        if (activeModules.includes(moduleName)) {
            // Si el módulo está activo en la API, marcamos como Activo
            statusElement.textContent = "Activo";
            statusElement.classList.add("active");
            statusElement.classList.remove("inactive");

            // Desactivamos el botón de "Activar mod" si está presente
            if (buttonElement) {
                buttonElement.style.display = "none";
            }

            // Aplicamos estilos dinámicos para centrar el estado si no hay botón
            if (footerElement) {
                footerElement.style.display = "flex";
                footerElement.style.justifyContent = "center";
                footerElement.style.alignItems = "center";
            }

        } else {
            // Si no está activo, lo dejamos como Inactivo
            statusElement.textContent = "Inactivo";
            statusElement.classList.add("inactive");
            statusElement.classList.remove("active");

            // Activamos el botón de "Activar mod" si está presente
            if (buttonElement) {
                buttonElement.style.display = "inline-block";
            }

            // Restablecemos el diseño del footer cuando el botón está presente
            if (footerElement) {
                footerElement.style.display = "flex";
                footerElement.style.justifyContent = "space-between"; // Botón a la izquierda, estado a la derecha
                footerElement.style.alignItems = "center";
            }
        }
    });
}
 

// Función que actualiza dinámicamente las opciones en la interfaz del usuario
// a partir de los datos obtenidos desde la API.
function renderOptions(prOptions) {
    // Recorremos la lista de opciones que recibimos como argumento
    prOptions.forEach(option => {
        
        // Iteramos sobre cada clave dentro de un objeto de opciones
        Object.keys(option).forEach(key => {

            /**
             * 🔹 DETECCIÓN DE CHECKBOXES 🔹
             * Buscamos claves con el formato: "pr_optionX"
             * Donde X es un número (Ejemplo: "pr_option1", "pr_option2", etc.)
             */
            const checkboxMatch = key.match(/^pr_option(\d+)$/); // Expresión regular para extraer número de la opción

            if (checkboxMatch) {
                const optionNumber = checkboxMatch[1]; // Extraemos el número de opción (Ejemplo: "2" en "pr_option2")

                /**
                 * 📌 Buscamos el checkbox en el HTML.
                 * Sabemos que los checkboxes en el módulo "Conducta Avanzada" siguen el formato:
                 * id="pr_optionX_mod1", por lo que construimos el ID de esta manera.
                 */
                const checkbox = document.getElementById(`pr_option${optionNumber}_mod1`);

                if (checkbox) {
                    // Si el checkbox existe, actualizamos su estado según la API (true = marcado, false = desmarcado)
                    checkbox.checked = !!option[key].value; // Convertimos el valor en booleano para evitar errores

                    /**
                     * 📌 Buscamos el `span` que contiene el texto de la opción
                     * - El checkbox está dentro de un `<label>` en la estructura HTML.
                     * - Dentro del `<label>`, hay un `<span>` con la clase `.scan-checkbox__text`.
                     * - Aquí es donde debemos cambiar el texto de la opción.
                     */
                    const labelText = checkbox.parentElement.querySelector('.scan-checkbox__text');
                    if (labelText) {
                        labelText.innerText = option[key].name; // Reemplazamos el texto con el valor recibido de la API
                    }
                } else {
                    // Si no se encuentra el checkbox en el HTML, mostramos una advertencia en la consola.
                    console.warn(`⚠️ No se encontró el checkbox para la clave: ${key}`);
                }
            }

            /**
             * 🔹 DETECCIÓN DE TEXTO PERSONALIZADO 🔹
             * Buscamos claves con el formato: "pr_custom_section"
             * Esto representa el textarea donde el usuario puede escribir instrucciones personalizadas.
             */
            if (key === "pr_custom_section") {
                // En este caso, sabemos que el textarea en el módulo tiene el ID "pr_custom_section_mod1"
                const customTextarea = document.getElementById("pr_custom_section_mod1");

                if (customTextarea) {
                    // Si encontramos el textarea, actualizamos su valor con el texto recibido de la API
                    customTextarea.value = option[key];
                } else {
                    // Si no se encuentra el textarea en el HTML, mostramos una advertencia en la consola.
                    console.warn(`⚠️ No se encontró el textarea para la clave: ${key}`);
                }
            }
        });
    });
}

var diasSeleccionados = [];


function updateHorarioSection(data) {

    /***   ================= CÓDIGO PARA ACTUALIZAR LOS DÍAS DE LA SEMANA =====================***/
    const botonesDias = document.querySelectorAll('.dias-semana button');
    const inputDiasSemana = document.getElementById('dias_semana_input');

    if (botonesDias.length && inputDiasSemana) {
        // Lo primero, desmarcamos todos los días
        botonesDias.forEach(boton => {
            boton.classList.remove("seleccionado");
        }); // Asegurarse de que es la clave correcta

        // Luego, activamos los días que están en el array que recibimos de "data.dias_semanas"
        data.dias_semana.forEach(dia => {
            const botonDia = document.querySelector(`.dias-semana button[data-dia="${dia}"]`);
            if (botonDia) {
                botonDia.classList.add("seleccionado");
                diasSeleccionados.push(dia);
            }
        });

        // Actualizamos el input oculto con los días seleccionados
        inputDiasSemana.value = data.dias_semana.join(",");
    }

    /***   ================= CÓDIGO PARA ACTUALIZAR EL HORARIO DE ACTIVIDAD =====================***/
    const inputHorarioInicio = document.getElementById('horario_inicio');
    const inputHorarioFin = document.getElementById('horario_fin');

    if (inputHorarioInicio && inputHorarioFin) {
        inputHorarioInicio.value = data.horas[0] || "00:00";
        inputHorarioFin.value = data.horas[1] || "23:59";
    }

    /***   ================= CÓDIGO PARA ACTUALIZAR LA ACCIÓN FUERA DE HORARIO =====================***/
    const checkboxOcultar = document.querySelector('input[name="accion_horario"][value="hidden"]');
    const checkboxMensaje = document.querySelector('input[name="accion_horario"][value="show_message"]');
    const mensajeContainer = document.querySelector(".mensaje-horario-container");
    const inputMensaje = document.getElementById('mensaje_fuera_horario');

    if (checkboxOcultar && checkboxMensaje && mensajeContainer && inputMensaje) {
        // Restabnlecemos los checkboxes
        checkboxOcultar.checked = false;
        checkboxMensaje.checked = false;
        mensajeContainer.style.display = "none";

        // Verificamos la acción seleccionada y marcamos la opción correspondiente
        if (data.sch_action === "hidden") {
            checkboxOcultar.checked = true;
        } else if (data.sch_action === "show_message") {
            checkboxMensaje.checked = true;
            mensajeContainer.style.display = "block";
        }

        // Actualizamos el mensaje si este se encuentra definido
        inputMensaje.value = data.sch_message || "";
    }

}

function updateComportamientoModule(data) {
    const estadoTexto = document.getElementById('estado-texto');
    const toggleBtn = document.getElementById('toggle-estado');
    const inputEnabled = document.getElementById('modulo-enabled'); // Input oculto para el estado del módulo

    if (!estadoTexto || !toggleBtn || !inputEnabled) {
        return;
    }

    const thinkingActivo = !!data.thinking; // Convertimos a booleano

    if (thinkingActivo) {
        estadoTexto.textContent = "Activo";
        estadoTexto.classList.remove("inactivo");
        estadoTexto.classList.add("activo");

        toggleBtn.textContent = "Desactivar módulo";
        toggleBtn.classList.remove("boton-activar");
        toggleBtn.classList.add("boton-desactivar");

        inputEnabled.value = "1";
    } else {
        estadoTexto.textContent = "Inactivo";
        estadoTexto.classList.remove("activo");
        estadoTexto.classList.add("inactivo");

        toggleBtn.textContent = "Activar módulo";
        toggleBtn.classList.remove("boton-desactivar");
        toggleBtn.classList.add("boton-activar");

        inputEnabled.value = "0";
    }
}

function updateCharCount(textarea, maxChars = 1000, charCounter) {
    let currentLength = textarea.value.length;

    // Evita que se escriban más de 1000 caracteres
    if (currentLength > maxChars) {
        textarea.value = textarea.value.substring(0, maxChars); // Recorta el texto al máximo permitido
        currentLength = maxChars; // Fijamos el valor del contador al máximo
    }

    // Actualiza el contador con los caracteres actuales
    charCounter.innerText = `${currentLength}/${maxChars}`;
}


function updateConfigSection(data) {
    // Definimos 4 constantes, que son los 4 elementos que queremos modificar
    const nombreCabecera = document.getElementById('compibot-site-name');
    const nombreBot = document.getElementById('compibot-bot-name');
    const mensajeBienvenida = document.getElementById('compibot-bot-bienvenida');
    const iconStyleRadios = document.querySelectorAll('input[name="compibot_icon_style"]');

    // Actualizamos el valor de cada elementos con los datos recibidos siempre que haya valor
    if (nombreCabecera) { nombreCabecera.value = data.site_name || ''; }
    if (nombreBot) { nombreBot.value = data.bot_name || ''; }

    if (mensajeBienvenida) { 
        mensajeBienvenida.value = data.mensaje_bienvenida || 'Hola, me llamo Compibot y estoy aquí para ayudarte, ¿Tienes alguna consulta o pregunta?';

        // Indicamos el máximo de caracteres
        const maxChars = 150;

        // Creamos el contador de caracteres
        const charCounter = document.createElement('small');
        charCounter.style.marginTop = "5px";
        charCounter.style.color= "#666";
        charCounter.innerText = `0/${maxChars}`; // Contador inicial

        // Insertamos el contador justo después del textarea
        mensajeBienvenida.parentNode.appendChild(charCounter);

        // Llamamos a la función inmediatamente para reflejar el contenido inicial de caracteres
        setTimeout(() => {
            updateCharCount(mensajeBienvenida, maxChars, charCounter);
        }, 300);

        // Evento para actualizar el contador cuando el usuario escriba
        mensajeBienvenida.addEventListener("input", () => updateCharCount(mensajeBienvenida, maxChars, charCounter));
    }


    if (data.color) {
        iconStyleRadios.forEach(radio => {
            radio.checked = (radio.value === data.color);
        });
    } else {
        // Si no hay valor, marcamos default por defecto
        document.querySelector('input[name="compibot_icon_style"][value="default"]').checked = true;
    }
}

function updateInfoSection(data){
        const visitorCount = document.getElementById('visitor-count');

        if (visitorCount) { 
            // A tener en cuenta: En JS 0 es False
            if (data.total_visits_month !== undefined  && data.total_visits_month !== null) {
                visitorCount.innerText = data.total_visits_month ||  '0'; 
                animateNumber(0,data.total_visits_month,visitorCount);
            } else {
                visitorCount.innerText = '0';
            }
         }

        const mediaVisitors = document.getElementById('media-visitors');

        if (mediaVisitors) {
        mediaVisitors.innerText = 
            (data.visitors_percentage_change !== undefined && data.visitors_percentage_change !== null) 
            ? data.visitors_percentage_change + '%' 
            : '0%';
}

        const chattersCount = document.getElementById('chatters-count');

        if (chattersCount) { 
            if (data.total_chats_month !== undefined && data.total_chats_month !== null) {
                chattersCount.innerText = data.total_chats_month || '0';
                animateNumber(0,data.total_chats_month,chattersCount);
            } else {
                chattersCount.innerText = '0';
            }
        }

        const mediaChatters = document.getElementById('media-chatters');

        if (mediaChatters) {
            mediaChatters.innerText = 
                (data.chatters_percentage_change !== undefined && data.chatters_percentage_change !== null) 
                ? data.chatters_percentage_change + '%' 
                : '0%';
        }

        const visitorArrowIndicator = document.getElementById('visitors_info_card');
        
        if (mediaVisitors) {
            updateArrowIndicator(data.visitors_percentage_change, visitorArrowIndicator,'vertical');
        }

        const chatterArrowIndicator = document.getElementById('chatters_info_card');

        if (mediaChatters) {
            updateArrowIndicator(data.chatters_percentage_change,chatterArrowIndicator,'diagonal');

        }

        const visitorCompare = document.querySelector('.info-box:nth-child(1) .info-right small');

        if (visitorCompare) { visitorCompare.innerText = data.visitor_compare; }

        const chatterCompare = document.querySelector('.info-box:nth-child(2) .info-right small');

        if (chatterCompare) { chatterCompare.innerText = data.chatter_compare; }
        
        createConversionChart(data);
        // createDonutChart(data);
        // createBarGraph(data);
    }

function formatMarkdown(){
    const md = window.markdownit({
        html: true,
        linkify: true,
        breaks: true
    });
    const markdownElements = document.querySelectorAll('.bot-output-markdown');

    markdownElements.forEach(element => {
        // Obtener el texto original (Markdown)
        const markdownText = element.textContent;

        // Procesar con Markdown-it y generar HTML
        const htmlContent = md.render(markdownText);

        // Reemplazar el contenido del elemento con el HTML formateado
        element.innerHTML = htmlContent;
    });
}

jQuery(document).ready(function($) {
    // Función para cargar la tabla con un intervalo específico
    let currentPage = 1; // Página inicial
    var intervalo = $('#time-range').val();
    var order_array = '';

    
    function addFiltersToTable() {
        var filterableFields = document.querySelectorAll('.filterable-field');

        filterableFields.forEach(field => {
            field.innerHTML = field.innerText + '<i style="margin-left:5px; cursor: pointer;" class="fa-solid fa-arrow-down-wide-short estimate-order"></i>';
            field.addEventListener('click', function(){
                elementOrderField = this.dataset.order;
                elementOrderCriteria = this.dataset.orderCriteria;

                const iconElement = this.querySelector('.estimate-order');
            //     currentOrder = (currentOrder === 'ASC') ? 'DESC' : 'ASC';
                if (elementOrderCriteria === 'DESC') {
                    iconElement.classList.remove('fa-solid fa-arrow-down-wide-short');
                    iconElement.classList.add('fa-sort-amount-up-alt');
                    this.dataset.orderCriteria = 'ASC';
                } else {
                    iconElement.classList.remove('fa-sort-amount-up-alt');
                    iconElement.classList.add('fa-solid fa-arrow-down-wide-short');
                    this.dataset.orderCriteria = 'DESC';
                }
                //TODO: Añadir el orden 'ASC' o 'DESC' al campo de orden
                // order_array = 'estimacion ' + currentOrder;
                order_array = elementOrderField;
                loadConversations(currentPage);
            });
        });

        // Add event listener for select-column-sort change
        var selectColumnSort = document.getElementById('select-column-sort');
        selectColumnSort.addEventListener('change', function() {
            var selectedOption = selectColumnSort.options[selectColumnSort.selectedIndex];
            elementOrderField = selectedOption.value;
            elementOrderCriteria = 'DESC';

            // TODO: Añadir el orden 'ASC' o 'DESC' al campo de orden
            order_array = elementOrderField;
            loadConversations(currentPage);
        });
    }

    addFiltersToTable();

    function loadConversations(page) {

        intervalo = $('#time-range').val();
        let compibot_load_nonce = compibotData.nonce_update_conversations_action;
        $.ajax({
            url: ajaxurl, // `ajaxurl` es la URL predeterminada en WordPress para AJAX
            method: 'POST',
            data: {
                action: 'update_conversations', // Acción que se enviará al servidor
                intervalo: intervalo,          // El valor del intervalo seleccionado
                page: page,
                order_array: order_array,
                compibot_update_conversations_nonce: compibot_load_nonce
            },
            success: function(response) {
                $('#conversation-table-elements tbody').empty(); 
                $('#conversation-table .pagination').remove(); 
                $('#conversation-table #empty_conversations').remove(); 

                if (response.trim().startsWith('<p id="empty_conversations">')) {
                    $('#conversation-table').append(response);
                } else {
                    
                    $('#conversation-table-elements').append(response);

                    
                    var paginationHTML = '';
                    var paginationRegex = /<div class="pagination"[^>]*>([\s\S]*?)<\/div>/;
                    var match = response.match(paginationRegex);

                    if (match) {
                        paginationHTML = match[0]; 
                    }


                    // Añadir la paginación al contenedor de paginación
                    if (paginationHTML) {
                        $('#conversation-table').append(paginationHTML); // Asegúrate de tener este contenedor en tu HTML
                    }
                }
                var colspan = document.querySelectorAll('th:not([style*="display: none"])').length;

                var openConversationRow = document.querySelector('#open-conversation-row');
                if (openConversationRow) {
                    openConversationRow.setAttribute('colspan',colspan);
                } else {
                    console.warn("⚠️ No se encontró #open-conversation-row en el DOM.");
                }

                formatMarkdown(); 
                currentPage = page; 
            },
            error: function() {
                alert('Hubo un error al cargar las conversaciones.');
            }
        });
    }

    function loadInfoSection(month,year){
        let compibot_info_nonce = compibotData.nonce_compibot_update_info_section_action;
        $.ajax({
            url: ajaxurl, // `ajaxurl` es la URL predeterminada en WordPress para AJAX
            method: 'POST',
            data: {
                action: 'update_info_section', // Acción que se enviará al servidor
                month: month,
                year: year,
                compibot_update_info_section_nonce: compibot_info_nonce
            },
            success: function(response) {
                // Actualizar las cards con la información
                updateInfoSection(response);
            },
            error: function() {
                alert('Hubo un error al cargar la información de la fecha seleccionada.');
            }
        });
    }

    // Función para pasar el valor de totalViewed al  backend
    window.saveTotalViewed = function(totalViewed) {
        let compibot_info_nonce = compibotData.nonce_compibot_save_total_viewed_action;

        $.ajax({
            url: ajaxurl, // `ajaxurl` es la URL predeterminada en WordPress para AJAX
            method: 'POST',
            data: {
                action: 'save_total_viewed', // Acción que se enviará al servidor
                total_viewed: totalViewed,
                compibot_save_total_viewed_nonce: compibot_info_nonce
            },
            success: function(response) {
                if (response.success) {
                } else {
                    console.error('Hubo un error al guardar el valor de totalViewed');
                }
            },
            error: function() {
                console.error('Hubo un error al guardar el valor de totalViewed');
            }
        });
    };

    // Cargar las conversaciones por defecto cuando la página se cargue
    // var intervalo = $('#time-range').val(); // Obtener el valor inicial seleccionado
    loadConversations(currentPage);

    // Función para cambiar de página
    window.changePage = function(page) {
        // var intervalo = $('#time-range').val();
        loadConversations(page);
    };

    // Detectar el cambio de mes en el select
    $('#currentYearSelect').change(function() {
        var month = $('#currentMonthSelect').val(); 
        var year = $('#currentYearSelect').val();
        loadInfoSection(month,year); // Recargar la tabla
    });

    // Detectar el cambio de mes en el select
    $('#currentMonthSelect').change(function() {
        var month = $('#currentMonthSelect').val(); 
        var year = $('#currentYearSelect').val();
        loadInfoSection(month,year); // Recargar la tabla
    });

    // Detectar el clic en el botón "Refrescar"
    $('#refresh-button').click(function() {
        // var intervalo = $('#time-range').val(); // Obtener el valor seleccionado
        currentPage = 1; // Reiniciar a la primera página
        loadConversations(currentPage); // Recargar la tabla
    });

    // Detectar el cambio del selector
    $('#time-range').change(function() {
        // var intervalo = $(this).val(); // Obtener el valor seleccionado
        currentPage = 1;
        loadConversations(currentPage);  // Recargar la tabla con el nuevo intervalo
    });

    // Mostrar/Ocultar el popup al pasar el ratón o hacer clic
    const infoIcon = document.getElementById('conversion-info-icon');
    const popup = document.getElementById('conversion-popup');

    infoIcon.addEventListener('mouseenter', () => {
        popup.style.display = 'block';
    });

    infoIcon.addEventListener('mouseleave', () => {
        popup.style.display = 'none';
    });
    
});






function toggleConversation(conversationIndex) {
    var popupRow = document.getElementById('popup-row-' + conversationIndex);
    var button = document.getElementById('toggle-button-' + conversationIndex);
    var isVisible = popupRow.style.display === 'table-row';

    if (isVisible) {
        popupRow.style.display = 'none';
        button.innerHTML = '<i class="fa-solid fa-eye"></i> Abrir conversación';
    } else {
        popupRow.style.display = 'table-row';
        button.innerHTML = '<i class="fa-solid fa-eye-slash"></i> Cerrar conversación';
    }
}

function closeWelcomeMessage() {
    var welcomeMessage = document.getElementById('welcome-content');
    welcomeMessage.style.display = 'none';
}

function showLoginForm() {
    var welcomeCard = document.getElementById('welcome-card');
    var loginFormContainer = document.getElementById('login-form-container');
    welcomeCard.style.display = 'none';
    loginFormContainer.style.display = 'block';

}

function animateNumber(from, to, element) {
    let start = from;
    let end = to;
    let range = end - start;
    let current = start;

    // Determinamos el punto donde comienza la desaceleración
    let slowdownPoint = Math.max(end - Math.floor(end * 0.1), start); // 10% del total de visitantes como punto de desaceleración

    // Ajustamos el incremento inicial
    let increment = range > 1000 ? Math.ceil(range / 100) : (range > 100 ? 10 : 1);
    
    const animate = () => {
        if (current !== end) {
            // Calculamos la distancia restante
            let remaining = Math.abs(end - current);
            
            // Si estamos en los últimos números, ajustamos el incremento
            if (current >= slowdownPoint) {
                increment = Math.max(1, Math.floor(remaining / 10));
            }

            // Aumentamos o disminuimos según el rango
            current += increment * (end > start ? 1 : -1);

            // Nos aseguramos de no pasarnos del objetivo
            if ((end > start && current > end) || (end < start && current < end)) {
                current = end;
            }

            element.innerText = current;

            // Ajustamos el tiempo de espera para la desaceleración
            let delay = current >= slowdownPoint ? 
                Math.max(10, Math.floor(50 - remaining)) : // Desaceleración progresiva
                Math.min(50, Math.max(10, Math.floor(1000 / Math.abs(range)))); // Velocidad inicial

            setTimeout(animate, delay);
        }
    };
    animate();
}

function safeDecodeURIComponent(value) {
  if (value == null) return "";
  value = String(value);
 
  // Si NO parece URL-encoded, no intentes decodificar
  if (!/%[0-9A-Fa-f]{2}/.test(value)) return value;
 
  try {
    return decodeURIComponent(value);
  } catch (e) {
    return value; // fallback: devuelve tal cual
  }
}

document.addEventListener("DOMContentLoaded", function () {


    var contenedor = document.getElementById("contenedor-modulos");

    // Si ya no existen globals (porque quitamos el <script>), leer desde data-*
    if (typeof modulosActivos !== "object" || modulosActivos === null) {
    try {
        const raw = contenedor ? contenedor.getAttribute("data-modulos-activos") : null;
        modulosActivos = raw ? JSON.parse(raw) : {};
    } catch (e) {
        modulosActivos = {};
    }
    }

    if (typeof claseModuloContenedor !== "string" || !claseModuloContenedor) {
    claseModuloContenedor = contenedor ? (contenedor.getAttribute("data-clase-contenedor") || "") : "";
    }


    if (!contenedor || typeof modulosActivos !== "object") {
        console.error("⚠️ No se pudo cargar la configuración de los módulos.");
        return;
    }

    // Aplicar la clase del contenedor según la cantidad de módulos
    contenedor.classList.add(claseModuloContenedor);

    var html = "";

    Object.keys(modulosActivos).forEach(function (clave) {
        var modulo = modulosActivos[clave];

        //console.log("TIT:", modulo.titulo);
        //console.log("DES:", modulo.descripcion);
        //console.log("CON:", modulo.contenido);

        // Decodificar caracteres especiales
        var tituloModulo      = safeDecodeURIComponent(modulo.titulo);
        var descripcionModulo = safeDecodeURIComponent(modulo.descripcion);
        var contenidoModulo   = safeDecodeURIComponent(modulo.contenido);


        html += `
            <div class="tarjeta-modulo">
                <h2 class="titulo-modulo">${tituloModulo}</h2>
                <p>${descripcionModulo}</p>
                <div class="contenido-modulo">
                    ${contenidoModulo}
                </div>
            </div>
        `;
    });

    contenedor.innerHTML = html;

    /*** ========== Código para modificar el estado del botón y el estado del módulo en Razonamiento Avanzado ================ ***/
    const estadoTexto = document.getElementById('estado-texto');
    const toggleBtn = document.getElementById('toggle-estado');
    const inputEnabled = document.getElementById('modulo-enabled'); // Input oculto para el estado del módulo

    if (estadoTexto && toggleBtn && inputEnabled) {
        toggleBtn.addEventListener('click', function () {
            // Revisamos si se pulsa en el evento del botón
            if (estadoTexto.classList.contains("activo")) {
                // Si el estado es "Activo", cambiamos a "Inactivo"
                estadoTexto.textContent = "Inactivo";
                estadoTexto.classList.remove("activo");
                estadoTexto.classList.add("inactivo");
                // Cambiamos el texto y la clase del botón
                toggleBtn.textContent = "Activar módulo";
                toggleBtn.classList.remove("boton-desactivar");
                toggleBtn.classList.add("boton-activar");

                inputEnabled.value = "0"; // Cambiamos el valor del input a 0 (Inactivo)
            } else {
                // Si el estado es "Inactivo", cambiamos a "Activo"
                estadoTexto.textContent = "Activo";
                estadoTexto.classList.remove("inactivo");
                estadoTexto.classList.add("activo");
                // Cambiamos el texto y la clase del botón
                toggleBtn.textContent = "Desactivar módulo";
                toggleBtn.classList.remove("boton-activar");
                toggleBtn.classList.add("boton-desactivar");

                inputEnabled.value = "1"; // Cambiamos el valor del input a 1 (Activo)
            }
        });
    }



    // Comprobación de los 2MB de límite de carga para la imagen
    document.getElementById('compibot-icon').addEventListener('change', function(event) {
        const file = event.target.files[0];

        if (file) {
            // Mostrar nombre del archivo
            document.getElementById('file-name').textContent = file.name;

            // Vista previa de la imagen
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('compibot-icon-preview');
                preview.src = e.target.result;
                preview.style.display = "block"; // Mostrar imagen
            };
            reader.readAsDataURL(file);
        } else {
            document.getElementById('file-name').textContent = "Máx. 5MB, formatos: JPG, PNG, GIF";
            document.getElementById('compibot-icon-preview').style.display = "none";
        }
    });

    const fileUploadContainer = document.querySelector(".file-upload-container");
    const fileInput = document.getElementById("compibot-icon");
    const fileNameSpan = document.getElementById("file-name");
    const filePreview = document.getElementById("compibot-icon-preview");

    // Al hacer clic en la caja, se abre el explorador de archivos
    fileUploadContainer.addEventListener("click", function () {
        fileInput.click();
    });

    // Cuando se selecciona un archivo, actualizar el nombre y la vista previa
    fileInput.addEventListener("change", function (event) {
        const file = event.target.files[0];

        if (file) {
            // Mostrar nombre del archivo
            fileNameSpan.textContent = file.name;

            // Vista previa de la imagen
            const reader = new FileReader();
            reader.onload = function (e) {
                filePreview.src = e.target.result;
                filePreview.style.display = "block"; // Mostrar imagen
            };
            reader.readAsDataURL(file);
        } else {
            fileNameSpan.textContent = "Máx. 5MB, formatos: JPG, PNG, GIF";
            filePreview.style.display = "none";
        }
    });

    // Calculate the percentage of KB scannedç
    const kbScanned = Number(compibotData.kbScanned) || 0;

    //Ensure the plan value is not zero to avoid division by zero errors
    const percentage = compibotData.kbPlan ? (kbScanned / compibotData.kbPlan) * 100 : 0;

    //Update the progress bar width and text content
    const progressBar = document.getElementById('kb-progress-bar');
    const progressText = document.getElementById('kb-progress-text');

    // progressBar.style.width = percentage + "%";
    progressText.textContent = `${kbScanned} KB`;



    /*** =========== Código para abrir y cerrar el modal ================= ***/

    const modal = document.getElementById("compibot-scan-modal");
    const openModal = document.getElementById("compibot-open-modal");
    const closeModal = document.querySelector(".compibot-close-modal");
    const scanResults = document.getElementById("compibot-scan-results");

    // Definimos un valor por defecto para "order" en la primera carga
    let order = "page";


    // Miramos el evento de ordenación para recargar los datos con la opción seleccionada
    document.getElementById("compibot-order").addEventListener("change", function () {
        order = this.value;
        loadScannedItems(1, order);
    });

    function loadScannedItems(page = 1, orderBy = "page") {

        // Mostramos un mensaje de carga antes de la llamada AJAX
        scanResults.innerHTML = `
            <tr class="skeleton-loader"><td><div class="skeleton-box"></div></td><td><div class="skeleton-box"></div></td><td><div class="skeleton-box"></div></td></tr>
            <tr class="skeleton-loader"><td><div class="skeleton-box"></div></td><td><div class="skeleton-box"></div></td><td><div class="skeleton-box"></div></td></tr>
            <tr class="skeleton-loader"><td><div class="skeleton-box"></div></td><td><div class="skeleton-box"></div></td><td><div class="skeleton-box"></div></td></tr>
        `;

        fetch(ajaxurl, {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: `action=compibot_get_scanned_items&page=${page}&orderBy=${orderBy}&nonce_compibot_get_scanned_items=${compibotData.nonce_compibot_get_scanned_items}` // Parámetros de la petición

        })
        
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                scanResults.innerHTML = ""; // Limpiar la tabla
                data.data.items.forEach(item => {
                    const row = `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.title}</td>
                            <td><a href="${item.url}" target="_blank" class="go-link"><i class="fa-sign-out-alt"></i> Ir</a></td>
                        </tr>
                    `;
                    scanResults.innerHTML += row;
                });

                // Generar paginación
                generatePagination(data.data.total_pages, data.data.current_page);
            }
        })
        .catch(error => {
            // En caso de error, lanzamos mensaje indicandolo y botón para intentar de nuevo
            console.error("Error al obtener los elementos:", error);

            // Limpiamos la tabla antes de mostrar el error
            scanResults.innerHTML = "";

            // Creamos el mensaje de error de manera dinámica
            const errorMessage = document.createElement("div");
            errorMessage.classList.add("compibot-error-message");
            errorMessage.innerHTML = `
                <p>⚠️ <strong>Error al cargar los datos.</strong> Intenta de nuevo.</p>
                <button id="retry-load" class="retry-button">🔄 Reintentar</button>
            `;

            // Insertamos el mensaje  en la tabla
            scanResults.appendChild(errorMessage);

            // Agregamos un evento al botón de reintentar
            document.getElementById("retry-load").addEventListener("click", () => {
                loadScannedItems(page, order);
            });

            // console.error("Error al obtener los elementos:", error);
            // scanResults.innerHTML = `
            //     <tr>
            //         <td colspan="3" style="text-align: center; font-weight: bold; padding: 20px; color: red;">
            //             ⚠️ Error al cargar los datos. Intenta de nuevo.
            //         </td>
            //     </tr>
            // `;
        });
    }

    function generatePagination(totalPages, currentPage) {
    
        const paginationContainer = document.getElementById("compibot-pagination");
        if (!paginationContainer) {
            console.error("⚠️ Error: No se encontró el div de paginación en el DOM");
            return;
        }
    
        paginationContainer.innerHTML = "";
    
        // Función segura para crear botones de paginación
        function createButton(label, page, options = {}) {
            const btn = document.createElement("button");
            btn.textContent = label;
            btn.classList.add("pagination-btn");
    
            if (options.active) btn.classList.add("active");
            if (options.disabled) {
                btn.disabled = true;
                btn.classList.add("disabled");
            } else {
                btn.addEventListener("click", () => {
                    loadScannedItems(page); // Asegúrate de que esta función exista globalmente
                });
            }
            return btn;
        }
    
        // Función segura para crear puntos suspensivos
        function createDots() {
            const span = document.createElement("span");
            span.textContent = "…";
            span.classList.add("pagination-dots");
            return span;
        }
    
        if (totalPages > 1) {
            // Anterior
            if (currentPage > 1) {
                paginationContainer.appendChild(createButton("Anterior", currentPage - 1));
            }
    
            // Primera página
            paginationContainer.appendChild(createButton("1", 1, { active: currentPage === 1 }));
    
            // Puntos suspensivos antes
            if (currentPage > 4) {
                paginationContainer.appendChild(createDots());
            }
    
            // Rango de páginas alrededor de la actual
            const start = Math.max(2, currentPage - 2);
            const end = Math.min(totalPages - 1, currentPage + 2);
            for (let i = start; i <= end; i++) {
                paginationContainer.appendChild(createButton(i.toString(), i, { active: i === currentPage }));
            }
    
            // Puntos suspensivos después
            if (currentPage < totalPages - 3) {
                paginationContainer.appendChild(createDots());
            }
    
            // Última página
            if (totalPages > 1) {
                paginationContainer.appendChild(
                    createButton(totalPages.toString(), totalPages, { active: currentPage === totalPages })
                );
            }
    
            // Siguiente
            if (currentPage < totalPages) {
                paginationContainer.appendChild(createButton("Siguiente", currentPage + 1));
            }
    
            paginationContainer.style.display = "block";
        } else {
            paginationContainer.style.display = "none";
        }
    }
    // Abrir modal y cargar la primera página
    openModal.addEventListener("click", function () {
        modal.classList.add("show");
        loadScannedItems(1);
    });

    // Cerrar modal
    closeModal.addEventListener("click", function () {
        modal.classList.remove("show");
    });

    // Cerrar modal al hacer clic fuera de él
    window.addEventListener("click", function (event) {
        if (event.target === modal) {
            modal.classList.remove("show");
        }
    });
    





    /*** ================= DÍAS DE LA SEMANA ================= ***/
    const activarTodosBtn = document.getElementById("activar-todos");
    const desactivarTodosBtn = document.getElementById("desactivar-todos");
    const botonesDias = document.querySelectorAll('.dia');
    const diasSemanaInput = document.getElementById("dias_semana_input");

    
    // Función para actualizar el input oculto
    function actualizarInputDias() {
        diasSemanaInput.value = diasSeleccionados.join(",");
    }

    // Manejo de clic en cada botón de día
    botonesDias.forEach(boton => {
        boton.addEventListener("click", function () {
            const dia = this.getAttribute("data-dia");

            if (diasSeleccionados.includes(dia)) {
                // Si ya estaba seleccionado, lo quitamos
                diasSeleccionados = diasSeleccionados.filter(d => d !== dia);
                this.classList.remove("seleccionado");
            } else {
                // Si no estaba seleccionado, lo agregamos
                diasSeleccionados.push(dia);
                this.classList.add("seleccionado");
            }

            actualizarInputDias();
        });
    });

    if (activarTodosBtn) {
        // Activar todos
        activarTodosBtn.addEventListener("click", function (e) {
            e.preventDefault();
            diasSeleccionados = ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"];
            botonesDias.forEach(boton => boton.classList.add("seleccionado"));
            actualizarInputDias();
        });
    }

    if (desactivarTodosBtn) {
        // Desactivar todos
        desactivarTodosBtn.addEventListener("click", function (e) {
            e.preventDefault();
            diasSeleccionados = [];
            botonesDias.forEach(boton => boton.classList.remove("seleccionado"));
            actualizarInputDias();
        });
    }


    /*** ================= HORARIO DE ACTIVIDAD ================= ***/
    const aplicar24hBtn = document.getElementById("aplicar-24h");
    const horaInicio = document.getElementById("horario_inicio");
    const horaFin = document.getElementById("horario_fin");

    if (aplicar24hBtn) {
        aplicar24hBtn.addEventListener("click", function (e) {
            e.preventDefault();
            horaInicio.value = "00:00";
            horaFin.value = "23:59";
        });
    }


    /*** ================= ACCIÓN FUERA DE HORARIO ================= ***/
    const checkboxOcultar = document.querySelector('input[name="accion_horario"][value="hidden"]');
    const checkboxMensaje = document.querySelector('input[name="accion_horario"][value="show_message"]');
    const mensajeContainer = document.querySelector(".mensaje-horario-container");
    const inputMensaje = document.getElementById('mensaje_fuera_horario');

    function toggleCheckbox(event) {
        // Si el usuario selecciona una opción, desmarcamos la otra
        if (event.target === checkboxMensaje) {
            checkboxOcultar.checked = false;
            mensajeContainer.style.display = "block"; // Mostrar el mensaje si está activo
        } else if (event.target === checkboxOcultar) {
            checkboxMensaje.checked = false;
            mensajeContainer.style.display = "none"; // Ocultar el mensaje si se activa "No mostrar chatbot"
        }
    }

    // Verificar si los checkboxes existen antes de agregar eventos
    if (checkboxOcultar && checkboxMensaje) {
        checkboxOcultar.addEventListener("change", toggleCheckbox);
        checkboxMensaje.addEventListener("change", toggleCheckbox);
        
        // Estado inicial al cargar la página
        if (checkboxMensaje.checked) {
            mensajeContainer.style.display = "block";
        } else {
            mensajeContainer.style.display = "none";
        }
    }

    /*** ========= CONTADOR DE CARACTERES PARA EL MENSAJE DE FUERA DE HORARIO ============ ***/
    if (inputMensaje) {
        const maxChars = 2000;

        // Creamos y añadimos el contador de caracteres
        const charCounter = document.createElement('small');
        charCounter.style.marginTop = "5px";
        charCounter.style.color = "#666";
        charCounter.innerText = `0/${maxChars}`; // Contador inicial
        mensajeContainer.appendChild(charCounter);
        
        setTimeout(() => {
            updateCharCount(inputMensaje, maxChars, charCounter);
        }, 300);

        inputMensaje.addEventListener("input", () => updateCharCount(inputMensaje, maxChars, charCounter));
    }

    

    // Contador de caracteres para el textarea: pr_custom_section_mod1
    // Seleccionamos el textarea pr_custom_section_mod1
    const textarea = document.getElementById('pr_custom_section_mod1');

    // Verificamos que el text_area exista
    if (textarea) {
        
        // Indicamos el máximo de caracteres
        const maxChars = 1000;

        // Creamos el contador de caracteres
        const charCounter = document.createElement('small');
        charCounter.style.marginTop = "5px";
        charCounter.style.color= "#666";
        charCounter.innerText = `0/${maxChars}`; // Contador inicial

        // Insertamos el contador justo después del textarea
        textarea.parentNode.appendChild(charCounter);

        // Llamamos a la función inmediatamente para reflejar el contenido inicial de caracteres
        setTimeout(() => {
            updateCharCount(textarea, maxChars, charCounter);
        }, 300);
        

        // Evento para actualizar el contador cuando el usuario escriba
        textarea.addEventListener("input", () => updateCharCount(textarea, maxChars, charCounter));
            
    }





    const map = L.map('map', { scrollWheelZoom: false }).setView([40.463667, -3.74922], 3);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    const zoomMessage = document.createElement('div');
    zoomMessage.innerText = 'Pulsa "Ctrl" para hacer zoom';
    zoomMessage.style.position = 'absolute';
    zoomMessage.style.top = '10px';
    zoomMessage.style.right = '10px';
    zoomMessage.style.padding = '5px 10px';
    zoomMessage.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    zoomMessage.style.color = '#fff';
    zoomMessage.style.borderRadius = '5px';
    zoomMessage.style.fontSize = '12px';
    zoomMessage.style.zIndex = '1000';
    zoomMessage.style.display = 'none';
    const yearSelect = document.getElementById("currentYearSelect");
    
    const currentYear = new Date().getFullYear();
    const startYear = 2024; // Año inicial
    const endYear = currentYear;

    // Generar las opciones para el selector de años
    for (let year = startYear; year <= endYear; year++) {
        const option = document.createElement("option");
        option.value = year;
        option.textContent = year;
        if (year === currentYear) {
            option.selected = true; // Marca el año actual como seleccionado
        }
        yearSelect.appendChild(option);
    }


    const monthSelectElement = document.getElementById('currentMonthSelect');
    const currentDate = new Date();
    const monthName = new Intl.DateTimeFormat('es-ES', { month: 'long' }).format(currentDate);

    // Convierte el mes obtenido a minúsculas
    const formattedMonthName = monthName.toLowerCase(); 

    // Recorre las opciones y selecciona la opción correspondiente
    for (let option of monthSelectElement.options) {
        if (option.value === formattedMonthName) {
            option.selected = true;
            break;
        }
    }

    document.getElementById('map').appendChild(zoomMessage);

    map.getContainer().addEventListener('mouseenter', function () {
        zoomMessage.style.display = 'block';
    });

    map.getContainer().addEventListener('mouseleave', function () {
        zoomMessage.style.display = 'none';
    });

    let ctrlPressed = false;

    function disableZoom() { map.scrollWheelZoom.disable(); }
    function enableZoom() { map.scrollWheelZoom.enable(); }

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Control') {
            ctrlPressed = true;
            enableZoom();
        }
    });

    document.addEventListener('keyup', function (event) {

        if (event.key === 'Control') {
            ctrlPressed = false;
            disableZoom();
        }
    });

    map.on('focus', function() {
        if (!ctrlPressed) { disableZoom(); }
    });

    map.on('blur', function() { disableZoom(); });
    const style = document.createElement('style');

    style.textContent = `
        .custom-marker { width: 30px; height: 42px; display: block; }
        .custom-marker i { font-size: 20px; line-height: 1; color: inherit; }

    `;

    document.head.appendChild(style);
    const token = compibotData.token;

    fetch('https://panel.compibot.com/api/cms-status', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token
        }
    })

    .then(response => response.json())
    .then(data => {
        if (data.error && data.error === "Invalid authorization") {

            const elementsToReset = [
                document.getElementById('visitors-count'),
                document.getElementById('media-visitors'),
                document.getElementById('chatters-count'),
                document.getElementById('media-chatters'),
                document.querySelector('.info-box:nth-child(1) .info-right small'),
                document.querySelector('.info-box:nth-child(2) .info-right small')
            ];

            elementsToReset.forEach(element => {
                if (element) { element.innerText = '0'; }
            });

            const arrowIndicators = [
                document.querySelector('.info-box:nth-child(1) .arrow-indicator'),
                document.querySelector('.info-box:nth-child(2) .arrow-indicator')
            ];

            arrowIndicators.forEach(indicator => {
                if (indicator) { indicator.style.display = 'none'; }
            });

            return;
        }

        var totalViewed = data.total_viewed;

        // Llamamos a la función para pasar el vlor de totalViewed al backend
        saveTotalViewed(totalViewed);

        
        const addons = Array.isArray(data.addons) ? data.addons : [];
        // Mapear las columnas a los addons correspondientes
        const columnsMap = {
            "summary": ["Resumen", "Nombre", "Correo", "Teléfono"], // El addon 'summary' incluye estas columnas
            "satisfaccion": ["Intención"],
            "compra": ["Estimación"]
        };

        // Mostrar/ocultar columnas en función de los addons
        const toggleColumns = () => {
            const tableHeaders = document.querySelectorAll('#conversation-table-elements th');

            tableHeaders.forEach(th => {
                const columnText = th.innerText.trim(); // Extrae el texto de la cabecera

                // Excepción: La columna "Conversación" siempre se muestra
                if (columnText === "Conversación" || columnText === 'Fecha' || columnText === 'Estado') {
                    th.style.display = ""; // Asegurar que siempre sea visible
                    return;
                }

                let shouldShow = false;

                // Verificar si la columna está incluida en alguno de los addons activos
                Object.keys(columnsMap).forEach(addonKey => {
                    if (addons.includes(addonKey) && columnsMap[addonKey].includes(columnText)) {
                        shouldShow = true; // Mostrar si la columna pertenece a un addon activo
                    }
                });

                // Mostrar u ocultar la columna según corresponda
                th.style.display = shouldShow ? "" : "none";
            });
        };

        toggleColumns(); // Ejecutar la función
        // Actualiza el valor de "visible" y "site_position" en el HTML
        const compibotStatusCheckbox = document.getElementById('compibot-status');
        const chatLocationRight = document.getElementById('chat-location-right');
        const chatLocationLeft = document.getElementById('chat-location-left');
        const notifyConversationEndCheckbox = document.getElementById('notify_on_conversation_end');
        const notifyConversationStartCheckbox = document.getElementById('notify_on_conversation_start');

        // Actualiza el estado del checkbox de notificación al inicio de la conversación
        if (notifyConversationStartCheckbox) {
            notifyConversationStartCheckbox.checked = data.notify_on_conversation_start;
        }

        if (notifyConversationEndCheckbox) {
            notifyConversationEndCheckbox.checked = data.notify_on_conversation_end;
        }

        // Actualiza el estado del checkbox de visibilidad
        if (compibotStatusCheckbox) {
            compibotStatusCheckbox.checked = data.visible;
        }

        // Selecciona la posición del chat según el valor de "site_position"
        if (data.site_position === "right") {
            chatLocationRight.checked = true;
        } else if (data.site_position === "left") {
            chatLocationLeft.checked = true;
        }

        if (data.addons && Array.isArray(data.addons)) {
            saveAddonsToDatabase(data.addons, data.is_active);
        }

        updateInfoSection(data);

        updateConfigSection(data);

        updateModulesStatus(data);

        createConversionChart(data);
        

        // const modulosActivos = data.addons || [];
        // loadModules(modulosActivos);

        if (data.dias_semana) {
            updateHorarioSection(data);
        }

        // Comprobamos si el módulo de "Razonamiento avanzado" está activo para actualizar los datos
        if (data.addons && Array.isArray(data.addons) && data.addons.includes("thinking")) {
            updateComportamientoModule(data);
        }


        // Llama a la función para actualizar las opciones dinámicas
        if (data.pr_options) {
            renderOptions(data.pr_options);
        }

        const validVisitors = (data.visitor_geo || []).filter(visitor => visitor.latitude && visitor.longitude);
        const validChatters = (data.chatter_geo || []).filter(chatter => chatter.latitude && chatter.longitude);
        const allCoordinates = [...validVisitors, ...validChatters].map(visitor => [visitor.latitude, visitor.longitude]);

        if (allCoordinates.length > 0) {

            const bounds = new L.LatLngBounds(allCoordinates);
            map.fitBounds(bounds);

        }

        validVisitors.forEach(visitor => {

            const markerHtml = '<i class="fa-map-marker-alt" style="color: blue; font-size: 20px;"></i>';
            const markerIcon = L.divIcon({

                html: markerHtml,
                iconSize: [30, 42],
                iconAnchor: [15, 42],
                className: 'custom-marker'
            });

            L.marker([visitor.latitude, visitor.longitude], { icon: markerIcon })
                .addTo(map)
                .bindPopup(`<b>IP:</b> ${visitor.ip || 'N/A'}<br><b>País:</b> ${visitor.country || 'N/A'}<br><b>Ciudad:</b> ${visitor.city || 'N/A'}`);

        });

        validChatters.forEach(chatter => {

            const markerHtml = '<i class="fa-map-marker-alt" style="color: red; font-size: 20px;"></i>';
            const markerIcon = L.divIcon({
                html: markerHtml,
                iconSize: [30, 42],
                iconAnchor: [15, 42],
                className: 'custom-marker'

            });

            L.marker([chatter.latitude, chatter.longitude], { icon: markerIcon })
                .addTo(map)
                .bindPopup(`<b>IP:</b> ${chatter.ip || 'N/A'}<br><b>País:</b> ${chatter.country || 'N/A'}<br><b>Ciudad:</b> ${chatter.city || 'N/A'}`);

        });

        if (data.is_active != false) {
            mostrarIntroJs(data.scanned);
        }

    })
    .catch(error => console.error('Error al obtener los datos:', error));



     

});

function updateArrowIndicator(compareValue, indicatorElement, arrowType = 'vertical') {
    const change = parseFloat(compareValue);

    let span = indicatorElement.querySelector('span');
    let svg = indicatorElement.querySelector('svg');
    if (!svg) {
        svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('width', '16');
        svg.setAttribute('height', '16');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('fill', 'none');
        svg.setAttribute('stroke', 'currentColor');
        svg.setAttribute('stroke-width', '2');
        svg.setAttribute('stroke-linecap', 'round');
        svg.setAttribute('stroke-linejoin', 'round');
        indicatorElement.prepend(svg);
    }

    svg.innerHTML = ''; // Limpiar contenido anterior

    if (change > 0) {
        if (arrowType === 'vertical') {
            // Flecha hacia arriba vertical
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', '12');
            line.setAttribute('y1', '19');
            line.setAttribute('x2', '12');
            line.setAttribute('y2', '5');

            const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
            polyline.setAttribute('points', '5 12 12 5 19 12');

            svg.appendChild(line);
            svg.appendChild(polyline);
        } else if (arrowType === 'diagonal') {
            // Flecha diagonal hacia arriba
            const polyline1 = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
            polyline1.setAttribute('points', '23 6 13.5 15.5 8.5 10.5 1 18');

            const polyline2 = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
            polyline2.setAttribute('points', '17 6 23 6 23 12');

            svg.appendChild(polyline1);
            svg.appendChild(polyline2);
        }

        svg.style.stroke = '#4caf50'; // Verde
        span.style.color = '#4caf50';
    } else if (change < 0) {
        if (arrowType === 'vertical') {
            // Flecha hacia abajo vertical
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', '12');
            line.setAttribute('y1', '5');
            line.setAttribute('x2', '12');
            line.setAttribute('y2', '19');

            const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
            polyline.setAttribute('points', '19 12 12 19 5 12');

            svg.appendChild(line);
            svg.appendChild(polyline);
        } else if (arrowType === 'diagonal') {
            // Flecha diagonal hacia abajo (espejo de hacia arriba)
            const polyline1 = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
            polyline1.setAttribute('points', '23 18 13.5 8.5 8.5 13.5 1 6');

            const polyline2 = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
            polyline2.setAttribute('points', '17 18 23 18 23 12');

            svg.appendChild(polyline1);
            svg.appendChild(polyline2);
        }

        svg.style.stroke = '#f44336'; // Rojo
        span.style.color = '#f44336';
    } else {
        // Línea neutra
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', '5');
        line.setAttribute('y1', '12');
        line.setAttribute('x2', '19');
        line.setAttribute('y2', '12');

        svg.appendChild(line);
        svg.style.stroke = '#999999'; // Gris
        span.style.color = '#999999';
    }
}


function saveAddonsToDatabase(addons, is_active) {

    const addonsJSON = JSON.stringify(addons);
    let compibot_addons_nonce = compibotData.nonce_addons_action;
    fetch(ajaxurl, {
        method: 'POST',

        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },

        body: new URLSearchParams({
            'action': 'save_addons_to_db',
            'addons': addonsJSON,
            'is_active': is_active,
            'compibot_compibot_addons_nonce': compibot_addons_nonce
        })
    })

    .then(response => response.json())
    .catch(error => console.error('Error al realizar la solicitud AJAX:', error));

}

document.addEventListener("DOMContentLoaded", function () {

    
});


function handleBothFlows(conversationIndex) {
    // Ejecuta el flujo original (abrir el modal)
    toggleConversation(conversationIndex);

    // Ejecuta el nuevo flujo (llamada al endpoint)
    openConversation(conversationIndex);
}


// Prueba de envio de info en el PATCH
function openConversation(chatterId) {
    const token = compibotData.token;

    const header_authorization = 'Bearer ' + token;

    // Obtenemos el ID del chatter desde el atributo del botón
    const chatterIdElement = document.querySelector(`#toggle-button-${chatterId}`);
    const chatterIdValue = chatterIdElement ? chatterIdElement.getAttribute('data-chatter-id') : null;
    const viewed = chatterIdElement ? chatterIdElement.getAttribute('data-viewed') : null;

    if (!chatterIdValue) {
        console.error('El Id del chatter no está disponible');
        return;
    }

    if (viewed === '1') {
        return;
    }

    // Realizamos la solicitud PATCH
    fetch('https://panel.compibot.com/api/get-chat-data/', {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': header_authorization,
        },
        body: JSON.stringify({ id: chatterIdValue }),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Error al actualizar la conversación.');
        }
        return response.json();
    })
    .then(data => {

        chatterIdElement.setAttribute('data-viewed', '1');

    
    })
    .catch(error => {
        console.error('Error al abrir la conversación:', error);
        
    });
}

document.querySelectorAll('input[name="color_option"]').forEach(option => {
    option.addEventListener('change', function() {
        // Desmarcar todos los otros checkboxes
        document.querySelectorAll('input[name="color_option"]').forEach(cb => {
            if (cb !== this) {
                cb.checked = false;
            }
        });

        // Actualizar el input oculto con el valor seleccionado
        document.getElementById('compibot_color').value = this.checked ? this.value : '';
    });
});