import { chromium, devices } from '@playwright/test';

const viewports = [
  { name: 'Mobile - iPhone 14', width: 390, height: 844 },
  { name: 'Tablet - iPad', width: 768, height: 1024 },
  { name: 'Desktop - 1024', width: 1024, height: 768 },
  { name: 'Desktop - 1440', width: 1440, height: 900 },
];

const pages = [
  { name: '首页', url: 'http://localhost:3000' },
  { name: '产品列表', url: 'http://localhost:3000/products' },
  { name: '解决方案列表', url: 'http://localhost:3000/solutions' },
  { name: '服务列表', url: 'http://localhost:3000/services' },
];

async function runResponsiveTest() {
  const browser = await chromium.launch();
  const results = [];

  for (const page of pages) {
    for (const viewport of viewports) {
      console.log(`\n测试: ${page.name} - ${viewport.name} (${viewport.width}x${viewport.height})`);

      const context = await browser.newContext({
        viewport: { width: viewport.width, height: viewport.height },
      });

      const pageInstance = await context.newPage();

      try {
        await pageInstance.goto(page.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
        await pageInstance.waitForTimeout(2000);

        const title = await pageInstance.title();
        const scrollHeight = await pageInstance.evaluate(() => document.documentElement.scrollHeight);

        const heroTitleFontSize = await pageInstance.evaluate(() => {
          const heroTitle = document.querySelector('h1');
          if (heroTitle) {
            const style = window.getComputedStyle(heroTitle);
            return style.fontSize;
          }
          return null;
        });

        const screenshotPath = `./responsive-test/${page.name.replace(/\//g, '-')}_${viewport.name.replace(/\s/g, '-')}.png`;
        await pageInstance.screenshot({ path: screenshotPath, fullPage: true });

        console.log(`  ✓ 标题: ${title}`);
        console.log(`  ✓ 页面高度: ${scrollHeight}px`);
        console.log(`  ✓ Hero 标题字号: ${heroTitleFontSize || 'N/A'}`);
        console.log(`  ✓ 截图已保存: ${screenshotPath}`);

        results.push({
          page: page.name,
          viewport: viewport.name,
          width: viewport.width,
          height: viewport.height,
          scrollHeight,
          heroTitleFontSize,
          status: 'success',
        });
      } catch (error) {
        console.log(`  ✗ 错误: ${error.message}`);
        results.push({
          page: page.name,
          viewport: viewport.name,
          width: viewport.width,
          height: viewport.height,
          status: 'error',
          error: error.message,
        });
      }

      await context.close();
    }
  }

  await browser.close();

  console.log('\n\n========== 响应式测试总结 ==========');
  const successCount = results.filter(r => r.status === 'success').length;
  const errorCount = results.filter(r => r.status === 'error').length;
  console.log(`总测试数: ${results.length}`);
  console.log(`成功: ${successCount}`);
  console.log(`失败: ${errorCount}`);

  return results;
}

runResponsiveTest().catch(console.error);