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

async function signInAsManager(page: Page) {
  await page.goto('http://127.0.0.1:5173/login')
  await page.getByLabel(/ایمیل|Email/).fill('manager@microlearn.test')
  await page.getByLabel(/رمز عبور|Password/).fill('password')
  await page.getByRole('button', { name: /ورود|Sign in/ }).click()
  await expect(page).toHaveURL(/\/manager\/overview$/)
}

test('manager assignment wizard exposes the complete five-step scoped flow', async ({ page }) => {
  await signInAsManager(page)
  await page.goto('http://127.0.0.1:5173/manager/assignments')
  await expect(page.getByRole('heading', { level: 1, name: /تخصیص آموزش|Assign learning/ })).toBeVisible()
  await page.getByRole('button', { name: /تخصیص جدید|New assignment/ }).click()

  for (const heading of [/مخاطب|Audience/, /آموزش|Learning/, /مهلت|Deadline/, /اعلان|Notification/]) {
    await expect(page.getByRole('heading', { level: 2, name: heading })).toBeVisible()
    await page.getByRole('button', { name: /ادامه|Continue/ }).click()
  }

  await expect(page.getByRole('heading', { level: 2, name: /بازبینی|Review/ })).toBeVisible()
  await expect(page.getByText(/تخصیص‌های فعال تکراری|Duplicate active assignments/)).toBeVisible()
  await expect(page.getByRole('button', { name: /تأیید و تخصیص|Confirm and assign/ })).toBeEnabled()
})

test('manager assignments remain free of page-level overflow at target widths', async ({ page }) => {
  await signInAsManager(page)

  for (const viewport of [{ width: 375, height: 812 }, { width: 768, height: 1024 }, { width: 1440, height: 1000 }]) {
    await page.setViewportSize(viewport)
    await page.goto('http://127.0.0.1:5173/manager/assignments')
    await expect(page.getByRole('heading', { level: 1, name: /تخصیص آموزش|Assign learning/ })).toBeVisible()
    await page.getByRole('button', { name: /تخصیص جدید|New assignment/ }).click()
    await expect(page.getByRole('heading', { level: 2, name: /مخاطب|Audience/ })).toBeVisible()

    const layout = await page.evaluate(() => ({
      clientWidth: document.documentElement.clientWidth,
      scrollWidth: document.documentElement.scrollWidth,
      offenders: [...document.querySelectorAll<HTMLElement>('body *')]
        .filter(element => element.getBoundingClientRect().right > document.documentElement.clientWidth + 1 || element.getBoundingClientRect().left < -1)
        .slice(0, 8)
        .map(element => ({ className: element.className, tag: element.tagName, left: Math.round(element.getBoundingClientRect().left), right: Math.round(element.getBoundingClientRect().right) })),
    }))

    expect(layout, JSON.stringify({ viewport, layout })).toMatchObject({ scrollWidth: layout.clientWidth, offenders: [] })
  }
})