<%- include('partials/header') %>

<div class="products-page container py-4">
    <div class="page-header mb-4">
        <h1 class="page-title" data-i18n="<%= pageTitle %>">
            <%= pageTitle %>
        </h1>
        <p class="text-muted">
            <span id="productCount">
                <%= totalProducts %>
            </span> <span data-i18n="product.count">محصول</span>
        </p>
    </div>

    <div class="filter-section mb-4">
        <div class="row g-3">
            <div class="col-md-6">
                <input type="text" id="searchInput" class="form-control text-bg-dark"
                    data-i18n-placeholder="search.placeholder" placeholder="جستجوی محصول">
            </div>
            <div class="col-md-3">
                <select id="sortSelect" class="form-select text-bg-dark">
                    <option value="newest" data-i18n="sort.newest">جدیدترین</option>
                    <option value="oldest" data-i18n="sort.oldest">قدیمی‌ترین</option>
                    <option value="name_asc" data-i18n="sort.name_asc">الفبا (صعودی)</option>
                    <option value="name_desc" data-i18n="sort.name_desc">الفبا (نزولی)</option>
                </select>
            </div>
            <div class="col-md-3">
                <button id="filterBtn" class="btn btn-primary w-100"><span data-i18n="filter.apply">اعمال
                            فیلتر</span><i class="fas fa-filter me-2 ms-2"></i></button>
            </div>
        </div>
    </div>

    <% if (!products || products.length===0) { %>
        <div class="alert alert-warning text-center py-5">
            <h3 data-i18n="no.products">محصولی یافت نشد</h3>
            <a href="/" class="btn btn-primary mt-3" data-i18n="back.to.home">بازگشت به صفحه اصلی</a>
        </div>
    <% } else { %>
        <div class="row g-4" id="productsContainer">
            <% products.forEach(product=> { %>
                <div class="col-md-6 col-lg-3 product-item">
                    <div class="product-card card h-100 shadow-sm text-bg-dark">
                        <div class="product-image">
                            <img src="<%= product.imageUrl %>" class="card-img-top"
                                alt="<%= product.imageAlt %>" loading="lazy" onerror="this.src='/assets/media/images/undefined.webp'">
                        </div>
                        <div class="card-body">
                            <h2 class="card-title h5" data-i18n="<%= product.name %>">
                                <%= product.real_name || product.name %>
                            </h2>
                            <div class="product-meta">
                                <span class="badge bg-info"><%= product.type %></span>
                                <span class="badge bg-success" data-i18n="free">رایگان</span>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-top-0 d-flex gap-2">
                            <a href="/product/<%= product.slug || product.id %>"
                                class="btn btn-outline-primary flex-grow-1" data-i18n="view">مشاهده</a>
                            <button class="btn btn-primary flex-grow-1 download-btn" data-id="<%= product.id %>"
                                data-name="<%= product.name %>">
                                <i class="fas fa-download"></i> <span data-i18n="download">دانلود</span>
                            </button>
                        </div>
                    </div>
                </div>
            <% }) %>
        </div>

        <div id="loadingIndicator" class="text-center py-3" style="display: none;">
            <div class="spinner-border text-primary"></div>
        </div>

        <div id="noMoreData" class="text-center py-3 text-muted" style="display: none;"
            data-i18n="end.of.products">پایان محصولات</div>
    <% } %>
</div>

