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

test.describe('Login Page', () => {
  test('renders login form with email and password fields', async ({ page }) => {
    await page.goto('/auth')
    await page.waitForLoadState('networkidle')

    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('displays title correctly', async ({ page }) => {
    await page.goto('/auth')
    await page.waitForLoadState('networkidle')

    // Dutch: "Inloggen" - Card header displays the title
    await expect(page.getByText(TEST_LANGUAGE.signIn).first()).toBeVisible()
  })

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

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

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

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

    // Fill inputs and trigger Vue's v-model reactivity
    await fillInput(emailInput, generateTestEmail())
    await fillInput(passwordInput, generateTestPassword())

    // Wait for the button to become enabled
    await expect(submitButton).toBeEnabled({ timeout: 2000 })
  })

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

    // Dutch: "Registreren" - Use getByRole for links
    const registerLink = page.getByRole('link', { name: TEST_LANGUAGE.signUp })
    await expect(registerLink).toBeVisible()

    await registerLink.click()
    await expect(page).toHaveURL(/.*\/auth\/register/)
  })

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

    // Dutch: "Wachtwoord vergeten?" - Use getByText for partial match
    const forgotLink = page.getByText(TEST_LANGUAGE.forgotPasswordLink)
    await expect(forgotLink).toBeVisible()

    await forgotLink.click()
    await expect(page).toHaveURL(/.*\/auth\/forgot-password/)
  })

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

    // UButton with :to prop renders as a link, not button
    const magicLinkButton = page.getByRole('link', { name: /magic link/i })
    await expect(magicLinkButton).toBeVisible({ timeout: 10000 })

    await magicLinkButton.click()
    await expect(page).toHaveURL(/.*\/auth\/magic-link/)
  })

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

    // Check if OAuth buttons exist
    const githubButton = page.getByRole('button', { name: /github/i })
    const googleButton = page.getByRole('button', { name: /google/i })

    const hasGithub = await githubButton.count() > 0
    const hasGoogle = await googleButton.count() > 0

    // At least verify structure exists (may not be configured in test env)
    if (hasGithub || hasGoogle) {
      expect(hasGithub || hasGoogle).toBeTruthy()
    }
  })

  test('shows "or" separator when OAuth is available', async ({ page }) => {
    await page.goto('/auth')
    await page.waitForLoadState('networkidle')
    await page.waitForLoadState('networkidle')

    // Check for separator if OAuth is available (Dutch: "of")
    // Note: May appear multiple times on the page, use first()
    const separator = page.getByText(TEST_LANGUAGE.or)
    const hasSeparator = await separator.count() > 0

    if (hasSeparator) {
      await expect(separator.first()).toBeVisible({ timeout: 10000 })
    }
  })

  test('login with invalid credentials does not redirect', async ({ page }) => {
    await page.goto('/auth')
    await page.waitForLoadState('networkidle')

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

    // Fill in invalid credentials
    await fillInput(emailInput, 'nonexistent@example.com')
    await fillInput(passwordInput, 'WrongPassword123!')

    // Wait for button to be enabled
    await expect(submitButton).toBeEnabled()

    // Click submit
    await submitButton.click()

    // Wait a moment for any potential redirect
    await page.waitForTimeout(2000)

    // Verify we're still on the auth page (not redirected to dashboard)
    await expect(page).toHaveURL(/\/auth/)

    // Verify login form is still visible (indicating login failed)
    await expect(emailInput).toBeVisible()
    await expect(submitButton).toBeVisible()
  })

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

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

    // Fill inputs and trigger Vue's v-model reactivity
    await fillInput(emailInput, generateTestEmail())
    await fillInput(passwordInput, generateTestPassword())

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

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

  test('form has proper labels and accessibility', async ({ page }) => {
    await page.goto('/auth')
    await page.waitForLoadState('networkidle')

    // Check for email field label (Dutch: "E-mail")
    await expect(page.getByText(/e-mail/i).first()).toBeVisible()

    // Check for password field label (Dutch: "Wachtwoord")
    await expect(page.getByText(/wachtwoord|password/i).first()).toBeVisible()
  })

  test('email field has email icon', async ({ page }) => {
    await page.goto('/auth')
    await page.waitForLoadState('networkidle')

    // Check if email input has icon (Nuxt UI adds icon prop)
    const emailInput = page.locator('input[type="email"]')
    await expect(emailInput).toBeVisible()
  })

  test('password field has lock icon', async ({ page }) => {
    await page.goto('/auth')
    await page.waitForLoadState('networkidle')

    // Check if password input has icon
    const passwordInput = page.locator('input[type="password"]')
    await expect(passwordInput).toBeVisible()
  })
})
