// 评价功能 JavaScript

document.addEventListener('DOMContentLoaded', function() {
    initializeReviewForm();
    initializeImageUpload();
});

// 初始化评价表单
function initializeReviewForm() {
    const starRating = document.getElementById('starRating');
    const ratingInput = document.getElementById('rating');
    const ratingText = document.getElementById('ratingText');
    const reviewForm = document.getElementById('reviewForm');
    
    if (starRating) {
        const stars = starRating.querySelectorAll('.star');
        const ratingTexts = {
            1: '很差',
            2: '较差', 
            3: '一般',
            4: '满意',
            5: '非常满意'
        };
        
        let currentRating = 0; // 当前选中的评分
        
        // 初始化：设置所有星星为空心
        stars.forEach(star => {
            star.textContent = '☆'; // 空心星星
        });
        
        // 星级点击事件
        stars.forEach((star, index) => {
            star.addEventListener('click', function() {
                const rating = index + 1;
                setRating(rating);
            });
            
            // 鼠标悬停事件
            star.addEventListener('mouseenter', function() {
                const rating = index + 1;
                showHoverStars(rating);
                
                // 显示临时评分文字
                const tempText = ratingTexts[rating] || '请选择评分';
                ratingText.textContent = tempText;
                ratingText.style.backgroundColor = '#ff6b35';
                ratingText.style.color = 'white';
                ratingText.style.borderColor = '#ff6b35';
            });
        });
        
        // 鼠标离开星级评分区域
        starRating.addEventListener('mouseleave', function() {
            showSelectedStars(currentRating);
            
            // 恢复原来的评分文字
            if (currentRating > 0) {
                ratingText.textContent = ratingTexts[currentRating];
                ratingText.classList.add('selected');
                ratingText.style.backgroundColor = '#ff6b35';
                ratingText.style.color = 'white';
                ratingText.style.borderColor = '#ff6b35';
            } else {
                ratingText.textContent = '请选择评分';
                ratingText.classList.remove('selected');
                ratingText.style.backgroundColor = '#f8f9fa';
                ratingText.style.color = '#666';
                ratingText.style.borderColor = '#e9ecef';
            }
        });
        
        // 设置评分
        function setRating(rating) {
            currentRating = rating;
            ratingInput.value = rating;
            ratingText.textContent = ratingTexts[rating] || '请选择评分';
            ratingText.classList.add('selected');
            ratingText.style.backgroundColor = '#ff6b35';
            ratingText.style.color = 'white';
            ratingText.style.borderColor = '#ff6b35';
            showSelectedStars(rating);
        }
        
        // 显示悬停状态的星星
        function showHoverStars(rating) {
            stars.forEach((star, index) => {
                star.classList.remove('filled');
                if (index < rating) {
                    star.textContent = '★'; // 实心星星
                    star.classList.add('filled');
                } else {
                    star.textContent = '☆'; // 空心星星
                }
            });
        }
        
        // 显示选中状态的星星
        function showSelectedStars(rating) {
            stars.forEach((star, index) => {
                star.classList.remove('filled');
                if (index < rating) {
                    star.textContent = '★'; // 实心星星
                    star.classList.add('filled');
                } else {
                    star.textContent = '☆'; // 空心星星
                }
            });
        }
    }
    
    // 表单提交
    if (reviewForm) {
        reviewForm.addEventListener('submit', function(e) {
            e.preventDefault();
            submitReview();
        });
    }
}

