<?php
/**
 * Landing Page de Invitación
 * 
 * Página pública que muestra la invitación personalizada según el token
 * También soporta modo preview para administradores
 */

require_once '../../includes/db.php';
require_once '../../includes/functions.php';

// Obtener token de la URL (solo limpiar espacios, mantener formato original)
// Obtener ID y token de la URL (validación doble para mayor seguridad)
$invitadoId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
$token = isset($_GET['token']) ? trim($_GET['token']) : '';
$preview = isset($_GET['preview']) && $_GET['preview'] == '1';
$templatePreview = isset($_GET['template']) ? sanitize($_GET['template']) : '';
$templateTipoPreview = isset($_GET['tipo']) ? sanitize($_GET['tipo']) : 'default';
$configPreview = null;

// Si hay configuración en la URL (para preview con configuración personalizada)
if (isset($_GET['config']) && !empty($_GET['config'])) {
    $configJson = $_GET['config'];
    $configPreview = json_decode($configJson, true);
    if (!is_array($configPreview)) {
        $configPreview = null;
    }
}

$isPreview = false;
$invitado = null;
$admisiones = [];

if ($preview) {
    // Modo preview: verificar sesión de admin
    require_once '../../includes/auth.php';
    
    if (!isLoggedIn()) {
        header('Location: ' . BASE_URL . ADMIN_PATH . '/login.php');
        exit;
    }
    
    $isPreview = true;
    $eventoId = getEventoId();
    $evento = obtenerEvento($eventoId);
    
    if (!$evento) {
        die('No se encontraron datos del evento');
    }
    
    // Crear array simulado de invitado para preview
    $invitado = [
        'evento_id' => $eventoId,
        'tipo_evento' => $evento['tipo_evento'],
        'nombre_novia' => $evento['nombre_novia'] ?? '',
        'nombre_novio' => $evento['nombre_novio'] ?? '',
        'nombre_cortesia' => 'Sr.',
        'nombre_invitado' => 'Invitado de Ejemplo',
        'numero_admisiones' => 1,
        'mensaje_personalizado' => $evento['mensaje_personalizado'],
        'fecha_evento' => $evento['fecha_evento'],
        'hora_evento' => $evento['hora_evento'],
        'lugar_evento' => $evento['lugar_evento'],
        'direccion_evento' => $evento['direccion_evento'],
        'descripcion' => $evento['descripcion'],
        'estado' => 'Pendiente'
    ];
    
    $admisiones = [];
    $tracklist = [];
    $token = '';
    $invitadoId = 0;
} else {
    // Modo normal: validar token (el token es la validación principal)
    if (empty($token)) {
        die('Token de invitación no válido');
    }
    
    // Primero intentar buscar con ID y token (si se proporciona ID)
    if ($invitadoId > 0) {
        $invitado = obtenerInvitadoPorIdYToken($invitadoId, $token);
    }
    
    // Si no se encontró con ID y token, buscar solo por token
    // (esto permite que funcione incluso si el ID en la URL está incorrecto)
    if (!$invitado) {
        $invitado = obtenerInvitadoPorToken($token);
        
        // Si se encontró por token pero el ID no coincide, usar el ID correcto del invitado
        if ($invitado && $invitado['id'] != $invitadoId && $invitadoId > 0) {
            // Redirigir a la URL correcta con el ID correcto (usar ruta dinámica)
            $protocolo = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
            $host = $_SERVER['HTTP_HOST'] ?? ($_SERVER['SERVER_NAME'] ?? '');
            $script = $_SERVER['SCRIPT_NAME'] ?? '/public/invitacion/index.php';
            $urlCorrecta = $protocolo . '://' . $host . $script . '?id=' . $invitado['id'] . '&token=' . urlencode($token);
            header('Location: ' . $urlCorrecta);
            exit;
        }
    }
    
    if (!$invitado) {
        die('Invitación no encontrada o inactiva');
    }
    
    // Actualizar el ID de la URL con el ID correcto del invitado (por si acaso)
    $invitadoId = (int)$invitado['id'];
    
    // Solo obtener admisiones si el estado es 'Aceptado', de lo contrario array vacío
    $admisiones = ($invitado['estado'] === 'Aceptado') ? obtenerAdmisiones($invitado['id']) : [];
    
    // Obtener tracklist del invitado
    $tracklist = obtenerTracklistInvitado($invitado['id']);
    
    // Obtener evento completo
    $eventoId = $invitado['evento_id'];
    $evento = obtenerEvento($eventoId);
}

