const { chromium } = require('@playwright/test');
const fs = require('fs');
const path = require('path');

const BASE_URL = 'http://localhost:3000';
const OUTPUT_DIR = '/tmp/screenshots/phase7-visual-test';

const PAGES = [
  { name: '01-home', path: '/' },
  { name: '02-products-list', path: '/products' },
  { name: '03-product-detail-erp', path: '/products/erp' },
  { name: '04-solutions-list', path: '/solutions' },
  { name: '05-solutions-detail', path: '/solutions/manufacturing' },
  { name: '06-services-list', path: '/services' },
  { name: '07-service-detail', path: '/services/consulting' },
  { name: '08-about', path: '/about' },
  { name: '09-contact', path: '/contact' },
  { name: '10-news-list', path: '/news' },
  { name: '11-team', path: '/team' },
];

const VIEWPORTS = [
  { name: 'mobile', width: 390, height: 844 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'desktop', width: 1440, height: 900 },
];

async function runVisualTest() {
  if (!fs.existsSync(OUTPUT_DIR)) {
    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
  }

  const browser = await chromium.launch();
  const results = [];

  for (const viewport of VIEWPORTS) {
    const viewportDir = path.join(OUTPUT_DIR, viewport.name);
    if (!fs.existsSync(viewportDir)) {
      fs.mkdirSync(viewportDir, { recursive: true });
    }

    const page = await browser.newPage({
      viewport: { width: viewport.width, height: viewport.height },
    });

    for (const pageInfo of PAGES) {
      const url = `${BASE_URL}${pageInfo.path}`;
      const screenshotPath = path.join(viewportDir, `${pageInfo.name}.png`);

      try {
        console.log(`[${viewport.name}] Capturing: ${pageInfo.name}...`);
        await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 45000 });
        await page.waitForTimeout(2000);
        await page.screenshot({ path: screenshotPath, fullPage: true });
        results.push({ viewport: viewport.name, page: pageInfo.name, status: 'success', path: screenshotPath });
        console.log(`  ✓ Saved to ${screenshotPath}`);
      } catch (error) {
        results.push({ viewport: viewport.name, page: pageInfo.name, status: 'failed', error: error.message });
        console.log(`  ✗ Failed: ${error.message}`);
      }
    }

    await page.close();
  }

  await browser.close();

  const successCount = results.filter(r => r.status === 'success').length;
  const failCount = results.filter(r => r.status === 'failed').length;

  console.log('\n' + '='.repeat(60));
  console.log('Visual Test Summary');
  console.log('='.repeat(60));
  console.log(`Total: ${results.length} pages`);
  console.log(`Success: ${successCount}`);
  console.log(`Failed: ${failCount}`);
  console.log(`Output: ${OUTPUT_DIR}`);
  console.log('='.repeat(60));

  if (failCount > 0) {
    console.log('\nFailed pages:');
    results.filter(r => r.status === 'failed').forEach(r => {
      console.log(`  - [${r.viewport}] ${r.page}: ${r.error}`);
    });
  }

  return results;
}

runVisualTest().catch(console.error);