// 🔥 CONFIG
const DATA_SOURCE = "local";
const API_URL = "https://sheetdb.io/api/v1/TU_API";
const DEFAULT_MENU_JSON = 'data/productos-british.json';

let data = [];
let productosFiltrados = [];
let actualIndex = 0;
let categoriaActiva = 'TODOS';
let terminoBusqueda = '';

function obtenerConfigMenu(){
    const body = document.body || {};
    const menuJson = body.dataset?.menuJson || DEFAULT_MENU_JSON;
    const sedeFilter = body.dataset?.sedeFilter || '';

    return { menuJson, sedeFilter };
}

function normalizarTexto(valor){
    return String(valor || '')
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .toLowerCase()
        .trim();
}

function obtenerSedesDelProducto(producto){
    const sedesRaw = String(producto?.Sede || '');

    if(!sedesRaw) return [];

    return sedesRaw
        .split(',')
        .map(s => normalizarTexto(s))
        .filter(Boolean);
}

function cumpleFiltroSede(producto, sedeFilter){
    if(!sedeFilter) return true;

    const sedesProducto = obtenerSedesDelProducto(producto);
    const sedeObjetivo = normalizarTexto(sedeFilter);

    return sedesProducto.includes(sedeObjetivo);
}

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

const META_CATEGORIA = {
    "COMIDA": {
        icono: "fa-burger",
        subtitulo: "Burgers, Wraps y antojos de la casa"
    },
    "PECERAS": {
        icono: "fa-fish-fins",
        subtitulo: "Combos para compartir y celebrar"
    },
    "FROZEN DRINKS": {
        icono: "fa-martini-glass-citrus",
        subtitulo: "Nuestra firma y personalidad"
    },
    "HUMO": {
        icono: "fa-cloud",
        subtitulo: "Complementos para elevar la noche"
    },
    "CERVEZA": {
        icono: "fa-beer-mug-empty",
        subtitulo: "Siempre frías, listas para brindar"
    },
    "BEBIDAS": {
        icono: "fa-glass-water",
        subtitulo: "Opciones sin alcohol y refrescantes"
    },
    "OTROS": {
        icono: "fa-star",
        subtitulo: "Especiales de temporada"
    }
};

const ETIQUETAS_CATEGORIA = {
    "OTROS": "Otras bebidas",
    "CERVEZA": "Cervezas"
};

function formatearNombreCategoria(categoria){
    const clave = String(categoria || 'OTROS').toUpperCase().trim();

    if(ETIQUETAS_CATEGORIA[clave]){
        return ETIQUETAS_CATEGORIA[clave];
    }

    return clave
        .toLowerCase()
        .split(/\s+/)
        .filter(Boolean)
        .map(palabra => palabra.charAt(0).toUpperCase() + palabra.slice(1))
        .join(' ');
}

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`;
}

// 🚀 CARGAR DATOS
async function cargarDatos() {
    try {
        const { menuJson, sedeFilter } = obtenerConfigMenu();
        const origenPrincipal = DATA_SOURCE === "local" ? menuJson : API_URL;
        let response = await fetch(origenPrincipal);

        if(!response.ok && DATA_SOURCE === "local" && menuJson !== DEFAULT_MENU_JSON){
            response = await fetch(DEFAULT_MENU_JSON);
        }

        const json = await response.json();

        const base = json
            .map(p => ({
                ...p,
                categoria: p.categoria?.toUpperCase().trim(),
                stock: p.stock !== false
            }))
            .filter(p => p.stock);

        const hayDatosSede = base.some(p => String(p?.Sede || '').trim().length > 0);

        data = hayDatosSede && sedeFilter
            ? base.filter(p => cumpleFiltroSede(p, sedeFilter))
            : base;

        categoriaActiva = 'TODOS';
        aplicarFiltros();

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

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

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

    cont.innerHTML = `
        <div class="categoria-btn ${categoriaActiva === 'TODOS' ? 'active' : ''}" onclick="filtrar('TODOS')">
            Todos
        </div>
    `;

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

function obtenerCategoriasOrdenadas(lista){
    const categoriasPresentes = [...new Set(lista.map(p => p.categoria || 'OTROS'))];
    const prioridad = ['CERVEZA', 'OTROS'];
    const destacadas = prioridad.filter(c => categoriasPresentes.includes(c));
    const base = CATEGORIAS_BASE.filter(c => categoriasPresentes.includes(c) && !prioridad.includes(c));
    const extras = categoriasPresentes.filter(c => !CATEGORIAS_BASE.includes(c) && !prioridad.includes(c));

    return [...destacadas, ...base, ...extras];
}

function obtenerProductosFiltrados(){
    return data.filter(p => {
        const coincideCategoria = categoriaActiva === 'TODOS' || p.categoria === categoriaActiva;

        if(!coincideCategoria) return false;

        const termino = normalizarTexto(terminoBusqueda);
        if(!termino) return true;

        const campos = [
            p.titulo,
            p.descripcion,
            formatearNombreCategoria(p.categoria)
        ];

        return campos.some(campo => normalizarTexto(campo).includes(termino));
    });
}

function resolverMetaCategoria(categoria){
    return META_CATEGORIA[categoria] || META_CATEGORIA.OTROS;
}

function slugCategoria(categoria){
    return String(categoria || 'OTROS')
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
}

function aplicarFiltros(){
    productosFiltrados = obtenerProductosFiltrados();
    renderCategorias();
    renderProductos(productosFiltrados);
}

// 🔎 FILTRAR
function filtrar(cat){
    categoriaActiva = cat;
    aplicarFiltros();
}

function iniciarBuscador(){
    const input = document.getElementById('buscador');
    if(!input) return;

    input.addEventListener('input', () => {
        terminoBusqueda = input.value || '';
        aplicarFiltros();
    });
}

// 🍸 RENDER
function renderProductos(lista){
    const cont = document.getElementById('productos');
    if(!cont) return;

    cont.innerHTML = '';

    if(lista.length === 0){
        cont.innerHTML = `
            <div class="menu-empty-state fade-in">
                <i class="fa-solid fa-magnifying-glass"></i>
                <p>¡Oops!... ¡No la tenemos!</p>
            </div>
        `;
        return;
    }

    const grupos = new Map();

    lista.forEach((p, index) => {
        const categoria = p.categoria || 'OTROS';

        if(!grupos.has(categoria)){
            grupos.set(categoria, []);
        }

        grupos.get(categoria).push({ p, index });
    });

    const categorias = obtenerCategoriasOrdenadas(lista);

    cont.innerHTML = categorias.map((categoria) => {
        const items = grupos.get(categoria) || [];

        if(items.length === 0) return '';

        const cards = items.map(({ p, index }) => `
            <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(${index})">
                    <img src="${resolverRutaFoto(p.foto)}" 
                         onerror="this.onerror=null; 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" onclick="event.stopPropagation(); verProducto(${index})">
                            Ver más
                        </button>
                    </div>
                </div>
            </div>
        `).join('');

        return `
            <section class="menu-section-block fade-in">
                <h2 class="menu-section-title">${formatearNombreCategoria(categoria)}</h2>
                <div class="row menu-products-grid">
                    ${cards}
                </div>
            </section>
        `;
    }).join('');
}

document.addEventListener("DOMContentLoaded", () => {
    iniciarBuscador();
    cargarDatos();
});

// 📦 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();
}
