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);
  });
});

const THEME_MODE_PRESET_PALETTES = {
    light: {
        title: '#36018D',
        text: '#1E1E1E',
        bubbleMeText: '#FFFFFF',
        background: '#FFFFFF',
        bubbleContact: '#FFFFFF',
        bubbleMe: '#4E1EFA',
        sendButton: '#01F49D',
        stopButton: '#E94F37',
    },
    dark: {
        title: '#00D88A',
        text: '#F5F7FF',
        bubbleMeText: '#FFFFFF',
        background: '#171B26',
        bubbleContact: '#2A3042',
        bubbleMe: '#4E1EFA',
        sendButton: '#00D88A',
        stopButton: '#FF6B57',
    },
};

function getThemeModeRadio(mode) {
    return document.querySelector(`input[name="compibot_theme_mode"][value="${mode}"]`);
}

function getSelectedThemeMode() {
    const selectedThemeMode = document.querySelector('input[name="compibot_theme_mode"]:checked');
    return selectedThemeMode ? selectedThemeMode.value : 'light';
}

function getCustomThemeColorInputs() {
    return {
        title: document.getElementById('custom_rgb_title'),
        text: document.getElementById('custom_rgb_text'),
        bubbleMeText: document.getElementById('custom_rgb_bubble_me_text'),
        background: document.getElementById('custom_rgb_background'),
        bubbleContact: document.getElementById('custom_rgb_bubble_contact'),
        bubbleMe: document.getElementById('custom_rgb_bubble_me'),
        sendButton: document.getElementById('custom_rgb_send_button'),
        stopButton: document.getElementById('custom_rgb_stop_button'),
    };
}

function applyThemePaletteToCustomInputs(palette) {
    const customThemeColorInputs = getCustomThemeColorInputs();

    if (customThemeColorInputs.title) {
        customThemeColorInputs.title.value = palette.title;
    }
    if (customThemeColorInputs.text) {
        customThemeColorInputs.text.value = palette.text;
    }
    if (customThemeColorInputs.bubbleMeText) {
        customThemeColorInputs.bubbleMeText.value = palette.bubbleMeText;
    }
    if (customThemeColorInputs.background) {
        customThemeColorInputs.background.value = palette.background;
    }
    if (customThemeColorInputs.bubbleContact) {
        customThemeColorInputs.bubbleContact.value = palette.bubbleContact;
    }
    if (customThemeColorInputs.bubbleMe) {
        customThemeColorInputs.bubbleMe.value = palette.bubbleMe;
    }
    if (customThemeColorInputs.sendButton) {
        customThemeColorInputs.sendButton.value = palette.sendButton;
    }
    if (customThemeColorInputs.stopButton) {
        customThemeColorInputs.stopButton.value = palette.stopButton;
    }
}

function getCurrentCustomThemePalette() {
    const customThemeColorInputs = getCustomThemeColorInputs();
    const fallbackPalette = THEME_MODE_PRESET_PALETTES.light;

    return {
        title: customThemeColorInputs.title && customThemeColorInputs.title.value ? customThemeColorInputs.title.value : fallbackPalette.title,
        text: customThemeColorInputs.text && customThemeColorInputs.text.value ? customThemeColorInputs.text.value : fallbackPalette.text,
        bubbleMeText: customThemeColorInputs.bubbleMeText && customThemeColorInputs.bubbleMeText.value ? customThemeColorInputs.bubbleMeText.value : fallbackPalette.bubbleMeText,
        background: customThemeColorInputs.background && customThemeColorInputs.background.value ? customThemeColorInputs.background.value : fallbackPalette.background,
        bubbleContact: customThemeColorInputs.bubbleContact && customThemeColorInputs.bubbleContact.value ? customThemeColorInputs.bubbleContact.value : fallbackPalette.bubbleContact,
        bubbleMe: customThemeColorInputs.bubbleMe && customThemeColorInputs.bubbleMe.value ? customThemeColorInputs.bubbleMe.value : fallbackPalette.bubbleMe,
        sendButton: customThemeColorInputs.sendButton && customThemeColorInputs.sendButton.value ? customThemeColorInputs.sendButton.value : fallbackPalette.sendButton,
        stopButton: customThemeColorInputs.stopButton && customThemeColorInputs.stopButton.value ? customThemeColorInputs.stopButton.value : fallbackPalette.stopButton,
    };
}

