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

const user = {
  id: 'u1', name: 'سارا محمدی', email: 'sara@example.test', role: 'course_designer', status: 'active', locale: 'fa', timezone: 'Asia/Tehran',
  permissions: ['courses.author'], organization: { id: 'o1', name: 'آکادمی ایمن', slug: 'safe', defaultLocale: 'fa', timezone: 'Asia/Tehran' },
  deployment: { mode: 'saas', supportsMultipleOrganizations: true, exposesSubscriptionManagement: true },
}
const settings = {
  general: { locale: 'fa', timezone: 'Asia/Tehran', calendar: 'jalali', firstDayOfWeek: 'saturday', dateFormat: 'short', numberFormat: 'persian', hourCycle: '24', theme: 'system', density: 'standard', fontScale: 'standard', highContrast: false, focusGuide: true, reduceMotion: false },
  courseDefaults: { language: 'fa', difficulty: 'beginner', presentationMode: 'flow', completionMode: 'all_required', passingScore: 70, resumeLearning: true, showProgress: true },
  assignments: { mandatory: true, dueDays: 14, reminderDays: 3, managerEscalation: true, overduePolicy: 'keep_active', reassignmentPolicy: 'preserve_progress' },
  learner: { notes: true, bookmarks: true, favorites: true, discussions: true, downloads: false, offlineLearning: false, videoAutoplay: false },
  certificates: { issuance: 'approval', validityMonths: 0, renewal: true, verificationQr: true, notifyLearner: true },
  notifications: { email: true, push: true, inApp: true, digest: 'weekly', quietHours: '22-07', overdue: true, risk: true },
  analytics: { defaultRange: 30, riskThreshold: 50, rebuildFrequency: 'daily', exportRetentionDays: 90, managerAccess: 'team_only' },
  security: { sessionMinutes: 480, twoFactor: 'required_admins', defaultRole: 'learner', downloadPolicy: 'designers', auditRetentionDays: 365 },
  media: { maxFileMb: 200, videoQuality: 'adaptive', allowedDocuments: 'standard', retentionPolicy: 'keep', imageOptimization: true },
}

async function mockSettings(page: import('@playwright/test').Page) {
  await page.addInitScript(() => window.localStorage.setItem('microlearn.access_token', 'visual-review'))
  await page.route('**/api/v1/**', async route => {
    const url = route.request().url()
    const data = url.endsWith('/auth/me') ? user : url.endsWith('/organization-settings') ? { settings } : {}
    await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ data }) })
  })
}

test('organization settings is a focused responsive control center', async ({ page }, testInfo) => {
  await mockSettings(page)
  await page.setViewportSize({ width: 1440, height: 1000 })
  await page.goto('http://127.0.0.1:5173/app/settings?section=appearance')

  await expect(page.getByRole('heading', { name: 'تنظیمات سامانه' })).toBeVisible()
  await expect(page.getByRole('heading', { name: 'ظاهر و دسترس‌پذیری' })).toBeVisible()
  await expect(page.locator('.workspace > .sidebar')).toBeHidden()
  await expect(page.locator('.workspace__body > .topbar')).toBeHidden()
  await expect(page.locator('.appearance-preview')).toBeVisible()
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
  await page.screenshot({ path: testInfo.outputPath('settings-desktop.png'), fullPage: true })

  await page.setViewportSize({ width: 375, height: 812 })
  await expect(page.getByRole('heading', { name: 'ظاهر و دسترس‌پذیری' })).toBeVisible()
  await page.getByRole('radio', { name: 'تاریک' }).click()
  await expect(page.getByRole('region', { name: 'ذخیره تغییرات' })).toBeVisible()
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true)
  await page.screenshot({ path: testInfo.outputPath('settings-mobile.png'), fullPage: true })
})