// 首页功能

// 加载轮播图
function loadBanners() {
    console.log('=== 开始加载轮播图 ===');
    
    // 调用后端轮播图 API
    API.get('/banners')
        .then(data => {
            console.log('轮播图 API 返回数据:', data);
            
            // 支持多种数据格式
            let banners = [];
            if (Array.isArray(data)) {
                // 直接返回数组
                banners = data;
            } else if (data.data) {
                // 数据在 data.data 中
                banners = Array.isArray(data.data) ? data.data : (data.data.list || []);
            } else if (data.list) {
                // 数据在 data.list 中
                banners = data.list;
            } else if (data.banners) {
                // 数据在 data.banners 中
                banners = data.banners;
            }
            
            console.log('解析到的轮播图:', banners, '数量:', banners.length);
            
            if (banners.length === 0) {
                console.warn('没有可用的轮播图，使用默认轮播图');
                // 没有轮播图时，使用 HTML 中的默认轮播图
                heroSlider.init();
                return;
            }
            
            renderBanners(banners);
            // 渲染完成后初始化轮播图
            heroSlider.init();
        })
        .catch(error => {
            console.error('加载轮播图失败:', error);
            // 失败时使用 HTML 中的默认轮播图，仍然初始化
            heroSlider.init();
        });
}

// 渲染轮播图
function renderBanners(banners) {
    const bannersHtml = banners.map((banner, index) => {
        // 处理链接
        let link = '#';
        let hasLink = false;
        
        if (banner.link_type && banner.link_value) {
            // link_type: 1=无链接, 2=商品详情, 3=分类页面, 4=外部链接
            if (banner.link_type === 2) {
                // 商品详情
                link = `product-detail.html?id=${banner.link_value}`;
                hasLink = true;
            } else if (banner.link_type === 3) {
                // 分类页面
                link = `home.html?category=${banner.link_value}`;
                hasLink = true;
            } else if (banner.link_type === 4) {
                // 外部链接
                link = banner.link_value;
                hasLink = true;
            }
        } else if (banner.link) {
            // 兼容旧的 link 字段
            link = banner.link;
            hasLink = true;
        }
        
        const title = banner.title || `轮播图 ${index + 1}`;
        const subtitle = banner.description || banner.subtitle || '';
        const image = banner.image || `https://picsum.photos/1920/600?random=banner${index}`;
        
        // 如果有链接，整个轮播图可点击
        if (hasLink) {
            return `
                <div class="slide ${index === 0 ? 'active' : ''}">
                    <a href="${link}" class="slide-link" ${banner.link_type === 4 ? 'target="_blank" rel="noopener noreferrer"' : ''}>
                        <img src="${image}" alt="${title}" loading="${index === 0 ? 'eager' : 'lazy'}">
                        <div class="slide-content">
                            <h2>${title}</h2>
                            ${subtitle ? `<p>${subtitle}</p>` : ''}
                            <span class="btn btn-primary" data-i18n="hero_btn">立即选购</span>
                        </div>
                    </a>
                </div>
            `;
        } else {
            // 无链接时，不可点击
            return `
                <div class="slide ${index === 0 ? 'active' : ''}">
                    <img src="${image}" alt="${title}" loading="${index === 0 ? 'eager' : 'lazy'}">
                    <div class="slide-content">
                        <h2>${title}</h2>
                        ${subtitle ? `<p>${subtitle}</p>` : ''}
                    </div>
                </div>
            `;
        }
    }).join('');
    
    $('#heroSlider').html(bannersHtml);
}

