// 🔥 CONFIG
const DATA_SOURCE = "local"; // futuro: "remote"
const API_URL = "https://sheetdb.io/api/v1/TU_API";

let data = [];
let carrito = [];
let actualIndex = 0;
let productosFiltrados = [];

let cantidadActual = 1;
let precioBase = 0;

function extraerValoresPrecio(precio){
    if(precio === null || precio === undefined) return [];

    if(typeof precio === 'number' && Number.isFinite(precio)){
        return [precio];
    }

    const texto = String(precio)
        .replace(/\$/g, '')
        .replace(/[.,](?=\d{3}\b)/g, '');

    const valores = (texto.match(/\d+/g) || [])
        .map(n => Number(n))
        .filter(Number.isFinite);

    return valores;
}

function formatearPrecio(precio){
    const valores = extraerValoresPrecio(precio);

    if(valores.length === 0){
        return '$0';
    }

    const min = Math.min(...valores);
    const max = Math.max(...valores);

    if(min === max){
        return `$${min.toLocaleString('es-CO')}`;
    }

    return `$${min.toLocaleString('es-CO')} a $${max.toLocaleString('es-CO')}`;
}

function resolverRutaFoto(foto){
    const fallback = 'assets/img/default.jpg';
    if(!foto) return fallback;

    const valor = String(foto).trim();
    if(!valor) return fallback;

    if(/^https?:\/\//i.test(valor) || valor.startsWith('assets/img/')){
        return valor;
    }

    if(/\.(webp|jpe?g|png|gif|avif)$/i.test(valor)){
        return `assets/img/${valor}`;
    }

    return `assets/img/${valor}.webp`;
}


// GUARDAR CARRITO
function cargarCarrito(){
    const data = localStorage.getItem('carrito');

    if(data){
        carrito = JSON.parse(data);
    } else {
        carrito = [];
    }
}
// 🚀 CARGAR DATOS
async function cargarDatos() {
    try {
        let response;

        if (DATA_SOURCE === "local") {
            response = await fetch('data/productos.json');
        } else {
            response = await fetch(API_URL);
        }

        let json = await response.json();

        // 🔄 NORMALIZACIÓN
        data = json.map(p => ({
            ...p,
            categoria: p.categoria?.toUpperCase().trim(),
            stock: p.stock === false ? false : true
        }))
        .filter(p => p.stock);

        productosFiltrados = data;

        console.log("DATA CARGADA:", data);

        renderCategorias();
        renderProductos(data);

    } catch (error) {
        console.error("Error cargando datos:", error);
    }
}

document.addEventListener("DOMContentLoaded", () => {
    cargarCarrito();   // 🔥 PRIMERO
    actualizarBadge(); // 🔥 SEGUNDO
    cargarDatos();     // 🔥 TERCERO
});


// 🔞 MODAL EDAD
function aceptarEdad(){
    document.getElementById('ageModal').style.display = 'none';
}


// 📂 CATEGORÍAS
function renderCategorias(){
    const cont = document.getElementById('categorias');

    const categoriasBase = [
        "COMIDA",
        "PECERAS",
        "FROZEN DRINKS",
        "HUMO",
        "CERVEZA",
        "BEBIDAS"
    ];

    const cats = [...new Set([...categoriasBase, ...data.map(p => p.categoria)])];

    cont.innerHTML = `
    <div class="categoria-btn" onclick="filtrar('TODOS')">
        TODOS
    </div>
    `;

    cats.forEach(c => {
        cont.innerHTML += `
            <div class="categoria-btn" onclick="filtrar('${c}')">
                ${c}
            </div>
        `;
    });
}

// 🔎 FILTRAR
function filtrar(cat){
    productosFiltrados = cat === 'TODOS'
        ? data
        : data.filter(p => p.categoria === cat);

    renderProductos(productosFiltrados);
}


