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

test.describe('Settings Page', () => {
  // Run tests serially since they depend on shared state
  test.describe.configure({ mode: 'serial' })

  // Generate unique email for each test run
  // Include random suffix to prevent collisions between parallel browser runs
  const timestamp = Date.now()
  const randomSuffix = Math.random().toString(36).substring(7)
  const testEmail = `settings${timestamp}${randomSuffix}@example.com`
  const testPassword = 'password123'
  const testName = 'Settings Test User'

  test.beforeEach(async ({ page }) => {
    // Try to register a new user (may already exist from previous test)
    await page.goto('/register')
    await page.getByLabel('Email').fill(testEmail)
    await page.getByLabel('Password').fill(testPassword)
    await page.getByLabel('Name').fill(testName)
    await page.getByRole('button', { name: 'Create Account' }).click()

    // Wait for either redirect to login OR error message (if user exists)
    await Promise.race([
      page.waitForURL(/\/login/, { timeout: 10000 }),
      page.waitForSelector('text=/already exists|error/i', { timeout: 10000 }),
    ])

    // Navigate to login and login
    await page.goto('/login')
    await page.getByLabel('Email').fill(testEmail)
    await page.getByLabel('Password').fill(testPassword)
    await page.getByRole('button', { name: 'Sign In' }).click()
    await page.waitForURL('/dashboard', { timeout: 10000 })

    // Navigate to settings
    await page.goto('/settings')
    await page.waitForLoadState('networkidle')
  })

  test.describe('Profile Settings', () => {
    test('should display profile settings form', async ({ page }) => {
      // Should have profile section with name and email fields
      await expect(page.getByRole('heading', { name: 'Profile' })).toBeVisible()
      await expect(page.getByText('Name')).toBeVisible()
      await expect(page.getByText('Email')).toBeVisible()
      // Check textboxes exist
      const textboxes = page.getByRole('textbox')
      await expect(textboxes.first()).toBeVisible()
    })

    test('should display current user information', async ({ page }) => {
      // Should show current values in the form
      // Profile section is the first form, so first two textboxes are name and email
      const textboxes = page.getByRole('textbox')
      await expect(textboxes.first()).toHaveValue(testName)
      await expect(textboxes.nth(1)).toHaveValue(testEmail)
    })
  })

  test.describe('Password Change', () => {
    test('should display password change form', async ({ page }) => {
      // Should have password section
      await expect(page.getByRole('heading', { name: 'Change Password' })).toBeVisible()
      await expect(page.getByText('Current Password')).toBeVisible()
      await expect(page.getByText('New Password')).toBeVisible()
    })
  })

  test.describe('User Preferences', () => {
    test('should display preferences form', async ({ page }) => {
      // Should have preferences section
      await expect(page.getByRole('heading', { name: 'Learning Preferences' })).toBeVisible()
      // Check for slider labels (they include values)
      await expect(page.getByText(/Cards Per Session/)).toBeVisible()
      await expect(page.getByText(/Daily Goal/)).toBeVisible()
    })

    test('should display default preferences', async ({ page }) => {
      // Should show default values displayed in labels
      await expect(page.getByText(/Cards Per Session:.*20/)).toBeVisible()
      await expect(page.getByText(/Daily Goal:.*50/)).toBeVisible()
    })
  })

  test.describe('Navigation', () => {
    test('should have navigation options', async ({ page }) => {
      // Check that we're on settings page and can navigate
      await expect(page).toHaveURL('/settings')
    })
  })
})