#!/bin/bash

echo "=========================================="
echo "📋 VPS Price - 可折叠表格对比功能测试"
echo "=========================================="
echo ""

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

# 检查 JS 文件
if [ -f /Users/ddrwode/code/vps_price/static/js/main-comparison-table.js ]; then
    echo "✓ JS: main-comparison-table.js 已创建"
    
    if grep -q "toggleRow" /Users/ddrwode/code/vps_price/static/js/main-comparison-table.js; then
        echo "✓ JS: 展开/收起功能已实现"
    fi
    
    if grep -q "expandAll" /Users/ddrwode/code/vps_price/static/js/main-comparison-table.js; then
        echo "✓ JS: 全部展开/收起已实现"
    fi
    
    if grep -q "renderComparisonRow" /Users/ddrwode/code/vps_price/static/js/main-comparison-table.js; then
        echo "✓ JS: 表格行渲染已实现"
    fi
    
    if grep -q "comparison-row-header" /Users/ddrwode/code/vps_price/static/js/main-comparison-table.js; then
        echo "✓ JS: 可折叠表格结构已实现"
    fi
else
    echo "✗ JS: main-comparison-table.js 未找到"
fi

echo ""

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

if grep -q "comparison-row" /Users/ddrwode/code/vps_price/static/css/style.css; then
    echo "✓ CSS: 对比行样式已添加"
fi

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

if grep -q "comparison-row-details" /Users/ddrwode/code/vps_price/static/css/style.css; then
    echo "✓ CSS: 可折叠详情样式已添加"
fi

if grep -q "comparison-expand-all" /Users/ddrwode/code/vps_price/static/css/style.css; then
    echo "✓ CSS: 全部展开/收起按钮样式已添加"
fi

echo ""

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

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

if [ -f /Users/ddrwode/code/vps_price/static/js/main-comparison-table.js ]; then
    JS_SIZE=$(wc -c < /Users/ddrwode/code/vps_price/static/js/main-comparison-table.js)
    JS_LINES=$(wc -l < /Users/ddrwode/code/vps_price/static/js/main-comparison-table.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 "   - 紧凑的表格式设计"
echo ""
echo "2. 🔽 展开/收起控制"
echo "   - 点击箭头图标展开详情"
echo "   - 再次点击收起详情"
echo "   - 展开时箭头旋转 90 度"
echo ""
echo "3. 📊 行头快速预览"
echo "   - 厂商名称 + 配置名称"
echo "   - 价格（最优价格高亮）"
echo "   - 性价比星级评分"
echo ""
echo "4. 📈 详情面板"
echo "   - 完整配置信息"
echo "   - 进度条可视化"
echo "   - 差异百分比显示"
echo "   - 访问官网按钮"
echo ""
echo "5. 🔄 全部展开/收起"
echo "   - 一键展开所有方案"
echo "   - 一键收起所有方案"
echo "   - 按钮文字动态切换"
echo ""
echo "6. ❌ 快速移除"
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. 📊 查看进度条和差异百分比"
echo "5. 🔄 点击'全部展开'按钮"
echo "6. 🔄 点击'全部收起'按钮"
echo "7. ❌ 点击行右侧的 ✕ 移除方案"
echo "8. 📱 调整窗口测试响应式"
echo ""
echo "=========================================="
echo "💡 使用技巧"
echo "=========================================="
echo ""
echo "• 默认状态：所有行都是收起的"
echo "• 点击行头任意位置：展开/收起该行"
echo "• 点击 ✕ 按钮：直接移除，不展开"
echo "• 全部展开：快速查看所有详情"
echo "• 全部收起：恢复紧凑视图"
echo ""