// Live Stream Page JavaScript

$(document).ready(function() {
    initLivePage();
});

function initLivePage() {
    loadChatMessages();
    loadLiveProducts();
    updateLiveStats();
    bindLiveEvents();
    
    // 监听语言切换
    $(document).on('languageChanged', function() {
        loadChatMessages();
        loadLiveProducts();
    });
    
    // 自动滚动到最新消息
    scrollChatToBottom();
    
    // 模拟实时更新统计数据
    setInterval(updateLiveStats, 5000);
    
    // 模拟新消息
    setInterval(addRandomMessage, 10000);
}

// 绑定事件
function bindLiveEvents() {
    // Tab切换
    $('.tab-btn').on('click', function() {
        const tabName = $(this).data('tab');
        switchTab(tabName);
    });
    
    // 发送消息
    $('#sendMessageBtn').on('click', function() {
        sendMessage();
    });
    
    $('#chatInput').on('keypress', function(e) {
        if (e.which === 13) {
            sendMessage();
        }
    });
    
    // 产品点击
    $(document).on('click', '.live-product-item', function() {
        const productId = $(this).data('product-id');
        window.location.href = `product-detail.html?id=${productId}`;
    });
    
    $(document).on('click', '.live-product-btn', function(e) {
        e.stopPropagation();
        const productId = $(this).closest('.live-product-item').data('product-id');
        addProductToCart(productId);
    });
}

// Tab切换
function switchTab(tabName) {
    $('.tab-btn').removeClass('active');
    $(`.tab-btn[data-tab="${tabName}"]`).addClass('active');
    
    $('.tab-content').removeClass('active');
    $(`#${tabName}Tab`).addClass('active');
}

// 加载聊天消息
function loadChatMessages() {
    const lang = i18n.currentLang;
    
    const messages = [
        {
            type: 'system',
            text: lang === 'zh-CN' ? '欢迎来到直播间！' : 
                  lang === 'en-US' ? 'Welcome to the live stream!' : 
                  'ライブ配信へようこそ！',
            time: '10:00'
        },
        {
            username: lang === 'zh-CN' ? '小明' : lang === 'en-US' ? 'Mike' : 'タロウ',
            text: lang === 'zh-CN' ? '这款拼图看起来很不错！' : 
                  lang === 'en-US' ? 'This puzzle looks great!' : 
                  'このパズルは素晴らしいですね！',
            time: '10:05'
        },
        {
            username: lang === 'zh-CN' ? '小红' : lang === 'en-US' ? 'Lucy' : 'ハナコ',
            text: lang === 'zh-CN' ? '适合多大年龄的孩子？' : 
                  lang === 'en-US' ? 'What age is it suitable for?' : 
                  '何歳の子供に適していますか？',
            time: '10:06'
        },
        {
            username: lang === 'zh-CN' ? '主播' : lang === 'en-US' ? 'Host' : 'ホスト',
            text: lang === 'zh-CN' ? '这款拼图适合3-6岁的孩子，可以培养动手能力和空间想象力！' : 
                  lang === 'en-US' ? 'This puzzle is suitable for children aged 3-6 and helps develop hands-on skills and spatial imagination!' : 
                  'このパズルは3〜6歳の子供に適しており、実践的なスキルと空間想像力を養うのに役立ちます！',
            time: '10:07'
        },
        {
            username: lang === 'zh-CN' ? '李华' : lang === 'en-US' ? 'David' : 'ダビデ',
            text: lang === 'zh-CN' ? '价格很优惠，已经下单了！' : 
                  lang === 'en-US' ? 'Great price, just ordered!' : 
                  '価格もお得で、注文しました！',
            time: '10:08'
        },
        {
            username: lang === 'zh-CN' ? '王芳' : lang === 'en-US' ? 'Sarah' : 'サラ',
            text: lang === 'zh-CN' ? '材质安全吗？' : 
                  lang === 'en-US' ? 'Is the material safe?' : 
                  '素材は安全ですか？',
            time: '10:09'
        },
        {
            username: lang === 'zh-CN' ? '主播' : lang === 'en-US' ? 'Host' : 'ホスト',
            text: lang === 'zh-CN' ? '所有产品都通过了安全认证，使用环保材料，家长可以放心！' : 
                  lang === 'en-US' ? 'All products are safety certified and made from eco-friendly materials. Parents can rest assured!' : 
                  'すべての製品は安全認証を受けており、環境に優しい素材を使用しています。親御さんも安心です！',
            time: '10:10'
        }
    ];
    
    let chatHtml = '';
    messages.forEach(msg => {
        if (msg.type === 'system') {
            chatHtml += `
                <div class="chat-message system">
                    <div class="chat-text">${msg.text}</div>
                </div>
            `;
        } else {
            chatHtml += `
                <div class="chat-message">
                    <div class="chat-message-header">
                        <span class="chat-username">${msg.username}</span>
                        <span class="chat-time">${msg.time}</span>
                    </div>
                    <div class="chat-text">${msg.text}</div>
                </div>
            `;
        }
    });
    
    $('#chatMessages').html(chatHtml);
    scrollChatToBottom();
}