// 初始化图片上传
function initializeImageUpload() {
    const uploadArea = document.getElementById('uploadArea');
    const imageInput = document.getElementById('imageInput');
    const uploadedImages = document.getElementById('uploadedImages');
    
    if (!uploadArea || !imageInput) return;
    
    let uploadedImageUrls = [];
    
    // 点击上传区域
    uploadArea.addEventListener('click', function() {
        imageInput.click();
    });
    
    // 拖拽上传
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.style.borderColor = '#007bff';
    });
    
    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.style.borderColor = '#ddd';
    });
    
    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.style.borderColor = '#ddd';
        
        const files = Array.from(e.dataTransfer.files);
        handleFiles(files);
    });
    
    // 文件选择
    imageInput.addEventListener('change', function() {
        const files = Array.from(this.files);
        handleFiles(files);
    });
    
    // 处理文件上传
    function handleFiles(files) {
        if (uploadedImageUrls.length + files.length > 5) {
            showAlert('最多只能上传5张图片', 'warning');
            return;
        }
        
        files.forEach(file => {
            if (!file.type.startsWith('image/')) {
                showAlert('只能上传图片文件', 'warning');
                return;
            }
            
            if (file.size > 5 * 1024 * 1024) {
                showAlert('图片大小不能超过5MB', 'warning');
                return;
            }
            
            uploadImage(file);
        });
    }
    
    // 上传图片到服务器
    function uploadImage(file) {
        const formData = new FormData();
        formData.append('file', file);
        
        // 显示上传进度
        const previewElement = createImagePreview(URL.createObjectURL(file), true);
        uploadedImages.appendChild(previewElement);
        
        fetch('/review/upload_image', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新预览元素
                const img = previewElement.querySelector('img');
                img.src = data.url;
                // 强制设置图片样式
                forceImageStyles(img);
                previewElement.classList.remove('uploading');
                previewElement.dataset.url = data.url;
                uploadedImageUrls.push(data.url);
            } else {
                showAlert(data.message || '图片上传失败', 'error');
                previewElement.remove();
            }
        })
        .catch(error => {
            showAlert('图片上传失败', 'error');
            previewElement.remove();
        });
    }
    
    // 创建图片预览元素
    function createImagePreview(src, isUploading = false) {
        const div = document.createElement('div');
        div.className = `image-preview ${isUploading ? 'uploading' : ''}`;
        
        // 强制设置容器样式
        div.style.cssText = `
            position: relative !important;
            width: 80px !important;
            height: 80px !important;
            max-width: 80px !important;
            max-height: 80px !important;
            min-width: 80px !important;
            min-height: 80px !important;
            border-radius: 8px !important;
            overflow: hidden !important;
            border: 2px solid #e9ecef !important;
            flex-shrink: 0 !important;
            flex-grow: 0 !important;
            display: inline-block !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            vertical-align: top !important;
        `;
        
        const img = document.createElement('img');
        img.src = src;
        img.alt = '评价图片';
        
        // 强制设置图片样式
        forceImageStyles(img);
        
        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-btn';
        removeBtn.innerHTML = '×';
        removeBtn.type = 'button';
        removeBtn.style.cssText = `
            position: absolute !important;
            top: 2px !important;
            right: 2px !important;
            background: rgba(255, 255, 255, 0.9) !important;
            border: none !important;
            border-radius: 50% !important;
            width: 20px !important;
            height: 20px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            font-size: 12px !important;
            color: #dc3545 !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
            z-index: 10 !important;
        `;
        
        removeBtn.onclick = function() {
            const url = div.dataset.url;
            if (url) {
                uploadedImageUrls = uploadedImageUrls.filter(u => u !== url);
            }
            div.remove();
        };
        
        div.appendChild(img);
        div.appendChild(removeBtn);
        
        return div;
    }
    
    // 强制设置图片样式的函数
    function forceImageStyles(img) {
        img.style.cssText = `
            display: block !important;
            width: 80px !important;
            height: 80px !important;
            max-width: 80px !important;
            max-height: 80px !important;
            min-width: 80px !important;
            min-height: 80px !important;
            object-fit: cover !important;
            border-radius: 6px !important;
            box-sizing: border-box !important;
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            outline: none !important;
            background: none !important;
            vertical-align: top !important;
            flex-shrink: 0 !important;
            flex-grow: 0 !important;
        `;
        
        // 图片加载完成后再次强制设置样式
        img.onload = function() {
            forceImageStyles(this);
        };
    }
    
    // 获取上传的图片URL列表
    window.getUploadedImages = function() {
        return uploadedImageUrls;
    };
}

