<?php
/**
 * Compibot Plugin Admin Page.
 *
 * @package Compibot
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

if ( 'success' === isset( $_GET['status'] ) && sanitize_text_field( wp_unslash( $_GET['status'] ) ) ) :
	// Verificamos el nonce.
	if ( ! isset( $_GET['_wpnonce'] ) || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ), 'compibot_save_settings_action' ) ) {
		wp_die( 'Permiso denegado: solicitud no válida.' );
	}
	?>
	<!-- Estructura del Toast -->
	<div class="toast active">
		<div class="toast-content">
			<i class="fa-solid fa-check check"></i>
			<div class="message">
				<span class="text text-1">¡Todo listo!</span>
				<span class="text text-2">La configuración se ha guardado correctamente.</span>
			</div>
		</div>
		<i class="fa-solid fa-xmark close"></i>
		<div class="progress active"></div>
	</div>


	<?php
endif;

$compibot_scan_status = get_transient( 'compibot_scan_status' );



if ( $compibot_scan_status ) :
	// Eliminar el transient inmediatamente para que no se muestre en futuras recargas.
	delete_transient( 'compibot_scan_status' );

	// Definir mensajes según el status.
	$compibot_status_messages = array(
		'ok'         => array( '¡Todo listo!', 'El escaneo se ha completado con éxito. Ahora Compibot puede usar los <b>datos escaneados</b> en sus respuestas.' ),
		'queued'     => array( 'En cola', 'El escaneo ha sido enviado a la cola de procesamiento y se ejecutará en breve.' ),
		'inprogress' => array( 'Escaneo en progreso', 'El escaneo está en proceso. Puede tardar unos momentos en completarse.' ),
	);

	// Determinar el mensaje a mostrar.
	if ( 'ok' === $compibot_scan_status ) {
		$compibot_message_title = $compibot_status_messages['ok'][0];
		$compibot_message_body  = $compibot_status_messages['ok'][1];
	} elseif ( 'queued' === $compibot_scan_status ) {
		$compibot_message_title = $compibot_status_messages['queued'][0];
		$compibot_message_body  = $compibot_status_messages['queued'][1];
	} elseif ( 'in-progress' === $compibot_scan_status ) {
		$compibot_message_title = $compibot_status_messages['inprogress'][0];
		$compibot_message_body  = $compibot_status_messages['inprogress'][1];
	}
	?>
	<!-- Estructura del Toast -->
	<div class="toast active">
		<div class="toast-content">
			<i class="fa-solid fa-check check"></i>
			<div class="message">
				
				<span class="text text-1"><?php echo esc_html( $compibot_message_title ); ?></span>
				<span class="text text-2"><?php echo wp_kses_post( $compibot_message_body ); ?></span>
			</div>
		</div>
		<i class="fa-solid fa-xmark close"></i>
		<div class="progress active"></div>
	</div>



	<?php
endif;

$compibot_status_update = get_transient( 'compibot_update_options_status' );

if ( $compibot_status_update ) :

	// Si tiene éxito, mostrar un mensaje de éxito.
	?>
	<div class="toast active">
		<div class="toast-content">
			<i class="fa-solid fa-check check"></i>
			<div class="message">
				<span class="text text-1">¡Todo Listo!</span>
				<span class="text text-2">La configuración de la conducta avanzada se ha guardado correctamente.</span>
			</div>
		</div>
		<i class="fa-solid fa-xmark close"></i>
		<div class="progress active"></div>
	</div>


	<?php
endif;

$compibot_register_url = function_exists( 'compibot_get_onboarding_register_url' ) ? compibot_get_onboarding_register_url() : 'https://panel.compibot.com/onboarding/';
?>
<!-- PLUGIN CONTAINER -->
<div class="plugin-container">

	<!-- Parte del logo -->
	<div class="logo-section">
		<a class="logo-link">
			<div class="compibot-plugin-logo" aria-label="Logo del plugin"></div>
		</a>
	</div>

	<?php if ( '0' === $token || empty( $token ) ) : ?>
		<!-- Tarjeta de bienvenida -->
		<div id="welcome-card" class="welcome-card-container">
			<!-- Sección de bienvenida y contenido -->
			<div class="welcome-content">
				<h1>¡Te damos la bienvenida a Compibot!</h1>
				<p>Libera el poder de tu sitio WordPress con Compibot, el kit de herramientas completo para mejorar la seguridad, la velocidad y el crecimiento de tu sitio.</p>
				<p>Compibot trabaja entre bastidores para mantener tu sitio seguro, hacerlo rapidísimo y ayudarte a conseguir más tráfico.</p>
				<p>Al hacer clic en <strong style="color: #05dd90; letter-spacing: -0.03em;">Iniciar sesión en Compibot</strong> o en <strong style="color: #4b04d7; letter-spacing: -0.03em;">¿Aun no tienes cuenta?</strong> aceptas nuestros
					<a href="<?php echo esc_url( plugins_url( '../resource/Terminos-y-Condiciones-de-Uso-plugin-de-compibot.pdf', __FILE__ ) ); ?>" target="_blank">términos del servicio</a> y a
					<a href="https://compibot.com/privacidad" target="_blank">sincronizar los datos de tu sitio</a> con nosotros.
				</p>
				<p>Si completas el registro desde aquí, volverás a WordPress para acceder directamente desde el plugin.</p>
				<div class="compibot-auth-actions">
					<button class="activate-btn" type="button" onclick="window.location.href='<?php echo esc_url( admin_url( 'admin.php?page=compibot_login' ) ); ?>';">Inicia sesión</button>
					<a class="compibot-register-btn" href="<?php echo esc_url( $compibot_register_url ); ?>" target="_blank" rel="noopener noreferrer">¿Aun no tienes cuenta? Regístrate</a>
				</div>
			</div>
			<!-- Imagen decorativa similar a la captura -->
			<div class="decorative-image">
				<div class="plugin-description-image" aria-label="Imagen decorativa"></div>
			</div>
		</div>
	<?php endif; ?>

	
	<!-- Conversaciones -->
	<div class="conversations-section">
		<h1 class="module-title">Conversaciones</h1>
		<p>Visualiza las conversaciones de los usuarios con Compibot</p>
		<div class="conversations-header">
			<div class="select-container">
				<label for="time-range">Rango de tiempo:</label>
				<select id="time-range" name="time-range">
					<option value="15 minutos">Últimos 15 minutos</option>
					<option value="30 minutos">Últimos 30 minutos</option>
					<option value="ultima hora">Última hora</option>
					<option value="ultimas 2 horas">Últimas dos horas</option>
					<option value="ultimas 6 horas">Últimas seis horas</option>
					<option value="ultima 12 horas">Últimas doce horas</option>
					<option value="ultimo dia">Último día</option>
					<option value="ultimos 2 dias">Últimos dos días</option>
					<option value="ultima semana">Última semana</option>
					<option selected value="ultimo mes">Último mes</option>
					<option value="ultimo año">Último año</option>
				</select>
			</div>
			<button id="refresh-button" class="refresh-button">
				<i class="fa-solid fa-arrows-rotate"></i>
			</button>
		</div>

		<div id="conversation-table">
			<!-- Select para el modo responsive -->
			<div class="select-container" style="display: none;">
				<label for="select-column-sort">Ordenar por:</label>
				<select id="select-column-sort">
					<option value="start_chatting_at">Fecha</option>
					<option value="chateando">Estado</option>
					<option value="name">Nombre</option>
					<option value="mail">Correo</option>
					<option value="estimacion">Estimación</option>
				</select>
			</div>

			<table id="conversation-table-elements">
				<thead>
					<tr>
						<th class="filterable-field" data-order='start_chatting_at' data-order-criteria='DESC'>
							Fecha
						</th>
						<th class="filterable-field" data-order='chateando' data-order-criteria='DESC'>
							Estado
						</th>
						<th class="filterable-field" data-order='name' data-order-criteria='DESC'>
							Nombre
						</th>
						<th class="filterable-field" data-order='mail' data-order-criteria='DESC'>
							Correo
						</th>
						<th data-order='phone' data-order-criteria='DESC'>Teléfono</th>
						<th data-order='resumen' data-order-criteria='DESC'>Resumen</th>
						<th data-order='sentimiento' data-order-criteria='DESC'>Sentimiento</th>
						<th class="filterable-field" data-order='estimacion' data-order-criteria='DESC'>
							Estimación
						</th>
						<th>Conversación</th>
					</tr>
				</thead>
			</table>
		</div>
	</div><!-- Fin conversactions-section -->


	<!-- 
		COMBINED CARD:
		Left Column  = Escanear mi sitio
		Right Column = Configuración de Compibot
	-->
	<div class="scan-config-card">
		
		<!-- Columna Izquierda: Escanear mi sitio -->
		<div class="scan-column">
			<h1 class="module-title">Escanear mi sitio</h1>
			<p class="module-description">
				Esta función te permitirá escanear tu sitio para poder obtener datos del mismo 
				y que la IA pueda usarlos para sus respuestas.
			</p>

			<div class="last-scan-info">
				<div class="plugin-data-transfusion" aria-label="Datatransfusion"></div>
				<p id="last-scan-date">
					Último escaneo: <?php echo esc_html( $site_info['last_scan_date'] ); ?>
				</p>
			</div>

			<div class="scan-type-selection">
				<h3>Fuente de conocimientos para Compibot:</h3>
				<?php

					// Obtener el valor de compibot_scan_type usando la clase preparada para hacer llamadas a la BD.
					$compibot_db_manager = new CompibotDatabaseManager();

					$compibot_scan_type = $compibot_db_manager->compibot_select( 'scan_type', 'plugin_scaned_entries', 60 );

					// Si el valor de scan_type es null, preseleccionamos 'pages'.
				if ( is_null( $compibot_scan_type ) ) {
					$compibot_scan_type = 'pages';
				}

					// Verificar si WooCommerce está activo.
					$compibot_is_woocommerce_active = is_plugin_active( 'woocommerce/woocommerce.php' );
				?>

				<div class="scan-options">
					<label class="scan-checkbox">
						<input class="scan-checkbox__trigger visuallyhidden"
								type="checkbox"
								id="scan-pages"
								name="scan_type[]"
								value="pages"
								<?php
								if ( strpos( $compibot_scan_type, 'pages' ) !== false ) {
									echo 'checked'; }
								?>
								>
						<span class="scan-checkbox__symbol">
							<svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
								viewBox="0 0 28 28" version="1" xmlns="http://www.w3.org/2000/svg">
								<path d="M4 14l8 7L24 7"></path>
							</svg>
						</span>
						<p class="scan-checkbox__text">Páginas</p>
					</label>

					<label class="scan-checkbox">
						<input class="scan-checkbox__trigger visuallyhidden"
								type="checkbox"
								id="scan-posts"
								name="scan_type[]"
								value="posts"
								<?php
								if ( strpos( $compibot_scan_type, 'posts' ) !== false ) {
									echo 'checked'; }
								?>
								>
						<span class="scan-checkbox__symbol">
							<svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
								viewBox="0 0 28 28" version="1" xmlns="http://www.w3.org/2000/svg">
								<path d="M4 14l8 7L24 7"></path>
							</svg>
						</span>
						<p class="scan-checkbox__text">Entradas</p>
					</label>

					<label class="scan-checkbox <?php echo ! $compibot_is_woocommerce_active ? 'disabled' : ''; ?>">
						<input class="scan-checkbox__trigger visuallyhidden"
								type="checkbox"
								id="scan-woocommerce"
								name="scan_type[]"
								value="woocommerce"
								<?php
								if ( $compibot_is_woocommerce_active && strpos( $compibot_scan_type, 'woocommerce' ) !== false ) {
									echo 'checked'; }
								?>
								<?php
								if ( ! $compibot_is_woocommerce_active ) {
									echo 'disabled'; }
								?>
								>
						<span class="scan-checkbox__symbol">
							<svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
								viewBox="0 0 28 28" version="1" xmlns="http://www.w3.org/2000/svg">
								<path d="M4 14l8 7L24 7"></path>
							</svg>
						</span>
						<p class="scan-checkbox__text">WooCommerce</p>
					</label>
				</div>
			</div>

			<!-- Información de números de elementos escaneados -->
			<!-- Consolidated Scan Info Box -->
			<div class="scan-info-container single-box">
				<?php
					// Obtain values.
					$compibot_db_manager = new CompibotDatabaseManager();
					$compibot_result     = $compibot_db_manager->compibot_select_row(
						array( 'active, kb_scanned, kb_total, kb_plan' ),
						'plugin_scaned_entries',
						60
					);

					// Fallbacks or default values.
					$compibot_kb_scanned = ! empty( $compibot_result['kb_scanned'] ) ? $compibot_result['kb_scanned'] : 0;
					$compibot_kb_total   = ! empty( $compibot_result['kb_total'] ) ? $compibot_result['kb_total'] : 0;
					$compibot_kb_plan    = ! empty( $compibot_result['kb_plan'] ) ? $compibot_result['kb_plan'] : 10000;
					$compibot_has_scanned_items = isset( $site_info['scanned_items'] ) && (int) $site_info['scanned_items'] > 0;
					$compibot_show_scan_warning = '0' !== $token && ! empty( $token ) && ! $compibot_has_scanned_items;
					$compibot_scan_warning_class = 'compibot-scan-required-warning' . ( $compibot_show_scan_warning ? '' : ' is-hidden' );
					?>

				<div class="scan-info-box consolidated-scan-info">
				<h2 class="section-title" id="compibot-open-modal">
					Elementos Escaneados
					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="eye-icon">
						<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
						<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
					</svg>
				</h2>


					<!-- Modal para mostrar detalles de escaneo -->
					<div id="compibot-scan-modal" class="compibot-modal hidden">
						<div class="compibot-modal-content">
							<span class="compibot-close-modal">&times;</span>
							<h2 class="compibot-modal-title">Elementos Escaneados</h2>

							<!-- Menú desplegable para ordenacción -->
							<div class="compibot-order-container">
								<label for="compibot-order">Ordenar por:</label>
								<select id="compibot-order">
									<option value="page">Páginas</option>
									<option value="post">Entradas</option>
									<option value="product">Productos</option>
								</select>
							</div>
							
							<!-- Tabla de elementos escaneados -->
							<table class="compibot-table">
								<thead>
									<tr>
										<th>ID</th>
										<th>Título</th>
										<th>URL</th>
									</tr>
								</thead>
								<tbody id="compibot-scan-results">
									<tr>
										<td>1</td>
										<td>Bienvenidos</td>
										<td>https://dominio.es</td>
									</tr>
									<!-- Más filas se agregarán dinámicamente aquí con JavaScript -->
								</tbody>
							</table>
							<div id="compibot-pagination" class="compibot-pagination"></div>
						</div>
					</div>

					<div class="scan-info-stats">
						<!-- Row showing scanned / total -->
						<div class="scan-info-row">
							<span class="scan-info-label">Escaneados:</span>
							<span id="scanned-products-count">
								<?php echo esc_html( $site_info['scanned_items'] ); ?>
							</span>
							<span class="slash"> / </span>
							<span id="total-products">
								<?php echo esc_html( $site_info['total_items'] ); ?>
							</span>
							<span class="scan-info-label text-muted">totales</span>
						</div>

						<!-- Optional: show KB usage (or remove if not needed) -->
						<div class="scan-info-row kb-usage">
							<span class="scan-info-label">KB usados:</span>
							<span id="kb-progress-text">
								<?php echo esc_html( round( $compibot_kb_scanned, 2 ) ); ?> / 
								<?php echo esc_html( round( $compibot_kb_plan, 2 ) ); ?> KB
							</span>
						</div>
					</div>
					<div
						id="compibot-scan-required-warning"
						class="<?php echo esc_attr( $compibot_scan_warning_class ); ?>"
						role="alert"
					>
						No se puede mostrar el chatbot porque no hay elementos escaneados. Realiza primero un escaneo de tu web.
					</div>
				</div>
			</div>


			<!-- Mueve el botón de "Realizar Escaneo" *debajo* de la info container -->
			<?php if ( '0' !== $token && ! empty( $token ) ) : ?>
				<div style="text-align:center; margin-top: 20px;">
					<?php
						$compibot_admin_page = new CompibotAdminPage();
						$compibot_admin_page->compibot_display_scan_button_or_message();
					?>
				</div>
			<?php else : ?>
				<div style="text-align:center; margin-top: 20px;">
					<button class="activate-btn"
							onclick="window.location.href='<?php echo esc_url( admin_url( 'admin.php?page=compibot_login' ) ); ?>';">
						Iniciar sesión en Compibot
					</button>
				</div>
			<?php endif; ?>
		</div><!-- Fin columna "Escanear mi sitio" -->


		<!-- Columna Derecha: Configuración de Compibot -->
		<div class="config-column">
			<h1 class="module-title">Configuración de Compibot</h1>
			<p>En este apartado podrás personalizar la apariencia y funcionalidad de Compibot dentro de tu sitio web</p>

			<!-- Form para la configuración básica -->
			<form action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="POST" enctype="multipart/form-data">
				<?php wp_nonce_field( 'compibot_save_settings_action', 'compibot_nonce' ); ?>
				<input type="hidden" name="action" value="compibot_save_settings">

				<div class="section">
					<h2 class="section-title">Configuración General</h2>

					<div class="option">
						<label for="compibot-status" class="option-label-2">
							Mostrar Compibot en tu web
						</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Activa/Desactiva la burbuja de Compibot en tu web
							</span>
						</div>
						<div class="checkbox-wrapper-2">
							<input type="checkbox"
									id="compibot-status"
									class="sc-gJwTLC ikxBAC"
									name="compibot_status"
									value="1"
									checked>
						</div>
					</div>

					<div class="option">
						<label for="notify_on_conversation_start" class="option-label-1">
							Recibir email al iniciar conversación
						</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33
									7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Recibe un correo cuando un visitante inicia la conversación
							</span>
						</div>
						<div class="checkbox-wrapper-2">
							<input type="checkbox"
									id="notify_on_conversation_start"
									name="notify_on_conversation_start"
									value="1"
									class="sc-gJwTLC ikxBAC"
									checked>
						</div>
					</div>

					<div class="option">
						<label for="notify_on_conversation_end" class="option-label">
							Recibir email al finalizar conversación
						</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Recibe un correo al terminar una conversación
							</span>
						</div>
						<div class="checkbox-wrapper-2">
							<input type="checkbox"
									id="notify_on_conversation_end"
									name="notify_on_conversation_end"
									value="1"
									class="sc-gJwTLC ikxBAC"
									checked>
						</div>
					</div>
				</div>

				<div class="section design-section">
					<h2 class="section-title design-title">Apariencia y Colores</h2>
					<div class="option design-option">
						<label for="compibot-site-name" class="option-label design-label">
							Texto de la cabecera del chat:
						</label>
						<div class="icon-container design-icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Texto que aparece en la parte superior de la ventana de Compibot. Puede ser tu nombre de empresa, etc.
							</span>
						</div>
						<input type="text"
								id="compibot-site-name"
								class="compibot-text-input"
								name="compibot_site_name"
								value="Value"
								placeholder="Ingrese el nombre del sitio">
					</div>

					<div class="option">
						<label for="compibot-bot-name" class="option-label">
							Nombre personalizado de Compibot
						</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Elige un nombre para tu bot, por ejemplo "María", "Fernando", etc.
							</span>
						</div>
						<input type="text"
								id="compibot-bot-name"
								class="compibot-text-input"
								name="compibot_bot_name"
								value="Value"
								placeholder="Ingrese el nombre del bot">
					</div>

					<div class="option">
						<label for="compibot-bot-bienvenida" class="option-label">
							Mensaje de bienvenida
						</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Elige un mensaje de bienvenida para el inicio de la conversación
							</span>
						</div>
						<textarea id="compibot-bot-bienvenida"
							class="compibot-textarea-input"
							name="compibot_bot_bienvenida"
							placeholder="Ingrese el mensaje de bienvenida"
							rows="4">Value</textarea>
					</div>

					<div class="option">
						<label for="bot-location" class="option-label">
							Ubicación en pantalla
						</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Selecciona si el chat aparece a la izquierda o derecha de la pantalla
							</span>
						</div>
						<div class="location-options">
							<label>
								<input type="radio"
										id="chat-location-left"
										name="compibot-location"
										value="left">
								Izquierda
							</label>
							<label>
								<input type="radio"
										id="chat-location-right"
										name="compibot-location"
										value="right"
										checked>
								Derecha
							</label>
						</div>
					</div>

					<div class="option file-upload-wrapper">
						<label for="compibot-icon" class="option-label">Elegir icono de cabecera:</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Desde este apartado puede subir una imagen que aparecerá en Compibot.
								Tamaño máx. 5MB, formatos permitidos: JPG, PNG, WEBP
							</span>
						</div>

						<div style="display:flex; flex-direction:column; flex-grow:1; gap:12px;">
							<div class="chat-icon-upload-row">
								<label class="chat-icon-usage-toggle" for="use_custom_site_logo">
									<input class="chat-icon-usage-toggle__input visuallyhidden"
										type="checkbox"
										id="use_custom_site_logo"
										name="use_custom_site_logo"
										value="1">
									<span class="chat-icon-usage-toggle__control" aria-hidden="true">
										<i class="fa-regular fa-eye chat-icon-usage-toggle__icon chat-icon-usage-toggle__icon--on"></i>
										<i class="fa-regular fa-eye-slash chat-icon-usage-toggle__icon chat-icon-usage-toggle__icon--off"></i>
									</span>
									<span class="chat-icon-usage-toggle__content">
										<span class="chat-icon-usage-toggle__title">Icono de cabecera</span>
										<span class="chat-icon-usage-toggle__status" data-custom-site-logo-status>Usando estilo del chat</span>
									</span>
								</label>
								<div class="file-upload-container">
								<?php
								/**
								 * WordPress Plugin Check suggests using wp_get_attachment_image(),
								 * but this image is a static resource of the plugin, not user content.
								 * Uploading it to the Media Library would be unnecessary and clutter the user's files.
								 *
								 * Instead, we load it directly from the plugin directory using plugin_dir_url().
								 * This ensures the image remains part of the plugin and does not interfere with user files.
								 */
								$compibot_plugin_url = plugin_dir_url( __FILE__ );
								?>
									<img src="<?php echo esc_url( $compibot_plugin_url . '../assets/img/icono_subida.png' ); ?>" alt="Upload Icon">
									<span id="file-name"></span>
									<input type="file" id="compibot-icon" name="compibot_icon" accept="image/*">
									<button type="button" class="file-upload-button">Elegir archivo</button>
									<img id="compibot-icon-preview" src="#" alt="Vista previa">
								</div>
							</div>
						</div>
					</div>


					<!-- NUEVA SECCIÓN: Estilo del icono de chat -->
					<div class="option">
						<label for="compibot-icon-style" class="option-label" style="white-space: nowrap;">
							Estilo del icono de chat:
						</label>
						<div class="icon-container">
							<svg xmlns="http://www.w3.org/2000/svg" height="24px"
								viewBox="0 -960 960 960" width="24px" fill="#5f6368">
								<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340
									q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74
									q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30
									q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21
									q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526
									q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197
									q-54-54-85.5-127T80-480q0-83 31.5-156T197-763
									q54-54 127-85.5T480-880q83 0 156 31.5T763-763
									q54 54 85.5 127T880-480q0 83-31.5 156T763-197
									q-54 54-127 85.5T480-80Zm0-80q134 0 227-93
									t93-227q0-134-93-227t-227-93q-134 0-227 93
									t-93 227q0 134 93 227t227 93Zm0-320Z"/>
							</svg>
							<span class="tooltip-text">
								Puede elegir entre 3 estilos distintos de iconos de chat.
								Este es el icono que aparece en las páginas.
								Te damos 3 opciones para que puedas elegir el que congenia
								mejor con los colores y estilo de su página web.
							</span>
						</div>
						
						<!-- Tres estilos de iconos (Placeholder images) -->
						<div class="chat-icon-style-options" style="display: flex; gap: 10px; margin-left: 10px;">
							<label style="display: inline-flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;">
								<input type="radio" name="compibot_icon_style" value="dark" checked />
								<img
									alt="Estilo 1"
									src="data:image/gif;base64,R0lGODdhAQABAAD/ACwAAAAAAQABAAACADs="
									class="responsive-chat-icon-1">
							</label>
							<label style="display: inline-flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;">
								<input type="radio" name="compibot_icon_style" value="light" />
								<img
									alt="Estilo 1"
									src="data:image/gif;base64,R0lGODdhAQABAAD/ACwAAAAAAQABAAACADs="
									class="responsive-chat-icon-2">
							</label>
							<label style="display: inline-flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;">
								<input type="radio" name="compibot_icon_style" value="default" />
								<img
									alt="Estilo 1"
									src="data:image/gif;base64,R0lGODdhAQABAAD/ACwAAAAAAQABAAACADs="
									class="responsive-chat-icon-3">
							</label>
						</div>
					</div>
				</div><!-- Fin .design-section -->

				<?php if ( '0' !== $token && ! empty( $token ) ) : ?>
					<button type="submit" class="btn-scan">Guardar Configuración</button>
				<?php else : ?>
					<div style="text-align:center;">
						<button class="activate-btn" type="button"
								onclick="window.location.href='<?php echo esc_url( admin_url( 'admin.php?page=compibot_login' ) ); ?>';">
							Iniciar sesión en Compibot
						</button>
					</div>
				<?php endif; ?>
			</form>
		</div><!-- Fin columna "Configuración de Compibot" -->
	</div><!-- Fin .scan-config-card -->


	<div class="info-geo-container">
		<!-- Nueva sección de INFORMACIÓN -->
		<div class="info-section">
			<div class="header">
				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
					<line x1="16" y1="2" x2="16" y2="6"></line>
					<line x1="8" y1="2" x2="8" y2="6"></line>
					<line x1="3" y1="10" x2="21" y2="10"></line>
				</svg>
				<h1>Información de 
					<select id="currentMonthSelect">
						<option value="enero">Enero</option>
						<option value="febrero">Febrero</option>
						<option value="marzo">Marzo</option>
						<option value="abril">Abril</option>
						<option value="mayo">Mayo</option>
						<option value="junio">Junio</option>
						<option value="julio">Julio</option>
						<option value="agosto">Agosto</option>
						<option value="septiembre">Septiembre</option>
						<option value="octubre">Octubre</option>
						<option value="noviembre">Noviembre</option>
						<option value="diciembre">Diciembre</option>
					</select>
					<select id="currentYearSelect">
						<!-- Opciones generadas dinámicamente con JavaScript -->
					</select>
				</h1>
			</div>
			<p class="description">Desde este apartado podrás hacer seguimiento de los visitantes y las conversaciones activas</p>
			<div class="cards">
				<div class="card">
					<div class="card-title">Visitantes</div>
					<div class="card-value" id="visitor-count">0</div>
					<div id="visitors_info_card" class="card-trend">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<line x1="12" y1="19" x2="12" y2="5"></line>
							<polyline points="5 12 12 5 19 12"></polyline>
						</svg>
						<span id="media-visitors">0</span>
					</div>
					<div class="card-icon">👥</div>
				</div>
				<div class="card">
					<div class="card-title">Conversaciones</div>
					<div class="card-value" id="chatters-count">0</div>
					<div id="chatters_info_card" class="card-trend">
						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
							<polyline points="17 6 23 6 23 12"></polyline>
						</svg>
						<span id="media-chatters">0</span>
					</div>
					<div class="card-icon">💬</div>
				</div>
			</div>

			<div id="barGraphContainer">
				<!-- Contenedor de la información y gráfico -->
				<div id="conversion-info-container">
					<div id="conversion-info-text">
						Conversiones
					<div id="conversion-info-icon">?</div>
					</div>
					<div id="conversion-popup">
						Indica el porcentaje de visitantes que han iniciado una conversación en tu web.
					</div>
				</div>
				<canvas id="barGraph"></canvas>
			</div>
		</div>

		<!-- Nueva sección de GEOLOCALIZACIÓN -->
		<div class="geolocation-section">
			<div class="geolocation-header">
				<h1>Geolocalización</h1>
				<p>Visualiza la distribución geográfica de los visitantes y personas chateando en el siguiente mapa:</p>
			</div>
			<div id="map" class="geolocation-map">
				<p>Mapa en construcción</p>
			</div>
		</div>
	</div>


	<?php
	// Simulación de los módulos contratados obtenidos de la API.
	$compibot_database_manager    = new CompibotDatabaseManager();
	$compibot_modules_contratados = $compibot_database_manager->compibot_select( 'modulos', 'plugin_modules_compibot_page', 60 );
	$compibot_modules_contratados = is_string( $compibot_modules_contratados ) && ! empty( $compibot_modules_contratados ) ? json_decode( $compibot_modules_contratados, true ) : array();

	// Definimos los módulos con su contenido específico.
	$compibot_modulos_disponibles = array(
		'comportamiento' => array(
			'titulo'      => 'Módulo: Conducta Avanzada',
			'descripcion' =>  'En este apartado podrás personalizar la conducta de Compibot en tu sitio web.' ,
			'contenido'   => 
				'
            <form id="compibot-prompt-form" action="' . esc_url( admin_url( 'admin-post.php' ) ) . '" method="POST" enctype="multipart/form-data">
                ' . wp_nonce_field( 'compibot_save_prompt_action', 'compibot_nonce', true, false ) . '
                <input type="hidden" name="action" value="compibot_save_prompt">

                <div class="section compibot-quick-questions" data-pr-questions-module>
                    <h4 class="option-label" style="margin-bottom: 10px;">Recomendaciones de preguntas del chatbot</h4>
                    <div class="compibot-quick-questions__panel">
                        <div class="option">
                            <label class="scan-checkbox" for="chat_quick_questions_enabled_mod1">
                                <input class="scan-checkbox__trigger visuallyhidden"
                                    type="checkbox"
                                    id="chat_quick_questions_enabled_mod1"
                                    name="chat_quick_questions_enabled_mod1"
                                    value="1">
                                <span class="scan-checkbox__symbol">
                                    <svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
                                        viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M4 14l8 7L24 7"></path>
                                    </svg>
                                </span>
                                <span class="scan-checkbox__text">
                                    Mostrar recomendaciones de preguntas
                                </span>
                            </label>
                        </div>

                        <div class="compibot-quick-questions__rows" id="pr-quick-questions-rows">
                            <div class="compibot-quick-question-row" data-option-number="1">
                                <input class="compibot-quick-question-toggle visuallyhidden"
                                    type="checkbox"
                                    id="chat_quick_question1_enabled_mod1"
                                    name="chat_quick_question1_enabled_mod1"
                                    value="1"
                                    data-option-number="1">
                                <div class="compibot-quick-question-meta">
                                    <span class="compibot-quick-question-label">Sugerencia 1</span>
                                </div>
                                <input type="text"
                                    id="chat_quick_question1_text_mod1"
                                    name="chat_quick_question1_text_mod1"
                                    class="compibot-quick-question-input"
                                    data-option-number="1"
                                    maxlength="200"
                                    value=""
                                    placeholder="Ejemplo: &iquest;Que precio tienes?"
                                    aria-label="Texto de la pregunta rapida 1">
                            </div>

                            <div class="compibot-quick-question-row" data-option-number="2">
                                <input class="compibot-quick-question-toggle visuallyhidden"
                                    type="checkbox"
                                    id="chat_quick_question2_enabled_mod1"
                                    name="chat_quick_question2_enabled_mod1"
                                    value="1"
                                    data-option-number="2">
                                <div class="compibot-quick-question-meta">
                                    <span class="compibot-quick-question-label">Sugerencia 2</span>
                                </div>
                                <input type="text"
                                    id="chat_quick_question2_text_mod1"
                                    name="chat_quick_question2_text_mod1"
                                    class="compibot-quick-question-input"
                                    data-option-number="2"
                                    maxlength="200"
                                    value=""
                                    placeholder="Ejemplo: &iquest;Que funciones tienes?"
                                    aria-label="Texto de la pregunta rapida 2">
                            </div>

                            <div class="compibot-quick-question-row" data-option-number="3">
                                <input class="compibot-quick-question-toggle visuallyhidden"
                                    type="checkbox"
                                    id="chat_quick_question3_enabled_mod1"
                                    name="chat_quick_question3_enabled_mod1"
                                    value="1"
                                    data-option-number="3">
                                <div class="compibot-quick-question-meta">
                                    <span class="compibot-quick-question-label">Sugerencia 3</span>
                                </div>
                                <input type="text"
                                    id="chat_quick_question3_text_mod1"
                                    name="chat_quick_question3_text_mod1"
                                    class="compibot-quick-question-input"
                                    data-option-number="3"
                                    maxlength="200"
                                    value=""
                                    placeholder="Escribe una tercera sugerencia"
                                    aria-label="Texto de la pregunta rapida 3">
                            </div>
                        </div>

                        <p class="compibot-quick-questions__hint" data-pr-questions-status>
                            Solo se mostraran en el chat las sugerencias que tengan texto.
                        </p>
                    </div>
                    <!-- Opción 1 -->
                    <div class="option">
                        <label class="scan-checkbox" for="pr_option1_mod1">
                            <input class="scan-checkbox__trigger visuallyhidden"
                                type="checkbox"
                                id="pr_option1_mod1"
                                name="pr_option1_mod1"
                                value="1">
                            <span class="scan-checkbox__symbol">
                                <svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
                                    viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4 14l8 7L24 7"></path>
                                </svg>
                            </span>
                            <span class="scan-checkbox__text">
                                Opción 1 (Módulo 1)
                            </span>
                        </label>
                    </div>

                    <!-- Opción 2 -->
                    <div class="option">
                        <label class="scan-checkbox" for="pr_option2_mod1">
                            <input class="scan-checkbox__trigger visuallyhidden"
                                type="checkbox"
                                id="pr_option2_mod1"
                                name="pr_option2_mod1"
                                value="1">
                            <span class="scan-checkbox__symbol">
                                <svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
                                    viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4 14l8 7L24 7"></path>
                                </svg>
                            </span>
                            <span class="scan-checkbox__text">
                                Opción 2 (Módulo 1)
                            </span>
                        </label>
                    </div>

                    <!-- Opción 3 -->
                    <div class="option">
                        <label class="scan-checkbox" for="pr_option3_mod1">
                            <input class="scan-checkbox__trigger visuallyhidden"
                                type="checkbox"
                                id="pr_option3_mod1"
                                name="pr_option3_mod1"
                                value="1">
                            <span class="scan-checkbox__symbol">
                                <svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
                                    viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4 14l8 7L24 7"></path>
                                </svg>
                            </span>
                            <span class="scan-checkbox__text">
                                Opción 3 (Módulo 1)
                            </span>
                        </label>
                    </div>

                    <!-- Caja de texto para “Instrucciones personalizadas” -->
                    <div class="option" style="flex-direction: column; align-items: flex-start;">
                        <label for="pr_custom_section_mod1" class="option-label" style="margin-bottom: 5px;">
                            Instrucciones personalizadas
                        </label>
                        <textarea id="pr_custom_section_mod1"
                                name="pr_custom_section_mod1"
                                maxlength="1000"
                                rows="2"
                                style="width: 100%;"
                                placeholder="Escribe aquí tus instrucciones (máx. 1000 caracteres)..."></textarea>
                    </div>
                </div>

                <button type="submit" class="boton-guardar">Guardar Configuración</button>
            </form>
        '
			,
		),
		'schedule'       => array(
			'titulo'      => 'Módulo: Horario de Atención',
			'descripcion' => 'Aquí podrás configurar el horario de atención en el que Compibot estará activo en tu sitio web.' ,
			'contenido'   => 
				'
            <form action="' . esc_url( admin_url( 'admin-post.php' ) ) . '" method="POST">
                ' . wp_nonce_field( 'compibot_save_hours_module_action', 'compibot_nonce', true, false ) . '
                <input type="hidden" name="action" value="compibot_save_hours_module">

                <!-- DÍAS DE LA SEMANA -->
                <div class="seccion-formulario">
                    <label>Días de la semana:</label>
                    <div class="dias-semana">
                        <button type="button" class="dia" data-dia="Lun">Lun</button>
                        <button type="button" class="dia" data-dia="Mar">Mar</button>
                        <button type="button" class="dia" data-dia="Mié">Mié</button>
                        <button type="button" class="dia" data-dia="Jue">Jue</button>
                        <button type="button" class="dia" data-dia="Vie">Vie</button>
                        <button type="button" class="dia" data-dia="Sáb">Sáb</button>
                        <button type="button" class="dia" data-dia="Dom">Dom</button>
                    </div>
                    <input type="hidden" name="dias_semana" id="dias_semana_input">
                    <div class="acciones-dias">
                        <a href="#" id="activar-todos">Activar todos</a> | 
                        <a href="#" id="desactivar-todos">Desactivar todos</a>
                    </div>
                </div>

                <!-- HORAS DE ACTIVIDAD -->
                <div class="seccion-formulario">
                    <label>Horas de Actividad:</label>
                    <div class="horas-actividad">
                        <input type="time" id="horario_inicio" name="horas_inicio" value="00:00">
                        <span>a</span>
                        <input type="time" id="horario_fin" name="horas_fin" value="23:59">
                    </div>
                    <a href="#" class="aplicar-24h" id="aplicar-24h">Establecer las 24h</a>
                </div>

                <!-- ACCIÓN FUERA DE HORARIO -->
                <div class="seccion-formulario">
                    <label>Acción fuera del horario de atención:</label>
                    <div class="opciones-horario">
                        <!-- Checkbox: No mostrar chatbot -->
                        <label class="scan-checkbox checkbox-horario" for="accion_horario_ocultar">
                            <input class="scan-checkbox__trigger visuallyhidden" type="checkbox"
                                id="accion_horario_ocultar" name="accion_horario" value="hidden" checked>
                            <span class="scan-checkbox__symbol">
                                <svg aria-hidden="true" class="scan-icon-checkbox" width="24px" height="24px"
                                    viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4 14l8 7L24 7"></path>
                                </svg>
                            </span>
                            <span class="radio-texto">No mostrar chatbot</span>
                        </label>

                        <!-- Checkbox: Mostrar el siguiente mensaje -->
                        <label class="scan-checkbox checkbox-horario" for="accion_horario_mensaje">
                            <input class="scan-checkbox__trigger visuallyhidden" type="checkbox"
                                id="accion_horario_mensaje" name="accion_horario" value="show_message">
                            <span class="scan-checkbox__symbol">
                                <svg aria-hidden="true" class="scan-icon-checkbox" width="24px" height="24px"
                                    viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4 14l8 7L24 7"></path>
                                </svg>
                            </span>
                            <span class="radio-texto">Mostrar el siguiente mensaje</span>
                        </label>
                    </div>

                    <!-- Input del mensaje, oculto por defecto -->
                    <div class="mensaje-horario-container" style="display: none;">
                        <textarea name="mensaje_fuera_horario" id="mensaje_fuera_horario"
                            placeholder="Escribe el mensaje aquí..."></textarea>
                    </div>
                </div>

                <button type="submit" class="boton-guardar">Guardar Configuración</button>
            </form>
        '
			,
		),
		'thinking'       => array(
			'titulo'      =>  'Módulo: Razonamiento Avanzado' ,
			'descripcion' => 'Este módulo ayuda a tu chatbot de WordPress a entender preguntas más complejas y a responder con mayor precisión. Ofrece resultados más útiles y detallados para tus visitantes.' ,
			'contenido'   => 
				'
            <form action="' . esc_url( admin_url( 'admin-post.php' ) ) . '" method="POST">
                ' . wp_nonce_field( 'compibot_save_comportamiento_module_action', 'compibot_nonce', true, false ) . '
                <input type="hidden" name="action" value="compibot_save_comportamiento_module">

                <div class="ejemplos-uso-modulo">
                    <h3>Ejemplos de uso:</h3>
                    <ul>
                        <li>Filtra las ventas de octubre y muestra el listado específico.</li>
                        <li>¿Cuáles son las últimas novedades en muebles de cocina?</li>
                        <li>Encuentra y presenta los artículos o lanzamientos recientes de muebles de cocina</li>
                        <li>¿Cuál es la noticia más antigua sobre nuestro alcalde?</li>
                        <li>Localiza y muestra la primera noticia publicada que menciona al alcalde.</li>
                    </ul>
                    <p>Gracias a este módulo, tu chatbot brindará respuestas más claras y relevantes, mejorando la experiencia de tus visitantes y proporcionando información valiosa de forma instantánea.</p>
                </div>

                <div class="estado-modulo">
                    <p><strong>Estado del módulo:</strong> <span id="estado-texto" class="activo">Activo</span></p>
                    <div class="boton-container">
                        <button id="toggle-estado" class="boton-desactivar">Desactivar módulo</button>
                    </div>
                </div>

				<input type="hidden" id="modulo-enabled" name="enabled" value="1">

            </form>
        '
			,
		),
		'customization'  => array(
			'titulo'      => 'Modulo: Rebranding y Colores',
			'descripcion' => 'Personaliza el aspecto visual del chatbot con temas predefinidos y colores RGB adaptados a tu marca.',
			'contenido'   =>
				'
            <form id="compibot-customization-form" action="' . esc_url( admin_url( 'admin-post.php' ) ) . '" method="POST" enctype="multipart/form-data">
                ' . wp_nonce_field( 'compibot_save_settings_action', 'compibot_nonce', true, false ) . '
                <input type="hidden" name="action" value="compibot_save_settings">
                <input type="hidden" name="compibot_settings_scope" value="customization">
                <input type="hidden" id="reset_customization_defaults" name="reset_customization_defaults" value="0">

                    <div class="section">
                        <div class="option" style="flex-direction: column; align-items: flex-start;">
                            <label class="option-label" style="margin-bottom: 5px;">Tema visual del chat</label>
                            <div class="theme-mode-cards">
                                <div class="theme-mode-card theme-mode-card--light" data-theme-card="light">
                                    <button type="button" class="theme-mode-card__select" data-theme-select="light">
                                        <span class="theme-mode-card__title-row">
                                            <span class="theme-mode-card__title">Claro</span>
                                            <span class="theme-mode-card__check" aria-hidden="true"></span>
                                        </span>
                                        <span class="theme-chatshot theme-chatshot--light">
                                            <span class="theme-chatshot__window">
                                                <span class="theme-chatshot__header">
                                                    <span class="theme-chatshot__brand">
                                                        <span class="theme-chatshot__brand-text">Compibot</span>
                                                    </span>
                                                    <span class="theme-chatshot__close" aria-hidden="true"></span>
                                                </span>
                                                <span class="theme-chatshot__body">
                                                    <span class="theme-chatshot__bubble theme-chatshot__bubble--bot theme-chatshot__bubble--lead">Hola, me llamo Compibot y estoy aqui para ayudarte.</span>
                                                    <span class="theme-chatshot__bubble theme-chatshot__bubble--user">hola</span>
                                                    <span class="theme-chatshot__bubble theme-chatshot__bubble--bot">Hola, soy Compibot. En que puedo ayudarte hoy?</span>
                                                </span>
                                                <span class="theme-chatshot__composer">
                                                    <span class="theme-chatshot__input">Preguntame lo que quieras...</span>
                                                    <span class="theme-chatshot__send" aria-hidden="true"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </button>
                                </div>

                                <div class="theme-mode-card theme-mode-card--dark" data-theme-card="dark">
                                    <button type="button" class="theme-mode-card__select" data-theme-select="dark">
                                        <span class="theme-mode-card__title-row">
                                            <span class="theme-mode-card__title">Oscuro</span>
                                            <span class="theme-mode-card__check" aria-hidden="true"></span>
                                        </span>
                                        <span class="theme-chatshot theme-chatshot--dark">
                                            <span class="theme-chatshot__window">
                                                <span class="theme-chatshot__header">
                                                    <span class="theme-chatshot__brand">
                                                        <span class="theme-chatshot__brand-text">Compibot</span>
                                                    </span>
                                                    <span class="theme-chatshot__close" aria-hidden="true"></span>
                                                </span>
                                                <span class="theme-chatshot__body">
                                                    <span class="theme-chatshot__bubble theme-chatshot__bubble--bot theme-chatshot__bubble--lead">Hola, me llamo Compibot y estoy aqui para ayudarte.</span>
                                                    <span class="theme-chatshot__bubble theme-chatshot__bubble--user">hola</span>
                                                    <span class="theme-chatshot__bubble theme-chatshot__bubble--bot">Hola, soy Compibot. En que puedo ayudarte hoy?</span>
                                                </span>
                                                <span class="theme-chatshot__composer">
                                                    <span class="theme-chatshot__input">Preguntame lo que quieras...</span>
                                                    <span class="theme-chatshot__send" aria-hidden="true"></span>
                                                </span>
                                            </span>
                                        </span>
                                    </button>
                                </div>

                                <div class="theme-mode-card theme-mode-card--custom" data-theme-card="custom">
                                    <button type="button" class="theme-mode-card__select" data-theme-select="custom">
                                        <span class="theme-mode-card__title-row">
                                            <span class="theme-mode-card__title">Personalizado</span>
                                            <span class="theme-mode-card__check" aria-hidden="true"></span>
                                        </span>
                                        <span class="theme-custom-preview">
										    <span class="theme-custom-preview__statement">
                                                <span class="theme-custom-preview__statement-mark" aria-hidden="true"></span>
                                                <span class="theme-custom-preview__statement-text">100% personalizado</span>
                                            </span>
                                            <span class="theme-custom-preview__hero">
                                                <span class="theme-custom-preview__headline">Tu defines todos los colores</span>
                                                <span class="theme-custom-preview__copy">Ideal si quieres que el chat siga tu marca y no un tema predefinido.</span>
                                            </span>
                                        </span>
                                    </button>
                                </div>
                            </div>
                            <div class="location-options theme-mode-radios-legacy" hidden aria-hidden="true">
                                <label>
                                    <input type="radio" name="compibot_theme_mode" value="light" checked>
                                    Modo claro
                                </label>
                                <label>
                                    <input type="radio" name="compibot_theme_mode" value="dark">
                                    Modo oscuro
                                </label>
                                <label>
                                    <input type="radio" name="compibot_theme_mode" value="custom">
                                    Modo de personalización
                                </label>
                            </div>
                        </div>
                    </div>

                    <div id="custom-colors-wrapper" class="section" hidden style="display:none;">
                        <div class="theme-custom-presets">
                            <span class="theme-custom-presets__label"></span>
                            <div class="theme-custom-presets__actions">
                                <button type="button" class="theme-custom-presets__button" data-theme-customize="light">Cargar colores del modo claro</button>
                                <button type="button" class="theme-custom-presets__button" data-theme-customize="dark">Cargar colores del modo oscuro</button>
                            </div>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_title" class="option-label">Titulos</label>
                            <input type="color" id="custom_rgb_title" name="custom_rgb_title" value="#111111" class="custom-color-picker" disabled>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_text" class="option-label">Texto bot</label>
                            <input type="color" id="custom_rgb_text" name="custom_rgb_text" value="#333333" class="custom-color-picker" disabled>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_bubble_me_text" class="option-label">Texto usuario</label>
                            <input type="color" id="custom_rgb_bubble_me_text" name="custom_rgb_bubble_me_text" value="#111111" class="custom-color-picker" disabled>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_background" class="option-label">Fondo de chat</label>
                            <input type="color" id="custom_rgb_background" name="custom_rgb_background" value="#FFFFFF" class="custom-color-picker" disabled>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_bubble_contact" class="option-label">Burbuja bot</label>
                            <input type="color" id="custom_rgb_bubble_contact" name="custom_rgb_bubble_contact" value="#F1F5F9" class="custom-color-picker" disabled>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_bubble_me" class="option-label">Burbuja usuario</label>
                            <input type="color" id="custom_rgb_bubble_me" name="custom_rgb_bubble_me" value="#05DD90" class="custom-color-picker" disabled>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_send_button" class="option-label">Enviar</label>
                            <input type="color" id="custom_rgb_send_button" name="custom_rgb_send_button" value="#05DD90" class="custom-color-picker" disabled>
                        </div>
                        <div class="option">
                            <label for="custom_rgb_stop_button" class="option-label">Cerrar</label>
                            <input type="color" id="custom_rgb_stop_button" name="custom_rgb_stop_button" value="#EF4444" class="custom-color-picker" disabled>
                        </div>
                    </div>

                    <div class="section">
                        <div class="option" style="flex-direction: column; align-items: flex-start;">
                            <label for="compibot-branding-icon" class="option-label" style="margin-bottom: 5px;">Icono flotante personalizado</label>
                            <div class="chat-icon-upload-row">
                                <label class="chat-icon-usage-toggle" for="use_custom_chat_icon">
                                    <input class="chat-icon-usage-toggle__input visuallyhidden"
                                        type="checkbox"
                                        id="use_custom_chat_icon"
                                        name="use_custom_chat_icon"
                                        value="1"
                                        data-custom-chat-icon-toggle="1">
                                    <span class="chat-icon-usage-toggle__control" aria-hidden="true">
                                        <i class="fa-regular fa-eye chat-icon-usage-toggle__icon chat-icon-usage-toggle__icon--on"></i>
                                        <i class="fa-regular fa-eye-slash chat-icon-usage-toggle__icon chat-icon-usage-toggle__icon--off"></i>
                                    </span>
                                    <span class="chat-icon-usage-toggle__content">
                                        <span class="chat-icon-usage-toggle__title">Icono flotante</span>
                                        <span class="chat-icon-usage-toggle__status" data-custom-chat-icon-status>Usando estilo del chat</span>
                                    </span>
                                </label>
                                <div class="file-upload-container" data-file-upload="branding-icon">
                                    <img src="' . esc_url( $compibot_plugin_url . '../assets/img/icono_subida.png' ) . '" alt="Upload Icon">
                                    <span id="branding-file-name"></span>
                                    <input type="file" id="compibot-branding-icon" name="compibot_branding_icon" accept="image/png,image/jpeg,image/jpg,image/webp">
                                    <button type="button" class="file-upload-button">Elegir archivo</button>
                                    <img id="compibot-branding-icon-preview" src="#" alt="Vista previa">
                                </div>
                            </div>
                        </div>

                        <div class="option chat-icon-bg-option">
                            <label for="custom_rgb_chat_icon_background" class="option-label">Color de fondo del icono flotante</label>
                            <div class="chat-icon-bg-row">
                                <label class="scan-checkbox chat-icon-bg-toggle" for="use_custom_chat_icon_background">
                                    <input class="scan-checkbox__trigger visuallyhidden"
                                        type="checkbox"
                                        id="use_custom_chat_icon_background"
                                        name="use_custom_chat_icon_background"
                                        value="1">
                                    <span class="scan-checkbox__symbol">
                                        <svg aria-hidden="true" class="scan-icon-checkbox" width="28px" height="28px"
                                            viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M4 14l8 7L24 7"></path>
                                        </svg>
                                    </span>
                                    <span class="scan-checkbox__text">Usar color personalizado</span>
                                </label>
                                <input type="color" id="custom_rgb_chat_icon_background" name="custom_rgb_chat_icon_background" value="#ffffff" class="chat-icon-bg-picker">
                            </div>
                        </div>
                        <small class="chat-icon-bg-help">
                            Si desactivas este checkbox, el fondo del icono volvera al estilo predefinido 
                        </small>
                    </div>

                <div class="customization-actions">
                    <button type="submit" class="boton-guardar">Guardar Configuracion</button>
                    <button type="button" id="btn-reset-customization" class="boton-guardar boton-secundario">
                        Reiniciar configuracion de personalizacion
                    </button>
                </div>
            </form>
        '
			,
		),



	);

	// Filtrar los módulos activos.
	$compibot_modulos_activos = array_filter(
		$compibot_modulos_disponibles,
		function ( $key ) use ( $compibot_modules_contratados ) {
			return in_array( $key, $compibot_modules_contratados, true );
		},
		ARRAY_FILTER_USE_KEY
	);

	// Determinar la clase del contenedor según la cantidad de módulos activos.
	$compibot_cantidad_modulos = count( $compibot_modulos_activos );
	if ( 1 === $compibot_cantidad_modulos ) {
		$compibot_clase_modulo_contenedor = 'modulo-uno';
	} elseif ( 2 === $compibot_cantidad_modulos ) {
		$compibot_clase_modulo_contenedor = 'modulo-dos';
	} elseif ( 3 === $compibot_cantidad_modulos ) {
		$compibot_clase_modulo_contenedor = 'modulo-tres';
	} else {
		$compibot_clase_modulo_contenedor = 'modulo-cuatro';
	}
	?>