// 加载直播商品
function loadLiveProducts() {
    const lang = i18n.currentLang;
    
    const products = [
        {
            id: 1,
            name: '200片拼图 - 海洋世界',
            name_en: '200 Piece Puzzle - Ocean World',
            name_ja: '200ピースパズル - 海の世界',
            price: 19.99,
            originalPrice: 29.99,
            image: 'https://picsum.photos/200/200?random=live1'
        },
        {
            id: 2,
            name: '艺术绘画套装',
            name_en: 'Art Painting Set',
            name_ja: 'アート絵画セット',
            price: 24.99,
            originalPrice: 34.99,
            image: 'https://picsum.photos/200/200?random=live2'
        },
        {
            id: 3,
            name: '木质积木 - 100块',
            name_en: 'Wooden Blocks - 100 Pieces',
            name_ja: '木製ブロック - 100ピース',
            price: 29.99,
            originalPrice: 39.99,
            image: 'https://picsum.photos/200/200?random=live3'
        },
        {
            id: 4,
            name: '磁力片建构玩具',
            name_en: 'Magnetic Building Tiles',
            name_ja: 'マグネットタイル',
            price: 34.99,
            originalPrice: 49.99,
            image: 'https://picsum.photos/200/200?random=live4'
        },
        {
            id: 5,
            name: '儿童桌游套装',
            name_en: 'Kids Board Game Set',
            name_ja: '子供用ボードゲームセット',
            price: 27.99,
            originalPrice: 37.99,
            image: 'https://picsum.photos/200/200?random=live5'
        }
    ];
    
    let productsHtml = '';
    products.forEach(product => {
        const productName = lang === 'zh-CN' ? product.name : 
                           lang === 'en-US' ? product.name_en : 
                           product.name_ja;
        const btnText = i18n.t('add_to_cart');
        
        productsHtml += `
            <div class="live-product-item" data-product-id="${product.id}">
                <div class="live-product-image">
                    <img src="${product.image}" alt="${productName}">
                </div>
                <div class="live-product-info">
                    <div class="live-product-title">${productName}</div>
                    <div class="live-product-price">
                        <span class="live-product-current-price">$${product.price.toFixed(2)}</span>
                        <span class="live-product-original-price">$${product.originalPrice.toFixed(2)}</span>
                    </div>
                    <button class="live-product-btn">${btnText}</button>
                </div>
            </div>
        `;
    });
    
    $('#liveProducts').html(productsHtml);
}

// 更新直播统计
function updateLiveStats() {
    const currentViewers = parseInt($('#viewerCount').text().replace(/,/g, ''));
    const currentLikes = parseInt($('#likeCount').text().replace(/,/g, ''));
    const currentMessages = parseInt($('#messageCount').text().replace(/,/g, ''));
    
    // 随机增加数值
    const newViewers = currentViewers + Math.floor(Math.random() * 20) - 5;
    const newLikes = currentLikes + Math.floor(Math.random() * 15);
    const newMessages = currentMessages + Math.floor(Math.random() * 5);
    
    $('#viewerCount').text(Math.max(1000, newViewers).toLocaleString());
    $('#likeCount').text(Math.max(500, newLikes).toLocaleString());
    $('#messageCount').text(Math.max(50, newMessages).toLocaleString());
}

// 发送消息
function sendMessage() {
    const message = $('#chatInput').val().trim();
    
    if (!message) {
        return;
    }
    
    const lang = i18n.currentLang;
    const username = lang === 'zh-CN' ? '我' : lang === 'en-US' ? 'Me' : '私';
    const currentTime = new Date();
    const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
    
    const messageHtml = `
        <div class="chat-message">
            <div class="chat-message-header">
                <span class="chat-username">${username}</span>
                <span class="chat-time">${timeString}</span>
            </div>
            <div class="chat-text">${message}</div>
        </div>
    `;
    
    $('#chatMessages').append(messageHtml);
    $('#chatInput').val('');
    scrollChatToBottom();
    
    // 更新消息计数
    const currentCount = parseInt($('#messageCount').text().replace(/,/g, ''));
    $('#messageCount').text((currentCount + 1).toLocaleString());
}

// 添加随机消息
function addRandomMessage() {
    const lang = i18n.currentLang;
    
    const usernames = lang === 'zh-CN' ? ['张三', '李四', '王五', '赵六'] :
                     lang === 'en-US' ? ['John', 'Jane', 'Bob', 'Alice'] :
                     ['太郎', '花子', '次郎', '美咲'];
    
    const messages = lang === 'zh-CN' ? 
        ['这个产品真不错！', '价格很实惠', '已经下单了', '质量怎么样？', '有优惠码吗？'] :
        lang === 'en-US' ? 
        ['This product is great!', 'Great price', 'Just ordered', 'How\'s the quality?', 'Any discount codes?'] :
        ['この製品は素晴らしいです！', '価格もお得', '注文しました', '品質はどうですか？', '割引コードはありますか？'];
    
    const randomUsername = usernames[Math.floor(Math.random() * usernames.length)];
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
    const currentTime = new Date();
    const timeString = `${currentTime.getHours()}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
    
    const messageHtml = `
        <div class="chat-message">
            <div class="chat-message-header">
                <span class="chat-username">${randomUsername}</span>
                <span class="chat-time">${timeString}</span>
            </div>
            <div class="chat-text">${randomMessage}</div>
        </div>
    `;
    
    $('#chatMessages').append(messageHtml);
    scrollChatToBottom();
}

// 滚动聊天到底部
function scrollChatToBottom() {
    const chatMessages = document.getElementById('chatMessages');
    if (chatMessages) {
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
}

// 添加商品到购物车
function addProductToCart(productId) {
    const lang = i18n.currentLang;
    
    // 这里使用模拟数据，实际应该从产品列表中获取
    const product = {
        id: productId,
        name: '直播商品',
        name_en: 'Live Product',
        name_ja: 'ライブ商品',
        price: 19.99,
        image: 'https://picsum.photos/200/200?random=' + productId
    };
    
    cart.addToCart(product);
    
    const message = i18n.t('product_added_to_cart') || 
                   (lang === 'zh-CN' ? '商品已添加到购物车' : 
                    lang === 'en-US' ? 'Product added to cart' : 
                    '商品がカートに追加されました');
    
    alert(message);
}