// 提交评价
function submitReview() {
    const submitBtn = document.getElementById('submitBtn');
    const orderId = document.getElementById('orderId').value;
    const productId = document.getElementById('productId').value;
    const rating = document.getElementById('rating').value;
    const content = document.getElementById('content').value;
    const isAnonymous = document.getElementById('isAnonymous').checked;
    
    // 验证
    if (!rating) {
        showAlert('请选择评分', 'warning');
        return;
    }
    
    // 禁用提交按钮
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> 提交中...';
    
    const data = {
        order_id: parseInt(orderId),
        product_id: parseInt(productId),
        rating: parseInt(rating),
        content: content.trim(),
        is_anonymous: isAnonymous,
        images: window.getUploadedImages ? window.getUploadedImages() : []
    };
    
    fetch('/review/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            setTimeout(() => {
                window.location.href = `/order/detail/${orderId}`;
            }, 1500);
        } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        showAlert('提交失败，请重试', 'error');
    })
    .finally(() => {
        // 恢复提交按钮
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="bi bi-check-circle"></i> 提交评价';
    });
}

// 加载商品评价列表（用于商品详情页）
function loadProductReviews(productId, page = 1, rating = null) {
    const reviewsContainer = document.getElementById('reviewsContainer');
    if (!reviewsContainer) return;
    
    const params = new URLSearchParams({
        page: page
    });
    
    if (rating) {
        params.append('rating', rating);
    }
    
    reviewsContainer.innerHTML = '<div class="text-center p-4"><i class="bi bi-hourglass-split"></i> 加载中...</div>';
    
    fetch(`/review/product/${productId}?${params}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderReviews(data);
            } else {
                reviewsContainer.innerHTML = '<div class="text-center p-4 text-muted">加载失败</div>';
            }
        })
        .catch(error => {
            reviewsContainer.innerHTML = '<div class="text-center p-4 text-muted">加载失败</div>';
        });
}

// 渲染评价列表
function renderReviews(data) {
    const reviewsContainer = document.getElementById('reviewsContainer');
    if (!reviewsContainer) return;
    
    let html = '';
    
    // 评价统计
    if (data.stats) {
        html += renderReviewStats(data.stats);
    }
    
    // 评价筛选
    html += renderReviewFilter();
    
    // 评价列表
    if (data.reviews && data.reviews.length > 0) {
        data.reviews.forEach(review => {
            html += renderReviewItem(review);
        });
        
        // 分页
        if (data.pagination && data.pagination.pages > 1) {
            html += renderPagination(data.pagination);
        }
    } else {
        html += '<div class="text-center p-4 text-muted">暂无评价</div>';
    }
    
    reviewsContainer.innerHTML = html;
}

// 渲染评价统计
function renderReviewStats(stats) {
    const goodRate = stats.good_rate || 0;
    const totalReviews = stats.total_reviews || 0;
    
    let html = `
        <div class="reviews-stats">
            <div class="rating-summary">
                <div class="overall-rating">
                    <div class="score">${goodRate}%</div>
                    <div class="total">好评率 (${totalReviews}条评价)</div>
                </div>
                <div class="rating-breakdown">
    `;
    
    for (let i = 5; i >= 1; i--) {
        const count = stats.rating_stats[i] || 0;
        const percentage = totalReviews > 0 ? (count / totalReviews * 100) : 0;
        
        html += `
            <div class="rating-bar">
                <span class="label">${i}星</span>
                <div class="progress">
                    <div class="progress-bar" style="width: ${percentage}%"></div>
                </div>
                <span class="count">${count}</span>
            </div>
        `;
    }
    
    html += `
                </div>
            </div>
        </div>
    `;
    
    return html;
}

// 渲染评价筛选
function renderReviewFilter() {
    return `
        <div class="reviews-filter">
            <button class="btn btn-outline-primary btn-sm active" onclick="filterReviews(null)">
                全部评价
            </button>
            <button class="btn btn-outline-primary btn-sm" onclick="filterReviews(5)">
                好评 (5星)
            </button>
            <button class="btn btn-outline-primary btn-sm" onclick="filterReviews(3)">
                中评 (3星)
            </button>
            <button class="btn btn-outline-primary btn-sm" onclick="filterReviews(1)">
                差评 (1星)
            </button>
        </div>
    `;
}

// 渲染单个评价 - 修复图片和头像问题
function renderReviewItem(review) {
    let html = `
        <div class="review-list-item">
            <div class="reviewer-info">
    `;
    
    if (review.user_avatar) {
        // 用户头像 - 添加内联样式强制约束尺寸
        html += `<img src="${review.user_avatar}" 
                      class="reviewer-avatar" 
                      alt="用户头像"
                      style="width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 50% !important; object-fit: cover !important; border: 2px solid #e9ecef !important; display: block !important; flex-shrink: 0 !important;">`;
    } else {
        html += `<div class="reviewer-avatar bg-secondary d-flex align-items-center justify-content-center text-white"
                      style="width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 50% !important; flex-shrink: 0 !important;">
                    <i class="bi bi-person"></i>
                 </div>`;
    }
    
    html += `
                <div>
                    <div class="reviewer-name">${review.username}</div>
                    <div class="review-time">${new Date(review.created_at).toLocaleDateString()}</div>
                </div>
            </div>
            
            <div class="rating-display mb-2">
                <span class="stars">${review.rating_stars}</span>
                <span class="text-muted">${review.rating}分</span>
            </div>
    `;
    
    if (review.content) {
        html += `<p class="review-content">${review.content}</p>`;
    }
    
    if (review.images && review.images.length > 0) {
        html += '<div class="product-review-images mb-2">';
        review.images.forEach(imageUrl => {
            // 评价图片 - 使用特殊的类名和内联样式确保图片尺寸正确
            html += `<img src="${imageUrl}" 
                          class="product-review-image" 
                          alt="评价图片" 
                          style="width: 80px !important; height: 80px !important; max-width: 80px !important; max-height: 80px !important; min-width: 80px !important; min-height: 80px !important; object-fit: cover !important; border-radius: 6px !important; border: 1px solid #dee2e6 !important; cursor: pointer !important; margin-right: 8px !important; margin-bottom: 8px !important; display: inline-block !important; vertical-align: top !important;"
                          onclick="showImageModal('${imageUrl}')">`;
        });
        html += '</div>';
    }
    
    html += '</div>';
    
    return html;
}

// 渲染分页
function renderPagination(pagination) {
    if (pagination.pages <= 1) return '';
    
    let html = '<nav aria-label="评价分页"><ul class="pagination justify-content-center">';
    
    // 上一页
    if (pagination.has_prev) {
        html += `<li class="page-item">
                    <a class="page-link" href="#" onclick="loadProductReviews(window.currentProductId, ${pagination.page - 1}); return false;">
                        上一页
                    </a>
                 </li>`;
    }
    
    // 页码
    const startPage = Math.max(1, pagination.page - 2);
    const endPage = Math.min(pagination.pages, pagination.page + 2);
    
    for (let i = startPage; i <= endPage; i++) {
        const activeClass = i === pagination.page ? 'active' : '';
        html += `<li class="page-item ${activeClass}">
                    <a class="page-link" href="#" onclick="loadProductReviews(window.currentProductId, ${i}); return false;">
                        ${i}
                    </a>
                 </li>`;
    }
    
    // 下一页
    if (pagination.has_next) {
        html += `<li class="page-item">
                    <a class="page-link" href="#" onclick="loadProductReviews(window.currentProductId, ${pagination.page + 1}); return false;">
                        下一页
                    </a>
                 </li>`;
    }
    
    html += '</ul></nav>';
    
    return html;
}

// 筛选评价
function filterReviews(rating) {
    // 更新筛选按钮状态
    const filterButtons = document.querySelectorAll('.reviews-filter .btn');
    filterButtons.forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    
    // 重新加载评价
    loadProductReviews(window.currentProductId, 1, rating);
}

// 显示图片模态框
function showImageModal(imageUrl) {
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    
    if (modal && modalImage) {
        modalImage.src = imageUrl;
        new bootstrap.Modal(modal).show();
    }
}

// 显示提示信息
function showAlert(message, type = 'info') {
    // 创建警告框
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'error' ? 'danger' : type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    // 添加到页面
    document.body.appendChild(alertDiv);
    
    // 自动消失
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}

// 全局变量，用于存储当前商品ID
window.currentProductId = null;