const { chromium } = require('playwright');

async function runChartSwitchTest() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();

  const results = [];
  const switchSequence = ['line', 'pie', 'line', 'pie', 'bar', 'pie', 'bar', 'pie', 'line', 'bar', 'pie', 'bar', 'line', 'pie', 'line', 'bar', 'pie', 'bar', 'line', 'pie'];

  console.log('打开统计页面...');
  await page.goto('http://localhost:5173/statistics', { waitUntil: 'networkidle', timeout: 15000 });

  // 等待更长时间让数据加载
  console.log('等待数据加载 (15秒)...');
  await page.waitForTimeout(15000);

  // 检查 DOM 状态
  const domCheck = await page.evaluate(() => {
    const echartsContainer = document.querySelector('.echarts-container');
    const pieContainer = document.querySelector('.pie-chart-container');
    const canvases = document.querySelectorAll('canvas');
    return {
      hasEchartsContainer: !!echartsContainer,
      hasPieContainer: !!pieContainer,
      canvasCount: canvases.length,
      bodyText: document.body.innerText.substring(0, 500)
    };
  });

  console.log('\n页面 DOM 状态:');
  console.log('  .echarts-container:', domCheck.hasEchartsContainer ? '存在' : '不存在');
  console.log('  .pie-chart-container:', domCheck.hasPieContainer ? '存在' : '不存在');
  console.log('  canvas 数量:', domCheck.canvasCount);
  console.log('  页面文本:', domCheck.bodyText.replace(/\n/g, ' ').substring(0, 100));

  console.log('\n开始20次图表切换测试...');

  for (let i = 0; i < switchSequence.length; i++) {
    const chartType = switchSequence[i];
    const btnSelector = `[data-type="${chartType}"]`;

    try {
      await page.click(btnSelector, { timeout: 5000 });
      await page.waitForTimeout(1500);

      let chartStatus = 'OK';
      let errorMsg = '';

      if (chartType === 'pie') {
        const pieCanvas = await page.$$('.pie-chart-container canvas');
        const trendCanvas = await page.$$('.echarts-container canvas');
        if (pieCanvas.length === 0) {
          chartStatus = 'FAIL';
          errorMsg = '饼图 canvas 为空';
        } else if (pieCanvas.length > 1) {
          chartStatus = 'WARN';
          errorMsg = `饼图 canvas 重复(${pieCanvas.length})`;
        }
        if (trendCanvas.length > 0) {
          chartStatus = 'FAIL';
          errorMsg = `趋势图未销毁(${trendCanvas.length})`;
        }
      } else {
        const trendCanvas = await page.$$('.echarts-container canvas');
        if (trendCanvas.length === 0) {
          chartStatus = 'FAIL';
          errorMsg = '趋势图 canvas 为空';
        } else if (trendCanvas.length > 1) {
          chartStatus = 'WARN';
          errorMsg = `趋势图 canvas 重复(${trendCanvas.length})`;
        }
        const pieCanvas = await page.$$('.pie-chart-container canvas');
        if (pieCanvas.length > 0) {
          chartStatus = 'FAIL';
          errorMsg = `饼图未销毁(${pieCanvas.length})`;
        }
      }

      results.push({
        step: i + 1,
        to: chartType,
        status: chartStatus,
        error: errorMsg
      });

      console.log(`[${i + 1}/20] ${chartType.padEnd(5)}: ${chartStatus}${errorMsg ? ' - ' + errorMsg : ''}`);

    } catch (e) {
      results.push({
        step: i + 1,
        to: chartType,
        status: 'FAIL',
        error: e.message.substring(0, 80)
      });
      console.log(`[${i + 1}/20] ${chartType.padEnd(5)}: FAIL - ${e.message.substring(0, 50)}`);
    }
  }

  console.log('\n========== 测试结果统计 ==========');
  const passCount = results.filter(r => r.status === 'OK').length;
  const warnCount = results.filter(r => r.status === 'WARN').length;
  const failCount = results.filter(r => r.status === 'FAIL').length;

  console.log(`通过: ${passCount}/20 (${(passCount/20*100).toFixed(1)}%)`);
  console.log(`警告: ${warnCount}/20`);
  console.log(`失败: ${failCount}/20`);

  if (failCount > 0) {
    console.log('\n失败详情:');
    results.filter(r => r.status === 'FAIL').forEach(r => {
      console.log(`  Step ${r.step}: ${r.to} - ${r.error}`);
    });
  }

  await browser.close();

  return { passCount, failCount, warnCount, details: results };
}

runChartSwitchTest()
  .then(result => {
    console.log('\n测试完成');
    process.exit(result.failCount > 0 ? 1 : 0);
  })
  .catch(e => {
    console.error('测试失败:', e);
    process.exit(1);
  });