function applyPaletteToThemePreview(previewElement, palette) {
    if (!previewElement) {
        return;
    }

    previewElement.style.setProperty('--theme-preview-surface', palette.background);
    previewElement.style.setProperty('--theme-preview-title', palette.title);
    previewElement.style.setProperty('--theme-preview-contact', palette.bubbleContact);
    previewElement.style.setProperty('--theme-preview-contact-text', palette.text);
    previewElement.style.setProperty('--theme-preview-user', palette.bubbleMe);
    previewElement.style.setProperty('--theme-preview-user-text', palette.bubbleMeText);
    previewElement.style.setProperty('--theme-preview-send', palette.sendButton);
    previewElement.style.setProperty('--theme-preview-stop', palette.stopButton);
    previewElement.style.setProperty('--theme-preview-border', palette.bubbleContact);
}

function syncThemeModeCards() {
    const selectedThemeMode = getSelectedThemeMode();

    document.querySelectorAll('[data-theme-card]').forEach((card) => {
        const isSelected = card.dataset.themeCard === selectedThemeMode;
        const selectButton = card.querySelector('[data-theme-select]');

        card.classList.toggle('is-selected', isSelected);

        if (selectButton) {
            selectButton.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
        }
    });
}

function syncCustomThemeModePreview() {
    const customThemePreview = document.querySelector('[data-theme-preview="custom"]');
    applyPaletteToThemePreview(customThemePreview, getCurrentCustomThemePalette());
}

function syncCustomizationMode() {
    const customColorsWrapper = document.getElementById('custom-colors-wrapper');
    const customColorInputs = document.querySelectorAll(
        '#custom-colors-wrapper input[name="custom_rgb_title"], ' +
        '#custom-colors-wrapper input[name="custom_rgb_text"], ' +
        '#custom-colors-wrapper input[name="custom_rgb_bubble_me_text"], ' +
        '#custom-colors-wrapper input[name="custom_rgb_background"], ' +
        '#custom-colors-wrapper input[name="custom_rgb_bubble_contact"], ' +
        '#custom-colors-wrapper input[name="custom_rgb_bubble_me"], ' +
        '#custom-colors-wrapper input[name="custom_rgb_send_button"], ' +
        '#custom-colors-wrapper input[name="custom_rgb_stop_button"]'
    );

    if (!customColorsWrapper || !customColorInputs.length) {
        return;
    }

    const isCustomMode = getSelectedThemeMode() === 'custom';

    customColorsWrapper.hidden = !isCustomMode;
    customColorsWrapper.style.display = isCustomMode ? 'grid' : 'none';

    customColorInputs.forEach((input) => {
        input.disabled = !isCustomMode;
    });

    syncThemeModeCards();
    syncCustomThemeModePreview();
}

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

document.addEventListener('change', function (event) {
    if (event.target && event.target.matches('input[name="compibot_theme_mode"]')) {
        syncCustomizationMode();
    }
});

document.addEventListener('input', function (event) {
    if (event.target && event.target.closest('#custom-colors-wrapper') && event.target.matches('input[type="color"]')) {
        syncCustomThemeModePreview();
    }
});

document.addEventListener('click', function (event) {
    const themeSelectTrigger = event.target.closest('[data-theme-select]');
    if (themeSelectTrigger) {
        const radio = getThemeModeRadio(themeSelectTrigger.dataset.themeSelect);
        if (radio) {
            radio.checked = true;
            radio.dispatchEvent(new Event('change', { bubbles: true }));
        }
        return;
    }

    const themeCustomizeTrigger = event.target.closest('[data-theme-customize]');
    if (themeCustomizeTrigger) {
        const presetKey = themeCustomizeTrigger.dataset.themeCustomize;
        const presetPalette = THEME_MODE_PRESET_PALETTES[presetKey];
        const customRadio = getThemeModeRadio('custom');

        if (!presetPalette || !customRadio) {
            return;
        }

        applyThemePaletteToCustomInputs(presetPalette);
        customRadio.checked = true;
        customRadio.dispatchEvent(new Event('change', { bubbles: true }));
    }
});