// 轮播图管理
const heroSlider = {
    currentSlide: 0,
    totalSlides: 0,
    autoPlayInterval: null,
    
    init() {
        this.totalSlides = $('.slide').length;
        this.createDots();
        this.bindEvents();
        this.startAutoPlay();
    },
    
    createDots() {
        const dotsHtml = Array.from({ length: this.totalSlides }, (_, i) => 
            `<span class="dot ${i === 0 ? 'active' : ''}" data-slide="${i}"></span>`
        ).join('');
        $('.slider-dots').html(dotsHtml);
    },
    
    bindEvents() {
        // 上一张
        $('.slider-btn.prev').on('click', () => {
            this.prevSlide();
        });
        
        // 下一张
        $('.slider-btn.next').on('click', () => {
            this.nextSlide();
        });
        
        // 点击圆点
        $(document).on('click', '.dot', (e) => {
            const slideIndex = parseInt($(e.target).data('slide'));
            this.goToSlide(slideIndex);
        });
        
        // 鼠标悬停时暂停自动播放
        $('.hero-slider').on('mouseenter', () => {
            this.stopAutoPlay();
        }).on('mouseleave', () => {
            this.startAutoPlay();
        });
    },
    
    goToSlide(index) {
        $('.slide').removeClass('active');
        $('.slide').eq(index).addClass('active');
        
        $('.dot').removeClass('active');
        $('.dot').eq(index).addClass('active');
        
        this.currentSlide = index;
    },
    
    nextSlide() {
        const nextIndex = (this.currentSlide + 1) % this.totalSlides;
        this.goToSlide(nextIndex);
    },
    
    prevSlide() {
        const prevIndex = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
        this.goToSlide(prevIndex);
    },
    
    startAutoPlay() {
        this.stopAutoPlay();
        this.autoPlayInterval = setInterval(() => {
            this.nextSlide();
        }, 5000);
    },
    
    stopAutoPlay() {
        if (this.autoPlayInterval) {
            clearInterval(this.autoPlayInterval);
        }
    }
};

// 畅销商品数据（与product-list.js共用）
const DEFAULT_IMAGE = 'https://picsum.photos/400/400?random=';

const bestsellersData = [
    {
        id: 1,
        name: 'Christmas DIY Poke Fun',
        name_en: 'Christmas DIY Poke Fun',
        name_ja: 'クリスマスDIYポークファン',
        price: 21.99,
        originalPrice: 49.99,
        image: DEFAULT_IMAGE + 'bs1',
        rating: 0,
        reviews: 0,
        badges: ['sale'],
        discount: 57
    },
    {
        id: 2,
        name: 'Creative Costume Collage Set: Sweetheart',
        name_en: 'Creative Costume Collage Set: Sweetheart',
        name_ja: 'クリエイティブコスチュームコラージュセット: スイートハート',
        price: 21.99,
        originalPrice: 29.99,
        image: DEFAULT_IMAGE + 'bs2',
        rating: 4.87,
        reviews: 23,
        badges: ['hot'],
        discount: 27
    },
    {
        id: 3,
        name: '3-in-1 Dress Up Game Set: Princess Fantasy Makeup',
        name_en: '3-in-1 Dress Up Game Set: Princess Fantasy Makeup',
        name_ja: '3-in-1 ドレスアップゲームセット: プリンセスファンタジーメイク',
        price: 19.99,
        originalPrice: 34.99,
        image: DEFAULT_IMAGE + 'bs3',
        rating: 4.86,
        reviews: 163,
        badges: ['hot'],
        discount: 43
    },
    {
        id: 4,
        name: 'Magic Christmas Tree',
        name_en: 'Magic Christmas Tree',
        name_ja: 'マジッククリスマスツリー',
        price: 11.99,
        originalPrice: 19.99,
        image: DEFAULT_IMAGE + 'bs4',
        rating: 4.8,
        reviews: 15,
        badges: ['sale'],
        discount: 41
    }
];

