<?php
/**
 * Modales y Scripts compartidos para templates de invitación
 * 
 * Variables requeridas:
 * - $invitado: Array con datos del invitado
 * - $admisiones: Array con nombres de acompañantes
 * - $tracklist: Array con canciones
 * - $token: Token de la invitación
 * - $invitadoId: ID del invitado
 * - $isPreview: Boolean
 */
?>

<!-- Modales de confirmación -->
<style>
.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);
}
.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>

<!-- 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>

<!-- 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); ?>;
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); ?>;

function abrirModalAceptar() {
    const modal = document.getElementById('modal-aceptar');
    const container = document.getElementById('admisiones-form-container');
    
    if (numeroAdmisiones > 1) {
        container.innerHTML = '';
        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);
        }
    }
    
    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) {
        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 = '') {
    if (!invitadoId || invitadoId <= 0) {
        alert('Error: ID de invitado inválido. Por favor, recargue la página.');
        return;
    }
    
    if (!tokenInvitacion || tokenInvitacion.length < 16) {
        alert('Error: Token de invitación inválido. Por favor, recargue la página.');
        return;
    }
    
    cerrarModalAceptar();
    cerrarModalRechazar();
    mostrarLoading();
    
    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();
    }
    
    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) {
            window.location.reload();
        } else {
            alert('Error: ' + (data.message || 'No se pudo procesar la respuesta'));
        }
    })
    .catch(error => {
        ocultarLoading();
        alert('Error al procesar la solicitud. Por favor, intente nuevamente.');
        console.error('Error:', error);
    });
}

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;
    }
    
    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) {
            document.getElementById('tracklist-autor').value = '';
            document.getElementById('tracklist-cancion').value = '';
            
            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>
                </div>
                <button type="button" class="tracklist-btn-remove" onclick="eliminarCancion(${data.cancion_id})">×</button>
            `;
            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) {
            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);
    });
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        cerrarModalAceptar();
        cerrarModalRechazar();
    }
});

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>
