let carrito = JSON.parse(localStorage.getItem("carrito")) || [];

// ==========================================
// INICIALIZACIÓN
// ==========================================
document.addEventListener("DOMContentLoaded", () => {
    initMenuFilters();
    initNavbarMobile();
    initReservasForm();
    initContactoForm();
    initCheckoutForm(); 
    
    // Renderizar siempre al cargar cualquier página
    actualizarInterfazCarrito(); 
});
// ==========================================
// 1. NAVBAR MÓVIL (MENÚ HAMBURGUESA)
// ==========================================
function initNavbarMobile() {
    const hamburger = document.getElementById("hamburger");
    const navLinks = document.getElementById("navLinks");
    const links = document.querySelectorAll(".nav-link");

    if (hamburger && navLinks) {
        hamburger.addEventListener("click", () => {
            navLinks.classList.toggle("open");
            hamburger.classList.toggle("active");
        });

        // Cerrar menú al hacer clic en un enlace
        links.forEach(link => {
            link.addEventListener("click", () => {
                navLinks.classList.remove("open");
                hamburger.classList.remove("active");
                
                // Cambiar clase active al link seleccionado
                links.forEach(l => l.classList.remove("active"));
                link.classList.add("active");
            });
        });
    }
}

// ==========================================
// 2. FILTROS DEL MENÚ CARTA
// ==========================================
function initMenuFilters() {
    const filterButtons = document.querySelectorAll(".filter-btn");
    const menuCards = document.querySelectorAll(".menu-card");

    filterButtons.forEach(button => {
        button.addEventListener("click", () => {
            // Remover clase activa de los botones y agregar al actual
            filterButtons.forEach(btn => btn.classList.remove("active"));
            button.classList.add("active");

            const filterValue = button.getAttribute("data-filter");

            // Mostrar/Ocultar platos dinámicamente
            menuCards.forEach(card => {
                const category = card.getAttribute("data-category");
                if (filterValue === "all" || category === filterValue) {
                    card.style.display = "block";
                    // Pequeña animación de entrada
                    card.style.opacity = "0";
                    setTimeout(() => card.style.opacity = "1", 50);
                } else {
                    card.style.display = "none";
                }
            });
        });
    });
}

// ==========================================
// 3. SISTEMA DE CARRITO (PERSISTENTE)
// ==========================================
function toggleCarrito() {
    const cartPanel = document.getElementById("cartPanel");
    if (cartPanel) cartPanel.classList.toggle("open");
}

function agregarAlCarrito(nombre, precio) {
    const itemExistente = carrito.find(item => item.nombre === nombre);
    if (itemExistente) {
        itemExistente.cantidad += 1;
    } else {
        carrito.push({ nombre: nombre, precio: parseFloat(precio), cantidad: 1 });
    }
    guardarYActualizarCarrito();
}

function guardarYActualizarCarrito() {
    localStorage.setItem('carrito', JSON.stringify(carrito));
    actualizarInterfazCarrito();
}

function cambiarCantidad(nombre, cambio) {
    const item = carrito.find(item => item.nombre === nombre);
    if (!item) return;
    item.cantidad += cambio;
    if (item.cantidad <= 0) carrito = carrito.filter(i => i.nombre !== nombre);
    
    guardarYActualizarCarrito();
    
    // Si estamos en la página de checkout, actualiza la vista
    if (document.getElementById("formCheckout")) {
        renderizarResumenPedido();
    }
}

function vaciarCarrito() {
    carrito = [];
    guardarYActualizarCarrito();
}

function confirmarPedido() {
    if (carrito.length === 0) {
        alert("Tu carrito está vacío.");
        return;
    }
    window.location.href = "pedido.php";
}

