<?php
if (isset($_GET['debug']) && $_GET['debug'] === '1') {
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);
}
?>
<!doctype html>
<html lang="es">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Últimos productos ingresados al catálogo AIT Store. Descubre las novedades disponibles.">
    <title>Gaming y Periféricos | AIT Store</title>
    <link rel="stylesheet" href="assets/css/storefront.css">
    <style>
        .sf-filters { padding: 20px 0; margin-bottom: 20px; }
        .sf-filters label { font-weight: 600; margin-bottom: 10px; display: block; }
        #sf-filter-group { display: flex; flex-wrap: wrap; gap: 10px; }
        .sf-filter-btn { padding: 8px 16px; border: 2px solid #e0e0e0; border-radius: 25px; background: #fff; cursor: pointer; }
        .sf-filter-btn.active { background: #2D8C6E; color: #fff; border-color: #2D8C6E; }
        #sf-search { width: 100%; padding: 12px 20px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; margin-bottom: 20px; }
    </style>
</head>

<body class="storefront">
    <nav class="sf-navbar">
        <div class="sf-wrap sf-navbar-inner">
            <a class="sf-brand-logo" href="tienda.php">
                <img src="logo_ait.jpeg" alt="AIT Store" class="sf-brand-img">
                <span class="sf-brand-name">AIT <strong>Store</strong></span>
            </a>
            <ul class="sf-nav-links">
                <li><a href="tienda.php">Tienda</a></li>
                <li><a href="promociones.php">Promociones</a></li>
                <li><a href="novedades.php">Novedades</a></li>
                <li><a href="gaming.php" class="sf-nav-active">Gaming y Periféricos</a></li>
                <li><a href="contacto.php">Contacto</a></li>
            </ul>
            <span class="sf-brand-tagline">Artículos e Insumos Tecnológicos</span>
        </div>
    </nav>

    <header class="sf-hero">
        <div class="sf-wrap">
            <h1>Gaming y Periféricos</h1>
            <p>Los últimos 60 productos gaming y periféricos de nuestro catálogo. Siempre actualizado.</p>
            <p class="sf-code" id="sf-result-count" style="margin-top: 8px;"></p>
        </div>
    </header>

    <main class="sf-wrap">
        <div class="sf-filters">
            <label>Filtrar por categoría:</label>
            <div id="sf-filter-group">
                <button type="button" class="sf-filter-btn active" data-filter="all">Todos</button>
                <button type="button" class="sf-filter-btn" data-filter="mouse">Mouse</button>
                <button type="button" class="sf-filter-btn" data-filter="teclado">Teclados</button>
                <button type="button" class="sf-filter-btn" data-filter="audio">Audio</button>
                <button type="button" class="sf-filter-btn" data-filter="monitor">Monitores</button>
                <button type="button" class="sf-filter-btn" data-filter="silla">Sillas</button>
                <button type="button" class="sf-filter-btn" data-filter="webcam">Webcam</button>
            </div>
        </div>
        <input type="text" id="sf-search" placeholder="Buscar productos gaming...">

        <section class="sf-grid" id="sf-grid">
            <div class="sf-skeleton-loader" id="sf-initial-loader" aria-label="Cargando productos...">
                <?php for ($i = 0; $i < 12; $i++): ?>
                    <div class="sf-skeleton-card"></div>
                <?php endfor; ?>
            </div>
        </section>
        <div class="sf-pagination" id="sf-pagination" style="display:none">
            <button type="button" class="sf-btn sf-btn-primary" id="sf-load-more">Cargar más</button>
        </div>
    </main>

    <script>
        (function () {
            var count          = document.getElementById('sf-result-count');
            var grid           = document.getElementById('sf-grid');
            var loadMoreBtn    = document.getElementById('sf-load-more');
            var paginationWrap = document.getElementById('sf-pagination');
            var initialLoader  = document.getElementById('sf-initial-loader');
            var currentAbortController = null;
            var page        = 1;
            var perPage     = 12;
            var totalLoaded = 0;
            var allProducts = [];
            var currentFilter = 'all';
            var currentSearch = '';

var filterKeywords = {
                'all': ['gamer', 'gaming', 'gamer', 'pc gamer', 'computadora', 'setup gamer'],
                'mouse': ['mouse gamer', 'mouse inalambrico', 'mouse rgb', 'mouse ergonomico', 'raton gamer', 'ratón gamer'],
                'teclado': ['teclado gamer', 'teclado mecanico', 'teclado rgb', 'teclado inalambrico', 'teclado mecanico', 'keyboard gamer'],
                'audio': ['audifono', 'auricular', 'headset gamer', 'audifonos gamer', 'auriculares gamer', 'microfono gamer'],
                'monitor': ['monitor gamer', 'monitor 144hz', 'monitor 240hz', 'pantalla gamer'],
                'silla': ['silla gamer', 'silla ergonomica', 'escritorio gamer'],
                'webcam': ['webcam', 'camara web', 'camara', 'video conferencia']
            };

            var filterCategories = {
                'mouse': ['mouse', 'ratón', 'raton', 'mousepad'],
                'teclado': ['teclado', 'keyboard'],
                'audio': ['audifono', 'auricular', 'headset', 'microfono'],
                'monitor': ['monitor', 'pantalla', 'display'],
                'silla': ['silla', 'escritorio'],
                'webcam': ['webcam', 'camara']
            };

            var filterCategories = {
                'mouse': ['mouse', 'ratón', 'raton', 'mousepad', 'pad'],
                'teclado': ['teclado', 'keyboard'],
                'audio': ['audifono', 'auricular', 'headset', 'microfono'],
                'monitor': ['monitor', 'pantalla', 'display'],
                'silla': ['silla', 'escritorio'],
                'webcam': ['webcam', 'camara']
            };

            function updateCount(loaded, total) {
                if (!count) return;
                count.textContent = 'Mostrando ' + loaded + ' de ' + total + ' productos';
            }

            function updateLoadMore(show) {
                if (!loadMoreBtn) return;
                loadMoreBtn.style.display = show ? '' : 'none';
                if (paginationWrap) paginationWrap.style.display = show ? '' : 'none';
            }

            function formatPrice(raw) {
                var adjusted = parseFloat(raw) || 0;
                return 'Bs. ' + adjusted.toLocaleString('es-BO', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function buildWhatsAppLink(p) {
                var text = 'Hola, me interesa este producto: ' + (p.name || '') +
                    ' (Código: ' + (p.code || '') + ') - Precio: ' + formatPrice(p.price_final || 0);
                return 'https://wa.me/59175060017?text=' + encodeURIComponent(text);
            }

            function escapeHtml(text) {
                return String(text || '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function renderCards(items, append) {
                if (!grid) return;

                var html = '';
                items.forEach(function (p) {
                    var searchKey = (p.name || '') + ' ' + (p.code || '') + ' ' + (p.brand || '');
                    html += '<article class="sf-card js-product-card" data-search="' + escapeHtml(searchKey) + '">';
                    html += '  <div class="sf-thumb">';
                    html += '    <img loading="lazy" src="' + escapeHtml(p.image) + '" alt="' + escapeHtml(p.name) + '">';
                    html += '  </div>';
                    html += '  <div>';
                    html += '    <h3 class="sf-title">' + escapeHtml(p.name) + '</h3>';
                    html += '    <p class="sf-brand">' + escapeHtml(p.brand) + '</p>';
                    html += '    <p class="sf-code">Código: ' + escapeHtml(p.code) + '</p>';
                    html += '  </div>';
                    html += '  <p class="sf-price">' + escapeHtml(formatPrice(p.price_final || 0)) + '</p>';
                    html += '  <p class="sf-stock">Stock La Paz: ' + parseInt(p.stock_lapaz || 0, 10) + '</p>';
                    html += '  <p class="sf-stock">Stock interior: ' + parseInt(p.stock_interior || 0, 10) + '</p>';
                    html += '  <div class="sf-actions"';
                    html += '    data-id="' + parseInt(p.id, 10) + '"';
                    html += '    data-name="' + escapeHtml(p.name) + '"';
                    html += '    data-code="' + escapeHtml(p.code) + '"';
                    html += '    data-price="' + escapeHtml(formatPrice(p.price_final || 0)) + '">';
                    html += '    <div class="sf-actions-row">';
                    html += '      <a class="sf-btn sf-btn-secondary" href="tienda_producto.php?id=' + parseInt(p.id, 10) + '">Ver detalle</a>';
                    html += '      <a class="sf-btn sf-btn-whatsapp" target="_blank" rel="noopener" href="' + escapeHtml(buildWhatsAppLink(p)) + '">WhatsApp</a>';
                    html += '    </div>';
                    html += '    <button type="button" class="sf-btn sf-btn-quote js-cotizar">Solicitar cotización</button>';
                    html += '  </div>';
                    html += '</article>';
                });

                if (!append && items.length === 0) {
                    html = '<div class="sf-empty"><h2>Sin productos</h2><p>No hay productos disponibles en este momento.</p></div>';
                }

                if (append) {
                    grid.insertAdjacentHTML('beforeend', html);
                } else {
                    grid.innerHTML = html;
                }

                if (initialLoader) initialLoader.style.display = 'none';
            }

            function fetchAndRender(resetPage) {
                if (resetPage) page = 1;

                if (currentAbortController) currentAbortController.abort();
                currentAbortController = typeof AbortController !== 'undefined' ? new AbortController() : null;

                var fetchOptions = { headers: { 'Accept': 'application/json' } };
                if (currentAbortController) fetchOptions.signal = currentAbortController.signal;

                var url = 'gaming_search.php?page=' + encodeURIComponent(page) +
                    '&per_page=' + encodeURIComponent(perPage) +
                    '&category=' + encodeURIComponent(currentFilter) +
                    '&search=' + encodeURIComponent(currentSearch);

                fetch(url, fetchOptions)
                    .then(function (response) { return response.json(); })
                    .then(function (payload) {
                        if (!payload || !Array.isArray(payload.items)) {
                            payload = { items: [], total: 0, has_more: false };
                        }
                        if (resetPage) totalLoaded = 0;
                        totalLoaded += payload.items.length;
                        allProducts = payload.items;
                        filterAndRender();
                    })
                    .catch(function (err) {
                        if (err && err.name === 'AbortError') return;
                        updateCount(0, 0);
                        updateLoadMore(false);
                    });
            }

            function filterAndRender() {
                // El PHP filtra por categoría, aquí solo búsqueda de texto
                var filtered = allProducts.filter(function(p) {
                    if (!currentSearch) return true;
                    var text = ((p.name || '') + ' ' + (p.brand || '') + ' ' + (p.code || '')).toLowerCase();
                    return text.indexOf(currentSearch) !== -1;
                });
                renderCards(filtered, false);
                updateCount(filtered.length, filtered.length);
                updateLoadMore(false);
            }

            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function () {
                    page += 1;
                    fetchAndRender(false);
                });
            }

            // Filter buttons
            var filterBtns = document.querySelectorAll('.sf-filter-btn');
            filterBtns.forEach(function(btn) {
                btn.addEventListener('click', function() {
                    filterBtns.forEach(function(b) {
                        b.classList.remove('active');
                        b.style.background = '#fff';
                        b.style.color = '#333';
                    });
                    btn.classList.add('active');
                    btn.style.background = '#2D8C6E';
                    btn.style.color = '#fff';
                    currentFilter = btn.getAttribute('data-filter');
                    currentSearch = '';
                    if (searchInput) searchInput.value = '';
                    fetchAndRender(true);
                });
            });

// Search input - hacer fetch nuevo con búsqueda
            var searchInput = document.getElementById('sf-search');
            var searchTimeout;
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function() {
                    currentSearch = searchInput.value.trim().toLowerCase();
                    fetchAndRender(true);
                }, 300);
            });

            fetchAndRender(true);

            // --- Modal cotizacion ---
            var modal     = document.getElementById('sf-modal-cotizar');
            var modalForm = document.getElementById('sf-modal-form');
            var modalMsg  = document.getElementById('sf-modal-msg');

            function openModal(id, name, code, price) {
                if (!modal) return;
                document.getElementById('sf-lead-producto-id').value     = id    || '';
                document.getElementById('sf-lead-producto-nombre').value = name  || '';
                document.getElementById('sf-lead-producto-codigo').value = code  || '';
                document.getElementById('sf-lead-precio').value          = price || '';
                document.getElementById('sf-modal-producto-label').textContent = name || '';
                if (modalMsg) { modalMsg.textContent = ''; modalMsg.className = 'sf-modal-msg'; }
                if (modalForm) modalForm.reset();
                modal.classList.add('is-open');
                document.body.style.overflow = 'hidden';
            }

            function closeModal() {
                if (!modal) return;
                modal.classList.remove('is-open');
                document.body.style.overflow = '';
            }

            document.addEventListener('click', function (evt) {
                var btn = evt.target.closest('.js-cotizar');
                if (btn) {
                    var actionsEl = btn.closest('[data-id]');
                    if (actionsEl) {
                        openModal(
                            actionsEl.getAttribute('data-id'),
                            actionsEl.getAttribute('data-name'),
                            actionsEl.getAttribute('data-code'),
                            actionsEl.getAttribute('data-price')
                        );
                    }
                    return;
                }
                if (evt.target === modal) closeModal();
            });

            var closeBtn = document.getElementById('sf-modal-close');
            if (closeBtn) closeBtn.addEventListener('click', closeModal);

            if (modalForm) {
                modalForm.addEventListener('submit', function (evt) {
                    evt.preventDefault();
                    var submitBtn = modalForm.querySelector('[type=submit]');
                    if (submitBtn) submitBtn.disabled = true;

                    fetch('tienda_lead.php', { method: 'POST', body: new FormData(modalForm) })
                        .then(function (r) { return r.json(); })
                        .then(function (res) {
                            if (submitBtn) submitBtn.disabled = false;
                            if (modalMsg) {
                                modalMsg.textContent = res.message || (res.success ? 'Enviado.' : 'Error.');
                                modalMsg.className   = 'sf-modal-msg ' + (res.success ? 'sf-modal-ok' : 'sf-modal-err');
                            }
                            if (res.success && modalForm) { modalForm.reset(); setTimeout(closeModal, 2200); }
                        })
                        .catch(function () {
                            if (submitBtn) submitBtn.disabled = false;
                            if (modalMsg) {
                                modalMsg.textContent = 'Error de conexión. Intenta nuevamente.';
                                modalMsg.className   = 'sf-modal-msg sf-modal-err';
                            }
                        });
                });
            }
        })();
    </script>

    <!-- Modal de cotizacion -->
    <div id="sf-modal-cotizar" class="sf-modal" role="dialog" aria-modal="true" aria-labelledby="sf-modal-titulo">
        <div class="sf-modal-box">
            <div class="sf-modal-header">
                <h2 id="sf-modal-titulo" class="sf-modal-title">Solicitar Cotización</h2>
                <button type="button" id="sf-modal-close" class="sf-modal-close" aria-label="Cerrar">&times;</button>
            </div>
            <p class="sf-modal-producto" id="sf-modal-producto-label"></p>
            <div id="sf-modal-msg" class="sf-modal-msg"></div>
            <form id="sf-modal-form" autocomplete="off">
                <input type="hidden" name="producto_id"     id="sf-lead-producto-id">
                <input type="hidden" name="producto_nombre" id="sf-lead-producto-nombre">
                <input type="hidden" name="producto_codigo" id="sf-lead-producto-codigo">
                <input type="hidden" name="precio_mostrado" id="sf-lead-precio">
                <div class="sf-field">
                    <label for="sf-lead-nombre">Nombre <span class="sf-req">*</span></label>
                    <input type="text" id="sf-lead-nombre" name="nombre" required autocomplete="name">
                </div>
                <div class="sf-field">
                    <label for="sf-lead-empresa">Empresa</label>
                    <input type="text" id="sf-lead-empresa" name="empresa" autocomplete="organization">
                </div>
                <div class="sf-field">
                    <label for="sf-lead-tel">Teléfono / WhatsApp <span class="sf-req">*</span></label>
                    <input type="tel" id="sf-lead-tel" name="telefono" required autocomplete="tel">
                </div>
                <div class="sf-field">
                    <label for="sf-lead-email">Email</label>
                    <input type="email" id="sf-lead-email" name="email" autocomplete="email">
                </div>
                <div class="sf-field">
                    <label for="sf-lead-mensaje">Mensaje (opcional)</label>
                    <textarea id="sf-lead-mensaje" name="mensaje" rows="3"></textarea>
                </div>
                <button type="submit" class="sf-btn sf-btn-primary" style="width:100%;margin-top:4px;">Enviar solicitud</button>
            </form>
        </div>
    </div>
</body>

</html>