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

test.describe('Magic Link Page', () => {
  test('renders magic link form', async ({ page }) => {
    await page.goto('/auth/magic-link')
    await page.waitForLoadState('networkidle')

    await expect(page.getByText(TEST_LANGUAGE.magicLink).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/magic-link')
    await page.waitForLoadState('networkidle')

    await expect(
      page.getByText(/Voer je e-mailadres.*magic link/i)
    ).toBeVisible()
  })

  test('submit button disabled without email', async ({ page }) => {
    await page.goto('/auth/magic-link')
    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/magic-link')
    await page.waitForLoadState('networkidle')

    const emailInput = page.locator('input[type="email"]')
    await fillInput(emailInput, generateTestEmail())

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

  test('shows back to login link', async ({ page }) => {
    await page.goto('/auth/magic-link')
    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('submitting email shows success message', async ({ page }) => {
    await page.goto('/auth/magic-link')
    await page.waitForLoadState('networkidle')

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

    await fillInput(emailInput, testEmail)
    await submitButton.click()

    // Should show success message
    await expect(
      page.getByText(/Magic Link Verstuurd/i).first()
    ).toBeVisible({ timeout: 10000 })
  })

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

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

    await fillInput(emailInput, testEmail)
    await submitButton.click()

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

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

  test('success state shows expiry information', async ({ page }) => {
    await page.goto('/auth/magic-link')
    await page.waitForLoadState('networkidle')

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

    await fillInput(emailInput, generateTestEmail())
    await submitButton.click()

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

    // Should mention expiry time (15 minutes)
    await expect(
      page.getByText(TEST_LANGUAGE.linkExpires)
    ).toBeVisible()
  })

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

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

    await fillInput(emailInput, generateTestEmail())
    await submitButton.click()

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

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

    // Check that email input is visible (icon added by Nuxt UI)
    const emailInput = page.locator('input[type="email"]')
    await expect(emailInput).toBeVisible()
  })

  test('submit button has sparkles icon', async ({ page }) => {
    await page.goto('/auth/magic-link')
    await page.waitForLoadState('networkidle')

    // Check that submit button exists (icon would be added by Nuxt UI)
    const submitButton = page.locator('button[type="submit"]')
    await expect(submitButton).toBeVisible()
  })

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

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

    await fillInput(emailInput, generateTestEmail())
    await submitButton.click()

    // Wait for success state
    await expect(
      page.getByText(/Magic Link 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()
  })
})
