// 商品列表页面逻辑 - 使用真实API

// 商品列表管理器
const productList = {
    // 当前筛选和排序状态
    filters: {
        availability: [],
        priceMin: null,
        priceMax: null,
        category: []
    },
    sortBy: 'featured',
    currentPage: 1,
    itemsPerPage: 20,
    
    // 所有商品数据
    totalCount: 0,
    
    // 分类数据
    categories: [],
    
    // 初始化
    init() {
        // 绑定事件
        this.bindEvents();
        
        // 加载分类列表
        this.loadCategories();
        
        // 加载商品列表
        this.loadProducts();
        
        // 加载购物车数量
        this.loadCartCount();
    },
    
    // 加载分类列表
    loadCategories() {
        console.log('加载分类列表');
        
        API.get('/products/categories', { platform: 'web' })
            .then(data => {
                console.log('分类数据:', data);
                this.categories = data || [];
                this.renderCategories();
            })
            .catch(error => {
                console.error('加载分类失败:', error);
                // 失败时使用空数组，不影响页面其他功能
                this.categories = [];
            });
    },
    
    // 渲染分类筛选器（京东风格 - 悬浮窗式）
    renderCategories() {
        if (this.categories.length === 0) {
            console.warn('分类数据为空');
            return;
        }
        
        console.log('开始渲染分类，总数:', this.categories.length);
        
        const lang = i18n.currentLang;
        const $categoryContainer = $('.filter-group:has(h4[data-i18n="filter_category"]) .filter-options');
        
        let categoryHtml = '';
        
        // 遍历一级分类
        this.categories.forEach((category, index) => {
            console.log(`渲染一级分类 [${index}]:`, category.id, category.name);
            
            const categoryName = this.getCategoryName(category, lang);
            const isSelected = this.filters.category.includes(category.id.toString());
            
            // 一级分类
            categoryHtml += `
                <div class="category-group">
                    <div class="category-parent ${isSelected ? 'active' : ''}" data-category-id="${category.id}">
                        <span class="category-name">${categoryName}</span>
                        <span class="category-arrow">›</span>
                    </div>
            `;
            
            // 如果有二级分类，创建悬浮窗
            if (category.children && category.children.length > 0) {
                console.log(`  二级分类数量: ${category.children.length}`);
                categoryHtml += '<div class="category-popup">';
                categoryHtml += `<div class="category-popup-title">${categoryName}</div>`;
                categoryHtml += '<div class="category-popup-content">';
                
                category.children.forEach((child, childIndex) => {
                    console.log(`    渲染二级分类 [${childIndex}]:`, child.id, child.name);
                    
                    const childName = this.getCategoryName(child, lang);
                    const isChildSelected = this.filters.category.includes(child.id.toString());
                    categoryHtml += `
                        <span class="category-tag ${isChildSelected ? 'active' : ''}" data-category-id="${child.id}" data-parent="${category.id}">
                            ${childName}
                        </span>
                    `;
                });
                
                categoryHtml += '</div></div>';
            }
            
            categoryHtml += '</div>';
        });
        
        console.log('分类 HTML 生成完成');
        $categoryContainer.html(categoryHtml);
        
        // 绑定分类点击事件
        this.bindCategoryClick();
        
        // 验证渲染结果
        console.log('渲染后的分类元素数量:', $('.category-parent').length);
        $('.category-parent').each(function(idx) {
            const id = $(this).data('category-id');
            const name = $(this).find('.category-name').text();
            console.log(`  分类 [${idx}]: ID=${id}, Name=${name}`);
        });
    },
    
    // 绑定分类点击事件
    bindCategoryClick() {
        let hideTimeout = null;
        
        // 鼠标进入分类组时，隐藏所有其他悬浮窗，只显示当前的
        $('.category-group').on('mouseenter', function() {
            clearTimeout(hideTimeout);
            
            // 隐藏所有悬浮窗
            $('.category-popup').removeClass('show');
            
            // 计算当前分类的位置
            const $parent = $(this).find('.category-parent');
            const parentRect = $parent[0].getBoundingClientRect();
            
            // 只显示当前的悬浫窗
            const $popup = $(this).find('.category-popup');
            
            // 设置悬浮窗位置（在一级分类右侧）
            $popup.css({
                left: parentRect.right + 12 + 'px',  // 分类右侧 + 12px 间隙
                top: parentRect.top + 'px'           // 与分类顶部对齐
            });
            
            $popup.addClass('show');
        });
        
        // 鼠标离开分类组时，延迟隐藏悬浮窗
        $('.category-group').on('mouseleave', function(e) {
            const $popup = $(this).find('.category-popup');
            
            hideTimeout = setTimeout(() => {
                // 检查鼠标是否在悬浮窗内
                if (!$popup.is(':hover')) {
                    $popup.removeClass('show');
                }
            }, 150); // 150ms 延迟
        });
        
        // 鼠标进入悬浮窗时，取消隐藏
        $(document).on('mouseenter', '.category-popup', function() {
            clearTimeout(hideTimeout);
            $(this).addClass('show');
        });
        
        // 鼠标离开悬浮窗时，隐藏
        $(document).on('mouseleave', '.category-popup', function() {
            $(this).removeClass('show');
        });
        
        // 点击一级分类进行筛选（选择该分类下所有商品）
        $(document).on('click', '.category-parent', function(e) {
            e.stopPropagation();
            e.preventDefault();
            
            const categoryId = $(this).data('category-id');
            console.log('点击一级分类，ID:', categoryId);
            
            if (!categoryId) {
                console.error('分类 ID 不存在');
                return;
            }
            
            const categoryIdStr = categoryId.toString();
            const isActive = $(this).hasClass('active');
            
            console.log('当前分类状态:', isActive ? '已选中' : '未选中');
            
            // 移除所有选中状态
            $('.category-tag').removeClass('active');
            $('.category-parent').removeClass('active');
            
            if (isActive) {
                // 如果已选中，则取消选中（查看全部）
                productList.filters.category = [];
                console.log('取消选中，查看全部商品');
            } else {
                // 选中当前一级分类
                $(this).addClass('active');
                productList.filters.category = [categoryIdStr];
                console.log('选中一级分类:', categoryIdStr);
            }
            
            // 重新加载商品
            productList.currentPage = 1;
            productList.loadProducts();
        });
        
        // 点击二级分类进行筛选
        $(document).on('click', '.category-tag', function(e) {
            e.stopPropagation();
            e.preventDefault();
            
            const categoryId = $(this).data('category-id');
            console.log('点击二级分类，ID:', categoryId);
            
            if (!categoryId) {
                console.error('分类 ID 不存在');
                return;
            }
            
            const categoryIdStr = categoryId.toString();
            const isActive = $(this).hasClass('active');
            
            console.log('当前分类状态:', isActive ? '已选中' : '未选中');
            
            // 移除所有选中状态
            $('.category-tag').removeClass('active');
            $('.category-parent').removeClass('active');
            
            if (isActive) {
                // 如果已选中，则取消选中（查看全部）
                productList.filters.category = [];
                console.log('取消选中，查看全部商品');
            } else {
                // 选中当前分类
                $(this).addClass('active');
                productList.filters.category = [categoryIdStr];
                console.log('选中二级分类:', categoryIdStr);
            }
            
            // 隐藏悬浮窗
            $('.category-popup').removeClass('show');
            
            // 重新加载商品
            productList.currentPage = 1;
            productList.loadProducts();
        });
    },
    
    // 获取分类名称（支持多语言）
    getCategoryName(category, lang) {
        // 如果有多语言数据
        if (category.name_i18n && category.name_i18n[lang]) {
            return category.name_i18n[lang];
        }
        // 降级使用默认名称
        return category.name || '未知分类';
    },
    
    // 加载商品列表
    loadProducts() {
        const params = {
            page: this.currentPage,
            page_size: this.itemsPerPage
        };
        
        // 添加价格筛选参数（元转分）
        if (this.filters.priceMin !== null && this.filters.priceMin > 0) {
            params.min_price = Math.round(this.filters.priceMin * 100);
        }
        if (this.filters.priceMax !== null && this.filters.priceMax > 0) {
            params.max_price = Math.round(this.filters.priceMax * 100);
        }
        
        // 添加分类筛选参数
        if (this.filters.category && this.filters.category.length > 0) {
            // 如果后端支持多个分类，使用数组
            params.category_ids = this.filters.category.join(',');
        }
        
        // 添加库存筛选参数
        if (this.filters.availability && this.filters.availability.length > 0) {
            if (this.filters.availability.includes('in_stock') && !this.filters.availability.includes('out_of_stock')) {
                params.in_stock = true;
            } else if (!this.filters.availability.includes('in_stock') && this.filters.availability.includes('out_of_stock')) {
                params.in_stock = false;
            }
            // 如果同时选中或都未选中，不添加该参数
        }
        
        // 添加排序参数
        if (this.sortBy === 'price_asc') {
            params.sort = 'price';
            params.sortType = 0;
        } else if (this.sortBy === 'price_desc') {
            params.sort = 'price';
            params.sortType = 1;
        } else if (this.sortBy === 'date_new') {
            params.sort = 'created_at';
            params.sortType = 1;
        }
        
        console.log('加载商品列表，参数:', params);
        
        // 显示加载状态
        $('#productGrid').html('<div class="loading">加载中...</div>');
        
        // 调用API
        API.get('/products', params)
            .then(data => {
                console.log('商品列表数据:', data);
                const products = data.list || [];
                this.totalCount = data.total || 0;
                
                this.renderProducts(products);
                this.updateProductCount();
                this.renderPagination();
            })
            .catch(error => {
                console.error('加载商品列表失败:', error);
                $('#productGrid').html('<div class="error">加载失败，请稍后重试</div>');
                Toast.error(error.message || '加载商品失败');
            });
    },
    
    // 渲染商品列表
    renderProducts(products) {
        const lang = i18n.currentLang;
        
        if (products.length === 0) {
            // 美化的空状态
            $('#productGrid').html(`
                <div class="empty-state">
                    <div class="empty-icon">
                        <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="60" cy="60" r="50" fill="#F5F5F5"/>
                            <path d="M40 50 L50 60 L40 70 M80 50 L70 60 L80 70 M55 45 L65 75" stroke="#CCCCCC" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h3 class="empty-title">暂无商品</h3>
                    <p class="empty-desc">请尝试调整筛选条件或清除筛选</p>
                    <button class="btn btn-primary empty-btn" onclick="productList.clearFilters()">清除筛选</button>
                </div>
            `);
            return;
        }
        
        const productsHtml = products.map(product => {
            const productName = product.name || '未知商品';
            const productImage = product.main_image || 'https://picsum.photos/400/400?random=default';
            const price = PriceUtils.fenToYuan(product.price || 0);
            const originalPrice = product.orig_price ? PriceUtils.fenToYuan(product.orig_price) : null;
            const isInStock = product.stock > 0;
            
            // 计算折扣
            let discount = 0;
            if (originalPrice && originalPrice > price) {
                discount = Math.round((1 - price / originalPrice) * 100);
            }
            
            return `
                <div class="product-card" data-product-id="${product.id}">
                    <div class="product-image">
                        <a href="product-detail.html?id=${product.id}">
                            <img src="${productImage}" alt="${productName}" loading="lazy">
                        </a>
                        ${!isInStock ? '<span class="badge badge-sold-out">已售罄</span>' : ''}
                        ${discount > 0 ? `<span class="badge badge-sale">-${discount}%</span>` : ''}
                    </div>
                    <div class="product-info">
                        <h3 class="product-title">
                            <a href="product-detail.html?id=${product.id}">${productName}</a>
                        </h3>
                        <div class="product-price">
                            <span class="price-current">¥${price.toFixed(2)}</span>
                            ${originalPrice ? `<span class="price-original">¥${originalPrice.toFixed(2)}</span>` : ''}
                        </div>
                        <button class="btn btn-primary add-to-cart-btn" data-product-id="${product.id}" ${!isInStock ? 'disabled' : ''}>
                            ${isInStock ? '<span>加入购物车</span>' : '<span>已售罄</span>'}
                        </button>
                    </div>
                </div>
            `;
        }).join('');
        
        $('#productGrid').html(productsHtml);
    },
    
    // 更新商品计数
    updateProductCount() {
        $('#productCount').text(this.totalCount);
    },
    
    // 渲染分页
    renderPagination() {
        const totalPages = Math.ceil(this.totalCount / this.itemsPerPage);
        
        if (totalPages <= 1) {
            $('.pagination').hide();
            return;
        }
        
        $('.pagination').show();
        
        // 更新上一页按钮状态
        $('.page-btn.prev').prop('disabled', this.currentPage === 1);
        
        // 更新下一页按钮状态
        $('.page-btn.next').prop('disabled', this.currentPage === totalPages);
        
        // 渲染页码
        let pagesHtml = '';
        const maxPages = 7;
        let startPage = Math.max(1, this.currentPage - Math.floor(maxPages / 2));
        let endPage = Math.min(totalPages, startPage + maxPages - 1);
        
        if (endPage - startPage < maxPages - 1) {
            startPage = Math.max(1, endPage - maxPages + 1);
        }
        
        if (startPage > 1) {
            pagesHtml += `<button class="page-num" data-page="1">1</button>`;
            if (startPage > 2) {
                pagesHtml += `<span class="page-dots">...</span>`;
            }
        }
        
        for (let i = startPage; i <= endPage; i++) {
            pagesHtml += `<button class="page-num ${i === this.currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
        }
        
        if (endPage < totalPages) {
            if (endPage < totalPages - 1) {
                pagesHtml += `<span class="page-dots">...</span>`;
            }
            pagesHtml += `<button class="page-num" data-page="${totalPages}">${totalPages}</button>`;
        }
        
        $('.page-numbers').html(pagesHtml);
    },
    
    // 绑定事件
    bindEvents() {
        // 筛选器事件
        $('.filter-options input[type="checkbox"]').on('change', () => {
            this.updateFilters();
        });
        
        $('#priceMin, #priceMax').on('input', utils.debounce(() => {
            this.updateFilters();
        }, 500));
        
        $('.apply-filter').on('click', () => {
            this.updateFilters();
        });
        
        $('.clear-filter').on('click', () => {
            this.clearFilters();
        });
        
        // 排序事件
        $('#sortSelect').on('change', (e) => {
            this.sortBy = $(e.target).val();
            this.currentPage = 1;
            this.loadProducts();
        });
        
        // 分页事件
        $('.page-btn.prev').on('click', () => {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.loadProducts();
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
        
        $('.page-btn.next').on('click', () => {
            const totalPages = Math.ceil(this.totalCount / this.itemsPerPage);
            if (this.currentPage < totalPages) {
                this.currentPage++;
                this.loadProducts();
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
        
        $(document).on('click', '.page-num', (e) => {
            const page = parseInt($(e.target).data('page'));
            if (page && page !== this.currentPage) {
                this.currentPage = page;
                this.loadProducts();
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
        
        // 加入购物车事件
        $(document).on('click', '.add-to-cart-btn', (e) => {
            e.preventDefault();
            e.stopPropagation();
            const productId = $(e.currentTarget).data('product-id');
            this.addToCart(productId);
        });
        
        // 监听语言切换
        $(document).on('languageChanged', () => {
            // 重新渲染分类（支持多语言）
            this.renderCategories();
            // 重新加载商品
            this.loadProducts();
        });
    },
    
    // 更新筛选条件
    updateFilters() {
        // 获取库存状态
        this.filters.availability = [];
        $('input[name="availability"]:checked').each((index, el) => {
            this.filters.availability.push($(el).val());
        });
        
        // 获取价格区间
        this.filters.priceMin = parseFloat($('#priceMin').val()) || null;
        this.filters.priceMax = parseFloat($('#priceMax').val()) || null;
        
        // 分类由点击事件处理，不需要在这里更新
        
        // 重置到第一页
        this.currentPage = 1;
        
        // 重新加载商品
        this.loadProducts();
    },
    
    // 清除筛选
    clearFilters() {
        $('input[type="checkbox"]').prop('checked', false);
        $('#priceMin, #priceMax').val('');
        
        // 清除分类选中状态
        $('.category-tag').removeClass('active');
        $('.category-parent').removeClass('active');
        
        this.filters = {
            availability: [],
            priceMin: null,
            priceMax: null,
            category: []
        };
        this.currentPage = 1;
        this.loadProducts();
    },
    
    // 加入购物车
    addToCart(productId) {
        console.log('加入购物车:', productId);
        
        API.post('/cart', {
            product_id: parseInt(productId),
            quantity: 1
        })
            .then(() => {
                Toast.success('已添加到购物车');
                this.loadCartCount();
                
                // 打开购物车抽屉（如果有）
                if (typeof window.openCartDrawer === 'function') {
                    window.openCartDrawer();
                }
            })
            .catch(error => {
                console.error('添加到购物车失败:', error);
                Toast.error(error.message || '添加失败');
            });
    },
    
    // 加载购物车数量
    loadCartCount() {
        // 检查是否登录，未登录时不请求
        const user = localStorage.getItem('currentUser');
        if (!user) {
            $('.cart-count').text(0);
            return;
        }
        
        try {
            const userData = JSON.parse(user);
            if (!userData.token) {
                $('.cart-count').text(0);
                return;
            }
        } catch (e) {
            $('.cart-count').text(0);
            return;
        }
        
        API.get('/cart')
            .then(data => {
                const totalQuantity = data.total_quantity || 0;
                $('.cart-count').text(totalQuantity);
            })
            .catch(error => {
                console.error('加载购物车数量失败:', error);
                $('.cart-count').text(0);
            });
    }
};

// 页面加载完成后初始化
$(document).ready(function() {
    productList.init();
});