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

test.describe('Forgot Password Page', () => {
  test('renders forgot password form', async ({ page }) => {
    await page.goto('/auth/forgot-password')
    await page.waitForLoadState('networkidle')

    // Dutch: "Wachtwoord Vergeten"
    await expect(page.getByText(TEST_LANGUAGE.forgotPassword).first()).toBeVisible()
    await expect(page.locator('input[type="email"]')).toBeVisible()
    await expect(page.locator('button[type="submit"]')).toBeVisible()
  })

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

    // Dutch: "Voer je e-mailadres in en we sturen je een link..."
    await expect(
      page.getByText(/Voer je e-mailadres.*opnieuw in te stellen/i)
    ).toBeVisible()
  })

  test('submit button disabled without email', async ({ page }) => {
    await page.goto('/auth/forgot-password')
    await page.waitForLoadState('networkidle')

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

  test('submit button enabled with email', async ({ page }) => {
    await page.goto('/auth/forgot-password')
    await page.waitForLoadState('networkidle')

    const testEmail = generateTestEmail()
    const emailInput = page.locator('input[type="email"]')
    const submitButton = page.locator('button[type="submit"]')

    // Fill the input and trigger Vue's v-model reactivity
    await fillInput(emailInput, testEmail)

    // Verify the value is actually in the input
    await expect(emailInput).toHaveValue(testEmail)

    // The button should be enabled now
    // Wait a bit more and then check if it's enabled
    await expect(submitButton).toBeEnabled({ timeout: 3000 })
  })

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

    // Dutch: "Terug naar inloggen"
    const backLink = page.getByRole('link', { name: TEST_LANGUAGE.backToLogin })
    await expect(backLink).toBeVisible()

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

  test('submitting email shows success message', async ({ page }) => {
    await page.goto('/auth/forgot-password')
    await page.waitForLoadState('networkidle')

    const testEmail = generateTestEmail('forgot')
    const emailInput = page.locator('input[type="email"]')
    const submitButton = page.locator('button[type="submit"]')

    // Fill the input and trigger Vue's v-model reactivity
    await fillInput(emailInput, testEmail)

    // Wait for button to be enabled, then click
    await expect(submitButton).toBeEnabled({ timeout: 3000 })
    await submitButton.click()

    // Should show success message (Dutch: "E-mail Verstuurd")
    await expect(
      page.getByText(/E-mail Verstuurd/i).first()
    ).toBeVisible({ timeout: 10000 })
  })

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

    const emailInput = page.locator('input[type="email"]')
    const submitButton = page.locator('button[type="submit"]')

    // Fill the input and trigger Vue's v-model reactivity
    await fillInput(emailInput, generateTestEmail())

    // Wait for button to be enabled, then click
    await expect(submitButton).toBeEnabled({ timeout: 3000 })

    // Check for loading state immediately after click
    // In CI, the API may respond very quickly, so we catch the loading state right after clicking
    const clickPromise = submitButton.click()

    // Try to catch the disabled state - either it's disabled during loading,
    // or the form has already switched to success view (which is also valid)
    try {
      await expect(submitButton).toBeDisabled({ timeout: 500 })
    } catch {
      // If button not found or not disabled, verify success view appeared instead
      // Use heading specifically to avoid matching toast notifications
      await expect(page.getByRole('heading', { name: /E-mail Verstuurd|Email Sent/i })).toBeVisible({ timeout: 5000 })
    }

    await clickPromise
  })

  test('success state shows email address', async ({ page }) => {
    await page.goto('/auth/forgot-password')
    await page.waitForLoadState('networkidle')

    const testEmail = generateTestEmail('forgot-success')
    const emailInput = page.locator('input[type="email"]')
    const submitButton = page.locator('button[type="submit"]')

    // Fill the input and trigger Vue's v-model reactivity
    await fillInput(emailInput, testEmail)

    // Wait for button to be enabled, then click
    await expect(submitButton).toBeEnabled({ timeout: 3000 })
    await submitButton.click()

    // Wait for success state
    await expect(
      page.getByText(/E-mail Verstuurd/i).first()
    ).toBeVisible({ timeout: 10000 })

    // Should display the email that was sent to
    await expect(page.getByText(testEmail)).toBeVisible()
  })

  test('success state shows back to login button', async ({ page }) => {
    await page.goto('/auth/forgot-password')
    await page.waitForLoadState('networkidle')

    const emailInput = page.locator('input[type="email"]')
    const submitButton = page.locator('button[type="submit"]')

    // Fill the input and trigger Vue's v-model reactivity
    await fillInput(emailInput, generateTestEmail())

    // Wait for button to be enabled, then click
    await expect(submitButton).toBeEnabled({ timeout: 3000 })
    await submitButton.click()

    // Wait for success state
    await expect(
      page.getByText(/E-mail Verstuurd/i).first()
    ).toBeVisible({ timeout: 10000 })

    // Should show back to login link/button
    const backLink = page.getByRole('link', { name: TEST_LANGUAGE.backToLogin })
    await expect(backLink).toBeVisible()
  })
})
