/**
 * 预算页面验证脚本 - Test-Engineer Agent
 * 验证剩余金额显示修复
 */

import { chromium } from 'playwright';

async function verifyBudgetPage() {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  try {
    console.log('【测试开始】打开预算页面...');
    await page.goto('http://localhost:5173/budget', { waitUntil: 'networkidle' });
    
    // 等待页面加载
    await page.waitForTimeout(2000);
    
    // 截图
    await page.screenshot({ 
      path: 'D:\\Users\\kaifa\\Trae_cn260425\\personal-finance-budget-system\\budget-verification.png',
      fullPage: true 
    });
    console.log('【截图完成】budget-verification.png');
    
    // 提取预算数据
    const pageText = await page.textContent('body');
    console.log('\n【页面内容提取】');
    
    // 查找预算相关数据
    const budgetMatch = pageText.match(/总预算[：:]\s*¥?([\d,]+\.?\d*)/);
    const spentMatch = pageText.match(/已花费[：:]\s*¥?([\d,]+\.?\d*)/);
    const remainingMatch = pageText.match(/(剩余|超支)[：:]\s*¥?([\d,]+\.?\d*)/);
    
    console.log('--- 预算数据 ---');
    if (budgetMatch) {
      console.log(`总预算: ¥${budgetMatch[1]}`);
    }
    if (spentMatch) {
      console.log(`已花费: ¥${spentMatch[1]}`);
    }
    if (remainingMatch) {
      console.log(`${remainingMatch[1]}: ¥${remainingMatch[2]}`);
    }
    
    // 验证计算
    console.log('\n【验证结果】');
    const expectedBudget = 2200;
    const expectedSpent = 2529.30;
    const expectedOverage = 329.30;
    
    // 检查是否显示"超支"
    const hasOverage = pageText.includes('超支');
    const hasRemaining = pageText.includes('剩余');
    
    if (hasOverage) {
      console.log('✅ 正确显示"超支"标签');
    } else if (hasRemaining) {
      console.log('❌ 错误显示"剩余"标签（应为"超支"）');
    }
    
    // 检查金额
    if (remainingMatch) {
      const amount = parseFloat(remainingMatch[2].replace(',', ''));
      if (Math.abs(amount - expectedOverage) < 0.01) {
        console.log(`✅ 金额正确: ¥${amount.toFixed(2)}`);
      } else {
        console.log(`❌ 金额错误: 显示 ¥${amount.toFixed(2)}，预期 ¥${expectedOverage.toFixed(2)}`);
      }
    }
    
    // 输出关键预算信息
    console.log('\n【关键预算信息】');
    // 提取预算概览区域
    const budgetSection = await page.locator('.budget-overview, .budget-summary, [class*="budget"]').first().textContent().catch(() => null);
    if (budgetSection) {
      console.log('预算区域:', budgetSection.trim().substring(0, 500));
    }
    
    // 查找所有包含金额的元素
    const amounts = await page.locator('[class*="amount"], [class*="budget"], [class*="spent"], [class*="remaining"]').allTextContents();
    console.log('\n金额相关元素:', amounts.slice(0, 10));
    
  } catch (error) {
    console.error('【测试失败】', error.message);
  } finally {
    await browser.close();
  }
}

verifyBudgetPage();