function actualizarInterfazCarrito() {
    const cartItemsContainer = document.getElementById("cartItems");
    const cartCount = document.getElementById("cartCount");
    const cartTotal = document.getElementById("cartTotal");
    const totalAmount = document.getElementById("totalAmount");

    const numeroArticulos = carrito.reduce((acc, item) => acc + item.cantidad, 0);
    const montoTotal = carrito.reduce((acc, item) => acc + (item.precio * item.cantidad), 0);

    if (cartCount) cartCount.textContent = numeroArticulos;
    if (!cartItemsContainer) return;

    if (carrito.length === 0) {
        cartItemsContainer.innerHTML = '<p class="cart-empty">Tu carrito está vacío 🍽️</p>';
        if (cartTotal) cartTotal.style.display = "none";
    } else {
        if (cartTotal) cartTotal.style.display = "block";
        if (totalAmount) totalAmount.textContent = `S/ ${montoTotal.toFixed(2)}`;
        
        cartItemsContainer.innerHTML = carrito.map(item => `
            <div class="cart-item-row" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed #ddd;">
                <div style="flex: 1;">
                    <h5 style="margin: 0;">${item.nombre}</h5>
                    <small>S/ ${item.precio.toFixed(2)} c/u</small>
                </div>
                <div style="display: flex; align-items: center; gap: 8px;">
                    <button onclick="cambiarCantidad('${item.nombre}', -1)" style="border:none; background:#e0e0e0; border-radius:4px; width:24px; cursor:pointer;">-</button>
                    <span>${item.cantidad}</span>
                    <button onclick="cambiarCantidad('${item.nombre}', 1)" style="border:none; background:#e0e0e0; border-radius:4px; width:24px; cursor:pointer;">+</button>
                </div>
                <span style="font-weight: bold; margin-left:12px;">S/ ${(item.precio * item.cantidad).toFixed(2)}</span>
            </div>
        `).join('');
    }
}

// ==========================================
// 4. VALIDACIÓN DE FORMULARIO DE RESERVAS
// ==========================================
function initReservasForm() {
    const form = document.getElementById("reservaForm");
    if (!form) return;

    form.addEventListener("submit", (e) => {
        e.preventDefault();
        let esValido = true;

        // 1. Validar Nombre
        const nombre = document.getElementById("res-nombre");
        const errNombre = document.getElementById("err-nombre");
        if (nombre.value.trim().length < 3) {
            mostrarError(nombre, errNombre, "Por favor, ingresa tu nombre completo (mín. 3 caracteres)");
            esValido = false;
        } else {
            limpiarError(nombre, errNombre);
        }

        // 2. Validar Teléfono (Formatos de celular peruano de 9 dígitos)
        const telefono = document.getElementById("res-telefono");
        const errTelefono = document.getElementById("err-telefono");
        const regexTelf = /^9\d{8}$/;
        if (!regexTelf.test(telefono.value.trim())) {
            mostrarError(telefono, errTelefono, "Ingresa un número de celular válido (9 dígitos y empezar con 9)");
            esValido = false;
        } else {
            limpiarError(telefono, errTelefono);
        }

        // 3. Validar Fecha (No vacía y no anterior a hoy)
        const fecha = document.getElementById("res-fecha");
        const errFecha = document.getElementById("err-fecha");
        const hoy = new Date().toISOString().split('T')[0];
        if (!fecha.value) {
            mostrarError(fecha, errFecha, "Selecciona una fecha para tu reserva");
            esValido = false;
        } else if (fecha.value < hoy) {
            mostrarError(fecha, errFecha, "No puedes reservar en una fecha pasada");
            esValido = false;
        } else {
            limpiarError(fecha, errFecha);
        }

        // 4. Validar Hora
        const hora = document.getElementById("res-hora");
        const errHora = document.getElementById("err-hora");
        if (hora.value === "") {
            mostrarError(hora, errHora, "Por favor, selecciona una hora de la lista");
            esValido = false;
        } else {
            limpiarError(hora, errHora);
        }

        // 5. Validar Número de Personas (Entre 1 y 20 según las reglas del HTML)
        const personas = document.getElementById("res-personas");
        const errPersonas = document.getElementById("err-personas");
        const numPersonas = parseInt(personas.value);
        if (isNaN(numPersonas) || numPersonas < 1 || numPersonas > 20) {
            mostrarError(personas, errPersonas, "El número de personas debe ser entre 1 y 20");
            esValido = false;
        } else {
            limpiarError(personas, errPersonas);
        }

        // Si todo está correcto, enviar y abrir modal de éxito
        if (esValido) {
            abrirModal(
                "¡Reserva Confirmada!", 
                `Hola ${nombre.value.trim()}, tu mesa para el día ${fecha.value} a las ${hora.value} ha sido guardada con éxito.`, 
                "📅"
            );
            form.reset();
        }
    });
}