// Asegurar que tenemos el eventoId
if (!isset($eventoId) || $eventoId <= 0) {
    if (isset($invitado['evento_id'])) {
        $eventoId = $invitado['evento_id'];
    } else {
        die('Error: No se pudo determinar el ID del evento');
    }
}

// Obtener configuración del template
$templateConfig = null;
if ($eventoId > 0) {
    $templateConfig = obtenerConfiguracionTemplate($eventoId);
}

// Si no hay template configurado, usar template-2 (institucional) por defecto
// O usar el template del preview si está especificado
$templateId = 'template-2';
$templateTipo = 'default';
$config = [];

if (!empty($templatePreview) && $preview) {
    // Preview de un template específico
    $templateId = $templatePreview;
    $templateTipo = $templateTipoPreview;
    
    // Si hay configuración en la URL, usarla
    if ($configPreview !== null) {
        $config = $configPreview;
    } else {
        // Si no, intentar cargar la configuración guardada
        $templateConfig = obtenerConfiguracionTemplate($eventoId);
        if ($templateConfig && $templateConfig['template_id'] === $templateId) {
            $config = $templateConfig['config'] ?? [];
        }
    }
} elseif ($templateConfig) {
    // Template configurado para el evento
    $templateId = $templateConfig['template_id'];
    $templateTipo = $templateConfig['template_tipo'];
    $config = $templateConfig['config'] ?? [];
}

// SIEMPRE obtener colores de eventos_colores (sobrescribir cualquier config existente)
if ($eventoId > 0 && isset($evento)) {
    $coloresObtenidos = obtenerColores($eventoId, $evento);
    // Usar directamente los colores obtenidos de eventos_colores
    if (!empty($coloresObtenidos) && is_array($coloresObtenidos)) {
        $config['colores'] = $coloresObtenidos;
    } else {
        // Si no hay colores en eventos_colores, usar valores por defecto
        $config['colores'] = [
            'color_principal' => '#667eea',
            'color_secundario' => '#764ba2',
            'color_texto' => '#000000',
            'color_resalte' => '#FF0000',
            'color_1' => '#FFFFFF',
            'color_2' => '#FFFFFF',
            'color_3' => '#FFFFFF',
            'color_4' => '#FFFFFF'
        ];
    }
} else {
    // Valores por defecto si no hay evento
    $config['colores'] = [
        'color_principal' => '#667eea',
        'color_secundario' => '#764ba2',
        'color_texto' => '#000000',
        'color_resalte' => '#FF0000',
        'color_1' => '#FFFFFF',
        'color_2' => '#FFFFFF',
        'color_3' => '#FFFFFF',
        'color_4' => '#FFFFFF'
    ];
}

