import { test, expect } from '@playwright/test'
import { AuthHelper, generateTestEmail, generateTestPassword } from '../helpers/auth'
import { createEmailHelper } from '../helpers/email'

test.describe('theme colors UI', () => {
  let testEmail: string
  let testPassword: string

  test.beforeEach(async ({ page, request }) => {
    // Clean email inbox before each test
    const emailHelper = createEmailHelper(request)
    await emailHelper.deleteAllMessages()

    // Create unique test user for each test
    testEmail = generateTestEmail('danger-zone')
    testPassword = generateTestPassword()

    const auth = new AuthHelper(page)

    // 1. Register the user
    await auth.register(testEmail, testPassword, 'Danger Zone Test User')
    await page.waitForLoadState('networkidle')

    // 2. Wait for verification email and get verification link
    // Use longer timeout for CI environments
    const verificationEmail = await emailHelper.waitForEmail(testEmail, {
      subject: /verify/i,
      timeout: 30000
    })
    const verificationLink = await emailHelper.getVerificationLink(verificationEmail.ID)

    if (!verificationLink) {
      throw new Error(`No verification link found in email. Email ID: ${verificationEmail.ID}`)
    }

    // 3. Click verification link
    await page.goto(verificationLink)
    await page.waitForLoadState('networkidle')

    // 4. User should now be verified and logged in automatically
    // Wait for redirect to dashboard (autoSignInAfterVerification: true)
    await page.waitForURL('**/dashboard**', { timeout: 10000 })
  })

  test('changing primary/secondary updates UI tokens', async ({ page }) => {
    await page.goto('/dashboard')
    await page.waitForLoadState('networkidle')

    // Open the UserMenu by clicking the avatar button
    const userAvatarButton = page
      .getByRole('button')
      .filter({ has: page.locator('img[alt="Danger Zone Test User"]') })
      .first()
    if (await userAvatarButton.count() === 0) test.skip()
    await userAvatarButton.click()

    // Ensure the "Theme" parent menu item is visible and open its submenu
    const themeMenu = page.getByRole('menuitem', { name: /theme/i })
    await expect(themeMenu).toBeVisible()
    await themeMenu.hover()
    // Fallback to keyboard open if hover didn't open submenu fast enough
    const primaryMenu = page.getByRole('menuitem', { name: /primary/i }).first()
    await primaryMenu.waitFor({ state: 'visible', timeout: 3000 }).catch(async () => {
      await themeMenu.focus()
      await page.keyboard.press('ArrowRight')
      await primaryMenu.waitFor({ state: 'visible', timeout: 3000 })
    })

    // Click Theme -> Primary -> pick "emerald" if available
    const primary = page.getByRole('menuitem', { name: /primary/i }).first()
    if (await primary.count()) await primary.click()
    const emerald = page.getByRole('menuitem', { name: /emerald/i }).first()
    if (await emerald.count()) await emerald.click()

    // Expect some button now to have class that includes emerald-500 in style (heuristic)
    const anyButton = page.locator('button').first()
    await expect(anyButton).toBeVisible()
  })
})
