document.addEventListener('DOMContentLoaded', () => {
    const categoriesContainer = document.getElementById('category-tabs');
    const productsContainer = document.getElementById('product-list');
    const loader = document.getElementById('loader');

    let allProducts = [];
    let allGroups = [];

    const fetchMockData = async () => {
        try {
            const [groupsRes, productsRes] = await Promise.all([
                fetch('data/grupos.json'),
                fetch('data/produtos.json')
            ]);
            allGroups = await groupsRes.json();
            allProducts = await productsRes.json();
            return { groups: allGroups, products: allProducts };
        } catch (error) {
            console.error('Error fetching mock data:', error);
            productsContainer.innerHTML = '<p class="text-danger">Failed to load menu data.</p>';
            return { groups: [], products: [] };
        }
    };

    const renderCategories = (groups) => {
        if (!categoriesContainer) return;
        categoriesContainer.innerHTML = '';
        const nav = document.createElement('ul');
        nav.className = 'nav nav-tabs category-tabs';

        const allTab = document.createElement('li');
        allTab.className = 'nav-item';
        allTab.innerHTML = `<a class="nav-link active" href="#" data-group-id="all">All</a>`;
        nav.appendChild(allTab);

        groups.forEach(group => {
            const tab = document.createElement('li');
            tab.className = 'nav-item';
            tab.innerHTML = `<a class="nav-link" href="#" data-group-id="${group.GRUPCODIGO}">${group.GRUPNOME}</a>`;
            nav.appendChild(tab);
        });
        categoriesContainer.appendChild(nav);

        nav.addEventListener('click', (e) => {
            e.preventDefault();
            if (e.target.tagName === 'A') {
                nav.querySelector('.active').classList.remove('active');
                e.target.classList.add('active');
                const groupId = e.target.getAttribute('data-group-id');
                renderProducts(allProducts, groupId);
            }
        });
    };

    const renderProducts = (products, groupId = 'all') => {
        if (!productsContainer) return;
        productsContainer.innerHTML = '';
        const filteredProducts = groupId === 'all'
            ? products
            : products.filter(p => p.PRODGRUPO == groupId);

        if (filteredProducts.length === 0) {
            productsContainer.innerHTML = '<p class="text-muted">No products found in this category.</p>';
            return;
        }

        filteredProducts.forEach(product => {
            const col = document.createElement('div');
            col.className = 'col-md-4 col-lg-3 mb-4';
            const card = `
                <div class="card product-card h-100">
                    <img src="${product.PRODFOTO || 'https://via.placeholder.com/400x300.png?text=No+Image'}" class="card-img-top" alt="${product.PRODNOME}">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">${product.PRODNOME}</h5>
                        <p class="card-text text-muted">${product.OBS || ''}</p>
                        <div class="mt-auto d-flex justify-content-between align-items-center">
                            <span class="product-price">R$ ${product.PRODPRECOVENDA.toFixed(2)}</span>
                            <button class="btn btn-primary btn-sm">Add</button>
                        </div>
                    </div>
                </div>
            `;
            col.innerHTML = card;
            productsContainer.appendChild(col);
        });
    };

    const init = async () => {
        loader.style.display = 'block';
        const { groups, products } = await fetchMockData();
        loader.style.display = 'none';
        renderCategories(groups);
        renderProducts(products);
    };

    init();
});