// 渲染畅销商品（使用真实 API 请求热门商品）
function renderBestsellers() {
    // 显示加载中状态
    $('#bestsellersGrid').html('<div class="loading-spinner">加载中...</div>');
    
    // 调用后端热门商品 API
    API.get('/frontend/products/hot', { page: 1, page_size: 8 })
        .then(data => {
            console.log('热门商品 API 返回数据:', data);
            
            // 支持多种数据格式
            const products = data.data?.list || data.list || [];
            
            if (products.length === 0) {
                $('#bestsellersGrid').html('<div class="empty-state">暂无热门商品</div>');
                return;
            }
            
            console.log('解析到的商品:', products);
            renderProductCards(products);
        })
        .catch(error => {
            console.error('加载热门商品失败:', error);
            $('#bestsellersGrid').html('<div class="error-state">加载失败，请刷新页面</div>');
            Toast.error(error.message || '加载热门商品失败');
        });
}

// 渲染商品卡片
function renderProductCards(products) {
    const productsHtml = products.map(product => {
        // 处理价格：分 → 元
        const minPrice = parseInt(product.minSalePrice || product.price || 0);
        const maxPrice = parseInt(product.maxSalePrice || product.price || 0);
        const minLinePrice = parseInt(product.minLinePrice || product.original_price || 0);
        const maxLinePrice = parseInt(product.maxLinePrice || product.original_price || 0);
        
        const currentPrice = PriceUtils.fenToYuan(minPrice);
        const originalPrice = minLinePrice > 0 ? PriceUtils.fenToYuan(minLinePrice) : null;
        
        // 计算折扣
        let discount = 0;
        if (originalPrice && originalPrice > currentPrice) {
            discount = Math.round(((originalPrice - currentPrice) / originalPrice) * 100);
        }
        
        // 商品图片
        const productImage = product.primaryImage || product.main_image || product.image || 'https://picsum.photos/400/400?random=' + (product.spuId || product.id);
        
        // 商品名称
        const productName = product.title || product.name || '未知商品';
        
        // 商品ID
        const productId = product.spuId || product.id;
        
        // 库存
        const stock = product.spuStockQuantity || product.stock || 0;
        
        // 徽章
        let badges = '';
        if (stock <= 0) {
            badges += '<span class="badge badge-danger">售罄</span>';
        } else if (stock < 10) {
            badges += '<span class="badge badge-warning">仅剩' + stock + '件</span>';
        }
        if (discount > 30) {
            badges += '<span class="badge badge-success">特惠</span>';
        }
        // 根据销量添加热门徽章
        const soldNum = product.soldNum || 0;
        if (soldNum > 100) {
            badges += '<span class="badge badge-warning">热门</span>';
        }
        
        // 评分和评价数（当前 API 没有返回，暂不显示）
        const rating = product.rating || 0;
        const reviewCount = product.comment_count || 0;
        const ratingHtml = reviewCount > 0 ? `
            <div class="product-rating">
                <span class="stars">${'★'.repeat(Math.round(rating))}${'☆'.repeat(5 - Math.round(rating))}</span>
                <span class="review-count">${reviewCount} ${i18n.t('reviews')}</span>
            </div>
        ` : '';
        
        return `
            <div class="product-card" data-product-id="${productId}">
                <div class="product-image">
                    <img src="${productImage}" alt="${productName}" loading="lazy">
                    <div class="product-badges">
                        ${badges}
                    </div>
                </div>
                <div class="product-info">
                    <h3 class="product-title">${productName}</h3>
                    ${ratingHtml}
                    <div class="product-price">
                        <span class="price-current">¥${currentPrice.toFixed(2)}</span>
                        ${originalPrice ? `<span class="price-original">¥${originalPrice.toFixed(2)}</span>` : ''}
                        ${discount > 0 ? `<span class="price-discount">${i18n.t('save')} ${discount}%</span>` : ''}
                    </div>
                    <div class="product-actions">
                        <button class="btn btn-primary add-to-cart" data-product-id="${productId}" ${stock <= 0 ? 'disabled' : ''}>
                            ${stock <= 0 ? '已售罄' : i18n.t('add_to_cart')}
                        </button>
                        <button class="btn btn-quick-view quick-view" data-product-id="${productId}">
                            ${i18n.t('quick_view')}
                        </button>
                    </div>
                </div>
            </div>
        `;
    }).join('');
    
    $('#bestsellersGrid').html(productsHtml);
    
    // 绑定事件
    bindProductEvents();
}

