<?php
ini_set('display_errors', 0);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
ini_set('log_errors', 1);
ini_set('error_log', __DIR__ . '/../php-error.log');
require_once __DIR__ . '/config.php'; // Carga el config.php principal para generateUuidV4() y WA_API_TOKEN
require_once 'database.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

// Iniciar sesión PHP si no está iniciada
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}

// 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 para laslupitas.");
} else {
    error_log("WhatsApp Bridge: Script de inicio no encontrado en {$whatsapp_bridge_script} para laslupitas.");
}

// --- Lógica para usar un clientId fijo para toda la aplicación ---
$whatsapp_client_id = 'laslupitas_main'; // Usar un clientId fijo para la aplicación laslupitas

// Asegura que la sesión esté iniciada en Node para WhatsApp
try {
  postJson(WA_BASE . '/session/start', ['clientId' => $whatsapp_client_id]);
} catch (Exception $e) {
  // Ignorar error de arranque si ya está iniciado, o loguearlo para depuración
  error_log("WhatsApp Bridge: Error al iniciar sesión de WhatsApp en Node (ajustes.php de laslupitas): " . $e->getMessage());
}

// Obtener estado y QR para WhatsApp
$whatsapp_status = getJson(WA_BASE . '/session/status?clientId=' . urlencode($whatsapp_client_id));
$whatsapp_qr = getJson(WA_BASE . '/session/qr?clientId=' . urlencode($whatsapp_client_id));
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ajustes - Panel de Administración</title>
    <link rel="stylesheet" href="css/style.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/accordion.css">
    <link rel="icon" type="image/png" href="img/icon512.png">
