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

const learner = {
  id: 'learner-1', name: 'سارا احمدی', email: 'sara.ahmadi@company.com', role: 'learner', status: 'active', locale: 'fa', timezone: 'Asia/Tehran', permissions: [],
  organization: { id: 'org-1', name: 'MicroLearn', slug: 'microlearn', defaultLocale: 'fa', timezone: 'Asia/Tehran' },
  deployment: { mode: 'saas', supportsMultipleOrganizations: true, exposesSubscriptionManagement: true },
}

test('learner More is responsive and its personalization controls work', async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 812 })
  await page.route('**/api/v1/**', route => {
    const pathname = new URL(route.request().url()).pathname
    const data = pathname.endsWith('/auth/me') ? learner : pathname.endsWith('/learner/home') ? {
      continueLearning: null,
      assigned: [],
      dueSoon: [],
      summary: { total: 0, completed: 0, inProgress: 0, averageProgress: 0 },
    } : {}
    return route.fulfill({ contentType: 'application/json', body: JSON.stringify({ data }) })
  })
  await page.addInitScript(() => localStorage.setItem('microlearn.access_token', 'e2e-token'))
  await page.goto('http://127.0.0.1:5173/learn/more')

  await expect(page.getByRole('heading', { name: 'بیشتر', level: 1 })).toBeVisible()
  await expect(page.getByRole('heading', { name: 'شخصی‌سازی تجربه من' })).toBeVisible()
  await expect(page.getByText('سارا احمدی')).toBeVisible()
  await expect(page.getByRole('button', { name: 'خروج از حساب کاربری' })).toBeVisible()
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
  if (process.env.TEMP) await page.screenshot({ path: `${process.env.TEMP}\\microlearn-more-page.png`, fullPage: true })

  await page.getByRole('button', { name: /اندازه متن/ }).click()
  await expect(page.getByRole('button', { name: /اندازه متن: بزرگ/ })).toBeVisible()
  await page.getByRole('button', { name: /ترجیحات یادگیری/ }).first().click()
  await expect(page.getByRole('dialog', { name: 'ترجیحات یادگیری' })).toBeVisible()
  await page.getByRole('button', { name: '۱۵ دقیقه' }).click()
  expect(await page.evaluate(() => JSON.parse(localStorage.getItem('microlearn.learner-preferences') ?? '{}').state.dailyDuration)).toBe(15)
  if (process.env.TEMP) await page.screenshot({ path: `${process.env.TEMP}\\microlearn-more-modal.png`, fullPage: true })
  await page.getByRole('dialog', { name: 'ترجیحات یادگیری' }).getByRole('button', { name: 'بستن' }).click()
  await page.setViewportSize({ width: 320, height: 700 })
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
})