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

const TARGET_URL = process.env.TARGET_URL || 'http://127.0.0.1:3001';
const TOKEN = process.env.ADMIN_TOKEN || 'shop_admin_2024_secure_token';
const REPORTS_DIR = process.env.REPORTS_DIR || './reports';
const OUTPUT_DIR = process.env.OUTPUT_DIR || './visual/admin-screenshots';

const PAGES = [
  { path: '/', name: 'dashboard' },
  { path: '/users', name: 'users' },
  { path: '/products', name: 'products' },
  { path: '/categories', name: 'categories' },
  { path: '/catalog', name: 'catalog' },
  { path: '/purchases', name: 'purchases' },
  { path: '/audit', name: 'audit' },
  { path: '/settings', name: 'settings' },
  { path: '/wallets', name: 'wallets' },
  { path: '/payment-wallets', name: 'payment-wallets' },
  { path: '/seed', name: 'seed' },
  { path: '/locales', name: 'locales' },
];

const VIEWPORTS = {
  desktop: { width: 1920, height: 1080 },
  tablet: { width: 768, height: 1024 },
  mobile: { width: 375, height: 667 },
};

async function login(context) {
  const page = await context.newPage();
  const loginUrl = `${TARGET_URL}/login`;
  console.log(`Logging in at ${loginUrl}`);
  await page.goto(loginUrl, { waitUntil: 'networkidle', timeout: 30000 });

  const tokenInput = await page.locator('input[name="token"], input#token, input[type="password"]').first();
  if (await tokenInput.count() > 0) {
    await tokenInput.fill(TOKEN);
  }

  const submitBtn = await page.locator('button[type="submit"], input[type="submit"], button:has-text("Login"), button:has-text("Sign in")').first();
  if (await submitBtn.count() > 0) {
    await submitBtn.click();
  } else {
    await page.evaluate((token) => {
      const form = document.querySelector('form');
      if (form) {
        const input = form.querySelector('input[name="token"]') || form.querySelector('input[type="password"]');
        if (input) input.value = token;
        form.submit();
      }
    }, TOKEN);
  }

  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);
  const cookies = await context.cookies();
  console.log('Cookies after login:', cookies.map(c => c.name));
  await page.close();
}

async function captureAndMonitor(context, pageInfo, viewportName, outputDir) {
  const page = await context.newPage();
  const fullUrl = `${TARGET_URL}${pageInfo.path}`;
  const filename = `${pageInfo.name}_${viewportName}.png`;
  const filepath = path.join(outputDir, filename);

  const consoleErrors = [];
  const networkErrors = [];
  const assetErrors = [];

  page.on('console', msg => {
    if (msg.type() === 'error') {
      consoleErrors.push({ type: 'console_error', text: msg.text(), location: msg.location() });
    }
  });

  page.on('pageerror', err => {
    consoleErrors.push({ type: 'page_error', text: err.message, stack: err.stack });
  });

  page.on('requestfailed', req => {
    networkErrors.push({ type: 'network_failure', url: req.url(), resourceType: req.resourceType(), error: req.failure()?.errorText });
  });

  page.on('response', res => {
    if (res.status() >= 400) {
      const req = res.request();
      const entry = { type: 'http_error', url: res.url(), status: res.status(), statusText: res.statusText(), resourceType: req.resourceType() };
      if (req.resourceType() === 'stylesheet' || req.resourceType() === 'script' || req.url().match(/\.(css|js|woff|woff2)$/)) {
        assetErrors.push(entry);
      }
      networkErrors.push(entry);
    }
  });

  await page.setViewportSize(VIEWPORTS[viewportName]);

  try {
    await page.goto(fullUrl, { waitUntil: 'networkidle', timeout: 30000 });
  } catch (e) {
    await page.goto(fullUrl, { waitUntil: 'load', timeout: 30000 });
  }

  await page.waitForTimeout(1500);

  if (pageInfo.name === 'catalog') {
    try {
      const accordionHeaders = await page.locator('.accordion-button, [data-toggle="collapse"], .catalog-toggle').all();
      for (const header of accordionHeaders.slice(0, 3)) {
        await header.click().catch(() => {});
        await page.waitForTimeout(300);
      }
      await page.waitForTimeout(500);
    } catch (e) {}
  }

  if (pageInfo.name === 'users') {
    try {
      const collapseBtn = await page.locator('button:has-text("Adjust Balance"), [data-toggle="collapse"]:has-text("Adjust"), .adjust-balance-toggle').first();
      if (await collapseBtn.count() > 0) {
        await collapseBtn.click().catch(() => {});
        await page.waitForTimeout(500);
      }
    } catch (e) {}
  }

  await page.screenshot({ path: filepath, fullPage: false });
  await page.close();

  return {
    page: pageInfo.name,
    path: pageInfo.path,
    viewport: viewportName,
    file: filename,
    url: fullUrl,
    consoleErrors,
    networkErrors,
    assetErrors,
    status: networkErrors.some(e => e.status >= 500) ? 'ERROR' : 'OK',
  };
}

