// examples/responsive-test.js
// Responsive layout test: verify layout invariants across multiple viewports.
//
// Use ui.applyEnvironment() to resize the viewport, then extract geometry
// and assert layout laws. This replaces writing separate tests per breakpoint.

const { test, expect } = require('@playwright/test')
const { imhotep } = require('imhotep-playwright')

test('responsive sidebar layout', async ({ page }) => {
  await page.goto('https://example.com')
  const ui = await imhotep(page)

  const viewports = [
    { width: 375, height: 667, name: 'mobile' },
    { width: 768, height: 1024, name: 'tablet' },
    { width: 1280, height: 720, name: 'desktop' },
  ]

  for (const vp of viewports) {
    // Apply the environment case
    await ui.applyEnvironment({
      viewport: { width: vp.width, height: vp.height },
    })

    // Reload so the page lays out at the new size
    await page.reload()
    await page.waitForLoadState('networkidle')

    const sidebarData = await ui.extract('.sidebar')
    const contentData = await ui.extract('.content')

    expect(sidebarData.length).toBeGreaterThanOrEqual(1)
    expect(contentData.length).toBeGreaterThanOrEqual(1)

    const sidebar = sidebarData[0].rect
    const content = contentData[0].rect

    if (vp.name === 'mobile') {
      // Mobile: sidebar stacks above content
      expect(sidebar.y + sidebar.height).toBeLessThanOrEqual(content.y + 1)
      // Mobile: sidebar should be nearly full width
      expect(sidebar.width).toBeGreaterThanOrEqual(vp.width * 0.8)
    } else {
      // Tablet and desktop: sidebar is left of content
      expect(sidebar.x + sidebar.width).toBeLessThanOrEqual(content.x + 1)
      // Sidebar should have a fixed or minimum width
      expect(sidebar.width).toBeGreaterThanOrEqual(200)
    }
  }
})