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

test.describe('User Registration', () => {
  test('renders registration form with all required fields', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Verify all form fields are present
    await expect(page.locator('input[type="text"]')).toBeVisible()
    await expect(page.locator('input[type="email"]')).toBeVisible()
    await expect(page.locator('input[type="password"]')).toBeVisible()
    await expect(page.locator('button[type="submit"]')).toBeVisible()
  })

  test('user can register with email, password, and name', async ({ page }) => {
    const auth = new AuthHelper(page)
    const testEmail = generateTestEmail('register')
    const testPassword = generateTestPassword()

    await auth.register(testEmail, testPassword, 'Test User')

    // Should show verification required message (Dutch: "Verifieer Je E-mail")
    // Use heading selector to avoid matching multiple elements (toast, description, etc.)
    await expect(page.getByText(TEST_LANGUAGE.verifyEmail).first()).toBeVisible({ timeout: 10000 })
  })

  test('shows validation error for missing name', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Fill only email and password
    const emailInput = page.locator('input[type="email"]')
    const passwordInput = page.locator('input[type="password"]')
    const submitButton = page.locator('button[type="submit"]')

    await fillInput(emailInput, generateTestEmail())
    await fillInput(passwordInput, generateTestPassword())

    // Submit button should be disabled without name
    await expect(submitButton).toBeDisabled()
  })

  test('shows validation error for missing email', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Fill only name and password
    const nameInput = page.locator('input[type="text"]')
    const passwordInput = page.locator('input[type="password"]')
    const submitButton = page.locator('button[type="submit"]')

    await fillInput(nameInput, 'Test User')
    await fillInput(passwordInput, generateTestPassword())

    // Submit button should be disabled without email
    await expect(submitButton).toBeDisabled()
  })

  test('shows validation error for missing password', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Fill only name and email
    const nameInput = page.locator('input[type="text"]')
    const emailInput = page.locator('input[type="email"]')
    const submitButton = page.locator('button[type="submit"]')

    await fillInput(nameInput, 'Test User')
    await fillInput(emailInput, generateTestEmail())

    // Submit button should be disabled without password
    await expect(submitButton).toBeDisabled()
  })

  test('shows password minimum length hint', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Should show password requirement hint (Dutch: "minimaal 8 tekens")
    await expect(page.getByText(TEST_LANGUAGE.passwordMinLength)).toBeVisible()
  })

  test('shows link to login page', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Dutch: "Inloggen"
    const loginLink = page.getByRole('link', { name: TEST_LANGUAGE.signIn })
    await expect(loginLink).toBeVisible()

    // Click link and verify navigation
    await loginLink.click()
    await expect(page).toHaveURL(/.*\/auth$/)
  })

  test('shows OAuth buttons when configured', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Check for OAuth buttons (if configured)
    const oauthSection = page.locator('button:has-text("GitHub"), button:has-text("Google")')
    const hasOAuth = await oauthSection.count() > 0

    // If OAuth is configured, buttons should be visible
    if (hasOAuth) {
      expect(hasOAuth).toBeTruthy()
    }
  })

  test('displays title correctly', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    // Dutch: "Account Aanmaken"
    await expect(page.getByText(TEST_LANGUAGE.createAccount).first()).toBeVisible()
  })

  test('loading state shown during registration', async ({ page }) => {
    await page.goto('/auth/register')
    await page.waitForLoadState('networkidle')

    const testEmail = generateTestEmail('loading')
    const testPassword = generateTestPassword()

    // Fill all fields
    const nameInput = page.locator('input[type="text"]')
    const emailInput = page.locator('input[type="email"]')
    const passwordInput = page.locator('input[type="password"]')
    const submitButton = page.locator('button[type="submit"]')

    await fillInput(nameInput, 'Test User')
    await fillInput(emailInput, testEmail)
    await fillInput(passwordInput, testPassword)

    // Wait for button to be enabled before clicking
    await expect(submitButton).toBeEnabled({ timeout: 2000 })
    await submitButton.click()

    // The button should show loading state (check for disabled or loading attribute)
    await expect(submitButton).toBeDisabled()
  })
})