// Cargar y renderizar el template
echo cargarTemplate(
    $templateId,
    $templateTipo,
    $evento ?? [],
    $invitado ?? [],
    $config,
    $isPreview,
    $admisiones ?? [],
    $tracklist ?? [],
    $token ?? '',
    $invitadoId ?? 0
);
exit;
?>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Georgia', serif;
            background: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
        }
        .header {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .header h1 {
            font-size: 48px;
            margin-bottom: 10px;
        }
        .header p {
            font-size: 20px;
        }
        .content {
            padding: 40px;
        }
        .invitado-nombre {
            text-align: center;
            font-size: 24px;
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
        }
        .info-section {
            margin-bottom: 30px;
        }
        .info-section h2 {
            color: #667eea;
            margin-bottom: 15px;
        }
        .btn-container {
            text-align: center;
            margin: 40px 0;
        }
        .btn {
            padding: 15px 40px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .btn-aceptar {
            background: #28a745;
            color: white;
        }
        .btn-rechazar {
            background: #dc3545;
            color: white;
        }
        .btn:hover {
            opacity: 0.9;
        }
        .preview-banner {
            background: #ffc107;
            color: #856404;
            padding: 15px;
            text-align: center;
            font-weight: 600;
            border-bottom: 2px solid #ffb300;
        }
        .preview-banner a {
            color: #856404;
            text-decoration: underline;
        }
        /* Modales de confirmación */
        .modal-overlay-invitacion {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.2s ease-out;
        }
        .modal-overlay-invitacion.show {
            display: flex;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .modal-invitacion {
            background: white;
            padding: 0;
            border-radius: 10px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            animation: slideUp 0.3s ease-out;
        }
        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .modal-header-invitacion {
            padding: 24px 24px 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-header-invitacion h3 {
            margin: 0;
            font-size: 20px;
            color: #333;
        }
        .modal-close-btn {
            background: none;
            border: none;
            font-size: 28px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        .modal-close-btn:hover {
            background: #f0f0f0;
            color: #333;
        }
        .modal-body-invitacion {
            padding: 24px;
        }
        .modal-body-invitacion p {
            margin: 0 0 16px;
            color: #333;
            font-size: 16px;
        }
        .input-admision {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            margin-bottom: 12px;
            transition: border-color 0.2s;
        }
        .input-admision:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        /* Estilos para Tracklist */
        .tracklist-item {
            background: #f8f9fa;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #e9ecef;
            transition: all 0.2s;
        }
        .tracklist-item:hover {
            background: #e9ecef;
            border-color: #667eea;
        }
        .tracklist-item-content {
            flex: 1;
            color: #333;
        }
        .tracklist-btn-remove {
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            padding: 0;
            margin-left: 10px;
        }
        .tracklist-btn-remove:hover {
            background: #c82333;
            transform: scale(1.1);
        }
        .btn-tracklist-agregar {
            padding: 12px 24px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .btn-tracklist-agregar:hover {
            background: #5568d3;
        }
        .btn-tracklist-agregar:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .modal-footer-invitacion {
            padding: 16px 24px 24px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }
        .btn-modal-cancelar,
        .btn-modal-confirmar,
        .btn-modal-rechazar {
            padding: 12px 24px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 500;
        }
        .btn-modal-cancelar {
            background: #6c757d;
            color: white;
        }
        .btn-modal-cancelar:hover {
            background: #5a6268;
        }
        .btn-modal-confirmar {
            background: #28a745;
            color: white;
        }
        .btn-modal-confirmar:hover {
            background: #218838;
        }
        .btn-modal-rechazar {
            background: #dc3545;
            color: white;
        }
        .btn-modal-rechazar:hover {
            background: #c82333;
        }
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 10001;
            align-items: center;
            justify-content: center;
        }
        .loading-overlay.show {
            display: flex;
        }
        .loading-spinner {
            background: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <?php if ($isPreview): ?>
        <div class="preview-banner">
            👁️ Vista Previa - <a href="<?php echo BASE_URL . ADMIN_PATH; ?>/index.php">Volver al Dashboard</a>
        </div>
    <?php endif; ?>
    <div class="container">
        <div class="header">
            <?php if (($invitado['tipo_evento'] ?? 'boda') === 'boda'): ?>
                <h1><?php echo htmlspecialchars($invitado['nombre_novia'] ?? ''); ?></h1>
                <p>&</p>
                <h1><?php echo htmlspecialchars($invitado['nombre_novio'] ?? ''); ?></h1>
            <?php elseif (($invitado['tipo_evento'] ?? '') === 'cumpleaños'): ?>
                <h1>Cumpleaños de <?php echo htmlspecialchars($invitado['nombre_homenajeado'] ?? ''); ?></h1>
            <?php elseif (($invitado['tipo_evento'] ?? '') === 'quinceañera'): ?>
                <h1>Quinceañera de <?php echo htmlspecialchars($invitado['nombre_quinceanera'] ?? ''); ?></h1>
            <?php elseif ($invitado['nombre_evento_social'] ?? ''): ?>
                <h1><?php echo htmlspecialchars($invitado['nombre_evento_social']); ?></h1>
            <?php endif; ?>
        </div>
        
        <div class="content">
            <div class="invitado-nombre">
                <strong><?php echo htmlspecialchars($invitado['nombre_cortesia'] . ' ' . $invitado['nombre_invitado']); ?></strong>
                <?php if ($invitado['numero_admisiones'] > 1): ?>
                    <br><small>+ <?php echo $invitado['numero_admisiones'] - 1; ?> acompañante(s)</small>
                <?php endif; ?>
            </div>
            
            <?php if ($invitado['mensaje_personalizado']): ?>
                <div class="info-section">
                    <p style="text-align: center; font-size: 18px; line-height: 1.8;">
                        <?php echo nl2br(htmlspecialchars($invitado['mensaje_personalizado'])); ?>
                    </p>
                </div>
            <?php endif; ?>
            
            <div class="info-section">
                <h2>📅 Fecha y Hora</h2>
                <p><strong><?php echo formatearFechaHora($invitado['fecha_evento'] ?? $invitado['fecha_boda'] ?? '', $invitado['hora_evento'] ?? $invitado['hora_boda'] ?? ''); ?></strong></p>
            </div>
            
            <div class="info-section">
                <h2>📍 Lugar</h2>
                <p><strong><?php echo htmlspecialchars($invitado['lugar_evento'] ?? $invitado['lugar_boda'] ?? ''); ?></strong></p>
                <?php if ($invitado['direccion_evento'] ?? $invitado['direccion_boda'] ?? ''): ?>
                    <p><?php echo nl2br(htmlspecialchars($invitado['direccion_evento'] ?? $invitado['direccion_boda'] ?? '')); ?></p>
                <?php endif; ?>
            </div>
            
            <?php if ($invitado['descripcion']): ?>
                <div class="info-section">
                    <p><?php echo nl2br(htmlspecialchars($invitado['descripcion'])); ?></p>
                </div>
            <?php endif; ?>
            
            <!-- Sección de Tracklist -->
            <div class="info-section" id="tracklist-section">
                <h2>🎵 Sugerencias de Música</h2>
                <p style="color: #666; margin-bottom: 15px;">¿Tienes alguna canción que te gustaría escuchar en el evento? ¡Sugiérela aquí!</p>
                
                <div id="tracklist-container">
                    <?php if (!empty($tracklist)): ?>
                        <?php foreach ($tracklist as $index => $cancion): ?>
                            <div class="tracklist-item" data-id="<?php echo $cancion['id']; ?>">
                                <div class="tracklist-item-content">
                                    <strong><?php echo htmlspecialchars($cancion['autor']); ?></strong> - 
                                    <span><?php echo htmlspecialchars($cancion['nombre_cancion']); ?></span>
                                    <button type="button" class="tracklist-btn-remove" onclick="eliminarCancion(<?php echo $cancion['id']; ?>)">×</button>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
                
                <div id="tracklist-form" style="margin-top: 15px;">
                    <div style="display: flex; gap: 10px; margin-bottom: 10px;">
                        <input type="text" 
                               id="tracklist-autor" 
                               class="input-admision" 
                               placeholder="Artista/Autor"
                               style="flex: 1;">
                        <input type="text" 
                               id="tracklist-cancion" 
                               class="input-admision" 
                               placeholder="Nombre de la canción"
                               style="flex: 1;">
                        <button type="button" 
                                class="btn-tracklist-agregar" 
                                onclick="agregarCancion()">
                            Agregar
                        </button>
                    </div>
                </div>
            </div>
            
            <?php if (!$isPreview): ?>
                <?php if ($invitado['estado'] === 'Pendiente'): ?>
                    <div class="btn-container">
                        <button class="btn btn-aceptar" onclick="abrirModalAceptar()">
                            Sí Asistiré
                        </button>
                        <button class="btn btn-rechazar" onclick="abrirModalRechazar()">
                            No Asistiré
                        </button>
                    </div>
                    
                    <!-- Modal para aceptar con admisiones -->
                    <div id="modal-aceptar" class="modal-overlay-invitacion" onclick="if(event.target === this) cerrarModalAceptar()">
                        <div class="modal-invitacion">
                            <div class="modal-header-invitacion">
                                <h3>Confirmar Asistencia</h3>
                                <button class="modal-close-btn" onclick="cerrarModalAceptar()">&times;</button>
                            </div>
                            <div class="modal-body-invitacion">
                                <?php if ($invitado['numero_admisiones'] > 1): ?>
                                    <p>Por favor, ingrese los nombres de los acompañantes:</p>
                                    <div id="admisiones-form-container"></div>
                                <?php else: ?>
                                    <p>¿Confirma que asistirá al evento?</p>
                                <?php endif; ?>
                                
                                <div style="margin-top: 20px;">
                                    <label for="mensaje-aceptar" style="display: block; margin-bottom: 8px; font-weight: 500; color: #333;">
                                        Mensaje personalizado (opcional):
                                    </label>
                                    <textarea id="mensaje-aceptar" 
                                              class="input-admision" 
                                              rows="4" 
                                              placeholder="Escriba un mensaje para los anfitriones..."></textarea>
                                </div>
                            </div>
                            <div class="modal-footer-invitacion">
                                <button class="btn-modal-cancelar" onclick="cerrarModalAceptar()">Cancelar</button>
                                <button class="btn-modal-confirmar" onclick="enviarConfirmacionAceptar()">Confirmar Asistencia</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Modal para rechazar -->
                    <div id="modal-rechazar" class="modal-overlay-invitacion" onclick="if(event.target === this) cerrarModalRechazar()">
                        <div class="modal-invitacion">
                            <div class="modal-header-invitacion">
                                <h3>Confirmar Rechazo</h3>
                                <button class="modal-close-btn" onclick="cerrarModalRechazar()">&times;</button>
                            </div>
                            <div class="modal-body-invitacion">
                                <p>¿Está seguro de que no podrá asistir al evento?</p>
                                <p style="color: #666; font-size: 14px; margin-top: 10px;">Esta acción no se puede deshacer.</p>
                                
                                <div style="margin-top: 20px;">
                                    <label for="mensaje-rechazar" style="display: block; margin-bottom: 8px; font-weight: 500; color: #333;">
                                        Mensaje personalizado (opcional):
                                    </label>
                                    <textarea id="mensaje-rechazar" 
                                              class="input-admision" 
                                              rows="4" 
                                              placeholder="Escriba un mensaje para los anfitriones..."></textarea>
                                </div>
                            </div>
                            <div class="modal-footer-invitacion">
                                <button class="btn-modal-cancelar" onclick="cerrarModalRechazar()">Cancelar</button>
                                <button class="btn-modal-rechazar" onclick="enviarConfirmacionRechazar()">Sí, No Asistiré</button>
                            </div>
                        </div>
                    </div>
                <?php else: ?>
                    <div class="info-section" style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 10px;">
                        <p><strong>Estado:</strong> 
                            <span style="color: <?php echo $invitado['estado'] === 'Aceptado' ? '#28a745' : '#dc3545'; ?>;">
                                <?php echo $invitado['estado']; ?>
                            </span>
                        </p>
                        <?php if (isset($invitado['fecha_respuesta']) && $invitado['fecha_respuesta']): ?>
                            <p><small>Respondido el <?php echo formatearFecha($invitado['fecha_respuesta'], 'd/m/Y H:i'); ?></small></p>
                        <?php endif; ?>
                        <?php if ($invitado['estado'] === 'Aceptado' && !empty($admisiones)): ?>
                            <div style="margin-top: 15px; text-align: left; display: inline-block;">
                                <p style="margin-bottom: 10px;"><strong>Acompañantes:</strong></p>
                                <ul style="text-align: left; padding-left: 20px;">
                                    <?php foreach ($admisiones as $admision): ?>
                                        <li><?php echo htmlspecialchars($admision); ?></li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endif; ?>
                        
                        <?php if (!empty($invitado['mensaje_respuesta'])): ?>
                            <div style="margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea;">
                                <p style="margin-bottom: 8px; font-weight: 600; color: #333;">Mensaje:</p>
                                <p style="color: #555; line-height: 1.6; white-space: pre-wrap;"><?php echo nl2br(htmlspecialchars($invitado['mensaje_respuesta'])); ?></p>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            <?php else: ?>
                <div class="info-section" style="text-align: center; padding: 20px; background: #fff3cd; border-radius: 10px; border: 2px dashed #ffc107;">
                    <p style="color: #856404; font-weight: 600;">Vista Previa - Los botones de confirmación no están disponibles en este modo</p>
                </div>
            <?php endif; ?>
        </div>
    </div>
    
    <?php if (!$isPreview): ?>
    <!-- Loading overlay -->
    <div id="loading-overlay" class="loading-overlay">
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>Procesando...</p>
        </div>
    </div>
    
    <script>
        const numeroAdmisiones = <?php echo $invitado['numero_admisiones']; ?>;
        const admisionesExistentes = <?php echo json_encode($admisiones); ?>;
        // CRÍTICO: Usar el ID de la URL, no el ID del invitado encontrado
        // Esto asegura que el ID enviado coincida con el ID en la URL
        const invitadoId = <?php echo (int)$invitadoId; ?>;
        const tokenInvitacion = <?php echo json_encode($token, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
        
        // Validar que el ID y token existen
        if (!invitadoId || invitadoId <= 0) {
            console.error('Error: ID de invitado inválido:', invitadoId);
        }
        if (!tokenInvitacion || tokenInvitacion.length < 16) {
            console.error('Error: Token de invitación inválido:', tokenInvitacion);
        }
        
        // Log para debugging
        console.log('=== DATOS DE INVITACIÓN CARGADOS ===');
        console.log('ID:', invitadoId, '(tipo:', typeof invitadoId, ')');
        console.log('Token completo:', tokenInvitacion);
        console.log('Token longitud:', tokenInvitacion.length);
        console.log('Token primeros 8 chars:', tokenInvitacion.substring(0, 8));
        console.log('====================================');
        
        function abrirModalAceptar() {
            const modal = document.getElementById('modal-aceptar');
            const container = document.getElementById('admisiones-form-container');
            
            if (numeroAdmisiones > 1) {
                container.innerHTML = '';
                // Solo cargar admisiones existentes si el estado es 'Aceptado'
                // Para invitados nuevos (Pendiente), los campos deben estar vacíos
                const estadoInvitado = '<?php echo $invitado['estado'] ?? 'Pendiente'; ?>';
                const usarAdmisionesExistentes = estadoInvitado === 'Aceptado' && admisionesExistentes.length > 0;
                
                for (let i = 0; i < numeroAdmisiones - 1; i++) {
                    const div = document.createElement('div');
                    const valorAdmision = (usarAdmisionesExistentes && admisionesExistentes[i]) ? admisionesExistentes[i] : '';
                    div.innerHTML = `
                        <label style="display: block; margin-bottom: 5px; font-weight: 500; color: #333;">Nombre del acompañante ${i + 1}:</label>
                        <input type="text" 
                               class="input-admision" 
                               placeholder="Nombre completo"
                               value="${valorAdmision}">
                    `;
                    container.appendChild(div);
                }
            }
            
            // Limpiar el mensaje al abrir el modal (si ya fue respondido, no mostrar el mensaje anterior)
            const mensajeTextarea = document.getElementById('mensaje-aceptar');
            if (mensajeTextarea) {
                mensajeTextarea.value = '';
            }
            
            modal.classList.add('show');
        }
        
        function cerrarModalAceptar() {
            document.getElementById('modal-aceptar').classList.remove('show');
        }
        
        function abrirModalRechazar() {
            document.getElementById('modal-rechazar').classList.add('show');
        }
        
        function cerrarModalRechazar() {
            document.getElementById('modal-rechazar').classList.remove('show');
        }
        
        function mostrarLoading() {
            document.getElementById('loading-overlay').classList.add('show');
        }
        
        function ocultarLoading() {
            document.getElementById('loading-overlay').classList.remove('show');
        }
        
        function enviarConfirmacionAceptar() {
            const nombresAdmisiones = [];
            
            if (numeroAdmisiones > 1) {
                // Solo obtener los inputs de tipo text (no textareas)
                const inputs = document.querySelectorAll('#modal-aceptar .input-admision[type="text"]');
                inputs.forEach(input => {
                    const nombre = input.value.trim();
                    if (nombre) {
                        nombresAdmisiones.push(nombre);
                    }
                });
            }
            
            const mensajeTextarea = document.getElementById('mensaje-aceptar');
            const mensaje = mensajeTextarea ? mensajeTextarea.value.trim() : '';
            enviarConfirmacion('Aceptado', nombresAdmisiones, mensaje);
        }
        
        function enviarConfirmacionRechazar() {
            const mensaje = document.getElementById('mensaje-rechazar').value.trim();
            enviarConfirmacion('Rechazado', [], mensaje);
        }
        
        function enviarConfirmacion(estado, nombresAdmisiones, mensaje = '') {
            // Validar ID y token antes de enviar
            if (!invitadoId || invitadoId <= 0) {
                alert('Error: ID de invitado inválido. Por favor, recargue la página.');
                console.error('ID inválido:', invitadoId);
                return;
            }
            
            if (!tokenInvitacion || tokenInvitacion.length < 16) {
                alert('Error: Token de invitación inválido. Por favor, recargue la página.');
                console.error('Token inválido:', tokenInvitacion);
                return;
            }
            
            // Cerrar modales
            cerrarModalAceptar();
            cerrarModalRechazar();
            
            // Mostrar loading
            mostrarLoading();
            
            // Construir objeto de datos con ID y token
            const data = {
                id: invitadoId,
                token: tokenInvitacion.trim(),
                estado: estado
            };
            
            if (estado === 'Aceptado' && nombresAdmisiones.length > 0) {
                data.nombres_admisiones = nombresAdmisiones;
            }
            
            if (mensaje && mensaje.trim()) {
                data.mensaje = mensaje.trim();
            }
            
            // Log para depuración (mostrar datos completos)
            console.log('=== ENVIANDO CONFIRMACIÓN ===');
            console.log('ID:', invitadoId, '(tipo:', typeof invitadoId, ')');
            console.log('Token:', tokenInvitacion, '(longitud:', tokenInvitacion.length, ')');
            console.log('Estado:', estado);
            console.log('Objeto completo a enviar:', JSON.stringify(data, null, 2));
            console.log('===========================');
            
            // Usar ruta relativa dinámica
            const apiUrl = '../api/confirmar.php';
            fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Error en la respuesta del servidor');
                }
                return response.json();
            })
            .then(data => {
                ocultarLoading();
                if (data.success) {
                    // Recargar la página para mostrar el estado actualizado
                    window.location.reload();
                } else {
                    alert('Error: ' + (data.message || 'No se pudo procesar la respuesta'));
                    console.error('Error del servidor:', data);
                }
            })
            .catch(error => {
                ocultarLoading();
                alert('Error al procesar la solicitud. Por favor, intente nuevamente.');
                console.error('Error:', error);
            });
        }
        
        // Cerrar modales con ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                cerrarModalAceptar();
                cerrarModalRechazar();
            }
        });
        
        // Funciones para manejar la tracklist
        function agregarCancion() {
            const autor = document.getElementById('tracklist-autor').value.trim();
            const cancion = document.getElementById('tracklist-cancion').value.trim();
            
            if (!autor || !cancion) {
                alert('Por favor, complete ambos campos (Artista y Canción)');
                return;
            }
            
            // Deshabilitar botón mientras se procesa
            const btn = document.querySelector('.btn-tracklist-agregar');
            btn.disabled = true;
            btn.textContent = 'Agregando...';
            
            const data = {
                id: invitadoId,
                token: tokenInvitacion.trim(),
                autor: autor,
                nombre_cancion: cancion
            };
            
            fetch('../api/tracklist.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                btn.disabled = false;
                btn.textContent = 'Agregar';
                
                if (data.success) {
                    // Limpiar campos
                    document.getElementById('tracklist-autor').value = '';
                    document.getElementById('tracklist-cancion').value = '';
                    
                    // Agregar el item a la lista
                    const container = document.getElementById('tracklist-container');
                    const item = document.createElement('div');
                    item.className = 'tracklist-item';
                    item.setAttribute('data-id', data.cancion_id);
                    item.innerHTML = `
                        <div class="tracklist-item-content">
                            <strong>${autor}</strong> - 
                            <span>${cancion}</span>
                            <button type="button" class="tracklist-btn-remove" onclick="eliminarCancion(${data.cancion_id})">×</button>
                        </div>
                    `;
                    container.appendChild(item);
                } else {
                    alert('Error: ' + (data.message || 'No se pudo agregar la canción'));
                }
            })
            .catch(error => {
                btn.disabled = false;
                btn.textContent = 'Agregar';
                alert('Error al agregar la canción. Por favor, intente nuevamente.');
                console.error('Error:', error);
            });
        }
        
        function eliminarCancion(cancionId) {
            if (!confirm('¿Está seguro de eliminar esta canción de la lista?')) {
                return;
            }
            
            const data = {
                id: invitadoId,
                token: tokenInvitacion.trim(),
                cancion_id: cancionId
            };
            
            fetch('../api/tracklist.php', {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Eliminar el item de la lista
                    const item = document.querySelector(`.tracklist-item[data-id="${cancionId}"]`);
                    if (item) {
                        item.remove();
                    }
                } else {
                    alert('Error: ' + (data.message || 'No se pudo eliminar la canción'));
                }
            })
            .catch(error => {
                alert('Error al eliminar la canción. Por favor, intente nuevamente.');
                console.error('Error:', error);
            });
        }
        
        // Permitir agregar canción con Enter
        document.addEventListener('DOMContentLoaded', function() {
            const autorInput = document.getElementById('tracklist-autor');
            const cancionInput = document.getElementById('tracklist-cancion');
            
            if (autorInput && cancionInput) {
                autorInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        cancionInput.focus();
                    }
                });
                
                cancionInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        agregarCancion();
                    }
                });
            }
        });
    </script>
    <?php endif; ?>
</body>
</html>