async function main() {
  fs.mkdirSync(OUTPUT_DIR, { recursive: true });
  fs.mkdirSync(REPORTS_DIR, { recursive: true });

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({ ignoreHTTPSErrors: true });

  await login(context);

  const results = [];
  for (const pageInfo of PAGES) {
    for (const vpName of Object.keys(VIEWPORTS)) {
      try {
        const result = await captureAndMonitor(context, pageInfo, vpName, OUTPUT_DIR);
        results.push(result);
        const errSummary = result.consoleErrors.length + result.networkErrors.length;
        console.log(`[${result.status}] ${pageInfo.name} @ ${vpName} (${errSummary} errors) -> ${result.file}`);
      } catch (err) {
        results.push({ page: pageInfo.name, path: pageInfo.path, viewport: vpName, status: 'ERROR', error: err.message, consoleErrors: [], networkErrors: [], assetErrors: [] });
        console.error(`[ERROR] ${pageInfo.name} @ ${vpName}: ${err.message}`);
      }
    }
  }

  await browser.close();

  const summary = {
    timestamp: new Date().toISOString(),
    targetUrl: TARGET_URL,
    totalScreenshots: results.filter(r => !r.error).length,
    totalErrors: results.filter(r => r.status === 'ERROR' || r.error).length,
    pages: PAGES.map(p => {
      const pageResults = results.filter(r => r.page === p.name);
      const anyError = pageResults.some(r => r.status === 'ERROR' || r.error || r.consoleErrors?.length > 0 || r.networkErrors?.length > 0);
      return {
        name: p.name,
        path: p.path,
        status: pageResults.some(r => r.status === 'ERROR') ? 'ERROR' : (anyError ? 'WARN' : 'OK'),
        viewports: Object.fromEntries(pageResults.map(r => [r.viewport, { file: r.file, status: r.status, consoleErrors: r.consoleErrors?.length || 0, networkErrors: r.networkErrors?.length || 0 }])),
        consoleErrors: pageResults.flatMap(r => r.consoleErrors || []),
        networkErrors: pageResults.flatMap(r => r.networkErrors || []),
        assetErrors: pageResults.flatMap(r => r.assetErrors || []),
      };
    }),
    results,
  };

  const reportPath = path.join(REPORTS_DIR, 'admin-visual-test-report.json');
  fs.writeFileSync(reportPath, JSON.stringify(summary, null, 2));
  console.log(`\nReport saved to ${reportPath}`);

  console.log('\n## Visual Test Results\n');
  console.log('| Page | Status | Viewports | Console Errors | Network Errors | Notes |');
  console.log('|------|--------|-----------|----------------|----------------|-------|');
  for (const p of summary.pages) {
    const vpStatus = Object.entries(p.viewports).map(([vp, data]) => `${vp}: ${data.status}`).join(', ');
    const ce = p.consoleErrors.length;
    const ne = p.networkErrors.length;
    const notes = [];
    if (p.assetErrors?.length > 0) notes.push(`${p.assetErrors.length} asset 404s`);
    if (p.consoleErrors.some(e => e.type === 'page_error')) notes.push('page errors');
    console.log(`| ${p.name} | ${p.status} | ${vpStatus} | ${ce} | ${ne} | ${notes.join('; ') || '-'} |`);
  }

  const mdPath = path.join(REPORTS_DIR, 'admin-visual-test-report.md');
  let md = `## Visual Test Results for Admin Panel\n\n`;
  md += `**URL:** ${TARGET_URL}\n`;
  md += `**Date:** ${summary.timestamp}\n\n`;
  md += `| Page | Status | Desktop | Tablet | Mobile | Console | Network | Notes |\n`;
  md += `|------|--------|---------|--------|--------|---------|---------|-------|\n`;
  for (const p of summary.pages) {
    const d = p.viewports.desktop?.status || 'N/A';
    const t = p.viewports.tablet?.status || 'N/A';
    const m = p.viewports.mobile?.status || 'N/A';
    const ce = (p.consoleErrors || []).length;
    const ne = (p.networkErrors || []).length;
    const notes = [];
    if ((p.assetErrors || []).length > 0) notes.push(`${p.assetErrors.length} asset 404s`);
    if (p.consoleErrors.some(e => e.type === 'page_error')) notes.push('JS page errors');
    md += `| ${p.name} | ${p.status} | ${d} | ${t} | ${m} | ${ce} | ${ne} | ${notes.join('; ') || '-'} |\n`;
  }
  md += `\n### Screenshot Files\n\n`;
  for (const p of summary.pages) {
    for (const [vp, data] of Object.entries(p.viewports)) {
      md += `- \`${data.file}\`\n`;
    }
  }
  md += `\n### Asset 404 Errors\n\n`;
  const allAssetErrors = summary.pages.flatMap(p => p.assetErrors || []);
  if (allAssetErrors.length === 0) {
    md += 'No asset 404 errors found.\n';
  } else {
    for (const e of allAssetErrors) {
      md += `- \`${e.url}\` (${e.status} ${e.statusText})\n`;
    }
  }
  md += `\n### Runtime JS Errors\n\n`;
  const allPageErrors = summary.pages.flatMap(p => p.consoleErrors.filter(e => e.type === 'page_error') || []);
  if (allPageErrors.length === 0) {
    md += 'No runtime JS page errors found.\n';
  } else {
    for (const e of allPageErrors) {
      md += `- \`${e.text}\`\n`;
    }
  }
  fs.writeFileSync(mdPath, md);
  console.log(`Markdown report saved to ${mdPath}`);
}

main().catch(err => {
  console.error('Fatal error:', err);
  process.exit(1);
});