<?php
error_reporting(E_ALL);           // Muestra todos los errores y advertencias
ini_set('display_errors', 1);     // Habilita la visualización de errores
ini_set('display_startup_errors', 1);
require_once 'config.php';
require_once 'whatsappbridge/config.php'; // Incluir la configuración de WhatsApp del bridge
require_once 'whatsappbridge/http.php';   // Incluir las funciones HTTP de WhatsApp

// Si el admin no ha iniciado sesión, lo redirigimos a la página de login.
if (!isset($_SESSION['loggedin'])) {
    header('Location: login.php');
    exit;
}

// --- Lógica para asegurar que el microservicio de WhatsApp esté corriendo ---
// Ejecutar el script de inicio en segundo plano de forma asíncrona
$whatsapp_bridge_script = __DIR__ . '/whatsappbridge/start_whatsapp_bridge.sh';
if (file_exists($whatsapp_bridge_script)) {
    // Usar `nohup` y `&` para ejecutar en segundo plano y desvincular del proceso PHP
    // Redirigir la salida a un archivo de log para depuración
    exec("nohup bash {$whatsapp_bridge_script} > /dev/null 2>&1 &");
    error_log("WhatsApp Bridge: Intentando iniciar/verificar microservicio en segundo plano.");
} else {
    error_log("WhatsApp Bridge: Script de inicio no encontrado en {$whatsapp_bridge_script}");
}

// Usar el mismo clientId que en ajustes.php
$whatsapp_client_id = WA_CLIENT_ID;

// Obtener estado de WhatsApp (igual que en ajustes.php)
$whatsapp_status = getJson(WA_BASE . '/session/status?clientId=' . urlencode($whatsapp_client_id));

// Debug: usar el mismo método que en ajustes.php
error_log("WA Status Debug index.php: " . json_encode($whatsapp_status));

// Pre-calcular el status para el comportamiento interactivo
$is_clickable = false;
$click_url = '#';
$cursor_style = 'default';

