<?php
/**
 * Página: Listado de Invitados
 */

$eventoId = getEventoId();
$evento = obtenerEvento($eventoId);

// Paginación
$p = $_GET['p'] ?? 1; // Usar 'p' para evitar conflicto con 'page'
$perPage = 20;
$offset = ($p - 1) * $perPage;

// Filtros
$estado = $_GET['estado'] ?? '';
$busqueda = $_GET['busqueda'] ?? '';

$where = "WHERE i.evento_id = $eventoId";
if ($estado) {
    $where .= " AND i.estado = " . $pdo->quote($estado);
}
if ($busqueda) {
    $where .= " AND i.nombre_invitado LIKE " . $pdo->quote("%$busqueda%");
}

// Contar total
$stmt = $pdo->query("SELECT COUNT(*) FROM invitados i $where");
$total = $stmt->fetchColumn();
$totalPages = ceil($total / $perPage);

// Obtener invitados
$stmt = $pdo->query("
    SELECT i.*, 
           COUNT(a.id) as admisiones_count,
           GROUP_CONCAT(a.nombre_acompanante SEPARATOR ', ') as nombres_admisiones
    FROM invitados i
    LEFT JOIN admisiones a ON i.id = a.invitado_id
    $where
    GROUP BY i.id
    ORDER BY i.fecha_creacion DESC
    LIMIT $perPage OFFSET $offset
");
$invitados = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Obtener admisiones para cada invitado (para el modal)
// Usar índice en lugar de referencia para evitar problemas de referencias compartidas
foreach ($invitados as $index => $invitado) {
    $invitados[$index]['admisiones_lista'] = obtenerAdmisiones($invitado['id']);
}

// Obtener URL base para las invitaciones
$baseUrl = BASE_URL . INVITACION_PATH;
?>
<style>
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.filters {
    background: var(--color-bg-secondary);
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: var(--shadow-md);
}

.filters input, .filters select {
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 14px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: var(--transition);
    flex: 1;
    min-width: 200px;
}

.filters input:focus, .filters select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.1);
}

.filters-left,
.filters-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filters-left {
    flex: 1;
}

.filters-right {
    flex-shrink: 0;
}

.btn {
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: var(--transition);
    white-space: nowrap;
}

.btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.table-container {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    overflow: visible;
    position: relative;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: var(--color-bg-primary);
}

th {
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-border);
}

td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 14px;
}

tbody tr {
    transition: var(--transition);
}

tbody tr:hover {
    background: var(--color-bg-primary);
}

tbody tr:last-child td {
    border-bottom: none;
}

.badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-pendiente { 
    background: rgba(255, 193, 7, 0.15); 
    color: #856404; 
}

.badge-aceptado { 
    background: rgba(40, 167, 69, 0.15); 
    color: #155724; 
}

.badge-rechazado { 
    background: rgba(220, 53, 69, 0.15); 
    color: #721c24; 
}

.action-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.action-links a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
    padding: 4px 0;
}

.action-links a:hover {
    color: var(--color-primary);
}

.action-links a:first-child {
    color: var(--color-primary);
}

.action-links a:last-child {
    color: var(--color-danger);
}

.action-links a:last-child:hover {
    color: #c82333;
}

/* Dropdowns */
.dropdown-invitacion, .dropdown-acciones {
    position: relative;
    display: inline-block;
}

.dropdown-btn-invitacion, .dropdown-btn-acciones {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-primary);
    transition: var(--transition);
}

.dropdown-btn-invitacion:hover, .dropdown-btn-acciones:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-primary);
}

.dropdown-btn-acciones {
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.dropdown-btn-acciones:hover {
    background: var(--color-bg-primary);
    border-color: var(--color-primary);
}

.dropdown-menu-invitacion, .dropdown-menu-acciones {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 10000;
    overflow: hidden;
}

.dropdown-menu-invitacion.show, .dropdown-menu-acciones.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-invitacion a, .dropdown-menu-acciones a {
    display: block;
    padding: 10px 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition);
    border-bottom: 1px solid var(--color-border);
}

.dropdown-menu-invitacion a:last-child, .dropdown-menu-acciones a:last-child {
    border-bottom: none;
}

.dropdown-menu-invitacion a:hover, .dropdown-menu-acciones a:hover {
    background: var(--color-bg-primary);
}

.dropdown-menu-acciones a:last-child {
    color: var(--color-danger);
}

.dropdown-menu-acciones a:last-child:hover {
    background: rgba(220, 53, 69, 0.1);
}

/* Modales */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 20px;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: var(--transition);
    position: relative;
}

