document.addEventListener("DOMContentLoaded", async () => {
    const params = new URLSearchParams(window.location.search);
    const conciertoId = params.get("id");

    if (!conciertoId) {
        console.error("Error: No se proporcionó un ID de concierto en la URL.");
        return;
    }

    try {
        const respuesta = await fetch(`controladores/concierto_zonas.php?id_concierto=${conciertoId}`);
        if (!respuesta.ok) throw new Error("Error al cargar los datos del concierto");

        const concierto = await respuesta.json();

        if (concierto.error) {
            console.error(`Error: ${concierto.error}`);
            return;
        }

        // Mostrar información del concierto
        document.getElementById("nombre_concierto").textContent = concierto.nombre_concierto;
        document.getElementById("artista").textContent = `Artista: ${concierto.artista}`;
        document.getElementById("fecha").textContent = `Fecha: ${concierto.fecha}`;

        // Mostrar zonas del concierto
        const zonasContainer = document.getElementById("zonas-container");
        zonasContainer.innerHTML = "";

        if (!concierto.zonas || concierto.zonas.length === 0) {
            console.error("No se encontraron zonas para este concierto.");
            return;
        }

        concierto.zonas.forEach(zona => {
            const zonaBtn = document.createElement("button");
            zonaBtn.classList.add("boton-zona");
            zonaBtn.textContent = `Ver Zona ${zona.nombre_zona}`;
            zonaBtn.dataset.idZona = zona.id_zona;

            zonaBtn.addEventListener("click", () => cargarDatosZona(zona));

            zonasContainer.appendChild(zonaBtn);
        });

    } catch (error) {
        console.error("Error al obtener los datos del concierto:", error);
    }
});

async function cargarDatosZona(zona) {
    if (!zona) {
        console.error("Error: Datos de zona no disponibles");
        return;
    }

    // Mostrar información de la zona
    document.getElementById("zonaNombre").textContent = `Zona: ${zona.nombre_zona || 'N/A'}`;
    document.getElementById("zonaCapacidad").textContent = `Capacidad: ${zona.capacidad || 'N/A'}`;
    document.getElementById("zonaPrecio").textContent = `Precio: $${zona.precio || 'N/A'}`;
    document.getElementById("asientosDisponibles").textContent = `Disponibles: ${zona.asientos_disponibles ?? 0}`;
    document.getElementById("asientosOcupados").textContent = `Ocupados: ${zona.asientos_ocupados ?? 0}`;

    // Cargar los asientos disponibles
    await cargarAsientos(zona.id_zona);
}

async function cargarAsientos(idZona) {
    try {
        const respuesta = await fetch(`controladores/obtener_asiento.php?id_zona=${idZona}`);
        if (!respuesta.ok) throw new Error("Error al cargar los asientos");

        const asientos = await respuesta.json();

        const asientosContainer = document.getElementById("asientos-container");
        asientosContainer.innerHTML = ""; // Limpiar antes de agregar nuevos

        asientos.forEach(asiento => {
            const asientoDiv = document.createElement("div");
            asientoDiv.classList.add("asiento", asiento.estado);
            asientoDiv.dataset.idAsiento = asiento.id_asiento;
            asientoDiv.setAttribute("title", `Asiento #${asiento.id_asiento}`);

            const icono = document.createElement("i");
            icono.classList.add("bi", "bi-person-fill");

            if (asiento.estado === "disponible") {
                asientoDiv.appendChild(icono);
                asientoDiv.addEventListener("click", () => seleccionarAsiento(asientoDiv, asiento.id_asiento));
            } else {
                icono.style.opacity = "0.3"; // Opacidad para los asientos ocupados
                asientoDiv.appendChild(icono);
            }

            asientosContainer.appendChild(asientoDiv);
        });

    } catch (error) {
        console.error("Error al obtener los asientos:", error);
    }
}

const asientosSeleccionados = new Set();

function seleccionarAsiento(elemento, idAsiento) {
    if (asientosSeleccionados.has(idAsiento)) {
        asientosSeleccionados.delete(idAsiento);
        elemento.classList.remove("seleccionado");
    } else {
        asientosSeleccionados.add(idAsiento);
        elemento.classList.add("seleccionado");
    }

    document.getElementById("comprarBoletos").disabled = asientosSeleccionados.size === 0;
}

document.getElementById("comprarBoletos").addEventListener("click", async () => {
    if (asientosSeleccionados.size === 0) return;

    try {
        const respuesta = await fetch("controladores/comprar_asiento.php", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ asientos: Array.from(asientosSeleccionados) })
        });

        const resultado = await respuesta.json();
        if (resultado.success) {
            alert("Compra realizada con éxito.");
            location.reload();
        } else {
            alert("Error al realizar la compra.");
        }
    } catch (error) {
        console.error("Error al comprar boletos:", error);
    }
});