import { expect, test, type Page } from '@playwright/test'
import { gotoAppRoute } from './helpers/navigation'
import { expectNoHorizontalOverflow } from './helpers/layout'

type ProtectedRouteExpectation = {
  path: string
  marker: string
}

const responsiveProtectedRoutes: readonly ProtectedRouteExpectation[] = [
  {
    path: '/app',
    marker: 'Desktop-link pairing',
  },
  {
    path: '/app/launch-status',
    marker: 'Protected launch status',
  },
  {
    path: '/app/downloads',
    marker: 'Release targets',
  },
  {
    path: '/app/browser-access',
    marker: 'Current browser role',
  },
  {
    path: '/app/account',
    marker: 'Session profile',
  },
  {
    path: '/app/notices',
    marker: 'Distribution notices',
  },
] as const

async function assertResponsiveProtectedRoute(page: Page, route: ProtectedRouteExpectation) {
  await gotoAppRoute(page, route.path, { waitUntil: 'domcontentloaded', timeoutMs: 45_000 })

  await expect(page.getByRole('heading', { level: 1, name: 'HyperTwist dashboard' })).toBeVisible()
  await expect(page.getByText(route.marker, { exact: true }).first()).toBeVisible()
  await expectNoHorizontalOverflow(page)
}

test.describe('responsive protected app routes (mobile)', () => {
  test.use({ viewport: { width: 390, height: 844 } })

  for (const route of responsiveProtectedRoutes) {
    test(`${route.path} renders without horizontal overflow`, async ({ page }) => {
      await assertResponsiveProtectedRoute(page, route)
    })
  }
})

test.describe('responsive protected app routes (tablet)', () => {
  test.use({ viewport: { width: 820, height: 1180 } })

  for (const route of responsiveProtectedRoutes) {
    test(`${route.path} renders without horizontal overflow`, async ({ page }) => {
      await assertResponsiveProtectedRoute(page, route)
    })
  }
})
