// Layout regression fixture using the production styles; no network calls.
const assert = require('node:assert/strict')
const path = require('node:path')
const { chromium } = require(process.env.REVIEW_PLAYWRIGHT || 'playwright')
;(async () => {
  const browser = await chromium.launch({ headless: true })
  try {
    const page = await browser.newPage()
    await page.setContent(`<main class="page"><div class="diagnostics-grid">${['Application', 'API', 'Database'].map((name, i) => `<article class="diagnostic-card"><div class="diagnostic-card-top"><h3>${name}</h3></div><div class="diagnostic-meta-grid">${['Target', 'Latency', 'Mode', 'Last checked'].map(label => `<div class="diagnostic-meta-item"><span>${label}</span><strong>Test value</strong></div>`).join('')}</div><div class="diagnostic-message">Check passed</div>${i === 2 ? '<div class="diagnostic-detail-panel">' + '<div class="diagnostic-detail-item">Database statistics</div>'.repeat(20) + '</div>' : ''}</article>`).join('')}</div></main>`)
    for (const file of ['globals.css', 'ops-redesign.css']) await page.addStyleTag({ path: path.join(__dirname, '../frontend/app', file) })
    for (const width of [1440, 1000, 390]) {
      await page.setViewportSize({ width, height: 1000 })
      const cards = await page.locator('.diagnostic-card').all()
      const boxes = await Promise.all(cards.map(card => card.boundingBox()))
      assert.ok(boxes[0].height < boxes[2].height / 2, 'Simple checks must not stretch to database height')
      const meta = await cards[0].locator('.diagnostic-meta-item').first().boundingBox()
      assert.ok(meta.height < 100, 'Metadata must stay compact')
      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), 'No horizontal overflow')
    }
    console.log('Diagnostics layout passed at desktop, tablet and mobile widths.')
  } finally { await browser.close() }
})().catch(error => { console.error(error); process.exitCode = 1 })