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

test.describe('Reset Password Page', () => {
  test('shows error for missing token', async ({ page }) => {
    await page.goto('/auth/reset-password')
    await page.waitForLoadState('networkidle')

    // Form should render but submit button should be disabled without a token
    // (A toast notification appears but may disappear before we can check it)
    await expect(page.getByText(TEST_LANGUAGE.resetPassword).first()).toBeVisible()
    const submitButton = page.locator('button[type="submit"]')
    await expect(submitButton).toBeDisabled()
  })

  test('renders reset password form with valid token', async ({ page }) => {
    // Visit with a token parameter (even if mock)
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    await expect(page.getByText(TEST_LANGUAGE.resetPassword).first()).toBeVisible()
    await expect(page.locator('input[type="password"]').first()).toBeVisible()
    await expect(page.locator('input[type="password"]').last()).toBeVisible()
  })

  test('shows description text', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    await expect(
      page.getByText(/Voer hieronder je nieuwe wachtwoord/i)
    ).toBeVisible()
  })

  test('password fields have proper labels', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    // Check for password labels in Dutch
    await expect(page.getByText(/^Wachtwoord$/i).first()).toBeVisible()
    await expect(page.getByText(/Bevestig Wachtwoord/i)).toBeVisible()
  })

  test('shows validation error when passwords do not match', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    const password1 = 'Password123!'
    const password2 = 'DifferentPass456!'

    const passwordInput1 = page.locator('input[type="password"]').first()
    const passwordInput2 = page.locator('input[type="password"]').last()

    await fillInput(passwordInput1, password1)
    await fillInput(passwordInput2, password2)

    // Should show validation error
    await expect(
      page.getByText(TEST_LANGUAGE.passwordsDoNotMatch)
    ).toBeVisible()
  })

  test('shows validation error for short password', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    const shortPassword = 'Short1!'
    const passwordInput = page.locator('input[type="password"]').first()

    await fillInput(passwordInput, shortPassword)

    // Should show minimum length error
    await expect(
      page.getByText(TEST_LANGUAGE.passwordMinLength)
    ).toBeVisible()
  })

  test('submit button disabled when passwords do not match', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    const passwordInput1 = page.locator('input[type="password"]').first()
    const passwordInput2 = page.locator('input[type="password"]').last()

    await fillInput(passwordInput1, 'Password123!')
    await fillInput(passwordInput2, 'Different456!')

    const submitButton = page.locator('button[type="submit"]')
    await expect(submitButton).toBeDisabled()
  })

  test('submit button disabled when password is too short', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    const shortPassword = 'Short1!'
    const passwordInput1 = page.locator('input[type="password"]').first()
    const passwordInput2 = page.locator('input[type="password"]').last()

    await fillInput(passwordInput1, shortPassword)
    await fillInput(passwordInput2, shortPassword)

    const submitButton = page.locator('button[type="submit"]')
    await expect(submitButton).toBeDisabled()
  })

  test('submit button enabled with valid matching passwords', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    const validPassword = generateTestPassword()
    const passwordInput1 = page.locator('input[type="password"]').first()
    const passwordInput2 = page.locator('input[type="password"]').last()

    await fillInput(passwordInput1, validPassword)
    await fillInput(passwordInput2, validPassword)

    const submitButton = page.locator('button[type="submit"]')
    await expect(submitButton).toBeEnabled()
  })

  test('shows back to login link', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    const backLink = page.getByRole('link', { name: TEST_LANGUAGE.backToLogin })
    await expect(backLink).toBeVisible()

    await backLink.click()
    await expect(page).toHaveURL(/.*\/auth$/)
  })

  test('loading state shown during submission', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    const validPassword = generateTestPassword()
    const passwordInput1 = page.locator('input[type="password"]').first()
    const passwordInput2 = page.locator('input[type="password"]').last()
    const submitButton = page.locator('button[type="submit"]')

    await fillInput(passwordInput1, validPassword)
    await fillInput(passwordInput2, validPassword)

    await submitButton.click()

    // Button should show loading state
    await expect(submitButton).toBeDisabled()
  })

  test('password fields have lock icons', async ({ page }) => {
    await page.goto('/auth/reset-password?token=test-token')
    await page.waitForLoadState('networkidle')

    // Check that password inputs are visible (icons are added by Nuxt UI)
    const passwordInputs = page.locator('input[type="password"]')
    await expect(passwordInputs).toHaveCount(2)
  })
})