<script>
    let currentType = '<%= currentType %>';
    let currentOffset = <%= products.length %>;
    let isLoading = false;
    let hasMore = <%= hasMore %>;

    function applyTranslationsToNewElements() {
        if (typeof applyLandingTranslations === 'function') {
            applyLandingTranslations();
        }
        document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
            const key = el.dataset.i18nPlaceholder;
            if (key && typeof lt === 'function') {
                el.placeholder = lt(key);
            }
        });
    }

    function updateProductCount(count) {
        const productCountSpan = document.getElementById('productCount');
        if (productCountSpan) {
            productCountSpan.textContent = count;
        }
    }

    window.addEventListener('scroll', function () {
        if (isLoading || !hasMore) return;
        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
            loadMoreProducts();
        }
    });

    async function loadMoreProducts() {
        if (isLoading || !hasMore) return;
        
        isLoading = true;
        const loadingIndicator = document.getElementById('loadingIndicator');
        if (loadingIndicator) loadingIndicator.style.display = 'block';
        
        try {
            const response = await fetch(`/api/products/${currentType}/load?offset=${currentOffset}`);
            const data = await response.json();
            
            if (data.success && data.products && data.products.length > 0) {
                const container = document.getElementById('productsContainer');
                
                data.products.forEach(product => {
                    const html = `
                        <div class="col-md-6 col-lg-3 product-item">
                            <div class="product-card card h-100 shadow-sm text-bg-dark">
                                <div class="product-image">
                                    <img src="${product.imageUrl || '/assets/media/images/undefined.webp'}" class="card-img-top" alt="${product.imageAlt || 'product'}" loading="lazy" onerror="this.src='/assets/media/images/undefined.webp'">
                                </div>
                                <div class="card-body">
                                    <h2 class="card-title h5" data-i18n="${product.name}">${product.real_name || product.name}</h2>
                                    <div class="product-meta">
                                        <span class="badge bg-info">${product.type}</span>
                                        <span class="badge bg-success" data-i18n="free">رایگان</span>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent border-top-0 d-flex gap-2">
                                    <a href="/product/${product.slug || product.id}" class="btn btn-outline-primary flex-grow-1" data-i18n="view">مشاهده</a>
                                    <button class="btn btn-primary flex-grow-1 download-btn" data-id="${product.id}" data-name="${product.name}">
                                        <i class="fas fa-download"></i> <span data-i18n="download">دانلود</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                    container.insertAdjacentHTML('beforeend', html);
                });
                
                currentOffset += data.products.length;
                hasMore = data.hasMore;
                
                if (!hasMore) {
                    const noMoreData = document.getElementById('noMoreData');
                    if (noMoreData) noMoreData.style.display = 'block';
                }
                
                applyTranslationsToNewElements();
            } else {
                hasMore = false;
                const noMoreData = document.getElementById('noMoreData');
                if (noMoreData) noMoreData.style.display = 'block';
            }
        } catch (error) {
            console.error('Error loading more products:', error);
        } finally {
            isLoading = false;
            const loadingIndicator = document.getElementById('loadingIndicator');
            if (loadingIndicator) loadingIndicator.style.display = 'none';
        }
    }

    document.getElementById('filterBtn')?.addEventListener('click', async function () {
        const search = document.getElementById('searchInput')?.value || '';
        const sort = document.getElementById('sortSelect')?.value || 'newest';
        
        const loadingIndicator = document.getElementById('loadingIndicator');
        if (loadingIndicator) loadingIndicator.style.display = 'block';
        
        try {
            const response = await fetch(`/api/products/${currentType}/search?search=${encodeURIComponent(search)}&sort=${sort}`);
            const data = await response.json();
            
            if (data.success) {
                const container = document.getElementById('productsContainer');
                if (container) container.innerHTML = '';
                
                updateProductCount(data.total || 0);
                
                if (data.products && data.products.length > 0) {
                    data.products.forEach(product => {
                        const html = `
                            <div class="col-md-6 col-lg-3 product-item">
                                <div class="product-card card h-100 shadow-sm text-bg-dark">
                                    <div class="product-image">
                                        <img src="${product.imageUrl || '/assets/media/images/undefined.webp'}" class="card-img-top" alt="${product.imageAlt || 'product'}" loading="lazy" onerror="this.src='/assets/media/images/undefined.webp'">
                                    </div>
                                    <div class="card-body">
                                        <h2 class="card-title h5" data-i18n="${product.name}">${product.real_name || product.name}</h2>
                                        <div class="product-meta">
                                            <span class="badge bg-info">${product.type}</span>
                                            <span class="badge bg-success" data-i18n="free">رایگان</span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-transparent border-top-0 d-flex gap-2">
                                        <a href="/product/${product.slug || product.id}" class="btn btn-outline-primary flex-grow-1" data-i18n="view">مشاهده</a>
                                        <button class="btn btn-primary flex-grow-1 download-btn" data-id="${product.id}" data-name="${product.name}">
                                            <i class="fas fa-download"></i> <span data-i18n="download">دانلود</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `;
                        container.insertAdjacentHTML('beforeend', html);
                    });
                    
                    hasMore = false;
                    const noMoreData = document.getElementById('noMoreData');
                    if (noMoreData) noMoreData.style.display = 'block';
                    applyTranslationsToNewElements();
                } else {
                    if (container) {
                        container.innerHTML = `<div class="col-12 text-center py-5"><p class="text-muted" data-i18n="no.products">هیچ محصولی یافت نشد</p></div>`;
                    }
                    applyTranslationsToNewElements();
                }
            }
        } catch (error) {
            console.error('Filter error:', error);
        } finally {
            if (loadingIndicator) loadingIndicator.style.display = 'none';
        }
    });

    document.addEventListener('click', async function (e) {
        const btn = e.target.closest('.download-btn');
        if (btn) {
            const productId = btn.dataset.id;
            const productName = btn.dataset.name;
            try {
                const response = await fetch(`/api/product/download/${productId}`);
                const data = await response.json();
                if (data.success) {
                    const a = document.createElement('a');
                    a.href = data.downloadUrl;
                    a.download = '';
                    a.target = '_blank';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    alert(`دانلود ${productName} شروع شد`);
                } else {
                    alert('خطا در دانلود');
                }
            } catch (error) {
                alert('خطا در ارتباط با سرور');
            }
        }
    });

    document.addEventListener("DOMContentLoaded", function () {
        applyTranslationsToNewElements();
    });
</script>

<%- include('partials/footer') %>