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

test('designer navigation and dashboard stay usable on desktop and mobile', async ({ page }) => {
  await page.setViewportSize({ width: 1440, height: 900 })
  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$/)
  await expect(page.getByRole('heading', { name: 'داشبورد طراحی' })).toBeVisible()
  await expect(page.getByText('ساخت', { exact: true })).toBeVisible()
  await expect(page.getByText('افراد', { exact: true })).toBeVisible()
  await expect(page.getByText('بینش', { exact: true })).toBeVisible()
  await expect(page.getByText('مدیریت', { exact: true })).toBeVisible()
  await expect(page.getByRole('link', { name: 'ایجاد دوره' })).toHaveAttribute('href', '/app/courses/new')
  await expect(page.getByRole('region', { name: 'اقدام‌های سریع' })).toBeVisible()
  await expect(page.getByRole('heading', { name: 'نیازمند توجه' })).toBeVisible()
  await expect(page.getByRole('heading', { name: 'دوره‌های اخیر' })).toBeVisible()

  const attentionBeforeRecent = await page.evaluate(() => {
    const headings = [...document.querySelectorAll('h2')]
    const attention = headings.find((heading) => heading.textContent?.trim() === 'نیازمند توجه')
    const recent = headings.find((heading) => heading.textContent?.trim() === 'دوره‌های اخیر')

    return Boolean(attention && recent && (attention.compareDocumentPosition(recent) & Node.DOCUMENT_POSITION_FOLLOWING))
  })
  expect(attentionBeforeRecent).toBe(true)

  for (const width of [375, 430, 768, 1024, 1440]) {
    await page.setViewportSize({ width, height: 900 })
    expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
  }

  await page.setViewportSize({ width: 375, height: 812 })
  await page.getByRole('button', { name: 'باز کردن منو' }).click()
  await expect(page.getByRole('navigation', { name: 'ناوبری اصلی' })).toBeVisible()
})