<?php

/**
 * Página principal del sistema WhatsApp Bot
 * Desarrollado por U-Site.app
 */

require_once 'config/config.php';

// Verificar autenticación - redirigir al login si no está logueado
if (!isUserLoggedIn()) {
    header('Location: login.php');
    exit('Acceso denegado. <a href="login.php">Iniciar sesión</a>');
}

// Redirigir roles que no deben ver el panel WhatsApp
if (isEnfermero()) {
    header('Location: enfermero_portal.php'); exit;
}
$_indexRole    = $_SESSION['admin_user']['role'] ?? '';
$_indexModules = $_SESSION['admin_user']['modules'] ?? [];
if ($_indexRole === 'recepcionista') {
    header('Location: erp.php?m=turnero&v=recepcion'); exit;
}
if (in_array('turnero', $_indexModules, true) && !in_array('whatsapp', $_indexModules, true)) {
    $_indexAdminRoles = ['superadmin', 'admin', 'supervisor', 'bacteriologo'];
    $url = in_array($_indexRole, $_indexAdminRoles, true)
        ? 'erp.php?m=turnero&v=dashboard'
        : 'erp.php?m=turnero&v=recepcion';
    header('Location: ' . $url); exit;
}
if (in_array('lab_dashboard', $_indexModules, true) && !in_array('whatsapp', $_indexModules, true)) {
    header('Location: lab_dashboard.php'); exit;
}

// Verificar conexión a la base de datos
try {
    $db  = Database::getInstance();
    $pdo = $db->getConnection();
    $pdo->query('SELECT 1'); // prueba real
    $dbHost   = DB_HOST ?? 'desconocido';
    $serverIp = $_SERVER['SERVER_ADDR'] ?? gethostbyname(gethostname());
    $dbStatus = '<span class="text-success fw-bold">Conectado</span> <small class="text-muted">(' . htmlspecialchars($dbHost) . ')</small>';
} catch (Exception $e) {
    $dbStatus = '<span class="text-danger fw-bold">Error:</span> ' . htmlspecialchars($e->getMessage());
    $serverIp = $_SERVER['SERVER_ADDR'] ?? '—';
}
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WhatsApp Bot Manager</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
    <link href="./assets/css/styles.css?v=12" rel="stylesheet">
    <link href="./assets/css/diagnostic.css?v=12" rel="stylesheet">
</head>