function syncChatIconBackgroundMode() {
    const colorInput = document.getElementById('custom_rgb_chat_icon_background');
    const useCustomBackgroundCheckbox = document.getElementById('use_custom_chat_icon_background');
    const transparentCheckbox = document.getElementById('chat_icon_background_transparent');

    if (!colorInput) {
        return;
    }

    const isCustomBackgroundEnabled = !useCustomBackgroundCheckbox || useCustomBackgroundCheckbox.checked;
    const isTransparent = !!transparentCheckbox && transparentCheckbox.checked;

    colorInput.disabled = !isCustomBackgroundEnabled || isTransparent;
    colorInput.style.opacity = colorInput.disabled ? '.55' : '1';

    if (transparentCheckbox) {
        const transparentLabel = transparentCheckbox.closest('label');
        transparentCheckbox.disabled = !isCustomBackgroundEnabled;
        if (transparentLabel) {
            transparentLabel.style.opacity = isCustomBackgroundEnabled ? '1' : '.55';
        }
    }
}

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

document.addEventListener('change', function (event) {
    if (event.target && (event.target.id === 'use_custom_chat_icon_background' || event.target.id === 'chat_icon_background_transparent')) {
        syncChatIconBackgroundMode();
    }
});

function normalizeStoredBoolean(value) {
    if (typeof value === 'boolean') {
        return value;
    }

    if (typeof value === 'number') {
        return value === 1;
    }

    if (typeof value === 'string') {
        const normalizedValue = value.trim().toLowerCase();
        if (['1', 'true', 'yes', 'on'].includes(normalizedValue)) {
            return true;
        }
        if (['0', 'false', 'no', 'off', ''].includes(normalizedValue)) {
            return false;
        }
    }

    return null;
}

function getCustomChatIconStorageKey() {
    const token = typeof compibotData === 'object' && compibotData && typeof compibotData.token === 'string'
        ? compibotData.token
        : 'default';

    return `compibot_use_custom_chat_icon_${token}`;
}

function persistCustomChatIconPreference(value) {
    const normalizedValue = normalizeStoredBoolean(value);

    if (normalizedValue === null) {
        return;
    }

    try {
        window.localStorage.setItem(getCustomChatIconStorageKey(), normalizedValue ? '1' : '0');
    } catch (e) {
        // Ignoramos errores de almacenamiento del navegador.
    }
}

function readPersistedCustomChatIconPreference() {
    try {
        return normalizeStoredBoolean(window.localStorage.getItem(getCustomChatIconStorageKey()));
    } catch (e) {
        return null;
    }
}

function getCustomChatIconToggles() {
    return Array.from(document.querySelectorAll('[data-custom-chat-icon-toggle="1"]'));
}

function setCustomChatIconToggleState(value) {
    const normalizedValue = normalizeStoredBoolean(value);

    if (normalizedValue === null) {
        return;
    }

    getCustomChatIconToggles().forEach((toggle) => {
        toggle.checked = normalizedValue;
    });

    syncCustomChatIconToggle();
}

function syncCustomChatIconToggle() {
    const customChatIconInput = document.getElementById('compibot-branding-icon');
    const customChatIconToggles = getCustomChatIconToggles();

    customChatIconToggles.forEach((toggle) => {
        const toggleCard = toggle.closest('.chat-icon-usage-toggle');
        const toggleStatus = toggleCard ? toggleCard.querySelector('[data-custom-chat-icon-status]') : null;
        const isEnabled = !!toggle.checked;

        if (toggleCard) {
            toggleCard.classList.toggle('is-enabled', isEnabled);
        }

        if (toggleStatus) {
            toggleStatus.textContent = isEnabled
                ? 'Usando imagen subida'
                : 'Usando estilo del chat';
        }
    });

    if (customChatIconInput) {
        customChatIconInput.setAttribute('aria-label', 'Subir icono flotante personalizado');
    }
}