</head>
<body>
    <div id="dashboard-container">
        <?php include 'sidebar.php'; ?>
        <div class="main-content">
            <div class="main-content-overlay"></div>
            <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-cog"></i> Ajustes de la Aplicación</h2>
                </div>
            </header>
        
        <main>
            <div class="accordion-item">
                <div class="accordion-header">
                    <h3><i class="fas fa-money-bill-wave"></i> Configuración de Pagos</h3>
                    <i class="fas fa-chevron-down accordion-icon"></i>
                </div>
                <div class="accordion-content">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <p>Modifica aquí los parámetros para los métodos de pago.</p>
                        <button type="button" id="open-mp-instructions-modal" class="btn-secondary">¿Cómo obtener el Token?</button>
                    </div>
                    
                    <form id="formAjustes">
                        <div class="form-group">
                            <label for="mp_access_token">Access Token de Mercado Pago</label>
                            <input type="text" id="mp_access_token" name="mp_access_token" value="<?php echo defined('MP_ACCESS_TOKEN') ? htmlspecialchars(MP_ACCESS_TOKEN) : ''; ?>" placeholder="Pega aquí tu Access Token">
                        </div>
                        
                        <hr style="margin: 20px 0;">
                        
                        <h4>Datos para Transferencia Bancaria</h4>
                        <div class="form-group">
                            <label for="transferencia_cbu">CBU o Alias</label>
                            <input type="text" id="transferencia_cbu" name="transferencia_cbu" value="<?php echo defined('TRANSFERENCIA_CBU') ? htmlspecialchars(TRANSFERENCIA_CBU) : ''; ?>">
                        </div>
                        <div class="form-group">
                            <label for="transferencia_titular">Nombre del Titular</label>
                            <input type="text" id="transferencia_titular" name="transferencia_titular" value="<?php echo defined('TRANSFERENCIA_TITULAR') ? htmlspecialchars(TRANSFERENCIA_TITULAR) : ''; ?>">
                        </div>
                        <div class="form-group">
                            <label for="transferencia_whatsapp">Número de WhatsApp (solo dígitos)</label>
                            <input type="text" id="transferencia_whatsapp" name="transferencia_whatsapp" value="<?php echo defined('TRANSFERENCIA_WHATSAPP') ? htmlspecialchars(TRANSFERENCIA_WHATSAPP) : ''; ?>">
                        </div>
                        
                        <button type="submit" class="btn-success">Guardar Cambios</button>
                    </form>
                    <div id="mensaje-respuesta" style="margin-top: 15px;"></div>
                </div>
            </div>

            <div class="accordion-item">
                <div class="accordion-header">
                    <h3><i class="fab fa-google"></i> Configuración de Google Calendar</h3>
                    <i class="fas fa-chevron-down accordion-icon"></i>
                </div>
                <div class="accordion-content">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <p>Conecta tu cuenta de Google para sincronizar los turnos con tu calendario.</p>
                        <button type="button" id="open-instructions-modal" class="btn-secondary">¿Cómo conectar?</button>
                    </div>
                    
                    <form id="formGoogleCalendar">
                        <div class="form-group">
                            <label for="google_client_id">Google Client ID</label>
                            <input type="text" id="google_client_id" name="google_client_id" value="<?php echo defined('GOOGLE_CLIENT_ID') ? htmlspecialchars(GOOGLE_CLIENT_ID) : ''; ?>" placeholder="Pega aquí tu Client ID de Google" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="google_client_secret">Google Client Secret</label>
                            <input type="password" id="google_client_secret" name="google_client_secret" value="<?php echo defined('GOOGLE_CLIENT_SECRET') ? htmlspecialchars(GOOGLE_CLIENT_SECRET) : ''; ?>" placeholder="Pega aquí tu Client Secret de Google" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="google_calendar_id">Google Calendar ID</label>
                            <input type="text" id="google_calendar_id" name="google_calendar_id" value="<?php echo defined('GOOGLE_CALENDAR_ID') ? htmlspecialchars(GOOGLE_CALENDAR_ID) : ''; ?>" placeholder="Pega aquí el ID de tu Calendario de Google">
                        </div>
                        
                        <button type="submit" class="btn-success">Guardar Credenciales</button>
                        
                        <?php if (defined('GOOGLE_CLIENT_ID') && GOOGLE_CLIENT_ID && defined('GOOGLE_CLIENT_SECRET') && GOOGLE_CLIENT_SECRET): ?>
                            <a href="google_auth.php" class="btn-primary" style="text-decoration: none; margin-left: 10px;">
                                <?php
                                $token_file = __DIR__ . '/api/google_oauth_token.json';
                                $token_data = file_exists($token_file) ? json_decode(file_get_contents($token_file), true) : null;
                                echo ($token_data && isset($token_data['access_token']) && $token_data['access_token']) ? 'Reconectar con Google' : 'Conectar con Google';
                                ?>
                            </a>
                        <?php endif; ?>

                        <div class="form-group" style="margin-top: 20px;">
                            <label for="google_calendar_enabled">Habilitar Sincronización</label>
                            <input type="checkbox" id="google_calendar_enabled" name="google_calendar_enabled" <?php echo (defined('GOOGLE_CALENDAR_ENABLED') && GOOGLE_CALENDAR_ENABLED === 'true') ? 'checked' : ''; ?>>
                        </div>
                        
                        <div style="margin-top: 15px;">
                            <strong>Estado:</strong>
                            <?php
                            $token_file = __DIR__ . '/api/google_oauth_token.json';
                            $token_data = file_exists($token_file) ? json_decode(file_get_contents($token_file), true) : null;
                            if ($token_data && isset($token_data['access_token']) && $token_data['access_token']) {
                                echo '<span style="color: green;">Conectado</span>';
                            } else {
                                echo '<span style="color: red;">Desconectado</span>';
                            }
                            ?>
                        </div>

                        <button type="button" id="sincronizar-calendario-btn" class="btn-secondary" style="margin-top: 15px;">Sincronizar Calendario Completo</button>
                        <div id="mensaje-sincronizacion" style="margin-top: 10px;"></div>
                    </form>
                    <div id="mensaje-google" style="margin-top: 15px;"></div>
                </div>
            </div>

            <div class="accordion-item">
                <div class="accordion-header">
                    <h3><i class="fas fa-sms"></i> Configuración de Twilio</h3>
                    <i class="fas fa-chevron-down accordion-icon"></i>
                </div>
                <div class="accordion-content">
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <p>Configura tus credenciales de Twilio para enviar notificaciones por SMS y WhatsApp.</p>
                        <button type="button" id="open-twilio-instructions-modal" class="btn-secondary">¿Cómo conectar?</button>
                    </div>
                    
                    <form id="formTwilio">
                        <div class="form-group">
                            <label for="twilio_account_sid">Twilio Account SID</label>
                            <input type="text" id="twilio_account_sid" name="twilio_account_sid" value="<?php echo defined('TWILIO_ACCOUNT_SID') ? htmlspecialchars(TWILIO_ACCOUNT_SID) : ''; ?>" placeholder="Pega aquí tu Account SID de Twilio">
                        </div>
                        <div class="form-group">
                            <label for="twilio_auth_token">Twilio Auth Token</label>
                            <input type="password" id="twilio_auth_token" name="twilio_auth_token" value="<?php echo defined('TWILIO_AUTH_TOKEN') ? htmlspecialchars(TWILIO_AUTH_TOKEN) : ''; ?>" placeholder="Pega aquí tu Auth Token de Twilio">
                        </div>
                        <div class="form-group">
                            <label for="twilio_phone_number">Número de Teléfono de Twilio (para SMS)</label>
                            <input type="text" id="twilio_phone_number" name="twilio_phone_number" value="<?php echo defined('TWILIO_PHONE_NUMBER') ? htmlspecialchars(TWILIO_PHONE_NUMBER) : ''; ?>" placeholder="Pega aquí tu número de teléfono de Twilio">
                        </div>
                        <div class="form-group">
                            <label for="twilio_whatsapp_from_number">Número de WhatsApp de Twilio</label>
                            <input type="text" id="twilio_whatsapp_from_number" name="twilio_whatsapp_from_number" value="<?php echo defined('TWILIO_WHATSAPP_FROM_NUMBER') ? htmlspecialchars(TWILIO_WHATSAPP_FROM_NUMBER) : ''; ?>" placeholder="Pega aquí tu número de WhatsApp de Twilio">
                        </div>
                        
                        <button type="submit" class="btn-success">Guardar Credenciales de Twilio</button>
                    </form>
                    <div id="mensaje-twilio" style="margin-top: 15px;"></div>
                </div>
            </div>

            <div class="accordion-item">
                <div class="accordion-header">
                    <h3><i class="fab fa-whatsapp"></i> Configuración de WhatsApp</h3>
                    <i class="fas fa-chevron-down accordion-icon"></i>
                </div>
                <div class="accordion-content show">
                    <p>Conecta tu cuenta de WhatsApp para enviar notificaciones y mensajes.</p>
                    
                    <div id="whatsapp-status-section">
                        <div id="status">Estado: <strong><?php
                            $display_status = $whatsapp_status['status'] ?? 'desconocido';
                            if ($display_status === 'QR_READY') {
                                echo 'Listo para conectar';
                            } elseif ($display_status === 'READY') {
                                echo 'Conectado exitosamente';
                            } else {
                                echo htmlspecialchars($display_status);
                            }
                        ?></strong></div>
                        <div id="qrbox" style="margin-top:10px">
                            <?php if (!empty($whatsapp_qr['qr'])): ?>
                                <img src="<?= htmlspecialchars($whatsapp_qr['qr']) ?>" alt="QR" style="max-width:280px;border:1px solid #eee;border-radius:8px" />
                                <p class="muted">Abrí WhatsApp → Dispositivos vinculados → Vincular un dispositivo → Escaneá el QR.</p>
                            <?php else: ?>
                                <p class="muted">Si no ves el QR, esperá unos segundos. Se actualizará automáticamente.</p>
                            <?php endif; ?>
                        </div>
                        <button type="button" onclick="refreshWhatsappStatus()" class="btn-secondary" style="margin-top: 10px;">Actualizar estado/QR</button>
                    </div>

                    <hr style="margin: 20px 0;">

                    <form id="formWhatsappSettings">
                        <div class="form-group">
                            <label for="whatsapp_enabled">Habilitar envío de WhatsApp</label>
                            <input type="checkbox" id="whatsapp_enabled" name="whatsapp_enabled" <?php echo (defined('WHATSAPP_ENABLED') && WHATSAPP_ENABLED === 'true') ? 'checked' : ''; ?>>
                        </div>
                        <button type="submit" class="btn-success">Guardar Configuración de WhatsApp</button>
                    </form>
                    <div id="mensaje-whatsapp-settings" style="margin-top: 15px;"></div>

                    <hr style="margin: 20px 0;">

                    <form id="formMetaWhatsappSettings">
                        <div class="form-group">
                            <label for="meta_whatsapp_enabled">Habilitar envío de WhatsApp (Meta)</label>
                            <input type="checkbox" id="meta_whatsapp_enabled" name="meta_whatsapp_enabled" <?php echo (defined('META_WHATSAPP_ENABLED') && META_WHATSAPP_ENABLED === 'true') ? 'checked' : ''; ?>>
                        </div>
                        <button type="submit" class="btn-success">Guardar Configuración de WhatsApp (Meta)</button>
                    </form>
                    <div id="mensaje-meta-whatsapp-settings" style="margin-top: 15px;"></div>

                    <hr style="margin: 20px 0;">

                    <h4>Método de Envío de WhatsApp</h4>
                    <div class="form-group">
                        <label>Método actual:</label>
                        <button id="toggle-whatsapp-method" class="btn-secondary" style="margin-left: 10px;">
                            <?php echo defined('WHATSAPP_DEFAULT_METHOD') && WHATSAPP_DEFAULT_METHOD === 'puente' ? '🌉 Puente' : '📱 Meta'; ?>
                        </button>
                        <small style="display: block; margin-top: 5px; color: #666;">
                            Cambia entre API de WhatsApp Business (Meta) y puente local. Afecta a todos los envíos automáticos y manuales.
                        </small>
                    </div>

                    <hr style="margin: 20px 0;">

                    <h4>Plantilla de Mensaje de Notificación de Turnos Liberados</h4>
                    <form id="formWhatsappNotificationTemplate">
                        <div class="form-group">
                            <label for="whatsapp_notification_template">Plantilla de Mensaje</label>
                            <textarea id="whatsapp_notification_template" name="whatsapp_notification_template" rows="4" placeholder="Se ha liberado un turno para {SERVICIO} con {PROFESIONAL} el {FECHA} a las {HORA}. Por favor, contactanos si deseás confirmar tu asistencia."><?php echo defined('WHATSAPP_NOTIFICATION_TEMPLATE') ? htmlspecialchars(WHATSAPP_NOTIFICATION_TEMPLATE) : "Se ha liberado un turno para {SERVICIO} con {PROFESIONAL} el {FECHA} a las {HORA}. Por favor, contactanos si deseás confirmar tu asistencia."; ?></textarea>
                            <small>Haz clic en las variables para insertarlas en la plantilla. No edites las variables directamente.</small>
                            <div class="template-variables" style="margin-top: 10px;">
                                <button type="button" class="btn-variable" data-variable="{SERVICIO}">Servicio</button>
                                <button type="button" class="btn-variable" data-variable="{PROFESIONAL}">Profesional</button>
                                <button type="button" class="btn-variable" data-variable="{FECHA}">Fecha</button>
                                <button type="button" class="btn-variable" data-variable="{HORA}">Hora</button>
                            </div>
                        </div>
                        <button type="submit" class="btn-success">Guardar Plantilla</button>
                    </form>
                    <div id="mensaje-whatsapp-notification-template" style="margin-top: 15px;"></div>

                    <hr style="margin: 20px 0;">

                    <h4>Plantilla de Mensaje de Recordatorio Automático (3 horas antes)</h4>
                    <form id="formWhatsappReminderTemplate">
                        <div class="form-group">
                            <label for="whatsapp_reminder_template">Plantilla de Mensaje</label>
                            <textarea id="whatsapp_reminder_template" name="whatsapp_reminder_template" rows="5" placeholder="¡Hola {CLIENTE_NOMBRE}! Te recordamos que tenés un turno confirmado el {FECHA} a las {HORA} hs. con {PROFESIONAL_NOMBRE} para el servicio de {SERVICIOS}. ¡Te esperamos!"><?php echo defined('WHATSAPP_REMINDER_TEMPLATE') ? htmlspecialchars(WHATSAPP_REMINDER_TEMPLATE) : "¡Hola {CLIENTE_NOMBRE}! Te recordamos que tenés un turno confirmado el {FECHA} a las {HORA} hs. con {PROFESIONAL_NOMBRE} para el servicio de {SERVICIOS}. ¡Te esperamos!"; ?></textarea>
                            <small>Haz clic en las variables para insertarlas en la plantilla. No edites las variables directamente.</small>
                            <div class="template-variables" style="margin-top: 10px;">
                                <button type="button" class="btn-variable" data-variable="{CLIENTE_NOMBRE}">Cliente</button>
                                <button type="button" class="btn-variable" data-variable="{FECHA}">Fecha</button>
                                <button type="button" class="btn-variable" data-variable="{HORA}">Hora</button>
                                <button type="button" class="btn-variable" data-variable="{PROFESIONAL_NOMBRE}">Profesional</button>
                                <button type="button" class="btn-variable" data-variable="{SERVICIOS}">Servicios</button>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 15px;">
                            <label for="recordatorios_automaticos_enabled">Habilitar recordatorios automáticos</label>
                            <input type="checkbox" id="recordatorios_automaticos_enabled" name="recordatorios_automaticos_enabled" <?php echo (defined('RECORDATORIOS_AUTOMATICOS_ENABLED') && RECORDATORIOS_AUTOMATICOS_ENABLED === 'true') ? 'checked' : ''; ?>>
                            <small style="display: block; margin-top: 5px; color: #666;">
                                Los recordatorios se envían automáticamente 3 horas antes de cada turno confirmado.
                            </small>
                        </div>
                        <button type="submit" class="btn-success">Guardar Plantilla y Configuración</button>
                    </form>
                    <div id="mensaje-whatsapp-template" style="margin-top: 15px;"></div>

                    <hr style="margin: 20px 0;">

                    <h4>Envío Manual de Recordatorios</h4>
                    <p>Envía recordatorios manualmente a todos los turnos confirmados y pagados que aún no han recibido recordatorio.</p>
                    <form id="formEnviarRecordatoriosManual">
                        <div class="form-group">
                            <label for="fecha_desde_manual">Fecha Desde (opcional)</label>
                            <input type="date" id="fecha_desde_manual" name="fecha_desde">
                        </div>
                        <div class="form-group">
                            <label for="fecha_hasta_manual">Fecha Hasta (opcional)</label>
                            <input type="date" id="fecha_hasta_manual" name="fecha_hasta">
                        </div>
                        <button type="submit" class="btn-success">Enviar Recordatorios Manuales</button>
                    </form>
                    <div id="mensaje-recordatorios-manual" style="margin-top: 15px;"></div>

                    <hr style="margin: 20px 0;">

                    <h4>Enviar Mensaje de Prueba</h4>
                    <form id="formWhatsappSend">
                                            <input type="hidden" name="clientId" value="<?= htmlspecialchars($whatsapp_client_id) ?>">
                        <div class="form-group">
                            <label for="whatsapp_to">Para (E.164 sin +, ej. Argentina: 54911XXXXXXXX)</label>
                            <input type="text" id="whatsapp_to" name="to" placeholder="54911XXXXXXXX" required>
                        </div>
                        <div class="form-group">
                            <label for="whatsapp_message">Mensaje</label>
                            <textarea id="whatsapp_message" name="message" rows="3" placeholder="Hola desde Consultorio" required></textarea>
                        </div>
                        <button type="submit" class="btn-success">Enviar Mensaje de Prueba</button>
                    </form>
                    <div id="mensaje-whatsapp-send" style="margin-top: 15px;"></div>

                    <hr style="margin: 20px 0;">

                    <h4>Control de Sesión</h4>
                    <form id="formWhatsappClose">
                        <button type="submit" class="btn-danger">Cerrar Sesión de WhatsApp</button>
                        <span class="muted">(borra la autenticación local y desconecta el teléfono)</span>
                    </form>
                    <div id="mensaje-whatsapp-close" style="margin-top: 15px;"></div>
                </div>
            </div>

            <!-- Modal de Instrucciones de Mercado Pago -->
            <div id="mp-instructions-modal" class="modal">
                <div class="modal-content">
                    <span class="close-mp-modal">&times;</span>
                    <h2>Cómo Obtener el Access Token de Mercado Pago</h2>
                    <ol>
                        <li><strong>Paso 1:</strong> Inicia sesión en tu cuenta de <a href="https://www.mercadopago.com/" target="_blank">Mercado Pago</a>.</li>
                        <li><strong>Paso 2:</strong> Ve a la sección <a href="https://www.mercadopago.com.ar/developers/panel/credentials" target="_blank">"Tus credenciales"</a> en el panel de desarrolladores.</li>
                        <li><strong>Paso 3:</strong> Selecciona la aplicación que corresponde a tu negocio o crea una nueva si es necesario.</li>
                        <li><strong>Paso 4:</strong> Busca las <strong>Credenciales de Producción</strong>.</li>
                        <li><strong>Paso 5:</strong> Copia el <strong>Access Token</strong> y pégalo en el campo correspondiente de esta página.</li>
                    </ol>
                </div>
            </div>

            <!-- Modal de Instrucciones de Twilio -->
            <div id="twilio-instructions-modal" class="modal">
                <div class="modal-content">
                    <span class="close-twilio-modal">&times;</span>
                    <h2>Cómo Conectar con Twilio</h2>
                    <ol>
                        <li><strong>Paso 1:</strong> Ve a la <a href="https://www.twilio.com/console" target="_blank">Consola de Twilio</a> y regístrate o inicia sesión.</li>
                        <li><strong>Paso 2:</strong> En el dashboard principal, encontrarás tu <strong>Account SID</strong> y <strong>Auth Token</strong>. Cópialos y pégalos en los campos correspondientes de esta página.</li>
                        <li><strong>Paso 3 (Para SMS):</strong> Ve a la sección "Phone Numbers" > "Manage" > "Active Numbers". Compra un número o selecciona uno existente. Este será tu "Número de Teléfono de Twilio (para SMS)".</li>
                        <li><strong>Paso 4 (Para WhatsApp):</strong> Ve a la sección "Messaging" > "Senders" > "WhatsApp Senders". Sigue las instrucciones para conectar un número a la API de WhatsApp. Este número, con el código de país (ej. +14155238886), será tu "Número de WhatsApp de Twilio".</li>
                        <li><strong>Paso 5:</strong> Guarda las credenciales en esta página.</li>
                        </ol>
                </div>
            </div>

            <!-- Modal de Instrucciones -->
            <div id="instructions-modal" class="modal">
                <div class="modal-content">
                    <span class="close-modal">&times;</span>
                    <h2>Cómo Conectar con Google Calendar</h2>
                    <ol>
                        <li><strong>Paso 1:</strong> Ve a la <a href="https://console.cloud.google.com/" target="_blank">Consola de Google Cloud</a>.</li>
                        <li><strong>Paso 2:</strong> Crea un nuevo proyecto o selecciona uno existente.</li>
                        <li><strong>Paso 3:</strong> En el menú de navegación, ve a "APIs y servicios" > "Biblioteca" y busca "Google Calendar API". Habilítala.</li>
                        <li><strong>Paso 4:</strong> Ve a "APIs y servicios" > "Credenciales". Haz clic en "Crear credenciales" y selecciona "ID de cliente de OAuth".</li>
                        <li><strong>Paso 5:</strong> Elige "Aplicación web" como tipo de aplicación.</li>
                        <li><strong>Paso 6:</strong> En "URI de redireccionamiento autorizados", añade la siguiente URL: <code><?php echo 'http://' . $_SERVER['HTTP_HOST'] . '/google_oauth_callback.php'; ?></code></li>
                        <li><strong>Paso 7:</strong> Copia el "ID de cliente" y el "Secreto de cliente" y pégalos en los campos correspondientes de esta página.</li>
                        <li><strong>Paso 8:</strong> Ve a tu <a href="https://calendar.google.com/" target="_blank">Google Calendar</a>. En la configuración de tu calendario, busca la sección "Integrar el calendario" y copia el "ID de calendario". Pégalo en el campo correspondiente.</li>
                        <li><strong>Paso 9:</strong> Guarda las credenciales y luego haz clic en "Conectar con Google".</li>
                        </ol>
                </div>
            </div>

            <div class="accordion-item">
                <div class="accordion-header">
                    <h3><i class="fas fa-lock"></i> Cambiar Contraseña</h3>
                    <i class="fas fa-chevron-down accordion-icon"></i>
                </div>
                <div class="accordion-content">
                    <p>Modifica aquí tu contraseña para el acceso al panel.</p>
                    
                    <form id="formCambiarContrasena">
                        <div class="form-group">
                            <label for="current_password">Contraseña Actual</label>
                            <input type="password" id="current_password" name="current_password" required>
                        </div>
                        <div class="form-group">
                            <label for="new_password">Nueva Contraseña</label>
                            <input type="password" id="new_password" name="new_password" required>
                        </div>
                        <div class="form-group">
                            <label for="confirm_password">Confirmar Nueva Contraseña</label>
                            <input type="password" id="confirm_password" name="confirm_password" required>
                        </div>
                        
                        <button type="submit" class="btn-success">Cambiar Contraseña</button>
                    </form>
                    <div id="mensaje-contrasena" style="margin-top: 15px;"></div>
                </div>
            </div>
        </main>
    </div>