<div
  id="contenedor-modulos"
  class="contenedor-modulos <?php echo esc_attr( $compibot_clase_modulo_contenedor ); ?>"
  data-modulos-activos="<?php echo esc_attr( wp_json_encode( $compibot_modulos_activos ) ); ?>"
  data-clase-contenedor="<?php echo esc_attr( $compibot_clase_modulo_contenedor ); ?>">
</div>



	<!-- Módulos (general) -->
	<div class="modules-section">
		<h1 class="modules-title">Módulos de Ampliación Disponibles</h1>
		<div class="modules-container">

			<!-- Ejemplo de módulo -->
			<div class="module-card recommended" data-module="compra">
				<div class="ribbon">¡Favorito!</div>
				<h2 class="module-title">Intención de compra</h2>
				<p class="module-description">
					Compibot hace un análisis del grado de intención de compra de cada conversación y le muestra el nivel de intención y valor posible de la compra.
				</p>
				<div class="divider"></div>
				<ul class="module-features">
					<li><span class="check-icon">✔️</span> Indicador en tareas pendiendtes</li>
					<li><span class="check-icon">✔️</span> Especulación del valor de compra</li>
					<li><span class="check-icon">✔️</span> Filtrar por grado de intención</li>
					<li><span class="check-icon">✔️</span> Prueba gratuita 30 días</li>
				</ul>
				<div class="module-footer">
					<button class="module-btn" onclick="window.location.href='https://clientes.compibot.com/cart.php?gid=addons';">Activar Mod</button>
					<span class="module-status">Cargando...</span>
				</div>
			</div>

			<div class="module-card" data-module="satisfaccion">
				<h2 class="module-title">Nivel de Satisfacción</h2>
				<p class="module-description">
					Grado de satisfacción percibido por Compibot tras las conversaciones, optimizando la experiencia del usuario.
				</p>
				<div class="divider"></div>
				<ul class="module-features">
					<li><span class="check-icon">✔️</span> Métricas de satisfacción</li>
					<li><span class="check-icon">✔️</span> Mejora tu atención</li>
					<li><span class="check-icon">✔️</span> Exportar informes</li>
					<li><span class="check-icon">✔️</span> Prueba gratuita 30 días</li>
				</ul>
				<div class="module-footer">
					<button class="module-btn" onclick="window.location.href='https://clientes.compibot.com/cart.php?gid=addons';">Activar Mod</button>
					<span class="module-status">Cargando...</span>
				</div>
			</div>

			<div class="module-card" data-module="comportamiento">
				<h2 class="module-title">Conducta Avanzada</h2>
				<p class="module-description">
					Permite configurar de forma más avanzada el comportamiento de Compibot, adaptándolo a tus necesidades específicas.
				</p>
				<div class="divider"></div>
				<ul class="module-features">
					<li><span class="check-icon">✔️</span> Afinar comportamiento</li>
					<li><span class="check-icon">✔️</span> Personalidad propia</li>
					<li><span class="check-icon">✔️</span> Rango amplio</li>
					<li><span class="check-icon">✔️</span> Prueba gratuita 30 días</li>
				</ul>
				<div class="module-footer">
					<button class="module-btn" onclick="window.location.href='https://clientes.compibot.com/cart.php?gid=addons';">Activar Mod</button>
					<span class="module-status">Cargando...</span>
				</div>
			</div>

			<div class="module-card" data-module="schedule">
				<h2 class="module-title">Horario de Atención</h2>
				<p class="module-description">
					Activa y desactiva Compibot cuando quieras mediante un configurador semanal por días y horas.
				</p>
				<div class="divider"></div>
				<ul class="module-features">
					<li><span class="check-icon">✔️</span> Por franjas horarias</li>
					<li><span class="check-icon">✔️</span> Días de la semana</li>
					<li><span class="check-icon">✔️</span> 100% Personalizable</li>
					<li><span class="check-icon">✔️</span> 30 días gratis</li>
				</ul>
				<div class="module-footer">
					<button class="module-btn" onclick="window.location.href='https://clientes.compibot.com/cart.php?gid=addons';">Activar Mod</button>
					<span class="module-status">Cargando...</span>
				</div>
			</div>

			<div class="module-card" data-module="summary">
				<h2 class="module-title">Resumen de Conversación</h2>
				<p class="module-description">
					En tu listado de conversaciones aparecerá un breve resumen de la conversación mantenida entre tu usuario y Compibot.
				</p>
				<div class="divider"></div>
				<ul class="module-features">
					<li><span class="check-icon">✔️</span> Resumen breve</li>
					<li><span class="check-icon">✔️</span> Ahorra tiempo</li>
					<li><span class="check-icon">✔️</span> Toma de decisiones</li>
					<li><span class="check-icon">✔️</span> Prueba gratuita 30 días</li>
				</ul>
				<div class="module-footer">
					<button class="module-btn" onclick="window.location.href='https://clientes.compibot.com/cart.php?gid=addons';">Activar Mod</button>
					<span class="module-status">Cargando...</span>
				</div>
			</div>

			<div class="module-card" data-module="customization">
				<h2 class="module-title">Rebranding y Colores</h2>
				<p class="module-description">
					Permite cambiar el nombre y avatar de Compibot para alinearlo con la identidad de tu marca.
				</p>
				<div class="divider"></div>
				<ul class="module-features">
					<li><span class="check-icon">✔️</span> Personalizar nombre</li>
					<li><span class="check-icon">✔️</span> Cambiar avatar</li>
					<li><span class="check-icon">✔️</span> Colores propios</li>
					<li><span class="check-icon">✔️</span> Prueba gratuita 30 días</li>
				</ul>
				<div class="module-footer">
					<button class="module-btn" onclick="window.location.href='https://clientes.compibot.com/cart.php?gid=addons';">Activar Mod</button>
					<span class="module-status">Cargando...</span>
				</div>
			</div>
		</div>
	</div><!-- Fin módulos-section -->

</div><!-- EOF PLUGIN CONTAINER -->