function syncCustomSiteLogoToggle() {
    const customSiteLogoCheckbox = document.getElementById('use_custom_site_logo');
    const customSiteLogoInput = document.getElementById('compibot-icon');
    const toggleCard = customSiteLogoCheckbox ? customSiteLogoCheckbox.closest('.chat-icon-usage-toggle') : null;
    const toggleStatus = toggleCard ? toggleCard.querySelector('[data-custom-site-logo-status]') : null;

    if (!customSiteLogoCheckbox || !customSiteLogoInput) {
        return;
    }

    if (toggleCard) {
        toggleCard.classList.toggle('is-enabled', !!customSiteLogoCheckbox.checked);
    }

    if (toggleStatus) {
        toggleStatus.textContent = customSiteLogoCheckbox.checked
            ? 'Usando imagen subida'
            : 'Usando estilo del chat';
    }

    customSiteLogoInput.setAttribute('aria-label', 'Subir icono de cabecera personalizado');
}

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

document.addEventListener('change', function (event) {
    if (event.target && event.target.id === 'compibot-branding-icon' && event.target.files && event.target.files.length) {
        const customChatIconToggles = getCustomChatIconToggles();
        if (customChatIconToggles.length) {
            setCustomChatIconToggleState(true);
            persistCustomChatIconPreference(true);
        }

        const brandingFileName = document.getElementById('branding-file-name');
        const brandingFilePreview = document.getElementById('compibot-branding-icon-preview');
        const selectedFile = event.target.files[0];

        if (brandingFilePreview && selectedFile) {
            const reader = new FileReader();
            reader.onload = function (e) {
                brandingFilePreview.src = e.target.result;
                brandingFilePreview.style.display = 'block';
            };
            reader.readAsDataURL(selectedFile);
        }
    }

    if (event.target && event.target.id === 'compibot-branding-icon' && (!event.target.files || !event.target.files.length)) {
        const brandingFileName = document.getElementById('branding-file-name');
        const brandingFilePreview = document.getElementById('compibot-branding-icon-preview');

        if (brandingFileName) {
            brandingFileName.textContent = '';
        }

        if (brandingFilePreview) {
            brandingFilePreview.style.display = 'none';
        }
    }

    if (event.target && event.target.id === 'compibot-icon' && event.target.files && event.target.files.length) {
        const customSiteLogoCheckbox = document.getElementById('use_custom_site_logo');
        if (customSiteLogoCheckbox) {
            customSiteLogoCheckbox.checked = true;
            syncCustomSiteLogoToggle();
        }

        const siteLogoFileName = document.getElementById('file-name');
        const siteLogoPreview = document.getElementById('compibot-icon-preview');
        const selectedFile = event.target.files[0];

        if (siteLogoPreview && selectedFile) {
            const reader = new FileReader();
            reader.onload = function (e) {
                siteLogoPreview.src = e.target.result;
                siteLogoPreview.style.display = 'block';
            };
            reader.readAsDataURL(selectedFile);
        }
    }

    if (event.target && event.target.matches('[data-custom-chat-icon-toggle="1"]')) {
        setCustomChatIconToggleState(event.target.checked);
        persistCustomChatIconPreference(event.target.checked);
    }

    if (event.target && event.target.id === 'use_custom_site_logo') {
        syncCustomSiteLogoToggle();
    }
});