.modal-overlay.show .modal {
    transform: scale(1);
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.modal-body {
    padding: 24px;
}

.modal-field {
    margin-bottom: 20px;
}

.modal-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 14px;
}

.modal-field .value {
    color: var(--color-text-secondary);
    font-size: 14px;
    padding: 10px;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius);
    min-height: 20px;
}

.modal-field input, .modal-field select, .modal-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 14px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: var(--transition);
}

.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.1);
}

.modal-field textarea {
    min-height: 100px;
    resize: vertical;
}

.modal-actions {
    padding: 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-actions .btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.modal-actions .btn-primary {
    background: var(--color-primary);
    color: white;
}

.modal-actions .btn-primary:hover {
    background: var(--color-primary-hover);
}

.modal-actions .btn-secondary {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.modal-actions .btn-secondary:hover {
    background: var(--color-border);
}

.modal-actions .btn-danger {
    background: var(--color-danger);
    color: white;
}

.modal-actions .btn-danger:hover {
    background: #c82333;
}

.modal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

#editar-admisiones-container {
    margin-top: 10px;
}

#editar-admisiones-container .admision-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

#editar-admisiones-container .admision-item input {
    flex: 1;
}

@media (max-width: 768px) {
    .modal {
        max-width: 100%;
        margin: 10px;
    }
    
    .modal-info-grid {
        grid-template-columns: 1fr;
    }
}

.pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination a {
    padding: 8px 14px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 14px;
    transition: var(--transition);
    min-width: 40px;
    text-align: center;
}

.pagination a:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pagination a.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-secondary);
}

.empty-state p {
    font-size: 16px;
    margin: 0;
}

/* Toasts locales de esta página (no afectan otros módulos) */
#invitados-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invitados-toast {
    min-width: 260px;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: var(--border-radius);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.invitados-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.invitados-toast-success {
    border-left: 4px solid #28a745;
}

.invitados-toast-error {
    border-left: 4px solid #dc3545;
}

.invitados-toast-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.invitados-toast-success .invitados-toast-icon {
    color: #28a745;
}

.invitados-toast-error .invitados-toast-icon {
    color: #dc3545;
}