<script>
document.getElementById('formAjustes').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    const mensajeDiv = document.getElementById('mensaje-respuesta');

    fetch('api/guardar_ajustes.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

document.getElementById('formCambiarContrasena').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    const mensajeDiv = document.getElementById('mensaje-contrasena');

    if (data.new_password !== data.confirm_password) {
        mensajeDiv.innerHTML = '<p style="color: red;">Las contraseñas nuevas no coinciden.</p>';
        return;
    }

    fetch('api/cambiar_contrasena.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
            document.getElementById('formCambiarContrasena').reset();
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

document.addEventListener('DOMContentLoaded', function() {
    // --- Lógica de WhatsApp: Actualizar estado al cargar la página ---
    refreshWhatsappStatus();

    // --- Lógica para el menú colapsable ---
    const menuToggleButton = document.getElementById('menu-toggle');
    const container = document.getElementById('dashboard-container');
    const overlay = document.querySelector('.main-content-overlay');

    const toggleSidebar = () => {
        container.classList.toggle('sidebar-collapsed');
        if (window.innerWidth <= 768) {
            const isCollapsed = container.classList.contains('sidebar-collapsed');
            localStorage.setItem('sidebarState', isCollapsed ? 'collapsed' : 'expanded');
        }
    };

    if (menuToggleButton && container) {
        menuToggleButton.addEventListener('click', toggleSidebar);
    }

    if (overlay) {
        overlay.addEventListener('click', toggleSidebar);
    }

    // Restaurar estado al cargar en móvil
    if (window.innerWidth <= 768) {
        const savedState = localStorage.getItem('sidebarState');
        if (savedState === 'collapsed') {
            container.classList.add('sidebar-collapsed');
        } else if (savedState === 'expanded') {
            container.classList.remove('sidebar-collapsed');
        }
    }

    // --- Lógica para el Modal de Instrucciones de Google ---
    const googleModal = document.getElementById('instructions-modal');
    const openGoogleModalBtn = document.getElementById('open-instructions-modal');
    const closeGoogleModalSpan = document.querySelector('.close-modal');

    if(openGoogleModalBtn) {
        openGoogleModalBtn.onclick = function() {
            googleModal.style.display = "block";
        }
    }

    if(closeGoogleModalSpan) {
        closeGoogleModalSpan.onclick = function() {
            googleModal.style.display = "none";
        }
    }

    // --- Lógica para el Modal de Instrucciones de Twilio ---
    const twilioModal = document.getElementById('twilio-instructions-modal');
    const openTwilioModalBtn = document.getElementById('open-twilio-instructions-modal');
    const closeTwilioModalSpan = document.querySelector('.close-twilio-modal');

    if(openTwilioModalBtn) {
        openTwilioModalBtn.onclick = function() {
            twilioModal.style.display = "block";
        }
    }

    if(closeTwilioModalSpan) {
        closeTwilioModalSpan.onclick = function() {
            twilioModal.style.display = "none";
        }
    }

    // --- Lógica para el Modal de Instrucciones de Mercado Pago ---
    const mpModal = document.getElementById('mp-instructions-modal');
    const openMpModalBtn = document.getElementById('open-mp-instructions-modal');
    const closeMpModalSpan = document.querySelector('.close-mp-modal');

    if(openMpModalBtn) {
        openMpModalBtn.onclick = function() {
            mpModal.style.display = "block";
        }
    }

    if(closeMpModalSpan) {
        closeMpModalSpan.onclick = function() {
            mpModal.style.display = "none";
        }
    }

    // Cerrar modales al hacer clic fuera
    window.onclick = function(event) {
        if (event.target == googleModal) {
            googleModal.style.display = "none";
        }
        if (event.target == twilioModal) {
            twilioModal.style.display = "none";
        }
        if (event.target == mpModal) {
            mpModal.style.display = "none";
        }
    }

    // --- Lógica para Sincronización Manual ---
    const syncBtn = document.getElementById('sincronizar-calendario-btn');
    const syncMsgDiv = document.getElementById('mensaje-sincronizacion');

    if(syncBtn) {
        syncBtn.addEventListener('click', function() {
            this.disabled = true;
            this.textContent = 'Sincronizando...';
            syncMsgDiv.innerHTML = '<p style="color: blue;">Iniciando la sincronización. Esto puede tardar unos momentos...</p>';

            fetch('api/sincronizar_calendario.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    syncMsgDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
                } else {
                    syncMsgDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
                }
            })
            .catch(error => {
                syncMsgDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
                console.error('Error:', error);
            })
            .finally(() => {
                this.disabled = false;
                this.textContent = 'Sincronizar Calendario Completo';
            });
        });
    }

    // --- Lógica del Acordeón ---
    const accordionHeaders = document.querySelectorAll('.accordion-header');

    accordionHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const accordionItem = this.closest('.accordion-item');
            const content = accordionItem.querySelector('.accordion-content');
            const icon = this.querySelector('.accordion-icon');

            // Toggle la clase 'show' para el contenido
            content.classList.toggle('show');
            // Toggle la clase 'rotated' para el icono
            icon.classList.toggle('rotated');
        });
    });
});