document.addEventListener('click', function (event) {
    if (!event.target || event.target.id !== 'btn-reset-customization') {
        return;
    }

    const resetField = document.getElementById('reset_customization_defaults');
    const customizationForm = document.getElementById('compibot-customization-form');

    if (!resetField || !customizationForm) {
        return;
    }

    const confirmed = window.confirm('Se restablecera la personalizacion del chat a valores por defecto. Quieres continuar?');
    if (!confirmed) {
        return;
    }

    resetField.value = '1';
    customizationForm.submit();
});


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 && typeof option[key].name === 'string') {
                        labelText.innerText = option[key].name;
                    }
                } 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}`);
                }
            }
        });
    });
    syncPromptQuestionsState();
}

function getPromptQuestionsElements() {
    return {
        masterCheckbox: document.getElementById('chat_quick_questions_enabled_mod1'),
        rowsWrapper: document.getElementById('pr-quick-questions-rows'),
        questionInputs: Array.from(document.querySelectorAll('.compibot-quick-question-input')),
        visibilityCheckboxes: Array.from(document.querySelectorAll('.compibot-quick-question-toggle')),
        statusElement: document.querySelector('[data-pr-questions-status]'),
    };
}

function syncPromptQuestionAutoVisibility() {
    const { questionInputs, visibilityCheckboxes } = getPromptQuestionsElements();

    questionInputs.forEach((input, index) => {
        const textValue = input && typeof input.value === 'string' ? input.value.trim() : '';
        const checkbox = visibilityCheckboxes[index];
        const row = input ? input.closest('.compibot-quick-question-row') : null;
        const hasContent = textValue !== '';

        if (checkbox) {
            checkbox.checked = hasContent;
        }

        if (row) {
            row.classList.toggle('has-content', hasContent);
        }
    });
}

function validatePromptQuestions(options = {}) {
    const { report = false } = options;

    const {
        masterCheckbox,
        questionInputs,
        visibilityCheckboxes,
        statusElement,
    } = getPromptQuestionsElements();

    if (!masterCheckbox) {
        return true;
    }

    masterCheckbox.setCustomValidity('');
    questionInputs.forEach((input) => input.setCustomValidity(''));
    visibilityCheckboxes.forEach((checkbox) => checkbox.setCustomValidity(''));

    syncPromptQuestionAutoVisibility();

    if (!masterCheckbox.checked) {
        if (statusElement) {
            statusElement.textContent = 'Las sugerencias estan desactivadas.';
        }
        return true;
    }

    const selectedQuestions = visibilityCheckboxes.filter((checkbox) => checkbox.checked);
    if (!selectedQuestions.length) {
        const message = 'Escribe al menos una sugerencia.';
        masterCheckbox.setCustomValidity(message);
        if (statusElement) {
            statusElement.textContent = message;
        }
        if (report) {
            masterCheckbox.reportValidity();
        }
        return false;
    }

    if (statusElement) {
        statusElement.textContent = 'Las sugerencias con texto se mostraran en el chat.';
    }

    return true;
}

function syncPromptQuestionsState() {
    const {
        masterCheckbox,
        rowsWrapper,
        questionInputs,
        visibilityCheckboxes,
    } = getPromptQuestionsElements();

    if (!masterCheckbox || !rowsWrapper) {
        return;
    }

    const isEnabled = masterCheckbox.checked;
    rowsWrapper.classList.toggle('is-disabled', !isEnabled);

    questionInputs.forEach((input) => {
        input.readOnly = !isEnabled;
        input.setAttribute('aria-disabled', String(!isEnabled));
    });

    visibilityCheckboxes.forEach((checkbox) => {
        checkbox.disabled = false;
    });

    validatePromptQuestions();
}

function renderPromptQuestionsSettings(data) {
    const config = data && data.chat_quick_questions ? data.chat_quick_questions : null;
    const masterCheckbox = document.getElementById('chat_quick_questions_enabled_mod1');
    const questionInputs = [
        document.getElementById('chat_quick_question1_text_mod1'),
        document.getElementById('chat_quick_question2_text_mod1'),
        document.getElementById('chat_quick_question3_text_mod1'),
    ];
    const visibilityCheckboxes = [
        document.getElementById('chat_quick_question1_enabled_mod1'),
        document.getElementById('chat_quick_question2_enabled_mod1'),
        document.getElementById('chat_quick_question3_enabled_mod1'),
    ];

    if (!masterCheckbox) {
        return;
    }

    if (!config || !config.configured) {
        masterCheckbox.checked = false;
        questionInputs.forEach((input) => {
            if (input) {
                input.value = '';
            }
        });
        visibilityCheckboxes.forEach((checkbox) => {
            if (checkbox) {
                checkbox.checked = false;
            }
        });
        syncPromptQuestionsState();
        return;
    }

    masterCheckbox.checked = !!config.enabled;

    (config.items || []).forEach((item, index) => {
        const textInput = questionInputs[index];
        const visibilityCheckbox = visibilityCheckboxes[index];

        if (textInput) {
            textInput.value = item && typeof item.text === 'string' ? item.text : '';
        }

        if (visibilityCheckbox) {
            visibilityCheckbox.checked = !!(item && item.enabled);
        }
    });

    syncPromptQuestionsState();
}

document.addEventListener('change', function (event) {
    if (!event.target) {
        return;
    }

    if (event.target.id === 'chat_quick_questions_enabled_mod1') {
        syncPromptQuestionsState();
        return;
    }

});

document.addEventListener('input', function (event) {
    if (!event.target || !event.target.classList.contains('compibot-quick-question-input')) {
        return;
    }

    validatePromptQuestions();
});

document.addEventListener('submit', function (event) {
    if (!event.target || event.target.id !== 'compibot-prompt-form') {
        return;
    }

    if (!validatePromptQuestions({ report: true })) {
        event.preventDefault();
    }
});

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"]');
    const themeModeRadios = document.querySelectorAll('input[name="compibot_theme_mode"]');

    // 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));
    }


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

    const useCustomChatIconToggles = getCustomChatIconToggles();
    if (useCustomChatIconToggles.length) {
        const normalizedUseCustomChatIcon = normalizeStoredBoolean(data.use_custom_chat_icon);
        const persistedUseCustomChatIcon = readPersistedCustomChatIconPreference();

        if (normalizedUseCustomChatIcon !== null) {
            setCustomChatIconToggleState(normalizedUseCustomChatIcon);
            persistCustomChatIconPreference(normalizedUseCustomChatIcon);
        } else if (persistedUseCustomChatIcon !== null) {
            setCustomChatIconToggleState(persistedUseCustomChatIcon);
        } else {
            setCustomChatIconToggleState(false);
        }
    }

    const useCustomSiteLogoCheckbox = document.getElementById('use_custom_site_logo');
    if (useCustomSiteLogoCheckbox) {
        const normalizedUseCustomSiteLogo = normalizeStoredBoolean(data.use_custom_site_logo);
        const hasCustomSiteLogo = typeof data.site_logo === 'string' && data.site_logo.trim() !== '';

        if (normalizedUseCustomSiteLogo !== null) {
            useCustomSiteLogoCheckbox.checked = normalizedUseCustomSiteLogo;
        } else {
            useCustomSiteLogoCheckbox.checked = hasCustomSiteLogo;
        }

        syncCustomSiteLogoToggle();
    }

    const siteLogoFileName = document.getElementById('file-name');
    const siteLogoPreview = document.getElementById('compibot-icon-preview');
        if (siteLogoFileName && siteLogoPreview) {
        if (typeof data.site_logo === 'string' && data.site_logo.trim() !== '') {
            siteLogoPreview.src = data.site_logo;
            siteLogoPreview.style.display = 'block';
            siteLogoFileName.textContent = '';
        } else {
            siteLogoPreview.src = '#';
            siteLogoPreview.style.display = 'none';
            siteLogoFileName.textContent = '';
        }
    }

    const brandingFileName = document.getElementById('branding-file-name');
    const brandingFilePreview = document.getElementById('compibot-branding-icon-preview');
    if (brandingFileName && brandingFilePreview) {
        if (typeof data.chat_icon === 'string' && data.chat_icon.trim() !== '') {
            brandingFilePreview.src = data.chat_icon;
            brandingFilePreview.style.display = 'block';
            brandingFileName.textContent = '';
        } else {
            brandingFilePreview.src = '#';
            brandingFilePreview.style.display = 'none';
            brandingFileName.textContent = '';
        }
    }

    const customColorFields = [
        "custom_rgb_title",
        "custom_rgb_text",
        "custom_rgb_bubble_me_text",
        "custom_rgb_background",
        "custom_rgb_bubble_contact",
        "custom_rgb_bubble_me",
        "custom_rgb_send_button",
        "custom_rgb_stop_button",
    ];

    customColorFields.forEach((fieldName) => {
        const input = document.getElementById(fieldName);
        if (input && data[fieldName]) {
            input.value = data[fieldName];
        }
    });

    const chatIconBackgroundInput = document.getElementById('custom_rgb_chat_icon_background');
    const useCustomChatIconBackgroundCheckbox = document.getElementById('use_custom_chat_icon_background');
    const chatIconBackgroundTransparent = document.getElementById('chat_icon_background_transparent');
    const hasCustomChatIconBackgroundColor = typeof data.custom_rgb_chat_icon_background === 'string'
        && /^#[0-9A-Fa-f]{6}$/.test(data.custom_rgb_chat_icon_background);
    const hasTransparentChatIconBackground = data.custom_rgb_chat_icon_background === 'transparent';

    if (useCustomChatIconBackgroundCheckbox) {
        const normalizedUseCustomChatIconBackground = normalizeStoredBoolean(data.use_custom_chat_icon_background);
        useCustomChatIconBackgroundCheckbox.checked = normalizedUseCustomChatIconBackground !== null
            ? normalizedUseCustomChatIconBackground
            : (hasCustomChatIconBackgroundColor || hasTransparentChatIconBackground);
    }
    if (chatIconBackgroundTransparent) {
        chatIconBackgroundTransparent.checked = hasTransparentChatIconBackground;
    }
    if (chatIconBackgroundInput) {
        if (hasCustomChatIconBackgroundColor) {
            chatIconBackgroundInput.value = data.custom_rgb_chat_icon_background;
        }
        syncChatIconBackgroundMode();
    }

    if (themeModeRadios.length) {
        const hasCustomColors = customColorFields.some((fieldName) => !!data[fieldName]);
        let themeMode = "light";

        if (data.theme_mode === "custom" || data.theme_mode === "dark" || data.theme_mode === "light") {
            themeMode = data.theme_mode;
        } else if (hasCustomColors) {
            themeMode = "custom";
        } else if (data.color === "dark" || data.color === "black") {
            themeMode = "dark";
        } else if (data.color === "light" || data.color === "green" || data.color === "default") {
            themeMode = "light";
        }

        const selectedThemeRadio = document.querySelector(`input[name="compibot_theme_mode"][value="${themeMode}"]`);
        if (selectedThemeRadio) {
            selectedThemeRadio.checked = true;
            syncCustomizationMode();
        }
    }
}

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;
    syncPromptQuestionsState();

    /*** ========== 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 brandingFileUploadContainer = document.querySelector('[data-file-upload="branding-icon"]');
    const brandingFileInput = document.getElementById("compibot-branding-icon");
    const brandingFileNameSpan = document.getElementById("branding-file-name");
    const brandingFilePreview = document.getElementById("compibot-branding-icon-preview");

    if (brandingFileUploadContainer && brandingFileInput && brandingFileNameSpan && brandingFilePreview) {
        brandingFileUploadContainer.addEventListener("click", function () {
            brandingFileInput.click();
        });

        brandingFileInput.addEventListener("change", function (event) {
            const file = event.target.files[0];

            if (file) {
                brandingFileNameSpan.textContent = file.name;

                const reader = new FileReader();
                reader.onload = function (e) {
                    brandingFilePreview.src = e.target.result;
                    brandingFilePreview.style.display = "block";
                };
                reader.readAsDataURL(file);
            } else {
                brandingFileNameSpan.textContent = "Max. 5MB, formatos: JPG, PNG, WEBP";
                brandingFilePreview.style.display = "none";
            }
        });
    }

    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`;

    function syncScanRequiredWarning(options = {}) {
        const warningElement = document.getElementById('compibot-scan-required-warning');
        const scannedCountElement = document.getElementById('scanned-products-count');

        if (!warningElement || !scannedCountElement) {
            return;
        }

        const scannedCount = Number(scannedCountElement.textContent.replace(/[^\d.-]/g, '')) || 0;
        const shouldShowWarning = typeof options.scanned === 'boolean'
            ? !options.scanned
            : scannedCount <= 0;

        warningElement.classList.toggle('is-hidden', !shouldShowWarning);
    }

    syncScanRequiredWarning();



    /*** =========== 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);
        }

        renderPromptQuestionsSettings(data);

        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 (Object.prototype.hasOwnProperty.call(data, 'scanned')) {
            syncScanRequiredWarning({ scanned: !!data.scanned });
        } else {
            syncScanRequiredWarning();
        }

        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 : '';
    });
});