.invitados-toast-message {
    flex: 1;
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .filters {
        flex-direction: column;
    }
    
    .filters input, .filters select {
        width: 100%;
        min-width: 100%;
    }
    
    table {
        font-size: 13px;
    }
    
    th, td {
        padding: 12px 10px;
    }
    
    .action-links {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}
</style>

<div class="page-header">
    <h2 class="card-title">Gestión de Invitados</h2>
    <a href="?page=agregar" class="btn">+ Añadir Invitado</a>
</div>

<div class="filters">
    <div class="filters-left">
        <input
            type="text"
            id="filtro-nombre"
            name="busqueda"
            placeholder="Buscar por nombre..."
            value="<?php echo htmlspecialchars($busqueda); ?>"
        >
    </div>
    <div class="filters-right">
        <select id="filtro-estado" name="estado">
            <option value="">Todos los estados</option>
            <option value="Pendiente" <?php echo $estado === 'Pendiente' ? 'selected' : ''; ?>>Pendiente</option>
            <option value="Aceptado" <?php echo $estado === 'Aceptado' ? 'selected' : ''; ?>>Aceptado</option>
            <option value="Rechazado" <?php echo $estado === 'Rechazado' ? 'selected' : ''; ?>>Rechazado</option>
        </select>
        <button type="button" class="btn" onclick="filtrarPorEstado()">Filtrar</button>
    </div>
</div>

<!-- Contenedor de toasts solo para esta página -->
<div id="invitados-toast-container"></div>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Invitado por</th>
                <th>Admisiones</th>
                <th>Email</th>
                <th>Teléfono</th>
                <th>Estado</th>
                <th>Invitación</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            <?php if (empty($invitados)): ?>
                <tr>
                    <td colspan="8" class="empty-state">
                        <p>No hay invitados registrados aún.</p>
                    </td>
                </tr>
            <?php else: ?>
                <?php foreach ($invitados as $invitado): ?>
                    <tr>
                        <td>
                            <strong style="color: var(--color-text-primary);"><?php echo htmlspecialchars($invitado['nombre_cortesia'] . ' ' . $invitado['nombre_invitado']); ?></strong>
                        </td>
                        <td style="color: var(--color-text-secondary);">
                            <?php echo htmlspecialchars($invitado['invitacion_de'] ?? '-'); ?>
                        </td>
                        <td>
                            <span style="font-weight: 600; color: var(--color-text-primary);"><?php echo $invitado['numero_admisiones']; ?></span>
                        </td>
                        <td style="color: var(--color-text-secondary);"><?php echo htmlspecialchars($invitado['email'] ?? '-'); ?></td>
                        <td style="color: var(--color-text-secondary);"><?php echo htmlspecialchars($invitado['telefono'] ?? '-'); ?></td>
                        <td>
                            <span class="badge badge-<?php echo strtolower($invitado['estado']); ?>">
                                <?php echo $invitado['estado']; ?>
                            </span>
                        </td>
                        <td>
                            <div class="dropdown-invitacion">
                                <button class="dropdown-btn-invitacion" onclick="toggleDropdownInvitacion(<?php echo $invitado['id']; ?>)">
                                    Invitación
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M3 4.5L6 7.5L9 4.5"/>
                                    </svg>
                                </button>
                                <div class="dropdown-menu-invitacion" id="dropdown-invitacion-<?php echo $invitado['id']; ?>">
                                    <a href="#" onclick="copiarEnlace('<?php echo $baseUrl; ?>/index.php?id=<?php echo $invitado['id']; ?>&token=<?php echo urlencode($invitado['token']); ?>', <?php echo $invitado['id']; ?>); return false;">
                                        Copiar enlace
                                    </a>
                                    <a href="#" onclick="regenerarToken(<?php echo $invitado['id']; ?>); return false;">
                                        Generar token
                                    </a>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="dropdown-acciones">
                                <button class="dropdown-btn-acciones" onclick="toggleDropdownAcciones(<?php echo $invitado['id']; ?>)">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
                                        <circle cx="8" cy="3" r="1.5"/>
                                        <circle cx="8" cy="8" r="1.5"/>
                                        <circle cx="8" cy="13" r="1.5"/>
                                    </svg>
                                </button>
                                <div class="dropdown-menu-acciones" id="dropdown-acciones-<?php echo $invitado['id']; ?>">
                                    <a href="#" 
                                       class="btn-ver-invitado" 
                                       data-invitado='<?php echo htmlspecialchars(json_encode($invitado, JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE), ENT_QUOTES, 'UTF-8'); ?>'
                                       data-base-url="<?php echo htmlspecialchars($baseUrl, ENT_QUOTES); ?>"
                                       onclick="event.stopPropagation(); return false;">Ver</a>
                                    <a href="#" 
                                       class="btn-editar-invitado" 
                                       data-invitado='<?php echo htmlspecialchars(json_encode($invitado, JSON_HEX_APOS | JSON_HEX_QUOT | JSON_UNESCAPED_UNICODE), ENT_QUOTES, 'UTF-8'); ?>'
                                       onclick="event.stopPropagation(); return false;">Editar</a>
                                    <a href="#" 
                                       class="btn-eliminar-invitado" 
                                       data-id="<?php echo $invitado['id']; ?>"
                                       data-nombre="<?php echo htmlspecialchars($invitado['nombre_cortesia'] . ' ' . $invitado['nombre_invitado'], ENT_QUOTES); ?>"
                                       onclick="event.stopPropagation(); return false;">Eliminar</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
            <?php endif; ?>
        </tbody>
    </table>
</div>

<?php if ($totalPages > 1): ?>
    <div class="pagination">
        <?php for ($i = 1; $i <= $totalPages; $i++): ?>
            <a href="?page=invitados&p=<?php echo $i; ?>&estado=<?php echo $estado; ?>&busqueda=<?php echo urlencode($busqueda); ?>">
                <?php echo $i; ?>
            </a>
        <?php endfor; ?>
    </div>
<?php endif; ?>

<script>
    function filtrar() {
        const busquedaInput = document.getElementById('filtro-nombre');
        const estadoSelect = document.getElementById('filtro-estado');

        const busqueda = busquedaInput ? busquedaInput.value : '';
        const estado = estadoSelect ? estadoSelect.value : '';

        const params = new URLSearchParams();
        params.append('page', 'invitados');
        if (busqueda) params.append('busqueda', busqueda);
        if (estado) params.append('estado', estado);

        window.location.href = '?' + params.toString();
    }

    function filtrarPorEstado() {
        filtrar();
    }
    
    // Cerrar dropdowns al hacer clic fuera
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dropdown-invitacion') && !e.target.closest('.dropdown-acciones')) {
            document.querySelectorAll('.dropdown-menu-invitacion, .dropdown-menu-acciones').forEach(function(menu) {
                menu.classList.remove('show');
            });
        }
    });
    
    // Funciones de dropdown (deben estar en scope global)
    window.toggleDropdownInvitacion = function(id) {
        const menu = document.getElementById('dropdown-invitacion-' + id);
        if (!menu) return;
        const allMenus = document.querySelectorAll('.dropdown-menu-invitacion, .dropdown-menu-acciones');
        
        allMenus.forEach(function(m) {
            if (m !== menu) m.classList.remove('show');
        });
        
        menu.classList.toggle('show');
    };
    
    window.toggleDropdownAcciones = function(id) {
        const menu = document.getElementById('dropdown-acciones-' + id);
        if (!menu) return;
        const allMenus = document.querySelectorAll('.dropdown-menu-invitacion, .dropdown-menu-acciones');
        
        allMenus.forEach(function(m) {
            if (m !== menu) m.classList.remove('show');
        });
        
        menu.classList.toggle('show');
    };
    
    function copiarEnlace(url, id) {
        navigator.clipboard.writeText(url).then(function() {
            // Mostrar notificación
            const btn = document.querySelector(`#dropdown-invitacion-${id}`).previousElementSibling;
            const originalText = btn.innerHTML;
            btn.innerHTML = '✓ Copiado';
            btn.style.color = 'var(--color-success)';
            
            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.style.color = '';
            }, 2000);
            
            // Cerrar dropdown
            document.getElementById('dropdown-invitacion-' + id).classList.remove('show');
        }).catch(function(err) {
            alert('Error al copiar: ' + err);
        });
    }
    
    function regenerarToken(id) {
        if (!confirm('¿Está seguro de generar un nuevo token? El enlace anterior dejará de funcionar.')) {
            return;
        }
        
        // Cerrar dropdown
        document.getElementById('dropdown-invitacion-' + id).classList.remove('show');
        
        fetch('index.php?page=regenerar_token&id=' + id, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Token regenerado correctamente. La página se recargará.');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'No se pudo regenerar el token'));
            }
        })
        .catch(error => {
            alert('Error al regenerar token: ' + error);
        });
    }
    
    // Funciones para modales
    function abrirModalVer(invitado, baseUrl) {
        try {
            // Cerrar dropdown
            const dropdown = document.getElementById('dropdown-acciones-' + invitado.id);
            if (dropdown) {
                dropdown.classList.remove('show');
            }
            
            const enlace = baseUrl + '/index.php?id=' + invitado.id + '&token=' + encodeURIComponent(invitado.token);
        
        // Llenar datos del modal
        document.getElementById('ver-nombre').textContent = invitado.nombre_cortesia + ' ' + invitado.nombre_invitado;
        document.getElementById('ver-invitacion-de').textContent = invitado.invitacion_de || '-';
        document.getElementById('ver-email').textContent = invitado.email || '-';
        document.getElementById('ver-telefono').textContent = invitado.telefono || '-';
        document.getElementById('ver-admisiones').textContent = invitado.numero_admisiones;
        document.getElementById('ver-estado').textContent = invitado.estado;
        
        // Formatear fechas
        const fechaRespuesta = invitado.fecha_respuesta ? 
            new Date(invitado.fecha_respuesta).toLocaleString('es-ES', { 
                day: '2-digit', 
                month: '2-digit', 
                year: 'numeric', 
                hour: '2-digit', 
                minute: '2-digit' 
            }) : '-';
        const fechaCreacion = invitado.fecha_creacion ? 
            new Date(invitado.fecha_creacion).toLocaleString('es-ES', { 
                day: '2-digit', 
                month: '2-digit', 
                year: 'numeric', 
                hour: '2-digit', 
                minute: '2-digit' 
            }) : '-';
        
        document.getElementById('ver-fecha-respuesta').textContent = fechaRespuesta;
        document.getElementById('ver-mensaje-respuesta').textContent = invitado.mensaje_respuesta || '-';
        document.getElementById('ver-fecha-creacion').textContent = fechaCreacion;
        
        // Admisiones
        const admisionesContainer = document.getElementById('ver-admisiones-lista');
        if (invitado.admisiones_lista && Array.isArray(invitado.admisiones_lista) && invitado.admisiones_lista.length > 0) {
            admisionesContainer.innerHTML = '<ul style="margin: 0; padding-left: 20px;">' + 
                invitado.admisiones_lista.map(function(a) { 
                    const nombre = (a && typeof a === 'string') ? a : (a && a.nombre ? a.nombre : '');
                    return '<li>' + nombre + '</li>'; 
                }).join('') + 
                '</ul>';
        } else {
            admisionesContainer.textContent = 'No hay admisiones registradas';
        }
        
        // Guardar datos para funciones de copiar y regenerar
        const modalOverlay = document.getElementById('modal-overlay-ver');
        modalOverlay.dataset.invitadoId = invitado.id;
        modalOverlay.dataset.enlace = enlace;
        
        // Mostrar modal
        modalOverlay.classList.add('show');
        } catch (error) {
            console.error('Error al abrir modal Ver:', error);
            alert('Error al abrir el modal. Por favor, verifique la consola para más detalles.');
        }
    }
    
    function abrirModalEditar(invitado) {
        document.getElementById('dropdown-acciones-' + invitado.id).classList.remove('show');
        
        const modal = document.getElementById('modal-editar');
        
        // Llenar formulario
        document.getElementById('editar-id').value = invitado.id;
        document.getElementById('editar-nombre-cortesia').value = invitado.nombre_cortesia;
        document.getElementById('editar-nombre-invitado').value = invitado.nombre_invitado;
        document.getElementById('editar-email').value = invitado.email || '';
        document.getElementById('editar-telefono').value = invitado.telefono || '';
        
        // Manejar invitacion_de (puede ser personalizado)
        const selectInvitacion = document.getElementById('editar-invitacion-de');
        const opciones = Array.from(selectInvitacion.options).map(opt => opt.value);
        const invitacionDe = invitado.invitacion_de || '';
        
        if (opciones.includes(invitacionDe)) {
            selectInvitacion.value = invitacionDe;
        } else if (invitacionDe && opciones.includes('Personalizado')) {
            // Es un valor personalizado
            selectInvitacion.value = 'Personalizado';
            const container = document.getElementById('editar-personalizado-container');
            if (container) {
                container.style.display = 'block';
                const inputPersonalizado = document.getElementById('editar-invitacion-de-personalizado');
                if (inputPersonalizado) {
                    inputPersonalizado.value = invitacionDe;
                }
            }
        }
        
        document.getElementById('editar-numero-admisiones').value = invitado.numero_admisiones;
        
        // Cargar estado actual
        document.getElementById('editar-estado').value = invitado.estado || 'Pendiente';
        
        // Cargar admisiones actuales
        // Asegurarse de que admisiones_lista sea un array
        const admisionesLista = Array.isArray(invitado.admisiones_lista) ? invitado.admisiones_lista : [];
        cargarAdmisionesEditar(invitado.numero_admisiones, admisionesLista);
        
        // Mostrar modal
        document.getElementById('modal-overlay-editar').classList.add('show');
    }
    
    function abrirModalEliminar(id, nombre) {
        document.getElementById('dropdown-acciones-' + id).classList.remove('show');
        
        document.getElementById('eliminar-id').value = id;
        document.getElementById('eliminar-nombre').textContent = nombre;
        
        document.getElementById('modal-overlay-eliminar').classList.add('show');
    }
    
    function cerrarModal(modalId) {
        document.getElementById(modalId).classList.remove('show');
    }
    
    function copiarEnlaceModal() {
        const modal = document.getElementById('modal-overlay-ver');
        const enlace = modal.dataset.enlace;
        
        navigator.clipboard.writeText(enlace).then(function() {
            const btn = document.getElementById('btn-copiar-enlace-modal');
            const originalText = btn.textContent;
            btn.textContent = '✓ Copiado';
            btn.style.background = 'var(--color-success)';
            
            setTimeout(() => {
                btn.textContent = originalText;
                btn.style.background = '';
            }, 2000);
        }).catch(function(err) {
            alert('Error al copiar: ' + err);
        });
    }
    
    function regenerarTokenModal() {
        const modal = document.getElementById('modal-overlay-ver');
        const id = modal.dataset.invitadoId;
        
        if (!confirm('¿Está seguro de generar un nuevo token? El enlace anterior dejará de funcionar.')) {
            return;
        }
        
        fetch('index.php?page=regenerar_token&id=' + id, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Token regenerado correctamente. La página se recargará.');
                location.reload();
            } else {
                alert('Error: ' + (data.message || 'No se pudo regenerar el token'));
            }
        })
        .catch(error => {
            alert('Error al regenerar token: ' + error);
        });
    }
    
    function cargarAdmisionesEditar(numero, admisionesActuales) {
        const container = document.getElementById('editar-admisiones-container');
        container.innerHTML = '';
        
        // El número de admisiones es el total, pero solo necesitamos los acompañantes (numero - 1)
        const numAcompanantes = Math.max(0, numero - 1);
        
        for (let i = 0; i < numAcompanantes; i++) {
            const div = document.createElement('div');
            div.className = 'admision-item';
            const valor = (admisionesActuales[i] || '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
            div.innerHTML = `
                <input type="text" name="nombres_admisiones[]" 
                       placeholder="Nombre del acompañante ${i + 1}"
                       value="${valor}">
            `;
            container.appendChild(div);
        }
    }
    
    function togglePersonalizadoEditar() {
        const select = document.getElementById('editar-invitacion-de');
        const container = document.getElementById('editar-personalizado-container');
        if (container) {
            if (select.value === 'Personalizado') {
                container.style.display = 'block';
                const inputPersonalizado = document.getElementById('editar-invitacion-de-personalizado');
                if (inputPersonalizado) {
                    inputPersonalizado.required = true;
                }
            } else {
                container.style.display = 'none';
                const inputPersonalizado = document.getElementById('editar-invitacion-de-personalizado');
                if (inputPersonalizado) {
                    inputPersonalizado.required = false;
                }
            }
        }
    }
    
    // Manejar envío del formulario de editar (sin AJAX, formulario normal)
    const formEditar = document.getElementById('form-editar-invitado');
    if (formEditar) {
        formEditar.addEventListener('submit', function(e) {
            const invitacionDe = document.getElementById('editar-invitacion-de').value;
            if (invitacionDe === 'Personalizado') {
                const personalizado = document.getElementById('editar-invitacion-de-personalizado');
                if (personalizado && !personalizado.value.trim()) {
                    e.preventDefault();
                    alert('Por favor ingrese el nombre personalizado');
                    return false;
                }
                // Cambiar el valor del select al personalizado antes de enviar
                if (personalizado && personalizado.value.trim()) {
                    document.getElementById('editar-invitacion-de').value = personalizado.value.trim();
                }
            }
        });
    }
    
    // Cerrar modales al hacer clic fuera
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('modal-overlay')) {
            e.target.classList.remove('show');
        }
    });
    
    // Cerrar modales con ESC
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('.modal-overlay.show').forEach(function(overlay) {
                overlay.classList.remove('show');
            });
        }
    });
    
    // Función de toast local para esta página
    function mostrarToastInvitados(tipo, mensaje) {
        var container = document.getElementById('invitados-toast-container');
        if (!container) return;
        
        var toast = document.createElement('div');
        toast.className = 'invitados-toast invitados-toast-' + (tipo === 'error' ? 'error' : 'success');
        
        var icon = document.createElement('span');
        icon.className = 'invitados-toast-icon';
        icon.textContent = tipo === 'error' ? '✕' : '✓';
        
        var msg = document.createElement('div');
        msg.className = 'invitados-toast-message';
        msg.textContent = mensaje;
        
        toast.appendChild(icon);
        toast.appendChild(msg);
        container.appendChild(toast);
        
        // Pequeño delay para activar transición
        setTimeout(function() {
            toast.classList.add('show');
        }, 10);
        
        // Quitar automáticamente después de ~2s
        setTimeout(function() {
            toast.classList.remove('show');
            setTimeout(function() {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 200);
        }, 2000);
    }
    
    // Event listeners para los botones de acciones usando data attributes
    document.addEventListener('DOMContentLoaded', function() {
        // Filtro automático por nombre
        const inputNombre = document.getElementById('filtro-nombre');
        if (inputNombre) {
            let timeoutId = null;
            inputNombre.addEventListener('input', function () {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(function () {
                    filtrar();
                }, 400); // pequeño delay para no recargar en cada tecla
            });
        }
        
        // Botón Ver
        document.querySelectorAll('.btn-ver-invitado').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const invitadoData = this.getAttribute('data-invitado');
                const baseUrl = this.getAttribute('data-base-url');
                if (invitadoData && baseUrl) {
                    try {
                        const invitado = JSON.parse(invitadoData);
                        abrirModalVer(invitado, baseUrl);
                    } catch (error) {
                        console.error('Error al parsear datos del invitado:', error);
                        alert('Error al cargar los datos del invitado');
                    }
                }
            });
        });
        
        // Botón Editar
        document.querySelectorAll('.btn-editar-invitado').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const invitadoData = this.getAttribute('data-invitado');
                if (invitadoData) {
                    try {
                        const invitado = JSON.parse(invitadoData);
                        abrirModalEditar(invitado);
                    } catch (error) {
                        console.error('Error al parsear datos del invitado:', error);
                        alert('Error al cargar los datos del invitado');
                    }
                }
            });
        });
        
        // Botón Eliminar
        document.querySelectorAll('.btn-eliminar-invitado').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const id = this.getAttribute('data-id');
                const nombre = this.getAttribute('data-nombre');
                if (id && nombre) {
                    abrirModalEliminar(parseInt(id), nombre);
                }
            });
        });
        
        // Manejar envío del formulario de editar vía AJAX para no salir de la página
        const formEditar = document.getElementById('form-editar-invitado');
        if (formEditar) {
            formEditar.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const invitacionDe = document.getElementById('editar-invitacion-de').value;
                if (invitacionDe === 'Personalizado') {
                    const personalizado = document.getElementById('editar-invitacion-de-personalizado');
                    if (personalizado && !personalizado.value.trim()) {
                        mostrarToastInvitados('error', 'Por favor ingrese el nombre personalizado');
                        return false;
                    }
                }
                
                const formData = new FormData(formEditar);
                
                // Enviar por AJAX
                fetch('?page=editar', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(function(response) { return response.json(); })
                .then(function(data) {
                    if (data && data.success) {
                        mostrarToastInvitados('success', data.message || 'Invitado actualizado correctamente');
                        cerrarModal('modal-overlay-editar');
                        // Dar tiempo a que el usuario vea el toast antes de recargar
                        setTimeout(function() {
                            window.location.reload();
                        }, 1800);
                    } else {
                        mostrarToastInvitados('error', data && data.message ? data.message : 'No se pudo actualizar el invitado');
                    }
                })
                .catch(function(error) {
                    console.error('Error al actualizar invitado:', error);
                    mostrarToastInvitados('error', 'Error al actualizar el invitado. Por favor, intente nuevamente.');
                });
            });
        }
        
        // Manejar envío del formulario de eliminar vía AJAX
        const formEliminar = document.getElementById('form-eliminar-invitado');
        if (formEliminar) {
            formEliminar.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(formEliminar);
                
                fetch('?page=eliminar', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(function(response) { 
                    // Si eliminar.php todavía devuelve HTML (modo no-AJAX), tratar de parsear JSON y si falla, recargar
                    return response.text().then(function(text) {
                        try {
                            return JSON.parse(text);
                        } catch (e) {
                            // Respuesta no-JSON: asumir éxito y recargar
                            return { success: true, message: 'Invitado eliminado correctamente' };
                        }
                    });
                })
                .then(function(data) {
                    if (data && data.success) {
                        mostrarToastInvitados('success', data.message || 'Invitado eliminado correctamente');
                        cerrarModal('modal-overlay-eliminar');
                        // Dar tiempo a que el usuario vea el toast antes de recargar
                        setTimeout(function() {
                            window.location.reload();
                        }, 1800);
                    } else {
                        mostrarToastInvitados('error', data && data.message ? data.message : 'No se pudo eliminar el invitado');
                    }
                })
                .catch(function(error) {
                    console.error('Error al eliminar invitado:', error);
                    mostrarToastInvitados('error', 'Error al eliminar el invitado. Por favor, intente nuevamente.');
                });
            });
        }
    });