// ==========================================
// 5. VALIDACIÓN DE FORMULARIO DE CONTACTO
// ==========================================
function initContactoForm() {
    const form = document.getElementById("contactoForm");
    if (!form) return;

    form.addEventListener("submit", (e) => {
        e.preventDefault();
        let esValido = true;

        // 1. Validar Nombre
        const conNombre = document.getElementById("con-nombre");
        const errConNombre = document.getElementById("err-con-nombre");
        if (conNombre.value.trim().length < 3) {
            mostrarError(conNombre, errConNombre, "Por favor, dinos tu nombre");
            esValido = false;
        } else {
            limpiarError(conNombre, errConNombre);
        }

        // 2. Validar Email
        const conEmail = document.getElementById("con-email");
        const errConEmail = document.getElementById("err-con-email");
        const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!regexEmail.test(conEmail.value.trim())) {
            mostrarError(conEmail, errConEmail, "Ingresa un correo electrónico válido");
            esValido = false;
        } else {
            limpiarError(conEmail, errConEmail);
        }

        // 3. Validar Asunto
        const conAsunto = document.getElementById("con-asunto");
        const errConAsunto = document.getElementById("err-con-asunto");
        if (conAsunto.value.trim().length < 4) {
            mostrarError(conAsunto, errConAsunto, "El asunto es muy corto");
            esValido = false;
        } else {
            limpiarError(conAsunto, errConAsunto);
        }

        // 4. Validar Mensaje
        const conMensaje = document.getElementById("con-mensaje");
        const errConMensaje = document.getElementById("err-con-mensaje");
        if (conMensaje.value.trim().length < 10) {
            mostrarError(conMensaje, errConMensaje, "El mensaje debe tener al menos 10 caracteres");
            esValido = false;
        } else {
            limpiarError(conMensaje, errConMensaje);
        }

        // Si todo es correcto
        if (esValido) {
            abrirModal(
                "¡Mensaje Enviado!", 
                "Hemos recibido tus comentarios. Nos pondremos en contacto contigo lo antes posible.", 
                "✉️"
            );
            form.reset();
        }
    });
}

// ==========================================
// 6. VALIDACIÓN Y PROCESAMIENTO DEL COMPRA (CHECKOUT)
// ==========================================
function initCheckoutForm() {
    const formCheckout = document.getElementById("formCheckout");
    if (!formCheckout) return;
    
    // Renderizar y calcular el resumen al entrar a la vista de pedidos
    renderizarResumenPedido();

    formCheckout.addEventListener("submit", (e) => {
        let esValido = true;

        // 1. Validar Nombre
        const nombre = document.getElementById("nombre");
        const errNombre = document.getElementById("err-nombre");
        if (nombre.value.trim().length < 3) {
            mostrarError(nombre, errNombre, "Por favor, ingresa tu nombre completo (mín. 3 caracteres)");
            esValido = false;
        } else {
            limpiarError(nombre, errNombre);
        }

        // 2. Validar Celular (formato peruano de 9 dígitos)
        const telefono = document.getElementById("telefono");
        const errTelefono = document.getElementById("err-telefono");
        const regexTelf = /^9\d{8}$/;
        if (!regexTelf.test(telefono.value.trim())) {
            mostrarError(telefono, errTelefono, "Ingresa un número de celular válido (9 dígitos y empezar con 9)");
            esValido = false;
        } else {
            limpiarError(telefono, errTelefono);
        }

        // 3. Validar Dirección
        const direccion = document.getElementById("direccion");
        const errDireccion = document.getElementById("err-direccion");
        if (direccion.value.trim().length < 6) {
            mostrarError(direccion, errDireccion, "Proporciona una dirección de entrega detallada");
            esValido = false;
        } else {
            limpiarError(direccion, errDireccion);
        }

        // 4. Validar Ciudad
        const ciudad = document.getElementById("ciudad");
        const errCiudad = document.getElementById("err-ciudad");
        if (ciudad.value.trim().length < 3) {
            mostrarError(ciudad, errCiudad, "Ingresa una ciudad válida");
            esValido = false;
        } else {
            limpiarError(ciudad, errCiudad);
        }

        // Si hay errores de validación, frena el envío
        if (!esValido) {
            e.preventDefault();
        } else {
            // Si el envío es exitoso, vaciamos el carrito local
            localStorage.removeItem("carrito");
        }
    });
}