// 🍸 RENDER PRODUCTOS
function renderProductos(lista){
    const cont = document.getElementById('productos');
    cont.innerHTML = '';

    if(lista.length === 0){
        cont.innerHTML = `<p class="text-center">No hay productos</p>`;
        return;
    }

    lista.forEach((p,i) => {
        cont.innerHTML += `
        <div class="col-6 col-md-4 col-sm-6 col-lg-3 mb-4 fade-in container-producto">
            <div class="card card-click" onclick="verProducto(${i})">
                
                <img src="${resolverRutaFoto(p.foto)}" 
                     onerror="this.src='assets/img/default.jpg'">
                <div class="p-3">
                    <h6>${p.titulo}</h6>
                    <p class="precio-card">
                        ${formatearPrecio(p.precio)}
                    </p>
                    <button class="btn-ver-mas">
                        Ver más
                    </button>
                </div>

            </div>
        </div>
        `;
    });
}


// 🔍 BUSCADOR
const buscador = document.getElementById('buscador');

if(buscador){
    buscador.addEventListener('input', e => {
        const val = e.target.value.toLowerCase();

        const filtrados = data.filter(p =>
            p.titulo.toLowerCase().includes(val)
        );

        productosFiltrados = filtrados;
        renderProductos(filtrados);
    });
}


// 📦 MODAL PRODUCTO
function verProducto(index){
    actualIndex = index;
    mostrarProducto();
}

function mostrarProducto(){
    const p = productosFiltrados[actualIndex];

    if(!p) return;

    const modalImg = document.getElementById('modal-img');
    modalImg.src = resolverRutaFoto(p.foto);
    modalImg.onerror = () => {
        modalImg.onerror = null;
        modalImg.src = 'assets/img/default.jpg';
    };
    document.getElementById('modal-title').innerText = p.titulo;
    document.getElementById('modal-desc').innerText = p.descripcion || '';

    // 💰 Precio directo (sin cantidad)
    document.getElementById('modal-price').innerText = formatearPrecio(p.precio);

    document.getElementById('productoModal').classList.remove('hidden');
}


// ❌ CERRAR MODAL
function cerrarModal(){
    document.getElementById('productoModal').classList.add('hidden');
}


// ⬅️➡️ NAVEGACIÓN
function nextProducto(){
    actualIndex = (actualIndex + 1) % productosFiltrados.length;
    mostrarProducto();
}

function prevProducto(){
    actualIndex = (actualIndex - 1 + productosFiltrados.length) % productosFiltrados.length;
    mostrarProducto();
}

// 🧾 VER PEDIDO
function verPedido(){
    const cont = document.getElementById('listaPedido');
    cont.innerHTML = '';

    if(carrito.length === 0){
        cont.innerHTML = `<p>Hola, no has elegido productos aún.</p>`;
    }

    carrito.forEach(p => {
        cont.innerHTML += `
        <div class="d-flex mb-2 align-items-center">
            <img src="${resolverRutaFoto(p.foto)}" width="50" 
                 onerror="this.src='assets/img/default.jpg'">
            <span class="ms-2">${p.titulo} x${p.cantidad}</span>
        </div>
        `;
    });

    document.getElementById('pedidoModal').classList.remove('hidden');
}


// ❌ CERRAR PEDIDO
function cerrarPedido(){
    document.getElementById('pedidoModal').classList.add('hidden');
}

function ir(url){
    window.location.href = url;
}

const page = document.body.getAttribute('data-page');

document.querySelectorAll('.card-menu').forEach(card => {
    if(card.innerText.toLowerCase().includes(page)){
        card.style.background = "rgba(0,255,200,0.2)";
    }
});

// ❌ CONTADOR PEDIDO
function actualizarBadge(){
    const badge = document.getElementById('badgePedido');

    if(!badge) return; // 🔥 evita error

    const total = carrito.reduce((acc, p) => acc + p.cantidad, 0);

    badge.innerText = total;
    badge.style.display = total > 0 ? 'block' : 'none';
}


// 🛒 CARRITO
function agregarPedido(){
    const p = productosFiltrados[actualIndex];

    // 🔥 evitar duplicados
    const existente = carrito.find(item => item.id === p.id);

    if(existente){
        existente.cantidad += cantidadActual;
    } else {
        carrito.push({ 
            ...p, 
            cantidad: cantidadActual 
        });
    }

    guardarCarrito();   // 💾 CLAVE (FALTABA)
    actualizarBadge();

    if(typeof animarPedido === "function"){
        animarPedido();
    }

    cerrarModal();
}

// 🔽 FINAL GUARDAR PEDIDO
document.addEventListener("DOMContentLoaded", () => {
    cargarCarrito();
    actualizarBadge();
});