<body>
    <!-- Sidebar -->
    <nav class="sidebar">
        <div class="sidebar-header">
            <h4><i class="fas fa-robot"></i> WhatsApp Bot</h4>
        </div>
        <ul class="sidebar-menu">
            <li><a href="#dashboard" class="nav-link active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
            <li><a href="#conversations" class="nav-link" data-tab="conversations"><i class="fas fa-comments"></i> Conversaciones</a></li>
            <li><a href="#users" class="nav-link" data-tab="users"><i class="fas fa-users"></i> Usuarios</a></li>
            <li><a href="#menus" class="nav-link" data-tab="menus"><i class="fas fa-list"></i> Menús</a></li>
            <li><a href="#admin_users" class="nav-link" data-tab="admin_users"><i class="fas fa-user-shield"></i> Usuarios del Sistema</a></li>
            <li><a href="#send_message" class="nav-link" data-tab="send_message"><i class="fas fa-paper-plane"></i> Enviar Mensaje</a></li>
            <li><a href="#broadcast" class="nav-link" data-tab="broadcast"><i class="fas fa-broadcast-tower"></i> Envío Masivo <span class="badge bg-success ms-1">NUEVO</span></a></li>
            <li><a href="scheduled_messages.php" class="nav-link"><i class="fas fa-clock"></i> Mensajes Programados</a></li>
            <li><a href="#templates" class="nav-link" data-tab="templates"><i class="fas fa-file-text"></i> Plantillas</a></li>
            <li><a href="#autoresponses" class="nav-link" data-tab="autoresponses"><i class="fas fa-robot"></i> Respuestas Auto</a></li>
            <li><a href="#whatsapp_profile" class="nav-link" data-tab="whatsapp_profile"><i class="fab fa-whatsapp"></i> Perfil WhatsApp</a></li>
            <li><a href="#system_config" class="nav-link" data-tab="system_config"><i class="fas fa-cog"></i> Configuración</a></li>
            <li><a href="#logs" class="nav-link" data-tab="logs"><i class="fas fa-file-alt"></i> Logs</a></li>
            <li><a href="#terms" class="nav-link" data-tab="terms"><i class="fas fa-file-contract"></i> T&amp;C Aceptaciones</a></li>
            <li class="sidebar-divider"></li>
            <li><a href="lab_dashboard.php" class="nav-link text-warning fw-semibold"><i class="fas fa-flask"></i> Módulo Laboratorio <span class="badge bg-warning text-dark ms-1" style="font-size:.65rem">LAB</span></a></li>
            <li class="sidebar-divider"></li>
            <li><a href="logout.php" class="nav-link logout-link" onclick="return confirm('¿Está seguro que desea cerrar sesión?')"><i class="fas fa-sign-out-alt"></i> Cerrar Sesión</a></li>
        </ul>
    </nav>

    <!-- Main Content -->
    <main class="main-content">


        <!-- Header -->
        <header class="content-header">
            <div style="min-width:0;flex:1">
                <h1><i class="fas fa-robot d-none d-sm-inline"></i> <span class="d-none d-sm-inline">Sistema de Gestión</span> WhatsApp Bot</h1>
                <small class="text-muted d-none d-md-block">
                    <i class="fas fa-user"></i> Conectado como <strong><?= htmlspecialchars(
                        $_SESSION['admin_user']['full_name'] ?? $_SESSION['admin_user']['username'] ?? ADMIN_USERNAME
                    ) ?></strong>
                    | <i class="fas fa-clock"></i> Sesión desde: <?= date('H:i:s', $_SESSION['login_time'] ?? time()) ?>
                </small>
            </div>
            <div class="header-actions">
                <!-- Sidebar toggle (visible en pantallas pequeñas) -->
                <button id="sidebar-toggle" class="btn btn-light me-1" title="Abrir menú" style="display:none">
                    <i class="fas fa-bars"></i>
                </button>
                <div class="status-badge">
                    <span class="status-dot status-online"></span>
                    <span class="status-text">En línea</span>
                </div>
                <button class="btn btn-primary btn-sm d-none d-sm-inline-flex align-items-center gap-1" onclick="refreshData()">
                    <i class="fas fa-sync-alt"></i> <span class="d-none d-lg-inline">Actualizar</span>
                </button>
                <a href="logout.php" class="btn btn-outline-danger btn-sm d-none d-sm-inline-flex align-items-center gap-1" onclick="return confirm('¿Está seguro que desea cerrar sesión?')">
                    <i class="fas fa-sign-out-alt"></i> <span class="d-none d-lg-inline">Cerrar Sesión</span>
                </a>
            </div>
        </header>

        <!-- Dashboard Tab -->
        <div id="dashboard" class="tab-content active">
            <div class="row mb-4">
                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stat bg-primary text-white">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="card-stat-title">Total Usuarios</h6>
                                    <h3 class="card-stat-number" id="total-users">-</h3>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-users fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stat bg-success text-white">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="card-stat-title">Mensajes Hoy</h6>
                                    <h3 class="card-stat-number" id="conversations-today">-</h3>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-comment fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stat bg-info text-white">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="card-stat-title">Usuarios Activos</h6>
                                    <h3 class="card-stat-number" id="active-users">-</h3>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-user-check fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-3 col-md-6 mb-4">
                    <div class="card card-stat bg-warning text-white">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h6 class="card-stat-title">Total Mensajes</h6>
                                    <h3 class="card-stat-number" id="total-conversations">-</h3>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-envelope fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-chart-line"></i> Actividad Reciente</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="conversationsChart" height="100"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-clock"></i> Últimos Mensajes</h5>
                        </div>
                        <div class="card-body">
                            <div id="recent-conversations" class="list-group">
                                <!-- Contenido dinámico -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- ══ KPI: Actividad de Pacientes ══════════════════════════════ -->
            <div class="row mt-4" id="kpi-actividad-section">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white d-flex flex-wrap align-items-center gap-2 justify-content-between">
                            <h5 class="mb-0"><i class="fas fa-chart-bar text-primary me-2"></i>Actividad de Pacientes — KPI</h5>
                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                <!-- Rango rápido -->
                                <div class="btn-group btn-group-sm" role="group">
                                    <button class="btn btn-outline-secondary kpi-quick" data-days="7">7 días</button>
                                    <button class="btn btn-secondary kpi-quick active" data-days="30">30 días</button>
                                    <button class="btn btn-outline-secondary kpi-quick" data-days="90">90 días</button>
                                </div>
                                <!-- Rango personalizado -->
                                <input type="date" id="kpi-desde" class="form-control form-control-sm" style="width:140px">
                                <span class="text-muted small">–</span>
                                <input type="date" id="kpi-hasta" class="form-control form-control-sm" style="width:140px">
                                <button class="btn btn-primary btn-sm" onclick="cargarKPI()">
                                    <i class="fas fa-filter me-1"></i>Filtrar
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Tarjetas de totales -->
                            <div class="row g-3 mb-4" id="kpi-cards">
                                <div class="col-6 col-md-3">
                                    <div class="card border-0 bg-primary bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-primary" id="kpi-total-usuarios">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-users me-1"></i>Usuarios únicos</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="card border-0 bg-success bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-success" id="kpi-total-mensajes">—</div>
                                        <div class="small text-muted mt-1"><i class="fab fa-whatsapp me-1"></i>Mensajes recibidos</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="card border-0 bg-warning bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-warning" id="kpi-total-agend">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-calendar-check me-1"></i>Agendamientos</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-3">
                                    <div class="card border-0 bg-info bg-opacity-10 text-center py-3">
                                        <div class="fs-4 fw-bold text-info" id="kpi-pico-dia">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-trophy me-1"></i>Día más activo</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Gráficas -->
                            <div class="row g-3">
                                <div class="col-lg-8">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6 class="text-muted mb-3"><i class="fas fa-calendar-alt me-1"></i>Por día</h6>
                                            <div style="position:relative; height:220px">
                                                <canvas id="kpiChartDia"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6 class="text-muted mb-3"><i class="fas fa-calendar-week me-1"></i>Por día de la semana</h6>
                                            <div style="position:relative; height:220px">
                                                <canvas id="kpiChartSemana"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ════════════════════════════════════════════════════════════ -->

            <!-- ══ KPI: Tiempo de Respuesta de Asesores ════════════════════ -->
            <div class="row mt-4" id="kpi-asesor-section">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white d-flex flex-wrap align-items-center gap-2 justify-content-between">
                            <h5 class="mb-0"><i class="fas fa-stopwatch text-danger me-2"></i>Tiempo de Respuesta de Asesores</h5>
                            <div class="d-flex flex-wrap gap-2 align-items-center">
                                <div class="btn-group btn-group-sm" role="group">
                                    <button class="btn btn-outline-secondary kpi-asesor-quick" data-days="7">7 días</button>
                                    <button class="btn btn-secondary kpi-asesor-quick active" data-days="30">30 días</button>
                                    <button class="btn btn-outline-secondary kpi-asesor-quick" data-days="90">90 días</button>
                                </div>
                                <input type="date" id="kpia-desde" class="form-control form-control-sm" style="width:140px">
                                <span class="text-muted small">–</span>
                                <input type="date" id="kpia-hasta" class="form-control form-control-sm" style="width:140px">
                                <button class="btn btn-danger btn-sm" onclick="cargarKPIAsesor()">
                                    <i class="fas fa-filter me-1"></i>Filtrar
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <!-- Tarjetas de totales -->
                            <div class="row g-3 mb-4">
                                <div class="col-6 col-md-2">
                                    <div class="card border-0 bg-danger bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-danger" id="kpia-total-sesiones">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-headset me-1"></i>Atenciones</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="card border-0 bg-warning bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-warning" id="kpia-prom-resp">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-clock me-1"></i>Prom. 1ª respuesta</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="card border-0 bg-info bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-info" id="kpia-prom-dur">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-hourglass-half me-1"></i>Prom. duración</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="card border-0 bg-success bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-success" id="kpia-pct-rapidas">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-bolt me-1"></i>Resp. &lt; 3 min</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-2">
                                    <div class="card border-0 bg-secondary bg-opacity-10 text-center py-3">
                                        <div class="fs-2 fw-bold text-secondary" id="kpia-sin-resp">—</div>
                                        <div class="small text-muted mt-1"><i class="fas fa-comment-slash me-1"></i>Sin respuesta</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Gráficas -->
                            <div class="row g-3 mb-3">
                                <div class="col-lg-8">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6 class="text-muted mb-3"><i class="fas fa-chart-line me-1"></i>Promedio de respuesta por día (minutos)</h6>
                                            <div style="position:relative; height:200px">
                                                <canvas id="kpiaChartDia"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="card border-0 bg-light">
                                        <div class="card-body">
                                            <h6 class="text-muted mb-3"><i class="fas fa-chart-pie me-1"></i>Distribución de tiempos</h6>
                                            <div style="position:relative; height:200px">
                                                <canvas id="kpiaChartHist"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tabla por asesor -->
                            <div class="card border-0 bg-light">
                                <div class="card-body p-0">
                                    <h6 class="text-muted mb-0 px-3 pt-3"><i class="fas fa-user-tie me-1"></i>Detalle por asesor</h6>
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover mb-0 mt-2" id="kpia-tabla-asesores">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Asesor</th>
                                                    <th class="text-center">Atenciones</th>
                                                    <th class="text-center">Prom. 1ª respuesta</th>
                                                    <th class="text-center">Prom. duración</th>
                                                    <th>Velocidad</th>
                                                </tr>
                                            </thead>
                                            <tbody id="kpia-body-asesores">
                                                <tr><td colspan="5" class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin"></i></td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- ════════════════════════════════════════════════════════════ -->

            <!-- Rate Limiting Monitor -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5><i class="fas fa-tachometer-alt"></i> Monitoreo de Rate Limiting - Facebook API</h5>
                            <button class="btn btn-sm btn-outline-primary" onclick="refreshRateLimitStats()">
                                <i class="fas fa-sync-alt"></i> Actualizar
                            </button>
                        </div>
                        <div class="card-body">
                            <!-- Status General -->
                            <div class="alert" id="rate-limit-status" role="alert">
                                <i class="fas fa-spinner fa-spin"></i> Cargando estadísticas...
                            </div>
                            
                            <!-- Métricas de Facebook -->
                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body text-center">
                                            <h6 class="text-muted mb-2">Call Count</h6>
                                            <div class="progress mb-2" style="height: 25px;">
                                                <div id="fb-call-count-bar" class="progress-bar" role="progressbar" style="width: 0%">0%</div>
                                            </div>
                                            <small class="text-muted">Llamadas a la API</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body text-center">
                                            <h6 class="text-muted mb-2">Total Time</h6>
                                            <div class="progress mb-2" style="height: 25px;">
                                                <div id="fb-total-time-bar" class="progress-bar" role="progressbar" style="width: 0%">0%</div>
                                            </div>
                                            <small class="text-muted">Tiempo de procesamiento</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body text-center">
                                            <h6 class="text-muted mb-2">Total CPU Time</h6>
                                            <div class="progress mb-2" style="height: 25px;">
                                                <div id="fb-cpu-time-bar" class="progress-bar" role="progressbar" style="width: 0%">0%</div>
                                            </div>
                                            <small class="text-muted">Tiempo de CPU</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Límites Locales -->
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-3"><i class="fas fa-shield-alt"></i> Límites Locales (Redis)</h6>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6>Por Segundo</h6>
                                            <h4 id="local-limit-second" class="mb-0">-</h4>
                                            <small class="text-muted">Límite: <span id="local-limit-second-max">80</span>/s</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6>Por Hora</h6>
                                            <h4 id="local-limit-hour" class="mb-0">-</h4>
                                            <small class="text-muted">Límite: <span id="local-limit-hour-max">1000</span>/h</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6>Por Día</h6>
                                            <h4 id="local-limit-day" class="mb-0">-</h4>
                                            <small class="text-muted">Límite: <span id="local-limit-day-max">10000</span>/d</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Alertas Recientes -->
                            <div class="row mt-4" id="rate-limit-alerts-section" style="display:none;">
                                <div class="col-12">
                                    <h6 class="mb-3"><i class="fas fa-exclamation-triangle"></i> Alertas Recientes</h6>
                                    <div id="rate-limit-alerts" class="list-group">
                                        <!-- Alertas dinámicas -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Conversations Tab -->
        <div id="conversations" class="tab-content">
            <div class="card conversation-card">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0 d-flex align-items-center">
                                <i class="fas fa-comments"></i>&nbsp; Conversaciones
                                <a href="conversations.php" class="btn btn-sm btn-light ms-3" style="font-size:0.75rem;">Ver nueva versión</a>
                            </h5>
                            <small class="text-white-50">Administra tus chats de WhatsApp</small>
                        </div>
                        <div class="col-auto d-flex align-items-center gap-2">
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0">
                                    <i class="fas fa-search"></i>
                                </span>
                                <input type="text" class="form-control border-0"
                                    placeholder="Buscar conversaciones..."
                                    id="search-conversations">
                            </div>
                            <button class="btn btn-light btn-sm text-nowrap" onclick="exportConversations()" title="Exportar todas las conversaciones a CSV">
                                <i class="fas fa-file-csv"></i> Exportar
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="conversation-list" id="conversations-container">
                        <!-- Contenido dinámico -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Users Tab -->
        <div id="users" class="tab-content">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-users"></i> Gestión de Usuarios</h5>
                    <button class="btn btn-primary" onclick="exportUsers()">
                        <i class="fas fa-download"></i> Exportar
                    </button>
                </div>
                <div class="card-body">
                    <!-- Búsqueda de usuarios -->
                    <div class="mb-3">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                            <input 
                                type="text" 
                                class="form-control" 
                                id="users-search" 
                                placeholder="Buscar por teléfono, nombre o email..."
                                onkeyup="searchUsers()"
                            >
                        </div>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Teléfono</th>
                                    <th>Nombre</th>
                                    <th>Estado</th>
                                    <th>Menú Actual</th>
                                    <th>Registro</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="users-table">
                                <!-- Contenido dinámico -->
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Paginación -->
                    <div id="users-pagination"></div>
                </div>
            </div>
        </div>

        <!-- Menus Tab -->
        <div id="menus" class="tab-content">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-list"></i> Menús Configurados</h5>
                    <button class="btn btn-primary" onclick="openCreateMenuModal()">
                        <i class="fas fa-plus"></i> Nuevo Menú
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Clave</th>
                                    <th>Descripción</th>
                                    <th>Estado</th>
                                    <th>Opciones</th>
                                    <th>Fecha Creación</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="menus-table">
                                <!-- Contenido dinámico -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Admin Users Tab -->
        <div id="admin_users" class="tab-content">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center py-5">
                    <i class="fas fa-users-cog fa-3x text-primary mb-3"></i>
                    <h5 class="fw-semibold mb-2">Gestión de Usuarios &amp; Roles</h5>
                    <p class="text-muted mb-4">
                        La administración de usuarios, roles y permisos de módulo<br>
                        se encuentra centralizada en el Módulo de Laboratorio.
                    </p>
                    <a href="lab_usuarios.php" class="btn btn-primary px-4">
                        <i class="fas fa-external-link-alt me-2"></i>Ir a Usuarios &amp; Roles
                    </a>
                </div>
            </div>
        </div>

        <!-- conversations Tab -->
        <div id="send_message" class="tab-content">
            <div class="row">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5><i class="fas fa-paper-plane"></i> Enviar Mensaje</h5>
                            <div>
                                <button class="btn btn-sm btn-secondary" onclick="whatsappManager.loadconversations()">🔄 Actualizar</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <form id="send-message-form">
                                <div class="mb-3">
                                    <label class="form-label">Tipo de Destinatario</label>
                                    <select class="form-control" id="recipient-type" onchange="toggleRecipientType()">
                                        <option value="existing">Usuario Registrado</option>
                                        <option value="manual">Número Manual (Solo Plantillas)</option>
                                    </select>
                                </div>
                                <div class="mb-3" id="existing-recipient-group">
                                    <label class="form-label">Destinatario</label>
                                    <select class="form-control" id="message-recipient">
                                        <option value="">Seleccionar usuario...</option>
                                    </select>
                                </div>
                                <div class="mb-3" id="manual-recipient-group" style="display: none;">
                                    <label class="form-label">Número de WhatsApp</label>
                                    <input type="text" class="form-control" id="manual-recipient" placeholder="+57XXXXXXXXX">
                                    <small class="form-text text-warning">
                                        ⚠️ Solo se pueden enviar plantillas aprobadas a números nuevos
                                    </small>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Tipo de Mensaje</label>
                                    <select class="form-control" id="message-type" onchange="toggleMessageType()">
                                        <option value="text">Texto</option>
                                        <option value="template">Plantilla</option>
                                    </select>
                                </div>
                                <div class="mb-3" id="message-text-group">
                                    <label class="form-label">Mensaje</label>
                                    <textarea class="form-control" id="message-text" rows="4" placeholder="Escribe tu mensaje aquí..."></textarea>
                                </div>
                                <div class="mb-3" id="template-group" style="display: none;">
                                    <label class="form-label">Plantilla</label>
                                    <select class="form-control" id="message-template" onchange="loadMessageTemplateDetails()">
                                        <option value="">Seleccionar plantilla...</option>
                                    </select>
                                </div>
                                
                                <!-- Variables de la plantilla -->
                                <div id="message-template-variables" class="mb-3" style="display: none;">
                                    <!-- Se llenarán dinámicamente -->
                                </div>
                                
                                <!-- Preview de la plantilla -->
                                <div id="message-template-preview" class="mb-3" style="display: none;">
                                    <label class="form-label"><i class="fas fa-eye"></i> Vista Previa</label>
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <div id="message-preview-content"></div>
                                        </div>
                                    </div>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane"></i> Enviar Mensaje
                                </button>
                                <input type="hidden" name="template_params" id="template-params" value="">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Broadcast Tab -->
        <div id="broadcast" class="tab-content">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="card shadow-lg">
                        <div class="card-header bg-warning text-white">
                            <h4 class="mb-0"><i class="fas fa-broadcast-tower"></i> Envío Masivo de Mensajes</h4>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-success mb-4">
                                <i class="fas fa-check-circle"></i>
                                <strong>¡Envío Masivo Activo!</strong> Ahora puedes enviar mensajes a múltiples usuarios simultáneamente.
                            </div>
                            
                            <form id="broadcast-form" onsubmit="return handleBroadcastSubmit(event)">
                                <div class="mb-4">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-filter"></i> Tipo de Selección
                                    </label>
                                    <select class="form-control form-control-lg" id="broadcast-selection-type" onchange="toggleBroadcastSelectionType()">
                                        <option value="filter">📋 Por filtro de usuarios</option>
                                        <option value="specific">👥 Usuarios específicos</option>
                                    </select>
                                </div>

                                <!-- Filtro de usuarios -->
                                <div class="mb-4" id="broadcast-filter-container">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-filter"></i> Filtro de Usuarios
                                    </label>
                                    <select class="form-control form-control-lg" id="broadcast-filter">
                                        <option value="all">📋 Todos los usuarios activos</option>
                                        <option value="active">🔥 Solo usuarios con conversaciones recientes (7 días)</option>
                                        <option value="recent">✨ Usuarios recientes (30 días)</option>
                                    </select>
                                    <small class="form-text text-muted">
                                        <i class="fas fa-info-circle"></i> Selecciona qué usuarios recibirán el mensaje
                                    </small>
                                </div>

                                <!-- Selección específica de usuarios -->
                                <div class="mb-4" id="broadcast-users-container" style="display: none;">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-users"></i> Seleccionar Usuarios
                                    </label>
                                    <select class="form-control" id="broadcast-users" multiple="multiple">
                                        <!-- Opciones cargadas dinámicamente -->
                                    </select>
                                    <small class="form-text text-muted">
                                        <i class="fas fa-info-circle"></i> Selecciona uno o más usuarios para enviar el mensaje
                                    </small>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-envelope"></i> Tipo de Mensaje
                                    </label>
                                    <select class="form-control form-control-lg" id="broadcast-message-type" onchange="toggleBroadcastMessageType()">
                                        <option value="text">📝 Mensaje de texto</option>
                                        <option value="template">📋 Plantilla de WhatsApp</option>
                                    </select>
                                </div>

                                <!-- Mensaje de texto -->
                                <div class="mb-4" id="broadcast-text-container">
                                
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-comment-dots"></i> Mensaje
                                    </label>
                                    <textarea 
                                        class="form-control" 
                                        id="broadcast-message" 
                                        rows="6" 
                                        placeholder="Escribe el mensaje que deseas enviar a todos los usuarios...
                                        
                                        Ejemplo:
                                        ¡Hola! 👋 Tenemos una promoción especial para ti..."
                                        maxlength="4096"></textarea>
                                    <div class="d-flex justify-content-between mt-2">
                                        <small class="form-text text-muted">
                                            <i class="fas fa-keyboard"></i> Máximo 4096 caracteres
                                        </small>
                                        <small class="form-text text-muted">
                                            <span id="char-count">0</span> / 4096
                                        </small>
                                    </div>
                                </div>

                                <!-- Selección de plantilla -->
                                <div class="mb-4" id="broadcast-template-container" style="display: none;">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-file-text"></i> Seleccionar Plantilla
                                    </label>
                                    <select class="form-control form-control-lg" id="broadcast-template" onchange="loadBroadcastTemplateDetails()">
                                        <option value="">-- Selecciona una plantilla --</option>
                                    </select>
                                    <small class="form-text text-muted">
                                        <i class="fas fa-info-circle"></i> Solo plantillas aprobadas
                                    </small>
                                </div>

                                <!-- Variables de plantilla -->
                                <div id="broadcast-template-variables" class="mb-4" style="display: none;">
                                    <!-- Variables dinámicas -->
                                </div>

                                <!-- Vista previa de plantilla -->
                                <div id="broadcast-template-preview" class="mb-4" style="display: none;">
                                    <label class="form-label fw-bold">
                                        <i class="fas fa-eye"></i> Vista Previa
                                    </label>
                                    <div class="alert alert-info" id="broadcast-preview-content">
                                        <!-- Contenido de vista previa -->
                                    </div>
                                </div>
                                
                                <div class="alert alert-warning d-flex align-items-center">
                                    <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                                    <div>
                                        <strong>Importante:</strong> Este mensaje se enviará a múltiples usuarios. 
                                        <br>Verifica cuidadosamente el contenido antes de enviar.
                                    </div>
                                </div>
                                
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-warning btn-lg">
                                        <i class="fas fa-broadcast-tower"></i> Enviar Mensaje Masivo
                                    </button>
                                </div>
                            </form>
                            
                            <div class="mt-4">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <h6 class="fw-bold"><i class="fas fa-lightbulb text-warning"></i> Consejos para envío masivo:</h6>
                                        <ul class="mb-0 small">
                                            <li>Personaliza tu mensaje para que sea relevante</li>
                                            <li>Evita enviar mensajes muy frecuentes</li>
                                            <li>Respeta la ventana de 24 horas de WhatsApp</li>
                                            <li>Usa plantillas aprobadas para nuevos contactos</li>
                                            <li>Prueba con un grupo pequeño primero</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Historial de Envíos Masivos -->
            <div class="card mt-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-history me-2 text-secondary"></i>Historial de Envíos Masivos</h5>
                    <button class="btn btn-sm btn-outline-secondary" onclick="loadBroadcastHistory(1)">
                        <i class="fas fa-sync-alt"></i> Actualizar
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Fecha</th>
                                    <th>Tipo</th>
                                    <th>Mensaje / Plantilla</th>
                                    <th class="text-center">Total</th>
                                    <th class="text-center text-success">Enviados</th>
                                    <th class="text-center text-danger">Errores</th>
                                    <th>Enviado por</th>
                                </tr>
                            </thead>
                            <tbody id="broadcast-history-tbody">
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        <i class="fas fa-spinner fa-spin me-1"></i> Cargando historial...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="bh-pagination-row" class="d-flex justify-content-between align-items-center px-3 py-2 border-top" style="display:none!important">
                        <small class="text-muted" id="bh-pagination-info"></small>
                        <div class="d-flex gap-1" id="bh-pagination-btns"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- WhatsApp Profile Tab -->
        <div id="whatsapp_profile" class="tab-content">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fab fa-whatsapp text-success"></i> Perfil de WhatsApp Business</h5>
                    <button class="btn btn-outline-primary btn-sm" onclick="loadWhatsAppProfile()">
                        <i class="fas fa-sync-alt"></i> Recargar desde WhatsApp
                    </button>
                </div>
                <div class="card-body">
                    <div class="row">
                        <!-- Foto de perfil -->
                        <div class="col-md-3 text-center mb-4">
                            <div class="mb-3">
                                <img id="wp-profile-photo-preview" src="" alt="Foto de perfil"
                                    style="width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #25D366;display:none;">
                                <div id="wp-profile-photo-placeholder"
                                    style="width:120px;height:120px;border-radius:50%;background:#f0f0f0;border:3px solid #ccc;display:inline-flex;align-items:center;justify-content:center;">
                                    <i class="fas fa-user fa-3x text-muted"></i>
                                </div>
                            </div>
                            <div class="mb-2">
                                <label class="form-label small fw-bold">Cambiar foto de perfil</label>
                                <input type="file" id="wp-photo-file" class="form-control form-control-sm" accept="image/jpeg,image/png">
                                <small class="text-muted">JPG o PNG, máx. 5 MB</small>
                            </div>
                            <button class="btn btn-success btn-sm w-100" onclick="uploadWhatsAppProfilePhoto()">
                                <i class="fas fa-upload"></i> Subir foto
                            </button>
                        </div>

                        <!-- Datos del perfil -->
                        <div class="col-md-9">
                            <form id="wp-profile-form">
                                <div class="mb-3">
                                    <label class="form-label">Descripción (about) <small class="text-muted">— visible en el perfil de WhatsApp</small></label>
                                    <textarea class="form-control" id="wp-about" rows="2" maxlength="139" placeholder="Ej: Horario de atención: L-V 8am-6pm"></textarea>
                                    <small class="text-muted">Máx. 139 caracteres</small>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Descripción larga</label>
                                    <textarea class="form-control" id="wp-description" rows="3" maxlength="512" placeholder="Descripción detallada del negocio"></textarea>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Dirección</label>
                                        <input type="text" class="form-control" id="wp-address" placeholder="Dirección física del negocio">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Correo electrónico</label>
                                        <input type="email" class="form-control" id="wp-email" placeholder="contacto@empresa.com">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Sitio web</label>
                                    <input type="url" class="form-control" id="wp-website" placeholder="https://www.empresa.com">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Categoría de negocio</label>
                                    <select class="form-select" id="wp-vertical">
                                        <option value="">— Seleccionar —</option>
                                        <option value="UNDEFINED">Sin categoría</option>
                                        <option value="OTHER">Otro</option>
                                        <option value="AUTO">Automotriz</option>
                                        <option value="BEAUTY">Belleza / Spa</option>
                                        <option value="APPAREL">Ropa / Moda</option>
                                        <option value="EDU">Educación</option>
                                        <option value="ENTERTAIN">Entretenimiento</option>
                                        <option value="EVENT_PLAN">Eventos</option>
                                        <option value="FINANCE">Finanzas</option>
                                        <option value="GROCERY">Supermercado</option>
                                        <option value="GOVT">Gobierno</option>
                                        <option value="HOTEL">Hotel</option>
                                        <option value="HEALTH">Salud / Medicina</option>
                                        <option value="NONPROFIT">Organización sin fines de lucro</option>
                                        <option value="PROF_SERVICES">Servicios profesionales</option>
                                        <option value="RETAIL">Comercio minorista</option>
                                        <option value="TRAVEL">Viajes / Turismo</option>
                                        <option value="RESTAURANT">Restaurante</option>
                                        <option value="NOT_A_BIZ">No es un negocio</option>
                                    </select>
                                </div>
                                <button type="button" class="btn btn-primary" onclick="saveWhatsAppProfile()">
                                    <i class="fas fa-save"></i> Guardar cambios de perfil
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Templates Tab -->
        <div id="templates" class="tab-content">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-file-text"></i> Plantillas de Mensaje</h5>
                    <div>
                        <button class="btn btn-success" id="btn-sync-templates" onclick="syncTemplatesFromFacebook()">
                            <i class="fas fa-sync-alt"></i> Sincronizar desde Facebook
                        </button>
                        <button class="btn btn-danger ms-2" id="btn-reset-sync-templates" onclick="resetAndSyncTemplates()">
                            <i class="fas fa-trash-restore"></i> Limpiar y Re-sincronizar
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Mensaje informativo sobre creación de plantillas -->
                    <div class="alert alert-info" role="alert">
                        <h6 class="alert-heading"><i class="fas fa-info-circle"></i> ¿Cómo crear nuevas plantillas?</h6>
                        <p class="mb-2">Las plantillas de WhatsApp deben crearse directamente en el Administrador de Meta Business.</p>
                        <p class="mb-3">Una vez creadas y aprobadas por Meta, puedes sincronizarlas aquí usando el botón "Sincronizar desde Facebook".</p>
                        <a href="https://business.facebook.com/latest/whatsapp_manager/message_templates?business_id=2144688622601603" 
                           class="btn btn-primary btn-sm" target="_blank" rel="noopener noreferrer">
                            <i class="fas fa-external-link-alt"></i> Ir al Administrador de Plantillas de Meta
                        </a>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Plantilla WhatsApp</th>
                                    <th>Idioma</th>
                                    <th>Categoría</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="templates-table">
                                <!-- Contenido dinámico -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Auto Responses Tab -->
        <div id="autoresponses" class="tab-content">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-robot"></i> Respuestas Automáticas</h5>
                    <button class="btn btn-primary" onclick="showCreateAutoResponseModal()">
                        <i class="fas fa-plus"></i> Nueva Respuesta
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>Tipo</th>
                                    <th>Palabra Clave</th>
                                    <th>Respuesta</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="autoresponses-table">
                                <!-- Contenido dinámico -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- system_config Tab -->
        <div id="system_config" class="tab-content">
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-cog"></i> Configuración del Sistema</h5>
                        </div>
                        <div class="card-body">
                            <form id="system_config-form">
                                <div class="mb-4">
                                    <h6 class="text-muted">WhatsApp Business API</h6>
                                    <div class="mb-3">
                                        <label class="form-label">Token de Acceso</label>
                                        <input type="password" class="form-control" id="whatsapp-token" placeholder="Token de WhatsApp Business API">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Phone Number ID</label>
                                        <input type="text" class="form-control" id="phone-number-id" placeholder="ID del número de teléfono">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Business Account ID (WABA ID)</label>
                                        <input type="text" class="form-control" id="business-account-id" placeholder="ID de la cuenta de WhatsApp Business">
                                        <small class="form-text text-muted">Necesario para sincronizar plantillas desde Facebook</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Webhook Verify Token</label>
                                        <input type="text" class="form-control" id="webhook-token" placeholder="Token de verificación del webhook">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">API URL</label>
                                        <input type="text" class="form-control" id="api-url" placeholder="URL de la API" value="https://graph.facebook.com/v22.0/">
                                    </div>
                                </div>

                                <div class="mb-4">
                                    <h6 class="text-muted">Configuración General</h6>
                                    <div class="mb-3">
                                        <label class="form-label">Nombre de la Empresa</label>
                                        <input type="text" class="form-control" id="business-name" placeholder="Nombre de tu empresa">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Mensaje de Bienvenida</label>
                                        <textarea class="form-control" id="welcome-message" rows="3" placeholder="Mensaje que se envía a usuarios nuevos"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">
                                            <i class="fas fa-file-contract me-1 text-primary"></i>Mensaje de Términos y Condiciones
                                        </label>
                                        <textarea class="form-control" id="terms-message" rows="4"
                                            placeholder="Mensaje de aceptación de términos y condiciones. Se muestra antes de cualquier interacción."></textarea>
                                        <small class="form-text text-muted">Este mensaje se muestra al usuario antes de aceptar cualquier cosa. Incluye las opciones de aceptar o rechazar.</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">
                                            <i class="fas fa-ban me-1 text-danger"></i>Mensaje cuando rechaza los términos
                                        </label>
                                        <textarea class="form-control" id="terms-rejected-message" rows="3"
                                            placeholder="Mensaje que se envía cuando el usuario rechaza los términos y condiciones."></textarea>
                                        <small class="form-text text-muted">Se envía automáticamente si el usuario elige no aceptar.</small>
                                    </div>
                                </div>

                                <!-- ── GESTIÓN DOCUMENTO PDF TÉRMINOS ─────────────────────────── -->
                                <div class="card border-0 bg-light mb-4">
                                    <div class="card-body p-3">
                                        <h6 class="mb-3"><i class="fas fa-file-pdf text-danger me-1"></i>Documento PDF de Términos</h6>

                                        <div class="mb-3" id="terms-doc-current" style="display:none;">
                                            <div class="d-flex align-items-center gap-2 p-2 bg-white rounded border">
                                                <i class="fas fa-file-pdf text-danger fa-lg"></i>
                                                <div class="flex-grow-1 overflow-hidden">
                                                    <div class="text-truncate small fw-bold" id="terms-doc-name">—</div>
                                                    <div class="text-muted" style="font-size:.75rem;">Versión: <span id="terms-doc-version">—</span></div>
                                                </div>
                                                <button type="button" class="btn btn-sm btn-outline-secondary" id="terms-doc-copy-btn" title="Copiar URL">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                                <a href="#" target="_blank" id="terms-doc-link" class="btn btn-sm btn-outline-primary" title="Abrir PDF">
                                                    <i class="fas fa-external-link-alt"></i>
                                                </a>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label small">Versión del nuevo documento <span class="text-muted">(ej. 2026-06)</span></label>
                                            <input type="text" class="form-control form-control-sm" id="terms-new-version" placeholder="2026-06">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label small">Subir nuevo PDF</label>
                                            <input class="form-control form-control-sm" type="file" id="terms-pdf-file" accept="application/pdf">
                                        </div>

                                        <div class="mb-3 form-check">
                                            <input class="form-check-input" type="checkbox" id="terms-force-reaccept">
                                            <label class="form-check-label small" for="terms-force-reaccept">
                                                <strong>Forzar re-aceptación a todos los usuarios</strong>
                                                <span class="text-muted d-block" style="font-size:.75rem;">Al guardar, todos los usuarios deberán aceptar los nuevos términos la próxima vez que escriban.</span>
                                            </label>
                                        </div>

                                        <button type="button" class="btn btn-danger btn-sm" id="terms-upload-btn">
                                            <i class="fas fa-upload me-1"></i>Guardar documento y configuración
                                        </button>
                                        <div id="terms-upload-status" class="mt-2 small" style="display:none;"></div>
                                    </div>
                                </div>
                                <!-- ── / GESTIÓN DOCUMENTO PDF ────────────────────────────────── -->

                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> Guardar Configuración
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <!-- Panel de Diagnóstico -->
                    <div class="card mb-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5><i class="fas fa-stethoscope"></i> Diagnóstico</h5>
                            <button class="btn btn-sm btn-outline-primary" onclick="runDiagnostic()">
                                <i class="fas fa-play"></i> Ejecutar
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="diagnostic-results">
                                <p class="text-muted">Haz clic en "Ejecutar" para verificar el estado del sistema</p>
                            </div>
                            <div class="mt-3" id="diagnostic-actions" style="display: none;">
                                <a href="approve_templates.html" class="btn btn-success btn-sm" target="_blank">
                                    🔧 Solucionar Problema de Plantillas
                                </a>
                                <a href="GUIA_ERROR_PLANTILLAS.md" class="btn btn-info btn-sm" target="_blank">
                                    📋 Ver Guía Completa
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Información del Sistema -->
                    <div class="card">
                        <div class="card-header">
                            <h5><i class="fas fa-info-circle"></i> Información del Sistema</h5>
                        </div>
                        <div class="card-body">
                            <dl class="row">
                                <dt class="col-sm-6">Versión:</dt>
                                <dd class="col-sm-6"><span class="badge bg-primary">v<?php echo APP_VERSION; ?></span></dd>

                                <dt class="col-sm-6">PHP:</dt>
                                <dd class="col-sm-6"><?php echo PHP_VERSION; ?></dd>

                                <dt class="col-sm-6">Base de Datos:</dt>
                                <dd class="col-sm-6"><?php echo $dbStatus; ?></dd>

                                <dt class="col-sm-6">IP del Servidor:</dt>
                                <dd class="col-sm-6"><code><?php echo htmlspecialchars($serverIp); ?></code></dd>

                                <dt class="col-sm-6">Webhook URL:</dt>
                                <dd class="col-sm-6">
                                    <code><?php echo htmlspecialchars(APP_URL); ?>/api/webhook.php</code>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logs Tab -->
        <div id="logs" class="tab-content">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5><i class="fas fa-file-alt"></i> Logs del Sistema</h5>
                    <div>
                        <select class="form-select form-select-sm d-inline-block w-auto me-2" id="log-level-filter" onchange="filterLogs()">
                            <option value="all">Todos los niveles</option>
                            <option value="ERROR">❌ Error</option>
                            <option value="WARNING">⚠️ Warning</option>
                            <option value="INFO">ℹ️ Info</option>
                            <option value="DEBUG">🔧 Debug</option>
                            <option value="SUCCESS">✅ Success</option>
                        </select>
                        <button class="btn btn-outline-primary btn-sm" onclick="refreshLogs()">
                            <i class="fas fa-sync-alt"></i> Actualizar
                        </button>
                        <button class="btn btn-outline-danger btn-sm" onclick="clearLogs()" title="Limpiar logs del sistema">
                            <i class="fas fa-trash"></i> Limpiar
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <input type="text" class="form-control" id="log-search" placeholder="🔍 Buscar en logs..." onkeyup="filterLogs()">
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th style="width: 140px;">Fecha/Hora</th>
                                    <th style="width: 80px;">Nivel</th>
                                    <th>Mensaje</th>
                                    <th style="width: 120px;">Origen</th>
                                    <th style="width: 80px;">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="logs-table">
                                <!-- Contenido dinámico -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    <!-- T&C Aceptaciones Tab -->
        <div id="terms" class="tab-content">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h5 class="mb-0"><i class="fas fa-file-contract me-2"></i>Aceptaciones de Términos y Condiciones</h5>
                    <div class="d-flex gap-2 align-items-center flex-wrap">
                        <!-- Filtros -->
                        <select id="terms-filter-estado" class="form-select form-select-sm" style="width:auto;">
                            <option value="">Todos los estados</option>
                            <option value="pendiente">Pendiente</option>
                            <option value="aceptado">Aceptado</option>
                            <option value="rechazado">Rechazado</option>
                        </select>
                        <input type="date" id="terms-filter-fecha" class="form-control form-control-sm" style="width:auto;">
                        <input type="text" id="terms-filter-phone" class="form-control form-control-sm" placeholder="Teléfono..." style="width:140px;">
                        <button class="btn btn-sm btn-primary" onclick="termsAdmin.cargar()"><i class="fas fa-search"></i></button>
                        <a id="terms-export-btn" href="lab_terminos_export.php" target="_blank" class="btn btn-sm btn-outline-success">
                            <i class="fas fa-file-csv me-1"></i>CSV
                        </a>
                    </div>
                </div>
                <div class="card-body p-0">
                    <!-- Stats row -->
                    <div class="d-flex gap-0 border-bottom" id="terms-stats-row">
                        <div class="flex-fill text-center py-3 border-end">
                            <div class="h4 mb-0 text-success fw-bold" id="terms-stat-aceptado">—</div>
                            <div class="text-muted" style="font-size:.8rem;">Aceptaron</div>
                        </div>
                        <div class="flex-fill text-center py-3 border-end">
                            <div class="h4 mb-0 text-danger fw-bold" id="terms-stat-rechazado">—</div>
                            <div class="text-muted" style="font-size:.8rem;">Rechazaron</div>
                        </div>
                        <div class="flex-fill text-center py-3 border-end">
                            <div class="h4 mb-0 text-warning fw-bold" id="terms-stat-pendiente">—</div>
                            <div class="text-muted" style="font-size:.8rem;">Pendientes</div>
                        </div>
                        <div class="flex-fill text-center py-3">
                            <div class="h4 mb-0 fw-bold" id="terms-stat-total">—</div>
                            <div class="text-muted" style="font-size:.8rem;">Total</div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover table-sm mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Teléfono</th>
                                    <th>Nombre</th>
                                    <th>Estado</th>
                                    <th>Versión T&amp;C</th>
                                    <th>Fecha envío</th>
                                    <th>Fecha respuesta</th>
                                </tr>
                            </thead>
                            <tbody id="terms-table-body">
                                <tr><td colspan="7" class="text-center text-muted py-4">Haz clic en <i class="fas fa-search"></i> para cargar</td></tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- Paginación -->
                    <div class="d-flex justify-content-between align-items-center px-3 py-2 border-top" id="terms-pagination-row" style="display:none!important;">
                        <small class="text-muted" id="terms-pagination-info"></small>
                        <div class="d-flex gap-1" id="terms-pagination-btns"></div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Modal - Crear Plantilla -->
    <div class="modal fade" id="createTemplateModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">📝 Nueva Plantilla de WhatsApp</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="template-form">
                        <div class="mb-3">
                            <label class="form-label">Nombre descriptivo *</label>
                            <input type="text" class="form-control" id="template-name" required placeholder="ej: Bienvenida Cliente">
                            <small class="form-text text-muted">Nombre interno para identificar la plantilla</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nombre en WhatsApp *</label>
                            <input type="text" class="form-control" id="template-whatsapp-name" required placeholder="ej: welcome_customer">
                            <small class="form-text text-muted">Debe coincidir exactamente con el nombre en WhatsApp Business Manager</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Idioma</label>
                            <input type="text" class="form-control" id="template-language" name="template_language" value="<?= defined('APP_LANG') ? constant('APP_LANG') : 'es_ES' ?>" placeholder="ej: es_ES, en_US, pt_BR">
                            <small class="form-text text-muted">Código de idioma según WhatsApp (ej: es_ES, en_US, pt_BR)</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Categoría</label>
                            <select class="form-control" id="template-category">
                                <option value="utility">Utilidad</option>
                                <option value="marketing">Marketing</option>
                                <option value="authentication">Autenticación</option>
                            </select>
                        </div>
                        <div class="alert alert-info">
                            <strong>⚠️ Importante:</strong> La plantilla debe ser creada y aprobada primero en WhatsApp Business Manager.
                            Este formulario solo registra plantillas ya existentes en WhatsApp.
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="app.saveTemplate()">Guardar Plantilla</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Crear Menú -->
    <div class="modal fade" id="createMenuModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">📋 Nuevo Menú</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="menu-form">
                        <div class="mb-3">
                            <label class="form-label">Nombre del Menú *</label>
                            <input type="text" class="form-control" id="menu-name" required placeholder="ej: Menú Principal">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Descripción</label>
                            <textarea class="form-control" id="menu-description" rows="3" placeholder="Descripción del menú (opcional)"></textarea>
                        </div>
                        <div class="alert alert-info">
                            <strong>ℹ️ Información:</strong> Después de crear el menú, podrás agregar opciones y configurar las respuestas.
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="saveNewMenu()">Crear Menú</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Los modales de usuario se centralizaron en lab_usuarios.php -->

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="./assets/js/app_simple.js?v=20"></script>
    
    <!-- Rate Limiting Monitor Script -->
    <script>
        // Función para actualizar estadísticas de Rate Limiting
        async function refreshRateLimitStats() {
            try {
                const response = await fetch('api/get_rate_limit_stats.php?action=current');

                if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);

                const contentType = response.headers.get('content-type');
                if (!contentType || !contentType.includes('application/json')) {
                    const text = await response.text();
                    console.error('Respuesta no-JSON:', text.substring(0, 200));
                    throw new Error('El servidor no devolvió JSON válido');
                }

                const result = await response.json();
                if (!result.success) throw new Error(result.error || 'Error obteniendo estadísticas');

                updateRateLimitUI(result.data);

            } catch (error) {
                console.error('Error cargando rate limit stats:', error);
                const statusEl = document.getElementById('rate-limit-status');
                if (statusEl) {
                    statusEl.className = 'alert alert-warning';
                    statusEl.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Error cargando estadísticas: ' + error.message;
                }
            }
        }

        function updateRateLimitUI(stats) {
            const statusEl = document.getElementById('rate-limit-status');
            if (!statusEl) return;

            // Redis no disponible
            if (stats.status === 'unavailable' || stats.error) {
                statusEl.className = 'alert alert-info';
                statusEl.innerHTML = '<i class="fas fa-info-circle"></i> Redis no disponible. Los datos de Facebook API se capturarán en la próxima llamada. <small class="d-block text-muted mt-1">' + (stats.error || '') + '</small>';
                setProgressBarsEmpty();
                setLocalLimits(stats.local_limits);
                return;
            }

            // Status general
            let statusClass = 'alert-success', statusIcon = 'fa-check-circle', statusText = 'Sistema operando normalmente';
            if (stats.status === 'critical') {
                statusClass = 'alert-danger'; statusIcon = 'fa-exclamation-triangle'; statusText = '¡ALERTA! Rate limit cerca del límite crítico';
            } else if (stats.status === 'warning') {
                statusClass = 'alert-warning'; statusIcon = 'fa-exclamation-circle'; statusText = 'Advertencia: Acercándose al límite de Facebook';
            }
            statusEl.className = 'alert ' + statusClass;
            statusEl.innerHTML = '<i class="fas ' + statusIcon + '"></i> ' + statusText +
                (stats.datetime ? ' <small class="float-end text-muted">Actualizado: ' + stats.datetime + '</small>' : '');

            // Métricas Facebook
            if (stats.app_usage) {
                updateProgressBar('fb-call-count-bar', stats.app_usage.call_count || 0);
                updateProgressBar('fb-total-time-bar', stats.app_usage.total_time || 0);
                updateProgressBar('fb-cpu-time-bar', stats.app_usage.total_cputime || 0);
            } else {
                setProgressBarsEmpty();
            }

            // Límites locales
            setLocalLimits(stats.local_limits);

            // Alertas recientes
            const alertsSection = document.getElementById('rate-limit-alerts-section');
            const alertsContainer = document.getElementById('rate-limit-alerts');
            if (stats.alerts && stats.alerts.length > 0 && alertsSection && alertsContainer) {
                alertsSection.style.display = 'block';
                alertsContainer.innerHTML = '';
                stats.alerts.slice(0, 5).forEach(alert => {
                    if (!alert) return;
                    const cls  = alert.severity === 'critical' ? 'list-group-item-danger' : 'list-group-item-warning';
                    const icon = alert.severity === 'critical' ? 'fa-exclamation-triangle' : 'fa-exclamation-circle';
                    const el   = document.createElement('div');
                    el.className = 'list-group-item ' + cls;
                    el.innerHTML = `<div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1"><i class="fas ${icon}"></i> Alerta de ${alert.level || '—'}</h6>
                        <small>${alert.datetime || ''}</small>
                    </div>
                    <p class="mb-1">Uso al ${alert.usage || 0}% — Endpoint: ${(alert.data && alert.data.endpoint) || 'N/A'}</p>`;
                    alertsContainer.appendChild(el);
                });
            } else if (alertsSection) {
                alertsSection.style.display = 'none';
            }
        }

        function setProgressBarsEmpty() {
            ['fb-call-count-bar','fb-total-time-bar','fb-cpu-time-bar'].forEach(id => {
                const bar = document.getElementById(id);
                if (!bar) return;
                bar.style.width = '0%';
                bar.textContent = 'Sin datos';
                bar.className = 'progress-bar bg-secondary';
            });
        }

        function setLocalLimits(limits) {
            if (!limits) return;
            const map = {
                'local-limit-second-max': limits.per_second,
                'local-limit-hour-max':   limits.per_hour,
                'local-limit-day-max':    limits.per_day,
            };
            Object.entries(map).forEach(([id, val]) => {
                const el = document.getElementById(id);
                if (el && val !== undefined) el.textContent = val.toLocaleString();
            });
            // Limpiar guiones de contadores actuales
            ['local-limit-second','local-limit-hour','local-limit-day'].forEach(id => {
                const el = document.getElementById(id);
                if (el && el.textContent === '-') el.textContent = '—';
            });
        }

        function updateProgressBar(id, percentage) {
            const bar = document.getElementById(id);
            if (!bar) return;
            percentage = Math.min(100, Math.max(0, parseFloat(percentage) || 0));
            bar.style.width = percentage + '%';
            bar.textContent = percentage.toFixed(1) + '%';
            bar.className = 'progress-bar';
            if (percentage >= 90)      bar.classList.add('bg-danger');
            else if (percentage >= 75) bar.classList.add('bg-warning');
            else if (percentage >= 50) bar.classList.add('bg-info');
            else                       bar.classList.add('bg-success');
        }

        // Cargar al iniciar
        document.addEventListener('DOMContentLoaded', refreshRateLimitStats);

        // Recargar al activar el tab dashboard
        document.querySelectorAll('.nav-link[data-tab="dashboard"]').forEach(link => {
            link.addEventListener('click', () => setTimeout(refreshRateLimitStats, 500));
        });
    </script>
    <script>
        // Función de diagnóstico mejorada
        function runDiagnostic() {
            const resultsDiv = document.getElementById('diagnostic-results');
            const actionsDiv = document.getElementById('diagnostic-actions');
            resultsDiv.innerHTML = '<p class="text-muted"><i class="fas fa-spinner fa-spin"></i> Ejecutando diagnóstico...</p>';

            fetch('/api/diagnose_whatsapp.php')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        let html = '<div class="diagnostic-report">';

                        // Configuración
                        html += `<div class="mb-3">
                            <h6><i class="fas fa-cog"></i> Configuración WhatsApp</h6>
                            <div class="alert alert-${data.config.status === 'complete' ? 'success' : 'warning'}">
                                ${data.config.message} (${data.config.completion}% completa)
                            </div>
                        </div>`;

                        // Plantillas
                        const templateIssues = data.templates.approved === 0 && data.templates.pending > 0;
                        html += `<div class="mb-3">
                            <h6><i class="fas fa-file-alt"></i> Estado de Plantillas</h6>
                            <div class="alert alert-${templateIssues ? 'danger' : 'success'}">
                                ${data.templates.message}
                                <br><small>Aprobadas: ${data.templates.approved} | Pendientes: ${data.templates.pending}</small>
                            </div>
                        </div>`;

                        // API
                        let apiMessage = '';
                        if (typeof data.api.message === 'object' && data.api.message !== null) {
                            // Si el mensaje es un objeto de error
                            if (data.api.message.message) {
                                apiMessage = `<strong>Error:</strong> ${data.api.message.message.split(':')[0]}`;
                                apiMessage += `<br><small class="text-muted">Verifica tu token de acceso y Phone Number ID</small>`;
                            } else {
                                apiMessage = 'Error en la conectividad de la API';
                            }
                        } else {
                            // Si el mensaje es un string simple
                            apiMessage = data.api.message;
                        }

                        html += `<div class="mb-3">
                            <h6><i class="fas fa-plug"></i> Conectividad API</h6>
                            <div class="alert alert-${data.api.status === 'ready' ? 'success' : 'danger'}">
                                ${apiMessage}
                            </div>
                        </div>`;

                        // Recomendaciones
                        if (data.recommendations && data.recommendations.length > 0) {
                            html += `<div class="mb-3">
                                <h6><i class="fas fa-lightbulb"></i> Recomendaciones</h6>
                                <ul class="list-unstyled">`;

                            data.recommendations.forEach(rec => {
                                html += `<li class="mb-1"><i class="fas fa-arrow-right text-primary"></i> ${rec}</li>`;
                            });

                            html += `</ul></div>`;
                        }

                        html += '</div>';
                        resultsDiv.innerHTML = html;

                        // Mostrar botones de acción si hay problemas con plantillas
                        if (templateIssues) {
                            actionsDiv.style.display = 'block';
                        } else {
                            actionsDiv.style.display = 'none';
                        }

                    } else {
                        resultsDiv.innerHTML = `<div class="alert alert-danger">Error: ${data.message}</div>`;
                        actionsDiv.style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    resultsDiv.innerHTML = '<div class="alert alert-danger">Error de conectividad</div>';
                    actionsDiv.style.display = 'none';
                });
        }

        // Lightbox helper para imágenes (abre un modal Bootstrap con la imagen en grande)
        function openImageLightbox(url, caption = '') {
            let img = document.getElementById('imageLightboxImg');
            let cap = document.getElementById('imageLightboxCaption');
            if (!img || !cap) return; // seguridad
            img.src = url;
            cap.textContent = caption || '';
            const modalEl = document.getElementById('imageLightboxModal');
            const bsModal = new bootstrap.Modal(modalEl);
            bsModal.show();
        }
    </script>

    <script>
        // Enhancer: pedir nombre para la plantilla `contacto_nuevo` antes de enviar
        (function(){
            const form = document.getElementById('send-message-form');
            if (!form) return;

            form.addEventListener('submit', function(e){
                try {
                    const typeEl = document.getElementById('message-type');
                    const tplEl = document.getElementById('message-template');
                    const recipientTypeEl = document.getElementById('recipient-type');
                    if (!typeEl || !tplEl) return; // nothing to do

                    const type = typeEl.value;
                    const tpl = tplEl.value;

                    if (type === 'template' && tpl === 'contacto_nuevo') {
                        // obtener valor por defecto para el prompt
                        let defaultName = '';
                        if (recipientTypeEl && recipientTypeEl.value === 'existing') {
                            const sel = document.getElementById('message-recipient');
                            if (sel && sel.options && sel.selectedIndex >= 0) defaultName = sel.options[sel.selectedIndex].text || '';
                        } else {
                            const manual = document.getElementById('manual-recipient');
                            if (manual) defaultName = manual.value || '';
                        }

                        const name = prompt('Ingrese el nombre para la plantilla contacto_nuevo:', defaultName);
                        if (name === null) {
                            // usuario canceló
                            e.preventDefault();
                            return false;
                        }

                        const paramsInput = document.getElementById('template-params');
                        if (paramsInput) {
                            const clean = (typeof name === 'string') ? name.trim() : '';
                            paramsInput.value = JSON.stringify({ name: clean || defaultName });
                        }
                    }
                } catch (err) {
                    console.error('template name prompt failed', err);
                }
            });
        })();
    </script>

    <!-- Lightbox Modal -->
    <div class="modal fade" id="imageLightboxModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body p-0 position-relative">
                    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Cerrar" style="z-index:10;"></button>
                    <img id="imageLightboxImg" src="" class="img-fluid w-100" style="border-radius:10px;">
                    <div id="imageLightboxCaption" class="mt-2 text-center text-white small"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para crear menú -->
    <div class="modal fade" id="createMenuModal" tabindex="-1" aria-labelledby="createMenuModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createMenuModalLabel">
                        <i class="fas fa-plus"></i> Crear Nuevo Menú
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="menu-form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Nombre del Menú *</label>
                                    <input type="text" class="form-control" id="menu-name" placeholder="ej: Menú Principal" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Clave del Menú *</label>
                                    <input type="text" class="form-control" id="menu-key" placeholder="ej: main_menu" required>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Descripción</label>
                            <textarea class="form-control" id="menu-description" rows="2" placeholder="Descripción del menú"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Mensaje de Bienvenida</label>
                            <textarea class="form-control" id="menu-welcome-message" rows="3" placeholder="¡Hola! Bienvenido. Por favor selecciona una opción:"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Estado</label>
                                    <select class="form-control" id="menu-status">
                                        <option value="active">Activo</option>
                                        <option value="inactive">Inactivo</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Tipo de Menú</label>
                                    <select class="form-control" id="menu-type">
                                        <option value="main">Principal (normal)</option>
                                        <option value="no_advisor">🔴 Asesor ausente (secundario)</option>
                                    </select>
                                    <small class="text-muted">El menú <em>Asesor ausente</em> se muestra cuando el asesor está marcado como no disponible.</small>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <h6>📋 Opciones del Menú</h6>
                        <div id="menu-options-container">
                            <!-- Opciones se agregan dinámicamente -->
                        </div>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="addMenuOption()">
                            <i class="fas fa-plus"></i> Agregar Opción
                        </button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" onclick="app.saveMenu()">
                        <i class="fas fa-save"></i> Guardar Menú
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para crear/editar autorespuesta -->
    <div class="modal fade" id="createAutoResponseModal" tabindex="-1" aria-labelledby="createAutoResponseModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createAutoResponseModalLabel">
                        <i class="fas fa-robot"></i> Crear Nueva Respuesta Automática
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="autoresponse-form">
                        <input type="hidden" id="autoresponse-id">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Tipo de Trigger *</label>
                                    <select class="form-control" id="autoresponse-trigger-type" required onchange="updateTriggerFields(this.value)">
                                        <option value="keyword">Palabra Clave</option>
                                        <option value="contains">Contiene Texto</option>
                                        <option value="exact">Mensaje Exacto</option>
                                        <option value="welcome">Mensaje de Bienvenida</option>
                                        <option value="default">Respuesta por Defecto</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Prioridad</label>
                                    <input type="number" class="form-control" id="autoresponse-priority" value="1" min="0" max="10">
                                    <small class="text-muted">Mayor número = mayor prioridad (0-10)</small>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3" id="trigger-value-group">
                            <label class="form-label" id="trigger-value-label">Palabras Clave *</label>
                            <input type="text" class="form-control" id="autoresponse-trigger-value" placeholder="palabra1,palabra2,palabra3">
                            <small class="text-muted" id="trigger-value-help">Separa múltiples palabras con comas</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Texto de Respuesta *</label>
                            <textarea class="form-control" id="autoresponse-text" rows="4" placeholder="Escribe aquí la respuesta que se enviará automáticamente..." required></textarea>
                            <small class="text-muted">Puedes usar emojis y saltos de línea</small>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Tipo de Respuesta</label>
                                    <select class="form-control" id="autoresponse-type">
                                        <option value="text">Mensaje de Texto</option>
                                        <option value="template">Plantilla WhatsApp</option>
                                        <option value="menu">Mostrar Menú</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Estado</label>
                                    <select class="form-control" id="autoresponse-active">
                                        <option value="1">Activa</option>
                                        <option value="0">Inactiva</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Campos adicionales para diferentes tipos de respuesta -->
                        <div id="template-fields" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Nombre de la Plantilla</label>
                                <input type="text" class="form-control" id="autoresponse-template-name" placeholder="nombre_plantilla">
                            </div>
                        </div>

                        <div id="menu-fields" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Menú a Mostrar</label>
                                <select class="form-control" id="autoresponse-menu-id">
                                    <option value="">Seleccionar menú...</option>
                                    <!-- Opciones cargadas dinámicamente -->
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" onclick="app.saveAutoResponse()">
                        <i class="fas fa-save"></i> Guardar Respuesta
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // NotificationManager eliminado: las notificaciones se manejan
        // vía SSE en conversations.php. Esta página no tiene campana de notificaciones.
        const NotificationManager = { init() {} };

        // ====== Funciones para Broadcast con Plantillas y Múltiples Usuarios ======
        
        // Manejador del formulario de broadcast
        async function handleBroadcastSubmit(event) {
            event.preventDefault();
            event.stopPropagation();
            
            console.log('Formulario de broadcast enviado');
            
            // Validar que existe el manager
            if (!window.whatsappManager || !window.whatsappManager.sendBroadcast) {
                console.error('whatsappManager no disponible');
                alert('Error: Sistema no inicializado. Recarga la página.');
                return false;
            }
            
            // Validar variables de plantilla si se seleccionó plantilla
            const messageType = document.getElementById('broadcast-message-type').value;
            if (messageType === 'template') {
                const templateId = document.getElementById('broadcast-template').value;
                if (!templateId) {
                    alert('Por favor selecciona una plantilla');
                    return false;
                }
                
                // Validar que las variables requeridas estén llenas
                const varInputs = document.querySelectorAll('.broadcast-template-var');
                let hasEmpty = false;
                varInputs.forEach(input => {
                    if (!input.value.trim()) {
                        input.classList.add('is-invalid');
                        hasEmpty = true;
                    } else {
                        input.classList.remove('is-invalid');
                    }
                });
                
                if (hasEmpty) {
                    alert('Por favor completa todos los campos de variables de la plantilla');
                    return false;
                }
            }
            
            // Llamar al método del manager
            await window.whatsappManager.sendBroadcast();
            return false;
        }
        
        function initializeBroadcastSelect2() {
            // Inicializar Select2 para usuarios con transport personalizado
            $('#broadcast-users').select2({
                theme: 'bootstrap-5',
                placeholder: 'Buscar y seleccionar usuarios...',
                allowClear: true,
                ajax: {
                    transport: function (params, success, failure) {
                        const searchTerm = params.data.term || '';
                        const page = params.data.page || 1;
                        
                        fetch(`api/get_users.php?search=${encodeURIComponent(searchTerm)}&page=${page}&limit=50`, {
                            credentials: 'same-origin',
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                success(data);
                            } else {
                                failure();
                            }
                        })
                        .catch(error => {
                            console.error('Error cargando usuarios:', error);
                            failure();
                        });
                    },
                    delay: 250,
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        if (!data || !data.data) {
                            return { results: [] };
                        }
                        return {
                            results: data.data.map(user => ({
                                id: user.id,
                                text: `${user.name || 'Sin nombre'} (${user.phone_number})`
                            })),
                            pagination: {
                                more: data.pagination && data.pagination.hasNext
                            }
                        };
                    },
                    cache: true
                },
                minimumInputLength: 0
            });

            // Cargar plantillas aprobadas
            loadBroadcastTemplates();
        }

        function toggleBroadcastSelectionType() {
            const selectionType = document.getElementById('broadcast-selection-type').value;
            const filterContainer = document.getElementById('broadcast-filter-container');
            const usersContainer = document.getElementById('broadcast-users-container');

            if (selectionType === 'filter') {
                filterContainer.style.display = 'block';
                usersContainer.style.display = 'none';
            } else {
                filterContainer.style.display = 'none';
                usersContainer.style.display = 'block';
            }
        }

        function toggleBroadcastMessageType() {
            const messageType = document.getElementById('broadcast-message-type').value;
            const textContainer = document.getElementById('broadcast-text-container');
            const templateContainer = document.getElementById('broadcast-template-container');

            if (messageType === 'text') {
                textContainer.style.display = 'block';
                templateContainer.style.display = 'none';
                document.getElementById('broadcast-template-variables').style.display = 'none';
                document.getElementById('broadcast-template-preview').style.display = 'none';
            } else {
                textContainer.style.display = 'none';
                templateContainer.style.display = 'block';
            }
        }

        async function loadBroadcastTemplates() {
            try {
                console.log('🔵 Cargando plantillas para broadcast...');
                
                if (!window.whatsappManager) {
                    console.error('❌ whatsappManager no está disponible');
                    return;
                }
                
                const response = await window.whatsappManager.apiCall('get_templates.php');
                console.log('Respuesta de get_templates:', response);
                
                if (response && response.success && response.data) {
                    const select = document.getElementById('broadcast-template');
                    if (!select) {
                        console.error('Elemento broadcast-template no encontrado');
                        return;
                    }
                    
                    select.innerHTML = '<option value="">-- Selecciona una plantilla --</option>';
                    
                    const approvedTemplates = response.data.filter(t => 
                        t.status && (t.status.toUpperCase() === 'APPROVED' || t.status.toLowerCase() === 'approved')
                    );
                    console.log('Plantillas aprobadas encontradas:', approvedTemplates.length);
                    
                    approvedTemplates.forEach(template => {
                        const option = document.createElement('option');
                        option.value = template.id;
                        option.textContent = `${template.name} (${template.language_code || template.language || 'es'})`;
                        option.dataset.templateId = template.id;
                        select.appendChild(option);
                    });
                    
                    if (approvedTemplates.length === 0) {
                        console.warn('No hay plantillas aprobadas disponibles');
                        select.innerHTML = '<option value="">No hay plantillas aprobadas</option>';
                    }
                } else {
                    console.error('Respuesta inválida del API:', response);
                }
            } catch (error) {
                console.error('Error cargando plantillas:', error);
            }
        }

        async function loadBroadcastTemplateDetails() {
            console.log('🔵 loadBroadcastTemplateDetails llamado');
            const select = document.getElementById('broadcast-template');
            const templateId = select.value;
            console.log('Template ID seleccionado:', templateId);
            
            if (!templateId) {
                document.getElementById('broadcast-template-variables').style.display = 'none';
                document.getElementById('broadcast-template-preview').style.display = 'none';
                return;
            }

            try {
                const response = await window.whatsappManager.apiCall(`get_template_details.php?id=${templateId}`);
                console.log('✅ Detalles de plantilla:', response);
                
                if (response && response.success) {
                    const template = response.template || response.data;
                    if (!template) {
                        console.error('❌ No se encontró template en la respuesta');
                        return;
                    }
                    
                    console.log('📋 Template data:', template);
                    console.log('📋 Variables:', template.variables);
                    
                    const variablesContainer = document.getElementById('broadcast-template-variables');

                    // Detectar header de imagen
                    const hasImageHeader = (template.header_type || '').toUpperCase() === 'IMAGE';
                    let html = '';

                    if (hasImageHeader) {
                        html += `
                            <div class="mb-3 border rounded p-2 bg-light" id="bc-image-header-section">
                                <label class="form-label fw-bold text-primary"><i class="fas fa-image me-1"></i> Imagen del encabezado</label>
                                <p class="text-muted small mb-2">Esta plantilla requiere una imagen de encabezado dinámica. Súbela aquí.</p>
                                <input type="file" class="form-control" id="broadcast-template-image" accept="image/jpeg,image/png,image/webp" required>
                                <div id="bc-image-preview" class="mt-2" style="display:none">
                                    <img id="bc-image-thumb" src="" style="max-height:100px;border-radius:6px;" class="border">
                                </div>
                            </div>
                        `;
                        setTimeout(() => {
                            const imgInput = document.getElementById('broadcast-template-image');
                            if (imgInput) imgInput.addEventListener('change', function() {
                                const file = this.files[0];
                                if (file) {
                                    const reader = new FileReader();
                                    reader.onload = e => {
                                        document.getElementById('bc-image-thumb').src = e.target.result;
                                        document.getElementById('bc-image-preview').style.display = 'block';
                                    };
                                    reader.readAsDataURL(file);
                                }
                            });
                        }, 50);
                    }

                    if (template.variables && template.variables.length > 0) {
                        console.log(`✅ Se encontraron ${template.variables.length} variables`);
                        html += `<label class="form-label fw-bold${hasImageHeader ? ' mt-2' : ''}"><i class="fas fa-edit"></i> Variables de la Plantilla</label>`;

                        template.variables.forEach((variable, index) => {
                            console.log(`Variable ${index}:`, variable);
                            const placeholder = variable.example || `Valor para Variable ${variable.index}`;
                            const label = variable.label || `Variable ${variable.index}`;

                            html += `
                                <div class="mb-2">
                                    <label class="form-label small">${label}</label>
                                    <input
                                        type="text"
                                        class="form-control broadcast-template-var"
                                        data-var="${variable.index}"
                                        data-placeholder="${variable.placeholder}"
                                        placeholder="${placeholder}"
                                        onkeyup="updateBroadcastPreview()"
                                    >
                                </div>
                            `;
                        });

                        console.log('📝 HTML generado para variables:', html);
                        variablesContainer.innerHTML = html;
                        variablesContainer.style.display = 'block';
                        console.log('✅ Variables container mostrado');
                    } else {
                        if (!hasImageHeader) html += '<p class="text-muted small">Esta plantilla no tiene variables de texto</p>';
                        console.log('⚠️ Template sin variables');
                        variablesContainer.innerHTML = html;
                        variablesContainer.style.display = (hasImageHeader || html) ? 'block' : 'none';
                    }
                    
                    updateBroadcastPreview();
                } else {
                    console.error('❌ Respuesta sin success:', response);
                }
            } catch (error) {
                console.error('❌ Error cargando detalles de plantilla:', error);
                window.whatsappManager.showError('Error cargando plantilla');
            }
        }

        async function updateBroadcastPreview() {
            const templateId = document.getElementById('broadcast-template').value;
            if (!templateId) return;

            // Recolectar variables como array (por índice)
            const variablesArray = [];
            document.querySelectorAll('.broadcast-template-var').forEach(input => {
                const index = parseInt(input.dataset.var) - 1; // Convertir a índice de array (0-based)
                variablesArray[index] = input.value || `{{${input.dataset.var}}}`;
            });

            try {
                const response = await window.whatsappManager.apiCall('preview_template.php', {
                    method: 'POST',
                    body: { template_id: templateId, parameters: variablesArray }
                });

                if (response && response.success && response.preview) {
                    const previewContainer = document.getElementById('broadcast-template-preview');
                    const previewContent = document.getElementById('broadcast-preview-content');
                    
                    // Usar el HTML pre-formateado del servidor
                    previewContent.innerHTML = response.preview.html || response.preview.body.replace(/\n/g, '<br>');
                    previewContainer.style.display = 'block';
                } else {
                    console.error('Error en preview:', response);
                }
            } catch (error) {
                console.error('Error generando vista previa:', error);
            }
        }

        // ====== Fin de funciones de Broadcast ======

        document.addEventListener('DOMContentLoaded', () => {
            try { NotificationManager.init(); } catch(e) { console.error('NotificationManager init failed', e); }

            // Inicializar Select2 para broadcast cuando el manager esté listo
            const waitForManager = setInterval(() => {
                if (window.whatsappManager) {
                    clearInterval(waitForManager);
                    console.log('Inicializando broadcast Select2...');
                    try {
                        initializeBroadcastSelect2();
                    } catch(e) {
                        console.error('Error inicializando broadcast Select2:', e);
                    }
                }
            }, 100);
            
            // Timeout de seguridad
            setTimeout(() => clearInterval(waitForManager), 5000);

            // Sidebar toggle logic for responsive/mobile
            const sidebar = document.querySelector('.sidebar');
            const toggleBtn = document.getElementById('sidebar-toggle');
            let overlayEl = null;

            function ensureOverlay() {
                if (!overlayEl) {
                    overlayEl = document.createElement('div');
                    overlayEl.className = 'sidebar-overlay';
                    document.body.appendChild(overlayEl);
                    overlayEl.addEventListener('click', closeSidebar);
                }
            }

            function openSidebar() {
                if (!sidebar) return;
                sidebar.classList.add('open');
                document.body.classList.add('sidebar-open');
                ensureOverlay();
                overlayEl.style.display = 'block';
            }

            function closeSidebar() {
                if (!sidebar) return;
                sidebar.classList.remove('open');
                document.body.classList.remove('sidebar-open');
                if (overlayEl) overlayEl.style.display = 'none';
            }

            if (toggleBtn) {
                console.debug('[index] sidebar toggle found:', { toggleBtn: !!toggleBtn, sidebar: !!sidebar });
                toggleBtn.addEventListener('click', (e) => {
                    console.debug('[index] sidebar-toggle clicked', { isOpen: sidebar && sidebar.classList.contains('open') });
                    e.stopPropagation();
                    if (sidebar && sidebar.classList.contains('open')) {
                        closeSidebar();
                    } else {
                        openSidebar();
                    }
                });
            }

            // debug logs for open/close
            const _openSidebar = openSidebar;
            const _closeSidebar = closeSidebar;
            openSidebar = function() { console.debug('[index] openSidebar()'); _openSidebar(); };
            closeSidebar = function() { console.debug('[index] closeSidebar()'); _closeSidebar(); };

            // Close sidebar when a nav item is selected (mobile UX improvement)
            document.querySelectorAll('.nav-link[data-tab]').forEach(link => {
                link.addEventListener('click', () => {
                    if (window.innerWidth < 992) {
                        closeSidebar();
                    }
                });
            });

            // Close sidebar on Escape
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') closeSidebar();
            });

            // Close sidebar when navigating in main content on small screens
            document.querySelector('.main-content')?.addEventListener('click', () => {
                if (window.innerWidth < 992) closeSidebar();
            });
        });
    </script>

    <!-- ── T&C Aceptaciones JS ───────────────────────────────────────────── -->
    <script>
    const termsAdmin = (() => {
        let _page = 1;
        const perPage = 50;

        function estadoBadge(e) {
            const map = {
                aceptado:  '<span class="badge bg-success">Aceptado</span>',
                rechazado: '<span class="badge bg-danger">Rechazado</span>',
                pendiente: '<span class="badge bg-warning text-dark">Pendiente</span>',
            };
            return map[e] || `<span class="badge bg-secondary">${e}</span>`;
        }

        function formatDate(d) {
            if (!d) return '—';
            const dt = new Date(d.replace(' ', 'T'));
            return dt.toLocaleString('es-CO', { dateStyle: 'short', timeStyle: 'short' });
        }

        async function cargar(page) {
            _page = page || 1;
            const estado = document.getElementById('terms-filter-estado')?.value || '';
            const fecha  = document.getElementById('terms-filter-fecha')?.value  || '';
            const phone  = document.getElementById('terms-filter-phone')?.value  || '';

            const params = new URLSearchParams({ page: _page, per_page: perPage });
            if (estado) params.set('estado', estado);
            if (fecha)  params.set('fecha',  fecha);
            if (phone)  params.set('phone',  phone);

            // Actualizar link de exportación
            const expBtn = document.getElementById('terms-export-btn');
            if (expBtn) {
                const ep = new URLSearchParams();
                if (estado) ep.set('estado', estado);
                if (fecha)  ep.set('fecha',  fecha);
                if (phone)  ep.set('phone',  phone);
                expBtn.href = 'lab_terminos_export.php?' + ep.toString();
            }

            const tbody = document.getElementById('terms-table-body');
            if (tbody) tbody.innerHTML = '<tr><td colspan="7" class="text-center py-3"><div class="spinner-border spinner-border-sm text-primary"></div></td></tr>';

            try {
                const res  = await fetch('api/get_terms_acceptances.php?' + params.toString());
                const json = await res.json();

                if (!json.success) throw new Error(json.error || 'Error al cargar');

                const rows    = json.data      || [];
                const stats   = json.stats     || {};
                const total   = json.total     || 0;
                const pages   = Math.ceil(total / perPage);

                // Stats
                document.getElementById('terms-stat-aceptado').textContent  = stats.aceptado  ?? 0;
                document.getElementById('terms-stat-rechazado').textContent = stats.rechazado ?? 0;
                document.getElementById('terms-stat-pendiente').textContent = stats.pendiente ?? 0;
                document.getElementById('terms-stat-total').textContent     = total;

                // Tabla
                if (!rows.length) {
                    tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">Sin registros</td></tr>';
                } else {
                    tbody.innerHTML = rows.map(r => `
                        <tr>
                            <td class="text-muted" style="font-size:.8rem;">${r.id}</td>
                            <td><code style="font-size:.8rem;">${r.phone_number}</code></td>
                            <td>${r.user_name || '<span class="text-muted">—</span>'}</td>
                            <td>${estadoBadge(r.estado)}</td>
                            <td><span class="badge bg-secondary">${r.terms_version || '—'}</span></td>
                            <td style="font-size:.8rem;">${formatDate(r.fecha_envio)}</td>
                            <td style="font-size:.8rem;">${formatDate(r.fecha_respuesta)}</td>
                        </tr>`).join('');
                }

                // Paginación
                const pInfo = document.getElementById('terms-pagination-info');
                const pBtns = document.getElementById('terms-pagination-btns');
                const pRow  = document.getElementById('terms-pagination-row');
                if (pRow) pRow.style.display = pages > 1 ? 'flex' : 'none';
                if (pInfo) pInfo.textContent = `Página ${_page} de ${pages} (${total} registros)`;
                if (pBtns) {
                    pBtns.innerHTML = '';
                    for (let p = 1; p <= Math.min(pages, 10); p++) {
                        const btn = document.createElement('button');
                        btn.className = 'btn btn-sm ' + (p === _page ? 'btn-primary' : 'btn-outline-secondary');
                        btn.textContent = p;
                        btn.onclick = () => cargar(p);
                        pBtns.appendChild(btn);
                    }
                }
            } catch (e) {
                console.error('termsAdmin.cargar error', e);
                if (tbody) tbody.innerHTML = `<tr><td colspan="7" class="text-center text-danger py-3">${e.message}</td></tr>`;
            }
        }

        // Cargar cuando se activa el tab
        document.addEventListener('DOMContentLoaded', () => {
            const link = document.querySelector('.nav-link[data-tab="terms"]');
            if (link) link.addEventListener('click', () => setTimeout(() => cargar(1), 50));
        });

        return { cargar };
    })();
    </script>
    <!-- ── / T&C Aceptaciones JS ─────────────────────────────────────────── -->

    <!-- ── Historial Envíos Masivos JS ──────────────────────────────────── -->
    <script>
    (function () {
        let _currentPage = 1;

        window.loadBroadcastHistory = function (page) {
            page = page || 1;
            _currentPage = page;

            const tbody = document.getElementById('broadcast-history-tbody');
            if (!tbody) return;
            tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin me-1"></i> Cargando...</td></tr>';

            fetch('api/get_broadcast_history.php?page=' + page + '&per_page=10')
                .then(r => r.json())
                .then(res => {
                    if (!res.success || !res.data) {
                        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-3">Sin registros</td></tr>';
                        return;
                    }

                    if (res.data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-3"><i class="fas fa-inbox me-1"></i> Aún no hay envíos masivos registrados</td></tr>';
                    } else {
                        const typeLabels = { text: 'Texto', template: 'Plantilla', image: 'Imagen', document: 'Documento' };
                        const filterLabels = { all: 'Todos', active: 'Activos', recent: 'Recientes', null: '—' };
                        tbody.innerHTML = res.data.map(r => {
                            const fecha = r.sent_at ? r.sent_at.replace('T', ' ').substring(0, 16) : '—';
                            const tipo  = typeLabels[r.message_type] || r.message_type || '—';
                            const msg   = r.template_name
                                ? '<span class="badge bg-success-subtle text-success border border-success-subtle me-1">Plantilla</span>' + htmlEsc(r.template_name)
                                : (r.message_preview ? htmlEsc(r.message_preview.substring(0, 60)) + (r.message_preview.length > 60 ? '…' : '') : '—');
                            const pct   = r.total_users > 0 ? Math.round(r.sent_count / r.total_users * 100) : 0;
                            return `<tr>
                                <td class="small text-nowrap">${fecha}</td>
                                <td><span class="badge bg-secondary-subtle text-secondary border">${tipo}</span></td>
                                <td class="small">${msg}</td>
                                <td class="text-center fw-bold">${r.total_users}</td>
                                <td class="text-center text-success fw-bold">${r.sent_count} <small class="text-muted">(${pct}%)</small></td>
                                <td class="text-center ${r.error_count > 0 ? 'text-danger fw-bold' : 'text-muted'}">${r.error_count}</td>
                                <td class="small text-muted">${htmlEsc(r.sent_by_name || 'Sistema')}</td>
                            </tr>`;
                        }).join('');
                    }

                    // Paginación
                    const pagRow  = document.getElementById('bh-pagination-row');
                    const pagInfo = document.getElementById('bh-pagination-info');
                    const pagBtns = document.getElementById('bh-pagination-btns');
                    if (pagRow && res.pages > 1) {
                        pagRow.style.display = '';
                        pagInfo.textContent  = 'Página ' + res.page + ' de ' + res.pages + ' (' + res.total + ' registros)';
                        let btns = '';
                        for (let p = 1; p <= res.pages; p++) {
                            btns += `<button class="btn btn-sm ${p === res.page ? 'btn-secondary' : 'btn-outline-secondary'}" onclick="loadBroadcastHistory(${p})">${p}</button>`;
                        }
                        pagBtns.innerHTML = btns;
                    } else if (pagRow) {
                        pagRow.style.display = 'none';
                    }
                })
                .catch(err => {
                    if (tbody) tbody.innerHTML = '<tr><td colspan="7" class="text-center text-danger py-3">Error al cargar el historial</td></tr>';
                    console.error('loadBroadcastHistory error:', err);
                });
        };

        function htmlEsc(str) {
            return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
        }

        // Cargar al activar el tab de broadcast
        document.addEventListener('DOMContentLoaded', () => {
            const broadcastLinks = document.querySelectorAll('.nav-link[data-tab="broadcast"], [data-tab="broadcast"]');
            broadcastLinks.forEach(link => {
                link.addEventListener('click', () => setTimeout(() => loadBroadcastHistory(1), 100));
            });
        });
    })();
    </script>
    <!-- ── KPI Actividad de Pacientes JS ────────────────────────────────── -->
    <script>
    (function () {
        'use strict';

        let chartDia     = null;
        let chartSemana  = null;

        const fmt = n => Number(n).toLocaleString('es-CO');

        // ── Inicializar fechas en los inputs ──────────────────────────────
        function initFechas(days = 30) {
            const hoy   = new Date();
            const desde = new Date(hoy); desde.setDate(hoy.getDate() - (days - 1));
            document.getElementById('kpi-hasta').value = hoy.toISOString().slice(0, 10);
            document.getElementById('kpi-desde').value = desde.toISOString().slice(0, 10);
        }

        // ── Carga y renderiza ─────────────────────────────────────────────
        window.cargarKPI = async function () {
            const desde = document.getElementById('kpi-desde').value;
            const hasta = document.getElementById('kpi-hasta').value;
            if (!desde || !hasta) return;

            try {
                const r = await fetch(`api/kpi_actividad.php?desde=${desde}&hasta=${hasta}`);
                const d = await r.json();
                if (!d.ok) throw new Error(d.error || 'Error');

                // Tarjetas
                document.getElementById('kpi-total-usuarios').textContent = fmt(d.totales.usuarios);
                document.getElementById('kpi-total-mensajes').textContent = fmt(d.totales.mensajes);
                document.getElementById('kpi-total-agend').textContent    = fmt(d.totales.agendamientos);
                document.getElementById('kpi-pico-dia').textContent       = d.totales.pico_semana;

                // Gráfica por día
                const labsDia  = d.por_dia.map(x => {
                    const f = new Date(x.fecha + 'T00:00:00');
                    return f.toLocaleDateString('es-CO', { day:'2-digit', month:'short' });
                });
                const dataUsuarios = d.por_dia.map(x => x.usuarios);
                const dataAgend    = d.por_dia.map(x => x.agendamientos);

                if (chartDia) chartDia.destroy();
                chartDia = new Chart(document.getElementById('kpiChartDia'), {
                    type: 'bar',
                    data: {
                        labels: labsDia,
                        datasets: [
                            {
                                label: 'Usuarios que escriben',
                                data: dataUsuarios,
                                backgroundColor: 'rgba(13,110,253,0.6)',
                                borderRadius: 4,
                                order: 1,
                            },
                            {
                                label: 'Agendamientos',
                                data: dataAgend,
                                backgroundColor: 'rgba(255,193,7,0.75)',
                                borderRadius: 4,
                                order: 2,
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            x: { ticks: { maxRotation: 45, font: { size: 10 } } },
                            y: { beginAtZero: true, ticks: { precision: 0 } },
                        },
                    },
                });

                // Gráfica por día de semana
                const labsSem  = d.por_dia_semana.map(x => x.dia);
                const dataSemU = d.por_dia_semana.map(x => x.usuarios);
                const dataSemA = d.por_dia_semana.map(x => x.agendamientos);

                if (chartSemana) chartSemana.destroy();
                chartSemana = new Chart(document.getElementById('kpiChartSemana'), {
                    type: 'bar',
                    data: {
                        labels: labsSem,
                        datasets: [
                            {
                                label: 'Usuarios',
                                data: dataSemU,
                                backgroundColor: 'rgba(13,110,253,0.6)',
                                borderRadius: 4,
                            },
                            {
                                label: 'Agendamientos',
                                data: dataSemA,
                                backgroundColor: 'rgba(255,193,7,0.75)',
                                borderRadius: 4,
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            y: { beginAtZero: true, ticks: { precision: 0 } },
                        },
                    },
                });

            } catch (e) {
                console.error('KPI error:', e);
            }
        };

        // ── Botones de rango rápido ───────────────────────────────────────
        document.querySelectorAll('.kpi-quick').forEach(btn => {
            btn.addEventListener('click', function () {
                document.querySelectorAll('.kpi-quick').forEach(b => {
                    b.classList.remove('btn-secondary', 'active');
                    b.classList.add('btn-outline-secondary');
                });
                this.classList.remove('btn-outline-secondary');
                this.classList.add('btn-secondary', 'active');
                initFechas(parseInt(this.dataset.days, 10));
                cargarKPI();
            });
        });

        // ── Carga inicial (30 días por defecto) ───────────────────────────
        // Solo se ejecuta cuando la pestaña dashboard está visible
        function kpiInit() {
            initFechas(30);
            cargarKPI();
        }

        // Esperar a que el tab dashboard esté activo
        const observer = new MutationObserver(() => {
            const sec = document.getElementById('kpi-actividad-section');
            if (sec && sec.closest('.tab-content')?.style.display !== 'none') {
                kpiInit();
                observer.disconnect();
            }
        });

        // Si la sección ya es visible al cargar, inicializar de inmediato
        document.addEventListener('DOMContentLoaded', () => {
            const sec = document.getElementById('kpi-actividad-section');
            if (sec) kpiInit();
        });
    })();
    </script>
    <!-- ── KPI Tiempo de Respuesta Asesores JS ──────────────────────────── -->
    <script>
    (function () {
        'use strict';

        let chartDiaA   = null;
        let chartHistA  = null;

        const fmtMin = m => m === null ? '—' : (m < 60 ? m + ' min' : Math.floor(m/60) + 'h ' + (m%60) + 'm');
        const escA   = s => String(s||'').replace(/[<>&"]/g, c => ({'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c]));

        function initFechasA(days = 30) {
            const hoy   = new Date();
            const desde = new Date(hoy); desde.setDate(hoy.getDate() - (days - 1));
            document.getElementById('kpia-hasta').value = hoy.toISOString().slice(0, 10);
            document.getElementById('kpia-desde').value = desde.toISOString().slice(0, 10);
        }

        function velocidadBadge(min) {
            if (min === null) return '<span class="badge bg-secondary">Sin datos</span>';
            if (min < 3)  return '<span class="badge bg-success">Muy rápido</span>';
            if (min < 10) return '<span class="badge bg-primary">Normal</span>';
            if (min < 20) return '<span class="badge bg-warning text-dark">Lento</span>';
            return '<span class="badge bg-danger">Muy lento</span>';
        }

        window.cargarKPIAsesor = async function () {
            const desde = document.getElementById('kpia-desde').value;
            const hasta = document.getElementById('kpia-hasta').value;
            if (!desde || !hasta) return;

            try {
                const r = await fetch(`api/kpi_respuesta_asesor.php?desde=${desde}&hasta=${hasta}`);
                const d = await r.json();
                if (!d.ok) throw new Error(d.error || 'Error');

                const t = d.totales;
                document.getElementById('kpia-total-sesiones').textContent = t.sesiones;
                document.getElementById('kpia-prom-resp').textContent      = fmtMin(t.prom_respuesta);
                document.getElementById('kpia-prom-dur').textContent       = fmtMin(t.prom_duracion);
                document.getElementById('kpia-pct-rapidas').textContent    = t.pct_rapidas + '%';
                document.getElementById('kpia-sin-resp').textContent       = t.sin_respuesta;

                // Gráfica por día
                const labsDia   = d.serie_dia.map(x => {
                    const f = new Date(x.fecha + 'T00:00:00');
                    return f.toLocaleDateString('es-CO', { day:'2-digit', month:'short' });
                });
                const dataResp  = d.serie_dia.map(x => x.prom_respuesta);
                const dataSes   = d.serie_dia.map(x => x.sesiones);

                if (chartDiaA) chartDiaA.destroy();
                chartDiaA = new Chart(document.getElementById('kpiaChartDia'), {
                    data: {
                        labels: labsDia,
                        datasets: [
                            {
                                type: 'line',
                                label: 'Prom. respuesta (min)',
                                data: dataResp,
                                borderColor: 'rgba(220,53,69,0.9)',
                                backgroundColor: 'rgba(220,53,69,0.1)',
                                fill: true,
                                tension: 0.3,
                                pointRadius: 3,
                                yAxisID: 'y',
                            },
                            {
                                type: 'bar',
                                label: 'Atenciones',
                                data: dataSes,
                                backgroundColor: 'rgba(108,117,125,0.3)',
                                borderRadius: 3,
                                yAxisID: 'y2',
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { position: 'top' } },
                        scales: {
                            x: { ticks: { maxRotation: 45, font: { size: 10 } } },
                            y:  { beginAtZero: true, ticks: { precision: 0 }, title: { display: true, text: 'Min' } },
                            y2: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false }, ticks: { precision: 0 }, title: { display: true, text: 'Atenciones' } },
                        },
                    },
                });

                // Histograma de distribución
                const labsH = d.histograma.map(x => x.rango);
                const dataH = d.histograma.map(x => x.sesiones);
                const colores = [
                    'rgba(25,135,84,0.7)',   // < 1 min  verde
                    'rgba(13,110,253,0.7)',  // 1-3 min  azul
                    'rgba(255,193,7,0.7)',   // 3-5 min  amarillo
                    'rgba(253,126,20,0.7)',  // 5-10 min naranja
                    'rgba(220,53,69,0.7)',   // 10-20    rojo
                    'rgba(108,17,17,0.7)',   // >20      rojo oscuro
                    'rgba(108,117,125,0.7)', // Sin resp  gris
                ];

                if (chartHistA) chartHistA.destroy();
                chartHistA = new Chart(document.getElementById('kpiaChartHist'), {
                    type: 'doughnut',
                    data: {
                        labels: labsH,
                        datasets: [{ data: dataH, backgroundColor: colores, borderWidth: 1 }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { position: 'right', labels: { font: { size: 11 } } },
                        },
                    },
                });

                // Tabla de asesores
                const tbody = document.getElementById('kpia-body-asesores');
                if (!d.asesores.length) {
                    tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-2">Sin datos</td></tr>';
                } else {
                    tbody.innerHTML = d.asesores.map(a => `
                        <tr>
                            <td class="fw-semibold">${escA(a.operador)}</td>
                            <td class="text-center">${a.sesiones}</td>
                            <td class="text-center">${fmtMin(a.prom_respuesta)}</td>
                            <td class="text-center">${fmtMin(a.prom_duracion)}</td>
                            <td>${velocidadBadge(a.prom_respuesta)}</td>
                        </tr>
                    `).join('');
                }

            } catch (e) {
                console.error('KPI Asesores error:', e);
            }
        };

        // Botones rápidos
        document.querySelectorAll('.kpi-asesor-quick').forEach(btn => {
            btn.addEventListener('click', function () {
                document.querySelectorAll('.kpi-asesor-quick').forEach(b => {
                    b.classList.remove('btn-secondary', 'active');
                    b.classList.add('btn-outline-secondary');
                });
                this.classList.remove('btn-outline-secondary');
                this.classList.add('btn-secondary', 'active');
                initFechasA(parseInt(this.dataset.days, 10));
                cargarKPIAsesor();
            });
        });

        // Carga inicial
        document.addEventListener('DOMContentLoaded', () => {
            const sec = document.getElementById('kpi-asesor-section');
            if (sec) { initFechasA(30); cargarKPIAsesor(); }
        });
    })();
    </script>
    <!-- ── / KPI Tiempo de Respuesta Asesores JS ─────────────────────────── -->
</body>

</html>