</script>

<!-- Modal Ver -->
<div class="modal-overlay" id="modal-overlay-ver" onclick="if(event.target === this) cerrarModal('modal-overlay-ver')">
    <div class="modal">
        <div class="modal-header">
            <h3>Detalles del Invitado</h3>
            <button class="modal-close" onclick="cerrarModal('modal-overlay-ver')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="modal-info-grid">
                <div class="modal-field">
                    <label>Nombre</label>
                    <div class="value" id="ver-nombre"></div>
                </div>
                <div class="modal-field">
                    <label>Invitado por</label>
                    <div class="value" id="ver-invitacion-de"></div>
                </div>
                <div class="modal-field">
                    <label>Email</label>
                    <div class="value" id="ver-email"></div>
                </div>
                <div class="modal-field">
                    <label>Teléfono</label>
                    <div class="value" id="ver-telefono"></div>
                </div>
                <div class="modal-field">
                    <label>Estado</label>
                    <div class="value" id="ver-estado"></div>
                </div>
                <div class="modal-field">
                    <label>Número de Admisiones</label>
                    <div class="value" id="ver-admisiones"></div>
                </div>
                <div class="modal-field">
                    <label>Fecha de Respuesta</label>
                    <div class="value" id="ver-fecha-respuesta"></div>
                </div>
                <div class="modal-field">
                    <label>Fecha de Creación</label>
                    <div class="value" id="ver-fecha-creacion"></div>
                </div>
            </div>
            <div class="modal-field" style="grid-column: 1 / -1;">
                <label>Admisiones</label>
                <div class="value" id="ver-admisiones-lista"></div>
            </div>
            <div class="modal-field" style="grid-column: 1 / -1;">
                <label>Mensaje de Respuesta</label>
                <div class="value" id="ver-mensaje-respuesta"></div>
            </div>
        </div>
        <div class="modal-actions">
            <button class="btn btn-secondary" onclick="copiarEnlaceModal()" id="btn-copiar-enlace-modal">Copiar enlace</button>
            <button class="btn btn-secondary" onclick="regenerarTokenModal()">Generar token</button>
            <button class="btn btn-primary" onclick="cerrarModal('modal-overlay-ver')">Cerrar</button>
        </div>
    </div>
