document.addEventListener('DOMContentLoaded', function() {
    let seleccionados = [];
    const precioBoleto = 50.00; // Precio por boleto
    
    // Inicializar gráficos
    const ctxVendidos = document.getElementById('graficoVendidos').getContext('2d');
    const ctxLibres = document.getElementById('graficoLibres').getContext('2d');
    
    const graficoVendidos = new Chart(ctxVendidos, {
        type: 'bar',
        data: {
            labels: ['Vendidos'],
            datasets: [{
                label: 'Asientos Vendidos',
                data: [0],
                backgroundColor: ['#dc3545']
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    const graficoLibres = new Chart(ctxLibres, {
        type: 'bar',
        data: {
            labels: ['Libres'],
            datasets: [{
                label: 'Asientos Libres',
                data: [0],
                backgroundColor: ['#28a745']
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // Cargar el mapa de asientos al iniciar
    cargarMapaAsientos();
    
    // Agregar manejador para el formulario
    const formulario = document.getElementById('formularioVenta');
    formulario.addEventListener('submit', validarYEnviarFormulario);

    // Agregar manejador para el botón de filtrar
    const btnFiltrar = document.getElementById('btnFiltrar');
    btnFiltrar.addEventListener('click', filtrarPorFecha);
    
    // Función para cargar el mapa de asientos desde la API
    async function cargarMapaAsientos() {
        try {
            const response = await fetch('../controlador/asientos.php');
            const responseText = await response.text(); // Capturar respuesta como texto para depurar
            console.log('Respuesta del servidor:', responseText);

            // Intentar parsear como JSON
            const data = JSON.parse(responseText);

            if (!data.success) {
                mostrarMensaje('Error al cargar el mapa de asientos: ' + data.message, 'error');
                return;
            }

            renderizarMapaAsientos(data.mapa);
            actualizarGraficos(data.mapa, data.precio); // Asegúrate de llamar a actualizarGraficos aquí
        } catch (error) {
            console.error('Error al cargar el mapa de asientos:', error);
            mostrarMensaje('Error de conexión con el servidor', 'error');
        }
    }
    
    // Función para renderizar el mapa de asientos
    function renderizarMapaAsientos(mapa) {
        const contenedor = document.getElementById('mapaAsientos');
        contenedor.innerHTML = '';
        
        Object.entries(mapa).forEach(([numeroFila, asientosEnFila]) => {
            const filaElement = document.createElement('div');
            filaElement.className = 'fila';
            
            // Crear elemento para el número de fila
            const numeroFilaElement = document.createElement('div');
            numeroFilaElement.className = 'numero-fila';
            numeroFilaElement.textContent = `F${numeroFila}`;
            filaElement.appendChild(numeroFilaElement);
            
            // Crear contenedor para los asientos
            const asientosContainer = document.createElement('div');
            asientosContainer.className = 'asientos';
            
            // Crear cada asiento
            Object.entries(asientosEnFila).forEach(([numeroAsiento, estado]) => {
                const idBoleto = ((parseInt(numeroFila) - 1) * Object.keys(asientosEnFila).length) + parseInt(numeroAsiento);
                const asiento = document.createElement('div');
                
                // Determinar la clase según el estado
                asiento.className = `asiento ${estado === 'disponible' ? 'disponible' : 'vendido'}`;
                asiento.dataset.id = idBoleto;
                asiento.textContent = numeroAsiento;
                
                asientosContainer.appendChild(asiento);
            });
            
            filaElement.appendChild(asientosContainer);
            contenedor.appendChild(filaElement);
        });
        
        // Una vez que se ha renderizado, añadir los eventos
        configurarEventosAsientos();
    }
    
    // Configurar eventos para los asientos
    function configurarEventosAsientos() {
        const asientos = document.querySelectorAll('.asiento.disponible');
        
        asientos.forEach(asiento => {
            asiento.addEventListener('click', function() {
                const asientoId = parseInt(this.getAttribute('data-id'));
                
                // Verificar si ya está seleccionado
                const indice = seleccionados.findIndex(a => a.id === asientoId);
                
                if (indice === -1) {
                    // Agregar a seleccionados
                    seleccionados.push({
                        id: asientoId,
                        elemento: this
                    });
                    this.classList.remove('disponible');
                    this.classList.add('seleccionado');
                } else {
                    // Quitar de seleccionados
                    seleccionados.splice(indice, 1);
                    this.classList.remove('seleccionado');
                    this.classList.add('disponible');
                }
                
                actualizarResumen();
            });
        });
    }
    
    // Función para actualizar el resumen de venta
    function actualizarResumen() {
        const resumenAsientos = document.getElementById('asientosSeleccionados');
        const resumenTotal = document.getElementById('totalVenta');
        const asientosInput = document.getElementById('asientosSeleccionadosInput');
        
        if (seleccionados.length === 0) {
            resumenAsientos.textContent = 'Ninguno';
            resumenTotal.textContent = '0.00';
            
            // Limpiar los inputs ocultos
            if (asientosInput) {
                asientosInput.innerHTML = '';
            }
        } else {
            // Mostrar los asientos seleccionados
            const detalles = seleccionados.map(asiento => {
                const fila = Math.floor((asiento.id - 1) / 15) + 1;
                const numero = ((asiento.id - 1) % 15) + 1;
                return `F${fila}-${numero}`;
            });
            
            resumenAsientos.textContent = detalles.join(', ');
            resumenTotal.textContent = (seleccionados.length * precioBoleto).toFixed(2);
            
            // Actualizar campo oculto para el envío del formulario
            if (asientosInput) {
                asientosInput.innerHTML = '';
                seleccionados.forEach(asiento => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'asientos[]';
                    input.value = asiento.id;
                    asientosInput.appendChild(input);
                });
            }
        }
    }
    
    // Función para validar y enviar el formulario
    function validarYEnviarFormulario(e) {
        e.preventDefault();
        
        if (seleccionados.length === 0) {
            mostrarMensaje('Por favor, seleccione al menos un asiento.');
            return false;
        }
        
        const nombreCliente = document.getElementById('nombre_cliente').value.trim();
        if (nombreCliente === '') {
            mostrarMensaje('Por favor, ingrese el nombre del cliente.');
            return false;
        }
        
        // Preparar los datos para enviar
        const asientosIds = seleccionados.map(asiento => asiento.id);
        const datos = {
            asientos: asientosIds,
            nombre_cliente: nombreCliente
        };
        
        // Enviar los datos mediante fetch
        fetch('../controlador/venta.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(datos)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                // Redireccionar a la página de comprobante
                window.location.href = result.redirect || 'comprobante.php';
            } else {
                mostrarMensaje(result.mensaje || 'Error al procesar la venta', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            mostrarMensaje('Error de conexión con el servidor', 'error');
        });
        
        return false;
    }
    
    // Función para mostrar mensajes
    function mostrarMensaje(texto, tipo = 'warning') {
        const mensajeElement = document.getElementById('mensajeAlerta');
        if (mensajeElement) {
            mensajeElement.textContent = texto;
            mensajeElement.className = `alert alert-${tipo === 'error' ? 'danger' : 'warning'}`;
            mensajeElement.classList.remove('d-none');
            
            // Ocultar después de 5 segundos
            setTimeout(() => {
                mensajeElement.classList.add('d-none');
            }, 5000);
        } else {
            // Si no existe el elemento, usar alert
            alert(texto);
        }
    }

    // Función para actualizar los gráficos
    function actualizarGraficos(mapa, precioBoleto) {
        let totalVendidos = 0;
        let totalLibres = 0;
        let totalVenta = 0;
        
        Object.values(mapa).forEach(asientosEnFila => {
            Object.values(asientosEnFila).forEach(estado => {
                if (estado === 'vendido') {
                    totalVendidos++;
                    totalVenta += precioBoleto; // Sumar el precio del boleto vendido
                } else if (estado === 'disponible') {
                    totalLibres++;
                }
            });
        });
        
        graficoVendidos.data.datasets[0].data[0] = totalVendidos;
        graficoLibres.data.datasets[0].data[0] = totalLibres;
        
        graficoVendidos.update();
        graficoLibres.update();

        // Mostrar la suma total de boletos vendidos debajo del gráfico de asientos vendidos
        const totalVendidosElement = document.getElementById('totalVendidos');
        if (totalVendidosElement) {
            totalVendidosElement.textContent = `Total boletos vendidos: ${totalVendidos}`;
        } else {
            const totalVendidosLabel = document.createElement('p');
            totalVendidosLabel.id = 'totalVendidos';
            totalVendidosLabel.textContent = `Total boletos vendidos: ${totalVendidos}`;
            graficoVendidos.canvas.parentNode.appendChild(totalVendidosLabel);
        }

        // Mostrar la suma total vendida debajo del gráfico de asientos vendidos
        const totalVentaElement = document.getElementById('totalVentaDia');
        if (totalVentaElement) {
            totalVentaElement.textContent = `Total vendido: $${totalVenta.toFixed(2)}`;
        } else {
            const totalVentaLabel = document.createElement('p');
            totalVentaLabel.id = 'totalVentaDia';
            totalVentaLabel.textContent = `Total vendido: $${totalVenta.toFixed(2)}`;
            graficoVendidos.canvas.parentNode.appendChild(totalVentaLabel);
        }
    }

    // Función para filtrar los datos por fecha
    async function filtrarPorFecha() {
        const fechaInicio = document.getElementById('fechaInicio').value;
        const fechaFin = document.getElementById('fechaFin').value;

        if (!fechaInicio || !fechaFin) {
            mostrarMensaje('Por favor, seleccione un rango de fechas válido.', 'warning');
            return;
        }

        try {
            const response = await fetch(`../controlador/asientos.php?fechaInicio=${fechaInicio}&fechaFin=${fechaFin}`);
            const responseText = await response.text(); // Capturar respuesta como texto para depurar
            console.log('Respuesta del servidor:', responseText);

            // Intentar parsear como JSON
            const data = JSON.parse(responseText);

            if (!data.success) {
                mostrarMensaje('Error al filtrar los datos por fecha', 'error');
                return;
            }

            renderizarMapaAsientos(data.mapa); // Asegúrate de renderizar el mapa de asientos filtrado
            actualizarGraficos(data.mapa, data.precio);
        } catch (error) {
            console.error('Error al filtrar los datos por fecha:', error);
            mostrarMensaje('Error de conexión con el servidor', 'error');
        }
    }
});