import { chromium } from 'playwright';
import fs from 'fs';
import path from 'path';

const BASE_URL = 'http://localhost:5174';
const OUTPUT_DIR = './test-results';

// Create output directory
if (!fs.existsSync(OUTPUT_DIR)) {
  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
}

const pages = [
  {
    name: 'Shadow Run Queue (T06)',
    url: '/model-ops/shadow-run-jobs',
    checks: [
      'Shadow Run Jobs',
      'Pending',
      'Completed',
      'Failed',
      'KbxScreenFrame',
      'KbxQueueTemplate'
    ]
  },
  {
    name: 'Models Master-Detail (T02)',
    url: '/model-ops/models-master',
    checks: [
      'Models',
      'Model',
      'Performance Metrics',
      'PBO',
      'DSR',
      'KbxMasterTemplate'
    ]
  },
  {
    name: 'Approval Queue (T03)',
    url: '/governance/approvals',
    checks: [
      'Approval Queue',
      'Pending',
      'Approved',
      'Rejected',
      'Review & Approval',
      'KbxTransactionTemplate'
    ]
  }
];

async function testPage(browser, page) {
  console.log(`\n${'='.repeat(60)}`);
  console.log(`Testing: ${page.name}`);
  console.log(`URL: ${BASE_URL}${page.url}`);
  console.log('='.repeat(60));

  const browserPage = await browser.newPage();

  // Capture console errors
  let errors = [];
  browserPage.on('console', msg => {
    if (msg.type() === 'error') {
      errors.push(msg.text());
      console.log(`❌ Console Error: ${msg.text()}`);
    }
  });

  // Capture page errors
  let pageErrors = [];
  browserPage.on('pageerror', err => {
    pageErrors.push(err.toString());
    console.log(`❌ Page Error: ${err.message}`);
  });

  try {
    // Navigate to page
    await browserPage.goto(`${BASE_URL}${page.url}`, { waitUntil: 'networkidle' });
    console.log('✅ Page loaded');

    // Wait for content
    await browserPage.waitForTimeout(2000);

    // Check for expected content
    let foundChecks = [];
    for (const check of page.checks) {
      const found = await browserPage.locator(`text="${check}"`).count() > 0 ||
                    await browserPage.content().includes(check);
      if (found) {
        foundChecks.push(check);
        console.log(`✅ Found: "${check}"`);
      } else {
        console.log(`❌ Missing: "${check}"`);
      }
    }

    // Get page title
    const title = await browserPage.title();
    console.log(`📄 Title: ${title}`);

    // Check DOM structure
    const html = await browserPage.content();
    const hasVueApp = html.includes('id="app"');
    const hasKbxComponents = html.includes('kbx-');
    console.log(`Vue App: ${hasVueApp ? '✅' : '❌'}`);
    console.log(`KBX Components: ${hasKbxComponents ? '✅' : '❌'}`);

    // Screenshot
    const screenshotPath = path.join(OUTPUT_DIR, `${page.name.replace(/\s+/g, '-').toLowerCase()}.png`);
    await browserPage.screenshot({ path: screenshotPath, fullPage: true });
    console.log(`📸 Screenshot: ${screenshotPath}`);

    // Save DOM
    const domPath = path.join(OUTPUT_DIR, `${page.name.replace(/\s+/g, '-').toLowerCase()}.html`);
    fs.writeFileSync(domPath, html);
    console.log(`🔍 DOM saved: ${domPath}`);

    // Summary
    const checksPassed = foundChecks.length;
    const checksTotal = page.checks.length;
    const passRate = Math.round((checksPassed / checksTotal) * 100);
    console.log(`\n📊 Content Check: ${checksPassed}/${checksTotal} (${passRate}%)`);
    console.log(`❌ Errors: ${errors.length + pageErrors.length}`);

    await browserPage.close();

    return {
      success: errors.length === 0 && pageErrors.length === 0 && passRate >= 80,
      name: page.name,
      url: page.url,
      errors: errors.concat(pageErrors),
      contentChecks: { passed: checksPassed, total: checksTotal },
      screenshot: screenshotPath
    };
  } catch (err) {
    console.log(`❌ Test Failed: ${err.message}`);
    await browserPage.close();
    return {
      success: false,
      name: page.name,
      url: page.url,
      errors: [err.message],
      contentChecks: { passed: 0, total: page.checks.length }
    };
  }
}

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

  console.log('\n🚀 Starting Playwright Tests\n');
  console.log(`Base URL: ${BASE_URL}`);
  console.log(`Output: ${OUTPUT_DIR}\n`);

  for (const page of pages) {
    const result = await testPage(browser, page);
    results.push(result);
  }

  await browser.close();

  // Summary
  console.log(`\n${'='.repeat(60)}`);
  console.log('TEST SUMMARY');
  console.log('='.repeat(60));

  for (const result of results) {
    const status = result.success ? '✅' : '❌';
    console.log(`\n${status} ${result.name}`);
    console.log(`   URL: ${result.url}`);
    console.log(`   Content: ${result.contentChecks.passed}/${result.contentChecks.total}`);
    console.log(`   Errors: ${result.errors.length}`);
    if (result.errors.length > 0) {
      result.errors.forEach(err => console.log(`      - ${err}`));
    }
  }

  const allPassed = results.every(r => r.success);
  console.log(`\n${'='.repeat(60)}`);
  console.log(allPassed ? '✅ ALL TESTS PASSED' : '❌ SOME TESTS FAILED');
  console.log('='.repeat(60));

  process.exit(allPassed ? 0 : 1);
}

main().catch(console.error);