#!/bin/bash

echo "=========================================="
echo "📋 VPS Price - v3.3 列表模式对比功能测试"
echo "=========================================="
echo ""

echo "✅ 检查文件完整性..."
echo ""

# 检查 JS 文件
if [ -f /Users/ddrwode/code/vps_price/static/js/main-comparison-list.js ]; then
    echo "✓ JS: main-comparison-list.js 已创建"
    
    if grep -q "toggleComparisonPanel" /Users/ddrwode/code/vps_price/static/js/main-comparison-list.js; then
        echo "✓ JS: 整体折叠功能已实现"
    fi
    
    if grep -q "renderComparisonTable" /Users/ddrwode/code/vps_price/static/js/main-comparison-list.js; then
        echo "✓ JS: 表格渲染已实现"
    fi
    
    if grep -q "isComparisonExpanded" /Users/ddrwode/code/vps_price/static/js/main-comparison-list.js; then
        echo "✓ JS: 展开状态管理已实现"
    fi
else
    echo "✗ JS: main-comparison-list.js 未找到"
fi

echo ""

# 检查 CSS 文件
if grep -q "comparison-table-wrapper" /Users/ddrwode/code/vps_price/static/css/style.css; then
    echo "✓ CSS: 表格容器样式已添加"
fi

if grep -q "btn-toggle-comparison" /Users/ddrwode/code/vps_price/static/css/style.css; then
    echo "✓ CSS: 折叠按钮样式已添加"
fi

if grep -q "comparison-panel.collapsed" /Users/ddrwode/code/vps_price/static/css/style.css; then
    echo "✓ CSS: 收起状态样式已添加"
fi

if grep -q "comparison-table tbody tr:hover" /Users/ddrwode/code/vps_price/static/css/style.css; then
    echo "✓ CSS: 行悬停效果已添加"
fi

echo ""

# 检查 HTML 引用
if grep -q "main-comparison-list.js" /Users/ddrwode/code/vps_price/templates/index.html; then
    echo "✓ HTML: JS 引用已更新为列表版本"
else
    echo "✗ HTML: JS 引用未更新"
fi

if grep -q "btn-toggle-comparison" /Users/ddrwode/code/vps_price/templates/index.html; then
    echo "✓ HTML: 折叠按钮已添加"
else
    echo "✗ HTML: 折叠按钮未添加"
fi

echo ""
echo "=========================================="
echo "📊 文件统计"
echo "=========================================="
echo ""

if [ -f /Users/ddrwode/code/vps_price/static/js/main-comparison-list.js ]; then
    JS_SIZE=$(wc -c < /Users/ddrwode/code/vps_price/static/js/main-comparison-list.js)
    JS_LINES=$(wc -l < /Users/ddrwode/code/vps_price/static/js/main-comparison-list.js)
    echo "JS 文件大小: $JS_SIZE bytes ($JS_LINES 行)"
fi

CSS_SIZE=$(wc -c < /Users/ddrwode/code/vps_price/static/css/style.css)
CSS_LINES=$(wc -l < /Users/ddrwode/code/vps_price/static/css/style.css)
echo "CSS 文件大小: $CSS_SIZE bytes ($CSS_LINES 行)"

echo ""
echo "=========================================="
echo "🎯 新增功能"
echo "=========================================="
echo ""
echo "1. 📋 整体可折叠"
echo "   - 整个对比面板可以收起/展开"
echo "   - 点击'收起对比'按钮折叠"
echo "   - 收起后显示'展开对比 (N)'"
echo ""
echo "2. 📊 表格列表样式"
echo "   - 像左侧 VPS 列表一样的表格布局"
echo "   - 清晰的表头和数据行"
echo "   - 紧凑的数据展示"
echo ""
echo "3. 🎨 行悬停高亮"
echo "   - 鼠标悬停时高亮整行"
echo "   - 提升可读性"
echo "   - 平滑过渡动画"
echo ""
echo "4. 📱 响应式设计"
echo "   - 桌面端：完整表格"
echo "   - 移动端：隐藏部分列"
echo "   - 小屏幕优化"
echo ""
echo "5. ⚡ 快速操作"
echo "   - 访问官网按钮"
echo "   - 移除对比按钮"
echo "   - 清空所有对比"
echo ""
echo "=========================================="
echo "🚀 测试步骤"
echo "=========================================="
echo ""
echo "请访问: http://127.0.0.1:5001"
echo "强制刷新: Cmd + Shift + R (Mac) 或 Ctrl + Shift + R (Windows)"
echo ""
echo "测试清单："
echo "1. ⭐ 点击 2-3 个方案的星标"
echo "2. 👀 查看右侧对比面板（表格模式）"
echo "3. 🔽 点击'收起对比'按钮"
echo "4. 🔼 点击'展开对比 (N)'按钮"
echo "5. 🖱️  鼠标悬停在表格行上查看高亮"
echo "6. 🔗 点击'访问'按钮测试跳转"
echo "7. ❌ 点击'✕'按钮移除单个方案"
echo "8. 🗑️  点击右上角'✕'清空所有对比"
echo "9. 📱 调整窗口测试响应式"
echo ""
echo "=========================================="
echo "💡 使用技巧"
echo "=========================================="
echo ""
echo "• 整体折叠：点击'收起对比'按钮"
echo "• 快速查看：收起后显示对比数量"
echo "• 行悬停：鼠标移到行上高亮显示"
echo "• 快速移除：点击行右侧的 ✕ 按钮"
echo "• 清空所有：点击标题右侧的 ✕ 按钮"
echo ""