if (is_array($whatsapp_status) && isset($whatsapp_status['json']['status'])) {
    $display_status = strtoupper($whatsapp_status['json']['status']);
    if (in_array($display_status, ['QR_READY', 'QRCODE_READY', 'DISCONNECTED', 'CLOSED', 'NOT_INITIALIZED'])) {
        $is_clickable = true;
        $click_url = 'ajustes.php';
        $cursor_style = 'pointer';
    }
} elseif ($whatsapp_status === false) {
    $is_clickable = true;
    $click_url = 'ajustes.php';
    $cursor_style = 'pointer';
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panel de Administración</title>
    <link rel="icon" type="image/png" href="img/icon512.png">
    <link rel="stylesheet" href="css/style.css?v=<?php echo filemtime('css/style.css'); ?>">
    <link rel="stylesheet" href="css/notificaciones.css?v=<?php echo filemtime('css/notificaciones.css'); ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="css/index_button.css?v=<?php echo filemtime('css/index_button.css'); ?>">
</head>
<body>
<div id="dashboard-container">
    <?php include 'sidebar.php'; ?>
    <div class="main-content-overlay"></div>
    <div class="main-content">
        <header>
            <div style="display: flex; align-items: center;">
                <button id="menu-toggle"><i class="fas fa-bars"></i></button>
                <h2 style="margin-left: 15px;"><i class="fas fa-desktop"></i> Escritorio</h2>
            </div>
            <div class="user-info">
                <span>Bienvenido, <strong><?php echo htmlspecialchars($_SESSION['username']); ?></strong></span>
                <div class="whatsapp-status-bar" onclick="openWhatsappModal()" style="display: flex; align-items: center; margin-left: 20px; padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 500; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); cursor: pointer;">
                    <i class="fab fa-whatsapp" style="margin-right: 6px; color: #25d366;"></i>
                    <span style="margin-right: 6px; color: #666;">WhatsApp:</span>
                    <?php
                    $status_text = 'Desconectado';
                    $status_color = '#dc3545'; // rojo
                    $status_icon = 'fas fa-times-circle';

                    // Mostrar el status raw para debug
                    $raw_status = isset($whatsapp_status['status']) ? $whatsapp_status['status'] : 'null';

                    if (is_array($whatsapp_status) && isset($whatsapp_status['json']['status'])) {
                        $display_status = strtoupper($whatsapp_status['json']['status']); // Convertir a mayúsculas para comparación
                        if ($display_status === 'QR_READY' || $display_status === 'QRCODE_READY') {
                            $status_text = 'Esperando QR';
                            $status_color = '#ffc107'; // amarillo
                            $status_icon = 'fas fa-qrcode';
                        } elseif ($display_status === 'READY' || $display_status === 'CONNECTED' || $display_status === 'AUTHENTICATED') {
                            $status_text = 'Conectado';
                            $status_color = '#28a745'; // verde
                            $status_icon = 'fas fa-check-circle';
                        } elseif ($display_status === 'CONNECTING' || $display_status === 'CONNECTING...') {
                            $status_text = 'Conectando...';
                            $status_color = '#17a2b8'; // azul
                            $status_icon = 'fas fa-spinner fa-spin';
                        } elseif ($display_status === 'DISCONNECTED' || $display_status === 'CLOSED' || $display_status === 'NOT_INITIALIZED') {
                            $status_text = 'Desconectado';
                            $status_color = '#dc3545'; // rojo
                            $status_icon = 'fas fa-times-circle';
                        } else {
                            // Mostrar el status desconocido para debug
                            $status_text = 'Estado: ' . $whatsapp_status['json']['status'];
                            $status_color = '#6c757d'; // gris
                            $status_icon = 'fas fa-question-circle';
                        }
                    } elseif ($whatsapp_status === false) {
                        $status_text = 'Error de conexión';
                        $status_color = '#dc3545';
                        $status_icon = 'fas fa-exclamation-triangle';
                    }
                    ?>
                    <i class="<?php echo $status_icon; ?>" style="color: <?php echo $status_color; ?>; margin-right: 4px; font-size: 10px;"></i>
                    <span style="color: <?php echo $status_color; ?>;"><?php echo $status_text; ?></span>
                <?php if ($is_clickable): ?>
                </a>
                <?php else: ?>
                </div>
                <?php endif; ?>
                <div class="notification-item">
                    <a href="#" id="notification-bell">
                        <i class="fas fa-bell"></i>
                        <span class="notification-count">0</span>
                    </a>
                    <div class="notifications-panel">
                        <div class="notifications-header">
                            <h4>Notificaciones</h4>
                        </div>
                        <ul class="notifications-list">
                            <!-- Las notificaciones se cargarán aquí -->
                        </ul>
                    </div>
                </div>
                <i class="fas fa-user-circle"></i>
            </div>
        </header>
        <main>
            <div class="dashboard-grid">
                <div class="widget-full">
                    <h3><i class="fas fa-calendar-day"></i> Turnos para Hoy (<?php echo date('d/m/Y'); ?>)</h3>
                    <div id="turnos-hoy-container">
                        <p>Cargando...</p>
                    </div>
                </div>
                <div class="widget-half">
                    <h3><i class="fas fa-chart-pie"></i> Resumen del Día</h3>
                    <div id="resumen-dia-container">
                        <p>Cargando...</p>
                    </div>
                </div>
                <div class="widget-half">
                    <h3><i class="fas fa-user-plus"></i> Actividad Reciente de Nuevos Clientes</h3>
                    <div id="actividad-reciente-container">
                        <p>Cargando...</p>
                    </div>
                </div>
                <div class="widget-half">
                    <h3><i class="fas fa-calendar-alt"></i> Resumen del Mes (<?php
                        $meses = array(
                            1 => 'Enero', 2 => 'Febrero', 3 => 'Marzo', 4 => 'Abril',
                            5 => 'Mayo', 6 => 'Junio', 7 => 'Julio', 8 => 'Agosto',
                            9 => 'Septiembre', 10 => 'Octubre', 11 => 'Noviembre', 12 => 'Diciembre'
                        );
                        echo $meses[date('n')] . ' ' . date('Y');
                    ?>)</h3>
                    <div id="resumen-mes-container">
                        <p>Cargando...</p>
                    </div>
                </div>
                <div class="widget-half">
                    <h3><i class="fas fa-clock"></i> Clientes Próximos a Vencer (7 días)</h3>
                    <div id="clientes-vencimiento-container">
                        <p>Cargando...</p>
                    </div>
                </div>
                <!--  </div>
                     <div class="widget-full">
                    <h3><i class="fas fa-calendar-week"></i> Próximos Servicios/Tratamientos</h3>
                    <div id="proximos-servicios-container">
                        <p>Cargando...</p>
                    </div>
                </div>-->
                <style>
                    .cliente-vencimiento-card {
                        background: #fff;
                        border: 1px solid #e0e0e0;
                        border-radius: 8px;
                        padding: 15px;
                        margin-bottom: 10px;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .cliente-header {
                        display: flex;
                        flex-direction: column;
                        gap: 5px;
                    }
                    .cliente-nombre {
                        font-weight: bold;
                        font-size: 1.1em;
                        color: #333;
                    }
                    .cliente-vencimiento {
                        color: #e74c3c;
                        font-weight: 600;
                        font-size: 0.9em;
                    }
                    .cliente-detalles {
                        flex: 1;
                        margin: 0 20px;
                    }
                    .cliente-detalles p {
                        margin: 5px 0;
                        font-size: 0.9em;
                        color: #666;
                    }
                    .cliente-actions {
                        display: flex;
                        gap: 10px;
                    }
                    .cliente-actions .btn-action {
                        padding: 8px 15px;
                        font-size: 0.9em;
                    }
                    @media (max-width: 768px) {
                        .cliente-vencimiento-card {
                            flex-direction: column;
                            align-items: flex-start;
                        }
                        .cliente-detalles {
                            margin: 10px 0;
                        }
                        .cliente-actions {
                            width: 100%;
                            justify-content: flex-end;
                        }
                    }
                </style>
            </div>
        </main>
    </div>
</div>
    <!-- Loader global (overlay) -->
    <div id="global-loader" class="loader hidden" aria-hidden="true" aria-label="Cargando">
      <div class="spinner"></div>
      <span class="loader-text">Cargando…</span>
    </div>

    <script>
        // Utilidades UI para loader (movidas aquí para asegurar disponibilidad global temprana)
        function showLoader(message = 'Cargando...') {
            const loader = document.getElementById('global-loader');
            if (loader) {
                loader.classList.remove('hidden');
                const loaderText = loader.querySelector('.loader-text');
                if (loaderText) loaderText.textContent = message;
            }
        }

        function hideLoader() {
            const loader = document.getElementById('global-loader');
            if (loader) loader.classList.add('hidden');
        }
    </script>

    <script src="js/notificaciones.js"></script>
    <?php
    // Asegurarse de que la sesión esté iniciada para acceder a $_SESSION
    if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }
    // WA_CLIENT_ID y WHATSAPP_REMINDER_TEMPLATE ya están definidos en config.php
    ?>
    <script>
        const WA_CLIENT_ID = "<?php echo htmlspecialchars(WA_CLIENT_ID); ?>";
        const WHATSAPP_REMINDER_TEMPLATE = "<?php echo htmlspecialchars(WHATSAPP_REMINDER_TEMPLATE); ?>";
    </script>
    <script src="js/main.js"></script>

    <!-- React App CSS -->
    <link href="static/css/main.fd7f5ead.css" rel="stylesheet">
    <!-- React App JavaScript -->
    <script defer="defer" src="static/js/main.23052b2c.js"></script>

    <!-- Contenedor de toasts (notificaciones) -->
    <div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>

    <!-- Modal de Información de WhatsApp -->
    <div id="whatsappModal" class="modal">
        <div class="modal-content" style="max-width: 500px;">
            <span class="close-button" onclick="closeWhatsappModal()">&times;</span>
            <h2 style="margin-bottom: 20px; color: #25d366;">
                <i class="fab fa-whatsapp" style="margin-right: 10px;"></i>
                Estado de WhatsApp
            </h2>
            <div id="whatsapp-modal-content">
                <?php
                if (is_array($whatsapp_status) && isset($whatsapp_status['json']['status'])) {
                    $display_status = strtoupper($whatsapp_status['json']['status']);
                    if ($display_status === 'READY' || $display_status === 'CONNECTED' || $display_status === 'AUTHENTICATED') {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-check-circle" style="font-size: 48px; color: #28a745; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #28a745; margin-bottom: 10px;">WhatsApp Conectado</h3>';
                        echo '<p>El servicio de WhatsApp está funcionando correctamente. Los mensajes se enviarán automáticamente.</p>';
                        echo '<button onclick="closeWhatsappModal()" class="btn-primary" style="margin-top: 15px;">Entendido</button>';
                        echo '</div>';
                    } elseif ($display_status === 'QR_READY' || $display_status === 'QRCODE_READY') {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-qrcode" style="font-size: 48px; color: #ffc107; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #ffc107; margin-bottom: 10px;">Código QR Disponible</h3>';
                        echo '<p>WhatsApp está listo para conectarse. Necesitas escanear el código QR desde tu teléfono.</p>';
                        echo '<a href="ajustes.php" class="btn-primary" style="margin-top: 15px; display: inline-block; text-decoration: none;">Ir a Configuración</a>';
                        echo '</div>';
                    } elseif ($display_status === 'CONNECTING' || $display_status === 'CONNECTING...') {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-spinner fa-spin" style="font-size: 48px; color: #17a2b8; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #17a2b8; margin-bottom: 10px;">Conectando...</h3>';
                        echo '<p>WhatsApp se está conectando. Este proceso puede tomar unos momentos.</p>';
                        echo '<button onclick="closeWhatsappModal()" class="btn-secondary" style="margin-top: 15px;">Cerrar</button>';
                        echo '</div>';
                    } else {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-times-circle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #dc3545; margin-bottom: 10px;">WhatsApp Desconectado</h3>';
                        echo '<p>El servicio de WhatsApp no está conectado. Los mensajes no se enviarán hasta que se reconecte.</p>';
                        echo '<a href="ajustes.php" class="btn-primary" style="margin-top: 15px; display: inline-block; text-decoration: none;">Configurar WhatsApp</a>';
                        echo '</div>';
                    }
                } elseif ($whatsapp_status === false) {
                    echo '<div style="text-align: center; padding: 20px;">';
                    echo '<i class="fas fa-exclamation-triangle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>';
                    echo '<h3 style="color: #dc3545; margin-bottom: 10px;">Error de Conexión</h3>';
                    echo '<p>No se puede conectar con el servicio de WhatsApp. Verifica que el servidor esté funcionando.</p>';
                    echo '<a href="ajustes.php" class="btn-primary" style="margin-top: 15px; display: inline-block; text-decoration: none;">Diagnosticar Problema</a>';
                    echo '</div>';
                } else {
                    echo '<div style="text-align: center; padding: 20px;">';
                    echo '<i class="fas fa-question-circle" style="font-size: 48px; color: #6c757d; margin-bottom: 15px;"></i>';
                    echo '<h3 style="color: #6c757d; margin-bottom: 10px;">Estado Desconocido</h3>';
                    echo '<p>No se pudo determinar el estado de WhatsApp. Intenta recargar la página.</p>';
                    echo '<button onclick="closeWhatsappModal()" class="btn-secondary" style="margin-top: 15px;">Cerrar</button>';
                    echo '</div>';
                }
                ?>
            </div>
        </div>
    </div>

    <script>
        function openWhatsappModal() {
            document.getElementById('whatsappModal').style.display = 'block';
        }

        function closeWhatsappModal() {
            document.getElementById('whatsappModal').style.display = 'none';
        }

        // Cerrar modal al hacer click fuera
        window.onclick = function(event) {
            const modal = document.getElementById('whatsappModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }


    </script>
    <script src="js/notificaciones.js"></script>
    <?php
    // Asegurarse de que la sesión esté iniciada para acceder a $_SESSION
    if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }
    // WA_CLIENT_ID y WHATSAPP_REMINDER_TEMPLATE ya están definidos en config.php
    ?>
    <script>
        const WA_CLIENT_ID = "<?php echo htmlspecialchars(WA_CLIENT_ID); ?>";
        const WHATSAPP_REMINDER_TEMPLATE = "<?php echo htmlspecialchars(WHATSAPP_REMINDER_TEMPLATE); ?>";
    </script>
    <script src="js/main.js"></script>

    <!-- Contenedor de toasts (notificaciones) -->
    <div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>

    <!-- Modal de Información de WhatsApp -->
    <div id="whatsappModal" class="modal">
        <div class="modal-content" style="max-width: 500px;">
            <span class="close-button" onclick="closeWhatsappModal()">&times;</span>
            <h2 style="margin-bottom: 20px; color: #25d366;">
                <i class="fab fa-whatsapp" style="margin-right: 10px;"></i>
                Estado de WhatsApp
            </h2>
            <div id="whatsapp-modal-content">
                <?php
                if (is_array($whatsapp_status) && isset($whatsapp_status['json']['status'])) {
                    $display_status = strtoupper($whatsapp_status['json']['status']);
                    if ($display_status === 'READY' || $display_status === 'CONNECTED' || $display_status === 'AUTHENTICATED') {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-check-circle" style="font-size: 48px; color: #28a745; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #28a745; margin-bottom: 10px;">WhatsApp Conectado</h3>';
                        echo '<p>El servicio de WhatsApp está funcionando correctamente. Los mensajes se enviarán automáticamente.</p>';
                        echo '<button onclick="closeWhatsappModal()" class="btn-primary" style="margin-top: 15px;">Entendido</button>';
                        echo '</div>';
                    } elseif ($display_status === 'QR_READY' || $display_status === 'QRCODE_READY') {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-qrcode" style="font-size: 48px; color: #ffc107; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #ffc107; margin-bottom: 10px;">Código QR Disponible</h3>';
                        echo '<p>WhatsApp está listo para conectarse. Necesitas escanear el código QR desde tu teléfono.</p>';
                        echo '<a href="ajustes.php" class="btn-primary" style="margin-top: 15px; display: inline-block; text-decoration: none;">Ir a Configuración</a>';
                        echo '</div>';
                    } elseif ($display_status === 'CONNECTING' || $display_status === 'CONNECTING...') {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-spinner fa-spin" style="font-size: 48px; color: #17a2b8; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #17a2b8; margin-bottom: 10px;">Conectando...</h3>';
                        echo '<p>WhatsApp se está conectando. Este proceso puede tomar unos momentos.</p>';
                        echo '<button onclick="closeWhatsappModal()" class="btn-secondary" style="margin-top: 15px;">Cerrar</button>';
                        echo '</div>';
                    } else {
                        echo '<div style="text-align: center; padding: 20px;">';
                        echo '<i class="fas fa-times-circle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>';
                        echo '<h3 style="color: #dc3545; margin-bottom: 10px;">WhatsApp Desconectado</h3>';
                        echo '<p>El servicio de WhatsApp no está conectado. Los mensajes no se enviarán hasta que se reconecte.</p>';
                        echo '<a href="ajustes.php" class="btn-primary" style="margin-top: 15px; display: inline-block; text-decoration: none;">Configurar WhatsApp</a>';
                        echo '</div>';
                    }
                } elseif ($whatsapp_status === false) {
                    echo '<div style="text-align: center; padding: 20px;">';
                    echo '<i class="fas fa-exclamation-triangle" style="font-size: 48px; color: #dc3545; margin-bottom: 15px;"></i>';
                    echo '<h3 style="color: #dc3545; margin-bottom: 10px;">Error de Conexión</h3>';
                    echo '<p>No se puede conectar con el servicio de WhatsApp. Verifica que el servidor esté funcionando.</p>';
                    echo '<a href="ajustes.php" class="btn-primary" style="margin-top: 15px; display: inline-block; text-decoration: none;">Diagnosticar Problema</a>';
                    echo '</div>';
                } else {
                    echo '<div style="text-align: center; padding: 20px;">';
                    echo '<i class="fas fa-question-circle" style="font-size: 48px; color: #6c757d; margin-bottom: 15px;"></i>';
                    echo '<h3 style="color: #6c757d; margin-bottom: 10px;">Estado Desconocido</h3>';
                    echo '<p>No se pudo determinar el estado de WhatsApp. Intenta recargar la página.</p>';
                    echo '<button onclick="closeWhatsappModal()" class="btn-secondary" style="margin-top: 15px;">Cerrar</button>';
                    echo '</div>';
                }
                ?>
            </div>
        </div>
    </div>

    <script>
        function openWhatsappModal() {
            document.getElementById('whatsappModal').style.display = 'block';
        }

        function closeWhatsappModal() {
            document.getElementById('whatsappModal').style.display = 'none';
        }

        // Cerrar modal al hacer click fuera
        window.onclick = function(event) {
            const modal = document.getElementById('whatsappModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }


    </script>
    <!-- React App JavaScript -->
    <script defer="defer" src="static/js/main.23052b2c.js"></script>
</body>
</html>
</diff>
<task_progress>
- [x] Analizar la estructura del proyecto y dependencias
- [x] Revisar el componente de Turnos
- [x] Investigar las llamadas a la API de turnos
  - [x] Revisar leer_turnos.php
  - [x] Revisar profesionales_api.php
  - [x] Revisar leer_servicios_por_profesional.php
- [ ] Depurar el problema
  - [x] Descomentar logs en leer_turnos.php
  - [x] Iniciar servidor de desarrollo React
  - [x] Generar logs de la API (falló por permisos)
  - [x] Corregir permisos del archivo de log
  - [x] Analizar logs de PHP (identificado el problema de filtro de fecha)
  - [x] Modificar leer_turnos.php para priorizar filtros de FullCalendar
  - [x] Analizar logs de PHP (después de la corrección)
  - [x] Revisar APIs de filtros para efectos secundarios
  - [x] Buscar la fuente de 'accion=leer_hoy' (encontrado en Dashboard.js)
  - [x] Modificar Dashboard.js para eliminar la llamada a leer_turnos.php con accion=leer_hoy
  - [x] Analizar logs de PHP (después de la última corrección)
  - [x] Vaciar log de PHP
  - [x] Recargar página y generar nuevos logs (error "You need to enable JavaScript")
  - [x] Revisar index.php para la carga de la aplicación React (identificado el problema)
  - [x] Construir la aplicación React
  - [x] Leer index.html generado por la construcción de React
- [x] Implementar la solución
  - [x] Modificar index.php para cargar los assets de React (con rutas corregidas)
- [ ] Verificar la solución
</task_progress>
</replace_in_file>
