import { expect, test } from '@playwright/test'

const hasCredentials = Boolean(
  process.env.DEVRUNBOOK_E2E_EMAIL && process.env.DEVRUNBOOK_E2E_PASSWORD,
)

test.describe('Usability recovery', () => {
  test.skip(!hasCredentials, 'live local-account credentials are required')
  test.use({ storageState: 'test-results/.auth/m2.json' })

  test.beforeEach(async ({ context, baseURL }) => {
    if (!baseURL) throw new Error('A browser base URL is required')
    await context.addCookies([
      {
        name: 'devrunbook_locale',
        value: 'nl',
        url: baseURL,
        sameSite: 'Lax',
      },
    ])
  })

  test('Task library is compact and understandable on mobile', async ({
    page,
  }) => {
    await page.setViewportSize({ width: 390, height: 844 })
    await page.goto('/library')

    await expect(page).toHaveTitle('Taakbibliotheek · DevRunbook')
    await expect(
      page.getByRole('heading', { level: 1, name: 'Kies een bewezen taak' }),
    ).toBeVisible()
    await expect(
      page.locator('.drb-library-filters details'),
    ).not.toHaveAttribute('open', '')
    await expect(page.locator('.drb-playbook-card')).toHaveCount(8)
    await expect(page.getByRole('button', { name: /Meer tonen/ })).toBeVisible()
    expect(
      await page.evaluate(
        () =>
          document.documentElement.scrollWidth <=
          document.documentElement.clientWidth,
      ),
    ).toBe(true)

    const undersizedNavigationTargets = await page
      .locator(
        '.drb-app-shell__header button, .drb-app-shell__header a, .drb-app-shell__mobile-tabs a',
      )
      .evaluateAll((elements) =>
        elements
          .filter((element) => {
            const box = element.getBoundingClientRect()
            const style = getComputedStyle(element)
            return (
              style.display !== 'none' &&
              style.visibility !== 'hidden' &&
              box.width > 0 &&
              box.height > 0 &&
              (box.width < 44 || box.height < 44)
            )
          })
          .map((element) => element.textContent?.trim()),
      )
    expect(undersizedNavigationTargets).toEqual([])
  })

  test('Dutch shell, account and role context use ordinary language', async ({
    page,
  }) => {
    await page.goto('/account')
    await expect(
      page.getByRole('link', { name: 'DevRunbook startpagina' }),
    ).toBeVisible()
    await expect(page.getByLabel('Actieve werkruimte')).toBeVisible()
    await expect(
      page.getByRole('heading', { level: 1, name: 'Jouw account' }),
    ).toBeVisible()
    await expect(page.getByText('Rol in deze werkruimte')).toBeVisible()

    await page.goto('/account/security')
    await expect(
      page.getByRole('heading', { level: 1, name: 'Wachtwoord en sessies' }),
    ).toBeVisible()
    await expect(
      page.getByRole('link', { name: 'Wachtwoord veilig herstellen' }),
    ).toBeVisible()
  })
  test('Start action does not cover mobile content', async ({ page }) => {
    await page.setViewportSize({ width: 390, height: 844 })
    await page.goto('/start')
    await expect(page).toHaveTitle('Nieuwe taak · DevRunbook')
    expect(
      await page.locator('main').evaluate((main) => {
        const stickyElements = [...main.querySelectorAll('*')].filter(
          (element) => getComputedStyle(element).position === 'sticky',
        )
        return stickyElements.length
      }),
    ).toBe(0)
  })
})