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 team directory and employee learning profile are responsive and scoped', async ({ page }) => {
  await signInAsManager(page)
  await page.goto('http://127.0.0.1:5173/manager/team')
  await expect(page.getByRole('heading', { level: 1, name: /تیم من|My team/ })).toBeVisible()
  await expect(page.getByRole('searchbox', { name: /جست‌وجوی عضو|Search members/ })).toBeVisible()
  await expect(page.getByRole('combobox', { name: /وضعیت عضو|Member status/ })).toBeVisible()
  await expect(page.locator('.manager-team-table')).toBeVisible()

  await page.locator('.manager-team-table').getByRole('button', { name: /مشاهده پروفایل|View profile/ }).first().click()
  await expect(page).toHaveURL(/\/manager\/team\?member=/)
  await expect(page.locator('#manager-profile-title')).toBeVisible()
  await page.getByRole('navigation', { name: /بخش‌های پروفایل یادگیری|Learning profile sections/ }).getByRole('button', { name: /یادگیری فعال|Active learning/ }).click()
  await expect(page).toHaveURL(/tab=active/)
  await expect(page.getByText(/تخصیص آموزش|Assign learning/)).toHaveCount(0)
  await expect(page.getByText(/ارسال یادآوری|Send reminder/)).toHaveCount(0)

  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/team')
    await expect(page.getByRole('heading', { level: 1, name: /تیم من|My team/ })).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 })
  }
})