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

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

test('management filters are visible, removable and responsive', async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 900 })
  await login(page)
  await page.goto('http://127.0.0.1:5173/app/users')
  await expect(page.getByRole('heading', { name: 'کاربران' })).toBeVisible()
  await page.getByRole('combobox', { name: 'نقش' }).selectOption('manager')
  const filters = page.getByRole('region', { name: 'فیلترهای فعال' })
  await expect(filters).toContainText('نقش: مدیر')
  await filters.getByRole('button', { name: 'پاک‌کردن همه فیلترها' }).click()
  await expect(page.getByRole('combobox', { name: 'نقش' })).toHaveValue('')

  await page.setViewportSize({ width: 375, height: 812 })
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
  const firstRow = page.locator('.users-directory-table tbody tr').first()
  if (await firstRow.count()) {
    await expect(firstRow).toHaveCSS('display', 'grid')
    await expect(firstRow.locator('td').first()).toHaveAttribute('data-label', 'نام و نام خانوادگی')
  }

  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl')
  await page.locator('html').evaluate(element => element.setAttribute('dir', 'ltr'))
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
  await page.evaluate(() => window.localStorage.setItem('microlearn.theme', 'dark'))
  await page.reload()
  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark')
  await expect(page.locator('.filter-bar')).toHaveCSS('background-color', await page.locator('body').evaluate(() => {
    const probe = document.createElement('div'); probe.style.background = 'var(--surface)'; document.body.append(probe)
    const color = getComputedStyle(probe).backgroundColor; probe.remove(); return color
  }))
})

test('assignments expose search and status filters without changing actions', async ({ page }) => {
  await page.setViewportSize({ width: 430, height: 900 })
  await login(page)
  await page.goto('http://127.0.0.1:5173/app/assignments')
  await expect(page.getByRole('heading', { name: 'تخصیص‌ها' })).toBeVisible()
  await expect(page.getByRole('searchbox', { name: 'جستجوی تخصیص' })).toBeVisible()
  await page.getByRole('combobox', { name: 'وضعیت تخصیص' }).selectOption('active')
  await expect(page.getByRole('region', { name: 'فیلترهای فعال' })).toContainText('وضعیت: فعال')
  await expect(page.getByRole('button', { name: 'تخصیص جدید' })).toBeVisible()
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
})