document.addEventListener('DOMContentLoaded', function() {
    console.log('Script agenda.js cargado y en ejecución.');

    // =========================================================================
    // 1. ELEMENTOS DEL DOM
    // =========================================================================
    const pasos = document.querySelectorAll('.step');
    const pasosProgreso = document.querySelectorAll('.step-progress-item');

    const nextStepBtn = document.getElementById('nextStepBtn');
    const prevStepBtn = document.getElementById('prevStepBtn');
    const nextStepBtn2 = document.getElementById('nextStepBtn2');
    const prevStepBtn3 = document.getElementById('prevStepBtn3');

    const pagoBtn = document.getElementById('nextStepBtn3');
    const cashBtn = document.getElementById('cashBtn');

    const agendaForm = document.getElementById('agendaForm');
    const paquetes = document.querySelectorAll('.package-card');
    const idProductoInput = document.getElementById('id_producto_evento');
    const precioProductoInput = document.getElementById('precio_producto_evento');
    const fechaEventoInput = document.getElementById('fecha_evento');
    const horaEventoInput = document.getElementById('hora_evento');
    const conceptoInput = document.getElementById('concepto_evento');
    const nombreClienteInput = document.getElementById('nombre_cliente');
    const telefonoInput = document.getElementById('telefono');
    const direccionTextoInput = document.getElementById('direccion_texto');
    const latitudInput = document.getElementById('latitud_evento');
    const longitudInput = document.getElementById('longitud_evento');
    const referenciaInput = document.getElementById('referencia');
    const notasInput = document.getElementById('notas');
    const anticipoInput = document.getElementById('anticipo');
    const mensajeAnticipo = document.getElementById('mensaje-anticipo');

    const summaryMenu = document.getElementById('summary-menu');
    const summaryDatetime = document.getElementById('summary-datetime');
    const summaryConcept = document.getElementById('summary-concept');
    const summaryAddress = document.getElementById('summary-address');
    const summaryDeposit = document.getElementById('summary-deposit');
    const idAgendaDisplay = document.getElementById('id-agenda-display');
    const menuDisplay = document.getElementById('menu-display');
    const fechaHoraDisplay = document.getElementById('fecha-hora-display');
    const conceptoDisplay = document.getElementById('concepto-display');
    const anticipoDisplay = document.getElementById('anticipo-display');
    const metodoPagoDisplay = document.getElementById('metodo-pago-display');
    const nombreDisplay = document.getElementById('nombre-display');
    const telefonoDisplay = document.getElementById('telefono-display');
    const direccionDisplay = document.getElementById('direccion-display');

    const downloadableContent = document.getElementById('downloadable-content');
    const downloadBtn = document.getElementById('downloadBtn');
    const whatsappBtn = document.getElementById('whatsappBtn');

    const conflictoModal = document.getElementById('conflictoModal');
    const bsConflictoModal = new bootstrap.Modal(conflictoModal);
    const errores = {
        menu: document.getElementById('error-menu'),
        fecha: document.getElementById('error-fecha'),
        hora: document.getElementById('error-hora'),
        concepto: document.getElementById('error-concepto'),
        nombre: document.getElementById('error-nombre'),
        telefono: document.getElementById('error-telefono'),
        direccion: document.getElementById('error-direccion'),
        referencia: document.getElementById('error-referencia'),
        notas: document.getElementById('error-notas'),
    };

    let map = null;
    let marker = null;
    const searchAddressBtn = document.getElementById('searchAddressBtn');
    const addressSearchInput = document.getElementById('address_search');
    const tacoIcon = L.icon({
        iconUrl: '/views/imgs/taco.png',
        iconSize: [40, 40],
        iconAnchor: [20, 40],
        popupAnchor: [0, -35]
    });

    let pasoActual = 1;

    // =========================================================================
    // 2. FUNCIONES AUXILIARES
    // =========================================================================
    function mostrarError(key, msg) {
        if (errores[key]) {
            errores[key].textContent = msg;
            errores[key].style.display = 'block';
        }
    }

    function ocultarTodosLosErrores() {
        Object.values(errores).forEach(span => {
            if (span) {
                span.style.display = 'none';
                span.textContent = '';
            }
        });
    }

    function validarCampo(value, regex) {
        return regex.test(value.trim());
    }

    function cambiarPaso(pasoDestino) {
        pasos.forEach(p => p.style.display = 'none');
        pasosProgreso.forEach((item, index) => {
            if (index < pasoDestino) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
        const pasoMostrar = document.querySelector(`.step[data-step="${pasoDestino}"]`);
        if (pasoMostrar) pasoMostrar.style.display = 'block';
        pasoActual = pasoDestino;
    }

    // Coordenadas de Chilpancingo, Guerrero, México
    const CHILPANCINGO_COORDS = [17.5542149, -99.5048416];

    // Función para mostrar la pantalla de carga
    function showLoader() {
        $('#loader-overlay').show();
    }

    // Función para ocultar la pantalla de carga
    function hideLoader() {
        $('#loader-overlay').hide();
    }

    // Inicializar el mapa
    function initMap() {
        if (!map) {
            map = L.map('map').setView(CHILPANCINGO_COORDS, 15);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap'
            }).addTo(map);

            map.on('click', async function(e) {
                showLoader();
                updateMapMarker(e.latlng);
                await reverseGeocode(e.latlng);
                hideLoader();
            });

            updateMapMarker(L.latLng(CHILPANCINGO_COORDS[0], CHILPANCINGO_COORDS[1]));

            const locateButton = document.getElementById('locateButton');
            if (locateButton) {
                locateButton.addEventListener('click', locateUser);
            }
        } else {
            map.invalidateSize();
        }
    }

    // Función para obtener la ubicación del usuario (GPS)
    function locateUser() {
        showLoader();
        if ("geolocation" in navigator) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const latlng = L.latLng(position.coords.latitude, position.coords.longitude);
                    updateMapMarker(latlng);
                    reverseGeocode(latlng);
                    showAlert('Ubicación encontrada.', 'success');
                    hideLoader();
                },
                (error) => {
                    console.error("Error al obtener la ubicación:", error);
                    showAlert('No se pudo obtener la ubicación. Por favor, habilite los permisos de ubicación o ingrese la dirección manualmente.', 'error');
                    hideLoader();
                }
            );
        } else {
            showAlert('La geolocalización no es compatible con este navegador.', 'error');
            hideLoader();
        }
    }

    // Actualizar marcador en el mapa y campos de lat/lng
    function updateMapMarker(latlng) {
        if (marker) {
            marker.setLatLng(latlng);
        } else {
            marker = L.marker(latlng, {
                    icon: tacoIcon,
                    draggable: true
                })
                .addTo(map)
                .bindPopup("Ubicación de entrega")
                .openPopup();

            marker.on('dragend', async function() {
                showLoader();
                await reverseGeocode(marker.getLatLng());
                hideLoader();
            });
        }
        map.setView(latlng, 17);

        if (latitudInput) latitudInput.value = latlng.lat;
        if (longitudInput) longitudInput.value = latlng.lng;
    }

    // Geocodificación inversa
    async function reverseGeocode(latlng) {
        try {
            const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latlng.lat}&lon=${latlng.lng}`);
            const data = await response.json();
            if (data.address) {
                const address = formatAddress(data);
                if (direccionTextoInput) direccionTextoInput.value = address;
                if (marker) {
                    marker.setPopupContent(`<b>Dirección:</b><br>${address}`).openPopup();
                }
                return address;
            }
        } catch (error) {
            console.error('Error en reverse geocoding:', error);
            showAlert('No se pudo obtener la dirección para esta ubicación', 'error');
        }
        return null;
    }

    // Formatear dirección
    function formatAddress(data) {
        const addr = data.address;
        let addressParts = [];
        if (addr.road) addressParts.push(addr.road);
        if (addr.house_number) addressParts.push(addr.house_number);
        if (addr.neighbourhood) addressParts.push(addr.neighbourhood);
        if (addr.suburb && !addr.neighbourhood) addressParts.push(addr.suburb);
        if (addr.city || addr.town || addr.village) {
            addressParts.push(addr.city || addr.town || addr.village);
        }
        return addressParts.join(', ');
    }

    // Función para buscar una dirección
    async function searchAddress() {
        const query = addressSearchInput.value;
        if (!query) {
            showAlert('Por favor, ingrese una dirección para buscar.', 'error');
            return;
        }

        showLoader();
        try {
            const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}`);
            const data = await response.json();
            if (data && data.length > 0) {
                const latlng = L.latLng(data[0].lat, data[0].lon);
                updateMapMarker(latlng);
                showAlert('Dirección encontrada.', 'success');
            } else {
                showAlert('Dirección no encontrada.', 'error');
            }
        } catch (error) {
            console.error('Error searching for address:', error);
            showAlert('Ocurrió un error al buscar la dirección.', 'error');
        }
        hideLoader();
    }

    function showAlert(message, type) {
        console.log(`ALERTA (${type}): ${message}`);
    }

    function actualizarMarcador(lat, lng, address) {
        if (marker) map.removeLayer(marker);
        marker = L.marker([lat, lng], {
            icon: tacoIcon
        }).addTo(map);
        latitudInput.value = lat;
        longitudInput.value = lng;
        direccionTextoInput.value = address;
        map.setView([lat, lng], 16);
    }

    async function obtenerDireccion(lat, lng) {
        try {
            const res = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`);
            const data = await res.json();
            if (data.display_name) actualizarMarcador(lat, lng, data.display_name);
            else {
                alert('No se pudo obtener la dirección de esta ubicación.');
            }
        } catch (err) {
            console.error(err);
            alert('Ocurrió un error al obtener la dirección.');
        }
    }

    function updateSummary() {
        const selectedMenuTitle = document.querySelector('.package-card.selected .package-title').textContent;
        summaryMenu.textContent = selectedMenuTitle;
        summaryDatetime.textContent = `${fechaEventoInput.value} a las ${horaEventoInput.value}`;
        summaryConcept.textContent = conceptoInput.value;
        summaryAddress.textContent = direccionTextoInput.value;
        summaryDeposit.textContent = `$${anticipoInput.value} MXN`;
    }

    function updateConfirmation(id_agenda, anticipo_pagado, metodo_pago) {
        idAgendaDisplay.textContent = id_agenda;
        menuDisplay.textContent = document.querySelector('.package-card.selected .package-title').textContent;
        fechaHoraDisplay.textContent = `${fechaEventoInput.value} a las ${horaEventoInput.value}`;
        conceptoDisplay.textContent = conceptoInput.value;
        anticipoDisplay.textContent = `$${anticipo_pagado} MXN`;
        metodoPagoDisplay.textContent = metodo_pago;
        nombreDisplay.textContent = nombreClienteInput.value;
        telefonoDisplay.textContent = telefonoInput.value;
        direccionDisplay.textContent = direccionTextoInput.value;
    }

    async function descargarComprobante() {
        downloadBtn.style.display = 'none';
        try {
            const canvas = await html2canvas(downloadableContent, {
                scale: 2
            });
            const image = canvas.toDataURL('image/png', 1.0);
            const link = document.createElement('a');
            link.download = `reservacion_taquiza_${new Date().toISOString().slice(0, 10)}.png`;
            link.href = image;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } catch (error) {
            console.error('Error al generar la imagen:', error);
            alert('Ocurrió un error al descargar el comprobante.');
        } finally {
            downloadBtn.style.display = 'block';
        }
    }

    // =========================================================================
    // 3. PROCESO DE RESERVA (COMUNICACIÓN CON EL BACKEND)
    // =========================================================================
    async function pagarConMercadoPago() {
        ocultarTodosLosErrores();
        if (parseFloat(anticipoInput.value) <= 0) {
            alert('El anticipo debe ser mayor a 0 para procesar el pago.');
            return;
        }

        const formData = new FormData(agendaForm);
        formData.append('action', 'guardar_reserva');
        formData.append('metodo_pago', 'mercadopago');

        try {
            const resGuardar = await fetch('../controllers/controller_agenda.php', {
                method: 'POST',
                body: formData
            });
            const resultGuardar = await resGuardar.json();

            if (!resultGuardar.success) {
                alert('Error al guardar la reserva: ' + resultGuardar.message);
                return;
            }

            const idAgenda = resultGuardar.id_agenda;
            sessionStorage.setItem('lastAgendaId', idAgenda);

            const formDataPago = new FormData(agendaForm);
            formDataPago.append('action', 'crear_preferencia_pago');
            formDataPago.append('id_agenda', idAgenda);

            const resPago = await fetch('../controllers/controller_agenda.php', {
                method: 'POST',
                body: formDataPago
            });
            const resultPago = await resPago.json();

            if (resultPago.success) {
                window.location.href = resultPago.init_point;
            } else {
                alert('Error al crear la preferencia de pago: ' + resultPago.message);
            }
        } catch (err) {
            console.error('Error inesperado:', err);
            alert('Ocurrió un error inesperado al procesar el pago. Revisa la consola para más detalles.');
        }
    }

    async function verificarDisponibilidad() {
        ocultarTodosLosErrores();
        let erroresForm = false;
        if (!idProductoInput.value) {
            mostrarError('menu', 'Selecciona un menú');
            erroresForm = true;
        }
        if (!fechaEventoInput.value) {
            mostrarError('fecha', 'Selecciona fecha');
            erroresForm = true;
        }
        if (!horaEventoInput.value) {
            mostrarError('hora', 'Selecciona hora');
            erroresForm = true;
        }
        if (!conceptoInput.value.trim()) {
            mostrarError('concepto', 'Introduce concepto');
            erroresForm = true;
        }

        if (erroresForm) {
            return;
        }

        const formData = new FormData();
        formData.append('action', 'verificar_disponibilidad');
        formData.append('fecha_evento', fechaEventoInput.value);
        formData.append('hora_evento', horaEventoInput.value);

        try {
            const res = await fetch('../controllers/controller_agenda.php', {
                method: 'POST',
                body: formData
            });
            const result = await res.json();

            if (result.success) {
                cambiarPaso(2);
                initMap();
            } else if (result.message === 'conflicto_reservacion') {
                bsConflictoModal.show();
            } else {
                alert('Error en la verificación: ' + result.message);
            }
        } catch (err) {
            console.error(err);
            alert('Ocurrió un error inesperado al verificar la disponibilidad. Revisa la consola para más detalles.');
        }
    }

   
    async function guardarReservaConEfectivo() {
        ocultarTodosLosErrores();
        let erroresForm = false;
        const regexTelefono = /^[0-9]{10}$/;
        const regexNombre = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]+[.]?$/;
        const regexDireccion = /^[a-zA-Z0-9\s#.,áéíóúÁÉÍÓÚñÑ-]+[.]?$/;

        if (!direccionTextoInput.value || !validarCampo(direccionTextoInput.value, regexDireccion)) {
            mostrarError('direccion', 'Selecciona una dirección válida');
            erroresForm = true;
        }
        if (!validarCampo(nombreClienteInput.value, regexNombre)) {
            mostrarError('nombre', 'Nombre inválido');
            erroresForm = true;
        }
        if (!validarCampo(telefonoInput.value, regexTelefono)) {
            mostrarError('telefono', 'Teléfono inválido');
            erroresForm = true;
        }
        if (referenciaInput.value && !validarCampo(referenciaInput.value, regexDireccion)) {
            mostrarError('referencia', 'Referencia inválida');
            erroresForm = true;
        }
        if (notasInput.value && !validarCampo(notasInput.value, regexDireccion)) {
            mostrarError('notas', 'Notas inválidas');
            erroresForm = true;
        }

        if (erroresForm) {
            cambiarPaso(2);
            return;
        }

        const formData = new FormData(agendaForm);
        formData.append('action', 'guardar_reserva');
        formData.append('metodo_pago', 'cash');

        // ✅ INICIO DE LA MODIFICACIÓN
        // 1. Forzamos que el anticipo enviado al backend sea '0'
        formData.set('anticipo', '0');
        // ✅ FIN DE LA MODIFICACIÓN

        try {
            const res = await fetch('../controllers/controller_agenda.php', {
                method: 'POST',
                body: formData
            });
            const result = await res.json();

            if (result.success) {
                // ✅ INICIO DE LA MODIFICACIÓN
                // 2. Actualizamos la confirmación visual para que muestre un anticipo de '0'
                updateConfirmation(result.id_agenda, '0', 'En Sucursal');
                // ✅ FIN DE LA MODIFICACIÓN
                
                cambiarPaso(4);
                sessionStorage.removeItem('agendarData');
            } else {
                alert('Error al guardar la reserva: ' + result.message);
            }
        } catch (err) {
            console.error(err);
            alert('Ocurrió un error inesperado al guardar la reserva. Revisa la consola para más detalles.');
        }
    }


    async function finalizarReservaDesdeURL() {
        const urlParams = new URLSearchParams(window.location.search);
        const idAgenda = urlParams.get('id_agenda');
        const status = urlParams.get('status');

        if (idAgenda && status) {
            try {
                const res = await fetch(`../controllers/controller_agenda.php?action=obtener_agenda_por_id&id_agenda=${idAgenda}`);
                const result = await res.json();

                if (result.success && result.data) {
                    updateConfirmation(result.data);
                    cambiarPaso(4);
                } else {
                    alert('Error al cargar los datos de la reserva: ' + result.message);
                }
            } catch (err) {
                console.error(err);
                alert('Ocurrió un error al finalizar la reserva.');
            }
        }
    }

    // =========================================================================
    // 4. EVENTOS
    // =========================================================================

    paquetes.forEach(p => {
        p.addEventListener('click', function() {
            paquetes.forEach(pc => pc.classList.remove('selected'));
            this.classList.add('selected');
            const precio = parseFloat(this.querySelector('.package-price').textContent.replace('$', ''));
            const anticipoMinimo = (precio / 2).toFixed(0);
            idProductoInput.value = this.dataset.id;
            precioProductoInput.value = precio;
            anticipoInput.value = anticipoMinimo;
            anticipoInput.readOnly = true;
            mensajeAnticipo.textContent = `Se requiere un anticipo fijo de $${anticipoMinimo}.`;
            mensajeAnticipo.style.display = 'block';
            mostrarError('menu', '');
        });
    });

    telefonoInput.addEventListener('input', function() {
        this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);
    });

    searchAddressBtn.addEventListener('click', async function() {
        const query = addressSearchInput.value.trim();
        if (!query) return;
        try {
            const res = await fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=1`);
            const data = await res.json();
            if (data && data.length > 0) {
                actualizarMarcador(data[0].lat, data[0].lon, data[0].display_name);
            } else {
                alert('No se encontraron resultados para esta dirección.');
            }
        } catch (err) {
            console.error(err);
            alert('Ocurrió un error en la búsqueda.');
        }
    });

    nextStepBtn.addEventListener('click', verificarDisponibilidad);
    nextStepBtn2.addEventListener('click', function(event) {
        event.preventDefault();
        ocultarTodosLosErrores();
        let erroresForm = false;
        const regexTelefono = /^[0-9]{10}$/;
        const regexNombre = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]+[.]?$/;
        const regexDireccion = /^[a-zA-Z0-9\s#.,áéíóúÁÉÍÓÚñÑ-]+[.]?$/;

        if (!direccionTextoInput.value || !validarCampo(direccionTextoInput.value, regexDireccion)) {
            mostrarError('direccion', 'Selecciona una dirección válida');
            erroresForm = true;
        }
        if (!validarCampo(nombreClienteInput.value, regexNombre)) {
            mostrarError('nombre', 'Nombre inválido');
            erroresForm = true;
        }
        if (!validarCampo(telefonoInput.value, regexTelefono)) {
            mostrarError('telefono', 'Teléfono inválido');
            erroresForm = true;
        }
        if (referenciaInput.value && !validarCampo(referenciaInput.value, regexDireccion)) {
            mostrarError('referencia', 'Referencia inválida');
            erroresForm = true;
        }
        if (notasInput.value && !validarCampo(notasInput.value, regexDireccion)) {
            mostrarError('notas', 'Notas inválidas');
            erroresForm = true;
        }

        if (!erroresForm) {
            cambiarPaso(3);
            updateSummary();
        }
    });

    if (pagoBtn) pagoBtn.addEventListener('click', pagarConMercadoPago);
    if (cashBtn) cashBtn.addEventListener('click', guardarReservaConEfectivo);
    if (prevStepBtn) prevStepBtn.addEventListener('click', () => cambiarPaso(1));
    if (prevStepBtn3) prevStepBtn3.addEventListener('click', () => cambiarPaso(2));
    if (downloadBtn) {
        downloadBtn.addEventListener('click', descargarComprobante);
    }

    if (whatsappBtn) {
        whatsappBtn.addEventListener('click', function() {
            const id_agenda = idAgendaDisplay.textContent;
            const nombre_cliente = nombreDisplay.textContent;
            const telefono_cliente = telefonoDisplay.textContent;
            const fecha_hora = fechaHoraDisplay.textContent;
            const concepto = conceptoDisplay.textContent;
            const menu = menuDisplay.textContent;
            const anticipo = anticipoDisplay.textContent;
            const metodo_pago = metodoPagoDisplay.textContent;
            const direccion = direccionDisplay.textContent;

            const latitud = latitudInput.value;
            const longitud = longitudInput.value;

            let message = `🎉 *¡Hola! Aquí está la reservación de TAQUIZA* 🎉
---
*Número de Agenda:* ${id_agenda}
*Menú Seleccionado:* ${menu}
*Fecha y Hora:* ${fecha_hora}
*Concepto del Evento:* ${concepto}
*Dirección:* ${direccion}
*Anticipo Pagado:* ${anticipo}
*Método de Pago:* ${metodo_pago}
*Nombre:* ${nombre_cliente}
*Teléfono:* ${telefono_cliente}
`;

            if (latitud && longitud) {
                message += `
*Ubicación:*
https://www.google.com/maps/search/?api=1&query=${latitud},${longitud}
`;
            }

            message += `---
¡Gracias por tu reserva! Un miembro de nuestro equipo se pondrá en contacto contigo pronto. 😊`;

            const whatsappURL = `https://wa.me/527472603325?text=${encodeURIComponent(message)}`;

            window.open(whatsappURL, '_blank');
        });
    }

    // =========================================================================
    // 5. DATE PICKER E INICIALIZACIÓN
    // =========================================================================
    flatpickr("#fecha_evento", {
        dateFormat: "Y-m-d",
        minDate: "today",
        maxDate: new Date().fp_incr(5 * 30),
        disableMobile: true
    });

    finalizarReservaDesdeURL();
});