// Renderiza dinámicamente los items dentro de la caja oscura .reserva-info de pedido.php
function renderizarResumenPedido() {
    const listaItemsResumen = document.getElementById("listaItemsResumen");
    const resumenSubtotal = document.getElementById("resumenSubtotal");
    const resumenTotal = document.getElementById("resumenTotal");
    const inputCartData = document.getElementById("inputCartData");
    const btnConfirmar = document.getElementById("btnConfirmarPedido");

    if (!listaItemsResumen) return;

    if (carrito.length === 0) {
        window.location.href = "menu.php"; // Redirección de seguridad
        return;
    }

    if (inputCartData) inputCartData.value = JSON.stringify(carrito);

    let subtotal = 0;
    listaItemsResumen.innerHTML = carrito.map(item => {
        subtotal += (item.precio * item.cantidad);
        return `<div class="item-resumen" style="display:flex; justify-content:space-between; margin-bottom:10px;">
                    <span>${item.cantidad}x ${item.nombre}</span>
                    <strong>S/ ${(item.precio * item.cantidad).toFixed(2)}</strong>
                </div>`;
    }).join('');

    if (resumenSubtotal) resumenSubtotal.innerText = `S/ ${subtotal.toFixed(2)}`;
    if (resumenTotal) resumenTotal.innerText = `S/ ${subtotal.toFixed(2)}`;
}
// ==========================================
// 7. FUNCIONES AUXILIARES (MANEJO DE ERRORES Y MODAL)
// ==========================================
function mostrarError(inputElement, errorSpan, mensaje) {
    if (errorSpan) {
        errorSpan.textContent = mensaje;
        errorSpan.style.color = "#d9534f"; // Rojo advertencia
        errorSpan.style.fontSize = "0.85rem";
        errorSpan.style.display = "block";
        errorSpan.style.marginTop = "4px";
    }
    inputElement.style.borderColor = "#d9534f";
}

function limpiarError(inputElement, errorSpan) {
    if (errorSpan) {
        errorSpan.textContent = "";
        errorSpan.style.display = "none";
    }
    inputElement.style.borderColor = ""; // Retorna al estilo original de los inputs
}

// Controladores del Modal de Confirmación
function abrirModal(titulo, mensaje, icono = "✅") {
    const overlay = document.getElementById("modalOverlay");
    const modalTitle = document.getElementById("modalTitle");
    const modalMsg = document.getElementById("modalMsg");
    const modalIcon = document.getElementById("modalIcon");

    if (overlay) {
        modalTitle.textContent = titulo;
        modalMsg.textContent = mensaje;
        modalIcon.textContent = icono;
        overlay.style.display = "flex";
    }
}

function cerrarModal() {
    const overlay = document.getElementById("modalOverlay");
    if (overlay) {
        overlay.style.display = "none";
    }
}