</div>

<!-- Modal Editar -->
<div class="modal-overlay" id="modal-overlay-editar" onclick="if(event.target === this) cerrarModal('modal-overlay-editar')">
    <div class="modal">
        <div class="modal-header">
            <h3>Editar Invitado</h3>
            <button class="modal-close" onclick="cerrarModal('modal-overlay-editar')">&times;</button>
        </div>
        <form id="form-editar-invitado" method="POST" action="?page=editar">
            <input type="hidden" id="editar-id" name="id" value="">
            <div class="modal-body">
                <div class="modal-field">
                    <label for="editar-nombre-cortesia">Nombre de Cortesía</label>
                    <select id="editar-nombre-cortesia" name="nombre_cortesia" required>
                        <option value="Sr.">Sr.</option>
                        <option value="Sra.">Sra.</option>
                        <option value="Srta.">Srta.</option>
                        <option value="Sres.">Sres.</option>
                        <option value="Fam.">Fam.</option>
                    </select>
                </div>
                <div class="modal-field">
                    <label for="editar-nombre-invitado">Nombre del Invitado *</label>
                    <input type="text" id="editar-nombre-invitado" name="nombre_invitado" required>
                </div>
                <div class="modal-field">
                    <label for="editar-email">Email</label>
                    <input type="email" id="editar-email" name="email">
                </div>
                <div class="modal-field">
                    <label for="editar-telefono">Teléfono</label>
                    <input type="text" id="editar-telefono" name="telefono">
                </div>
                <div class="modal-field">
                    <label for="editar-estado">Estado *</label>
                    <select id="editar-estado" name="estado" required>
                        <option value="Pendiente">Pendiente</option>
                        <option value="Aceptado">Aceptado</option>
                        <option value="Rechazado">Rechazado</option>
                    </select>
                </div>
                <div class="modal-field">
                    <label for="editar-invitacion-de">Invitación de *</label>
                    <?php 
                    $opcionesInvitacion = obtenerOpcionesInvitacionDe($evento);
                    $mostrarPersonalizado = false;
                    ?>
                    <select id="editar-invitacion-de" name="invitacion_de" required onchange="togglePersonalizadoEditar()">
                        <option value="">Seleccione...</option>
                        <?php foreach ($opcionesInvitacion as $valor => $etiqueta): ?>
                            <?php if ($valor === 'Personalizado') $mostrarPersonalizado = true; ?>
                            <option value="<?php echo htmlspecialchars($valor); ?>">
                                <?php echo htmlspecialchars($etiqueta); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                    <?php if ($mostrarPersonalizado): ?>
                        <div id="editar-personalizado-container" style="display: none; margin-top: 10px;">
                            <input type="text" id="editar-invitacion-de-personalizado" name="invitacion_de_personalizado" 
                                   placeholder="Escriba el nombre personalizado">
                        </div>
                    <?php endif; ?>
                </div>
                <div class="modal-field">
                    <label for="editar-numero-admisiones">Número de Admisiones</label>
                    <input type="number" id="editar-numero-admisiones" name="numero_admisiones" min="1" 
                           onchange="cargarAdmisionesEditar(this.value, [])">
                </div>
                <div class="modal-field">
                    <label>Nombres de Admisiones</label>
                    <div id="editar-admisiones-container"></div>
                </div>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn btn-secondary" onclick="cerrarModal('modal-overlay-editar')">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar Cambios</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Eliminar -->
<div class="modal-overlay" id="modal-overlay-eliminar" onclick="if(event.target === this) cerrarModal('modal-overlay-eliminar')">
    <div class="modal" style="max-width: 400px;">
        <div class="modal-header">
            <h3>Confirmar Eliminación</h3>
            <button class="modal-close" onclick="cerrarModal('modal-overlay-eliminar')">&times;</button>
        </div>
        <div class="modal-body">
            <p style="margin: 0; color: var(--color-text-primary);">
                ¿Está seguro de eliminar al invitado <strong id="eliminar-nombre"></strong>?
            </p>
            <p style="margin-top: 12px; color: var(--color-text-secondary); font-size: 14px;">
                Esta acción no se puede deshacer.
            </p>
        </div>
        <div class="modal-actions">
            <button type="button" class="btn btn-secondary" onclick="cerrarModal('modal-overlay-eliminar')">Cancelar</button>
            <form id="form-eliminar-invitado" method="POST" action="?page=eliminar" style="display: inline;">
                <input type="hidden" id="eliminar-id" name="id" value="">
                <button type="submit" class="btn btn-danger">Eliminar</button>
            </form>
        </div>
    </div>
</div>