// 渲染用户评价
function renderReviews() {
    // 加载高分评价
    loadHighRatingReviews();
}

// 加载高分评价（直接调用专门的评论API）
function loadHighRatingReviews() {
    console.log('=== 开始加载高分评价 ===');
    
    // 直接调用高分评论API，一次请求获取所有数据
    API.get('/comments/high-rating', { limit: 6 })
        .then(data => {
            const comments = data.data || data || [];
            console.log('获取到高分评论:', comments.length, '条');
            
            if (comments.length === 0) {
                renderEmptyReviews();
                return;
            }
            
            // 为每个评论添加商品名称
            const reviews = comments.map(comment => ({
                ...comment,
                productName: comment.product?.name || comment.product?.title || '商品'
            }));
            
            renderReviewCards(reviews);
        })
        .catch(error => {
            console.error('加载高分评价失败:', error);
            renderEmptyReviews(true);
        });
}

// 渲染评论卡片
function renderReviewCards(reviews) {
    const reviewsHtml = reviews.map(review => {
        // 字段映射
        const rating = review.rating || 5;
        const content = review.content || '';
        const userName = review.user?.nickname || review.user?.name || '匿名用户';
        const productName = review.productName || '商品';
        const createdAt = review.created_at || review.createdAt || '';
        const images = review.images || [];
        
        // 格式化日期
        let dateStr = '';
        if (createdAt) {
            const date = new Date(createdAt);
            dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
        
        // 生成星星
        const stars = '★'.repeat(rating) + '☆'.repeat(5 - rating);
        
        return `
            <div class="review-card">
                <div class="review-rating">${stars}</div>
                <p class="review-text">${content}</p>
                ${images.length > 0 ? `
                    <div class="review-images">
                        ${images.slice(0, 3).map(img => `
                            <img src="${img}" alt="评论图片" loading="lazy">
                        `).join('')}
                    </div>
                ` : ''}
                <p class="review-product">商品：${productName}</p>
                <div class="review-author">
                    <span class="review-author-name">${userName}</span>
                    ${dateStr ? `<span class="review-date">${dateStr}</span>` : ''}
                </div>
            </div>
        `;
    }).join('');
    
    $('#reviewsGrid').html(reviewsHtml);
}

// 渲染评论空状态
function renderEmptyReviews(isError = false) {
    const lang = i18n.currentLang;
    const emptyTitle = isError ? 
        (lang === 'en-US' ? 'Failed to load reviews' : lang === 'ja-JP' ? 'レビューの読み込みに失敗しました' : '加载评论失败') :
        (lang === 'en-US' ? 'No reviews yet' : lang === 'ja-JP' ? 'まだレビューはありません' : '暂无评价');
    const emptyDesc = isError ?
        (lang === 'en-US' ? 'Please try again later' : lang === 'ja-JP' ? '後でもう一度お試しください' : '请稍后再试') :
        (lang === 'en-US' ? 'Be the first to share your thoughts about our products!' : lang === 'ja-JP' ? '最初に製品についてのご意見をお聞かせください！' : '成为第一个分享购物体验的用户吧！');
    const btnText = lang === 'en-US' ? 'Shop Now' : lang === 'ja-JP' ? '今すぐショッピング' : '开始购物';
    
    $('#reviewsGrid').html(`
        <div class="empty-reviews-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"/>
                    ${isError ? `
                        <path d="M45 45 L75 75 M75 45 L45 75" stroke="#FF6B6B" stroke-width="4" stroke-linecap="round"/>
                    ` : `
                        <path d="M60 35 L65 50 L80 52 L70 62 L73 77 L60 70 L47 77 L50 62 L40 52 L55 50 Z" fill="#FFD93D" stroke="#FFB800" stroke-width="2"/>
                        <circle cx="35" cy="45" r="3" fill="#FFD93D"/>
                        <circle cx="85" cy="45" r="3" fill="#FFD93D"/>
                        <circle cx="40" cy="75" r="2" fill="#FFD93D"/>
                        <circle cx="80" cy="75" r="2" fill="#FFD93D"/>
                    `}
                </svg>
            </div>
            <h3 class="empty-title">${emptyTitle}</h3>
            <p class="empty-desc">${emptyDesc}</p>
            ${!isError ? `<a href="home.html" class="btn btn-primary empty-btn">${btnText}</a>` : ''}
        </div>
    `);
}

// 绑定商品事件
function bindProductEvents() {
    // 加入购物车
    $('.add-to-cart').off('click').on('click', function(e) {
        e.stopPropagation();
        const productId = parseInt($(this).data('product-id'));
        
        console.log('添加商品到购物车:', productId);
        
        // 先获取商品详情，确定默认SKU
        API.get(`/products/${productId}`)
            .then(productData => {
                const product = productData.data || productData;
                console.log('商品详情:', product);
                
                // 构建购物车请求数据
                const cartData = {
                    product_id: productId,
                    quantity: 1
                };
                
                // 如果商品有 SKU，选择第一个可用的 SKU
                if (product.skus && product.skus.length > 0) {
                    // 查找第一个有库存的 SKU
                    const availableSku = product.skus.find(sku => (sku.stock || 0) > 0);
                    if (availableSku) {
                        cartData.sku_id = parseInt(availableSku.id || availableSku.sku_id);
                        console.log('选择 SKU:', cartData.sku_id);
                    } else {
                        // 如果没有库存，使用第一个 SKU
                        cartData.sku_id = parseInt(product.skus[0].id || product.skus[0].sku_id);
                        console.log('无库存，使用第一个 SKU:', cartData.sku_id);
                    }
                }
                
                console.log('添加到购物车的数据:', cartData);
                
                // 使用 API 添加到购物车
                return API.post('/cart', cartData);
            })
            .then(() => {
                console.log('=== 添加到购物车成功 ===');
                
                // 显示成功提示
                let message = '已添加到购物车';
                if (typeof i18n !== 'undefined' && i18n.t) {
                    const translated = i18n.t('product_added_to_cart');
                    if (translated && translated !== 'product_added_to_cart') {
                        message = translated;
                    }
                }
                console.log('显示 Toast 提示:', message);
                Toast.success(message);
                
                // 更新购物车计数
                console.log('更新购物车计数...');
                console.log('window.cart 存在:', !!window.cart);
                console.log('cart 存在:', typeof cart !== 'undefined');
                
                if (window.cart && typeof window.cart.loadCart === 'function') {
                    console.log('调用 window.cart.loadCart()');
                    window.cart.loadCart();
                } else if (typeof cart !== 'undefined' && typeof cart.loadCart === 'function') {
                    console.log('调用 cart.loadCart()');
                    cart.loadCart();
                } else {
                    console.error('cart.loadCart 方法不存在');
                }
            })
            .catch(error => {
                console.error('添加到购物车失败:', error);
                Toast.error(error.message || '添加失败');
            });
    });
    
    // 快速查看
    $('.quick-view').off('click').on('click', function(e) {
        e.stopPropagation();
        const productId = $(this).data('product-id');
        window.location.href = `product-detail.html?id=${productId}`;
    });
    
    // 点击卡片跳转
    $('.product-card').off('click').on('click', function() {
        const productId = $(this).data('product-id');
        window.location.href = `product-detail.html?id=${productId}`;
    });
}

// 页面初始化
$(document).ready(function() {
    // 加载轮播图（使用真实 API）
    loadBanners();
    
    // 渲染畅销商品
    renderBestsellers();
    
    // 渲染用户评价
    renderReviews();
    
    // 监听语言切换
    $(document).on('languageChanged', function() {
        renderBestsellers();
    });
});