document.getElementById('formGoogleCalendar').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    // Asegurarse de que el checkbox envíe un valor 'true' o 'false'
    data.google_calendar_enabled = document.getElementById('google_calendar_enabled').checked;

    const mensajeDiv = document.getElementById('mensaje-google');

    fetch('api/guardar_ajustes.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
            // Opcional: Recargar la página para ver el botón de conexión si las credenciales son válidas
            setTimeout(() => location.reload(), 1500);
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

// --- Lógica de WhatsApp ---
async function jget(url){
    const headers = { 'X-API-Key': '<?= WA_API_TOKEN ?>' };
    const r = await fetch(url, { headers: headers });
    return r.json();
}
async function refreshWhatsappStatus(){
    const s = await jget('<?= WA_BASE ?>/session/status?clientId=<?= urlencode($whatsapp_client_id) ?>');
    let statusMessage = s.status || 'desconocido';
    if (statusMessage === 'QR_READY') {
        statusMessage = 'Listo para conectar';
    } else if (statusMessage === 'READY') {
        statusMessage = 'Conectado exitosamente';
    }
    document.getElementById('status').innerHTML = 'Estado: <strong>'+statusMessage+'</strong>';

    const q = await jget('<?= WA_BASE ?>/session/qr?clientId=<?= urlencode($whatsapp_client_id) ?>');
    const box = document.getElementById('qrbox');
    if (q.qr && q.qr.startsWith('data:image/')){ box.innerHTML = '<img src="'+q.qr+'" style="max-width:280px;border:1px solid #eee;border-radius:8px" />'+
        '<p class="muted">Abrí WhatsApp → Dispositivos vinculados → Vincular un dispositivo → Escaneá el QR.</p>'; }
    else { box.innerHTML = '<p class="muted">No hay QR disponible. Estado: '+(q.status||'-')+'</p>'; }
}
// Polling cada 3s para mostrar QR apenas esté
setInterval(refreshWhatsappStatus, 3000);

document.getElementById('formWhatsappSend').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    // clientId ya se incluye en el formulario como campo oculto
    console.log('Datos enviados a send.php:', data); // Log para depuración
    const mensajeDiv = document.getElementById('mensaje-whatsapp-send');

    fetch('whatsappbridge/send.php', { // Usar el send.php existente
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // Formato de formulario PHP
        body: new URLSearchParams(data).toString()
    })
    .then(response => response.text()) // send.php devuelve texto plano
    .then(result => {
        if (result.includes('Enviado')) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result + '</p>';
            document.getElementById('formWhatsappSend').reset();
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">' + result + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

document.getElementById('formWhatsappSettings').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    // Asegurarse de que el checkbox envíe un valor 'true' o 'false'
    data.whatsapp_enabled = document.getElementById('whatsapp_enabled').checked;

    const mensajeDiv = document.getElementById('mensaje-whatsapp-settings');

    fetch('api/guardar_ajustes.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
            // Opcional: Recargar la página para ver el botón de conexión si las credenciales son válidas
            // setTimeout(() => location.reload(), 1500);
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

document.getElementById('formMetaWhatsappSettings').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    data.meta_whatsapp_enabled = document.getElementById('meta_whatsapp_enabled').checked;

    const mensajeDiv = document.getElementById('mensaje-meta-whatsapp-settings');

    fetch('api/guardar_ajustes.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

document.getElementById('formWhatsappNotificationTemplate').addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    const mensajeDiv = document.getElementById('mensaje-whatsapp-notification-template');

    fetch('api/guardar_ajustes.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

document.getElementById('formEnviarRecordatoriosManual').addEventListener('submit', function(event) {
    event.preventDefault();

    const button = this.querySelector('button[type="submit"]');
    const originalText = button.textContent;
    button.disabled = true;
    button.textContent = 'Enviando...';

    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    const mensajeDiv = document.getElementById('mensaje-recordatorios-manual');

    fetch('api/enviar_recordatorios_manual.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(result => {
        if (result.success && result.resultado) {
            const r = result.resultado;
            mensajeDiv.innerHTML = '<p style="color: green;">Recordatorios enviados: ' + r.enviados +
                ', Errores: ' + r.errores + ', Total turnos procesados: ' + r.total_turnos + '</p>';
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + (result.message || 'Error desconocido') + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    })
    .finally(() => {
        button.disabled = false;
        button.textContent = originalText;
    });
});

document.getElementById('formWhatsappReminderTemplate').addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());
    data.recordatorios_automaticos_enabled = document.getElementById('recordatorios_automaticos_enabled').checked;
    const mensajeDiv = document.getElementById('mensaje-whatsapp-template');

    fetch('api/guardar_ajustes.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result.message + '</p>';
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">Error: ' + result.message + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

// Lógica para insertar variables en el textarea y protegerlas
document.addEventListener('DOMContentLoaded', function() {
    // Función para manejar variables en textarea
    function setupTextareaVariables(textareaId, variables) {
        const textarea = document.getElementById(textareaId);
        let lastValidValue = textarea.value; // Guardar el último valor válido

        // Encontrar botones de variables para este textarea
        const container = textarea.closest('.form-group');
        container.querySelectorAll('.btn-variable').forEach(button => {
            button.addEventListener('click', function() {
                const variable = this.dataset.variable;
                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;
                const currentValue = textarea.value;

                textarea.value = currentValue.substring(0, start) + variable + currentValue.substring(end);
                lastValidValue = textarea.value; // Actualizar el valor válido
                textarea.focus();
                textarea.selectionStart = textarea.selectionEnd = start + variable.length;
            });
        });

        textarea.addEventListener('input', function() {
            let isValid = true;
            let currentValue = this.value;

            // Verificar que las variables no hayan sido alteradas
            for (const variable of variables) {
                // Contar ocurrencias de la variable en el valor actual y el último valor válido
                const countCurrent = (currentValue.match(new RegExp(escapeRegExp(variable), 'g')) || []).length;
                const countLastValid = (lastValidValue.match(new RegExp(escapeRegExp(variable), 'g')) || []).length;

                // Si la variable existía y ahora no, o si su conteo ha cambiado de forma inesperada
                // Esto es una simplificación, un cambio de conteo podría ser una inserción/eliminación válida de la variable
                // La lógica más robusta sería verificar si una variable *existente* ha sido modificada internamente
                if (countCurrent < countLastValid) { // Si se eliminó o se modificó parcialmente
                    isValid = false;
                    break;
                }
            }

            if (!isValid) {
                // Si se detecta una modificación no permitida, revertir al último valor válido
                this.value = lastValidValue;
                showToast('error', 'No puedes editar las variables dinámicas (ej. {CLIENTE_NOMBRE}). Usa los botones para insertarlas.');
            } else {
                lastValidValue = this.value; // Si es válido, actualizar el último valor válido
            }
        });
    }

    // Configurar variables para el template de recordatorios
    setupTextareaVariables('whatsapp_reminder_template', ['{CLIENTE_NOMBRE}', '{FECHA}', '{HORA}', '{PROFESIONAL_NOMBRE}', '{SERVICIOS}']);

    // Configurar variables para el template de notificaciones
    setupTextareaVariables('whatsapp_notification_template', ['{SERVICIO}', '{PROFESIONAL}', '{FECHA}', '{HORA}']);

    // Función auxiliar para escapar caracteres especiales en expresiones regulares
    function escapeRegExp(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
    }
});

document.getElementById('formWhatsappClose').addEventListener('submit', function(event) {
    event.preventDefault();

    const mensajeDiv = document.getElementById('mensaje-whatsapp-close');

    fetch('whatsappbridge/close.php', { // Usar el close.php existente
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, // Cambiado a form-urlencoded
        body: new URLSearchParams({ clientId: '<?= htmlspecialchars($whatsapp_client_id) ?>' }).toString() // Enviar clientId como form-urlencoded
    })
    .then(response => response.text()) // close.php devuelve texto plano
    .then(result => {
        if (result.includes('Sesión cerrada') || result.includes('ok')) {
            mensajeDiv.innerHTML = '<p style="color: green;">' + result + '</p>';
            refreshWhatsappStatus(); // Actualizar el estado después de cerrar sesión
        } else {
            mensajeDiv.innerHTML = '<p style="color: red;">' + result + '</p>';
        }
    })
    .catch(error => {
        mensajeDiv.innerHTML = '<p style="color: red;">Error de conexión. Por favor, intenta de nuevo.</p>';
        console.error('Error:', error);
    });
});

// Toggle método de WhatsApp
document.getElementById('toggle-whatsapp-method').addEventListener('click', async function() {
    const button = this;
    const currentText = button.textContent.trim();
    const newMethod = currentText.includes('Meta') ? 'puente' : 'meta';
    const newText = newMethod === 'puente' ? '🌉 Puente' : '📱 Meta';

    button.disabled = true;
    button.textContent = 'Guardando...';

    try {
        const response = await fetch('api/guardar_ajustes.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ whatsapp_default_method: newMethod })
        });

        const result = await response.json();

                if (result.success) {
                    button.textContent = newText;
                    // Actualizar el texto del botón con el nuevo método
                    button.textContent = newMethod === 'puente' ? '🌉 Puente' : '📱 Meta';
                    // Mostrar mensaje de éxito temporal
                    const successMsg = document.createElement('div');
                    successMsg.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 4px; z-index: 10000;';
                    successMsg.textContent = 'Método de WhatsApp actualizado';
                    document.body.appendChild(successMsg);
                    setTimeout(() => successMsg.remove(), 3000);
                } else {
            button.textContent = currentText; // Revertir si error
            const errorMsg = document.createElement('div');
            errorMsg.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #dc3545; color: white; padding: 10px 20px; border-radius: 4px; z-index: 10000;';
            errorMsg.textContent = 'Error al guardar: ' + (result.message || 'Error desconocido');
            document.body.appendChild(errorMsg);
            setTimeout(() => errorMsg.remove(), 5000);
        }
    } catch (error) {
        button.textContent = currentText; // Revertir si error
        const errorMsg = document.createElement('div');
        errorMsg.style.cssText = 'position: fixed; top: 20px; right: 20px; background: #dc3545; color: white; padding: 10px 20px; border-radius: 4px; z-index: 10000;';
        errorMsg.textContent = 'Error de conexión';
        document.body.appendChild(errorMsg);
        setTimeout(() => errorMsg.remove(), 5000);
    } finally {
        button.disabled = false;
    }
});
</script>
</body>
</html>
