import { describe, it, expect, vi, beforeEach } from 'vitest'
import { screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Inscription from '../../pages/Inscription'
import { renderWithProviders } from '../renderWithProviders'
import { registerApi, verifyCodeApi } from '../../services/auth'

vi.mock('../../services/auth', () => ({
  registerApi: vi.fn(),
  verifyCodeApi: vi.fn(),
}))

// Remplit et soumet le formulaire d'inscription (étape 1).
async function remplirEtSoumettre() {
  await userEvent.type(screen.getByPlaceholderText(/votre email/i), 'jean@example.com')
  await userEvent.type(screen.getByPlaceholderText(/votre nom/i), 'Dupont')
  await userEvent.type(screen.getByPlaceholderText(/votre prénom/i), 'Jean')
  await userEvent.type(screen.getByPlaceholderText(/votre mot de passe/i), 'MotDePasse123!')
  await userEvent.click(screen.getByRole('checkbox'))
  await userEvent.click(screen.getByRole('button', { name: /s'inscrire/i }))
}

// Saisit le code à 4 chiffres de l'étape de vérification.
async function saisirCode(code) {
  const inputs = screen.getAllByRole('textbox')
  for (let i = 0; i < 4; i++) {
    await userEvent.type(inputs[i], code[i])
  }
}

describe('Inscription', () => {
  beforeEach(() => {
    vi.clearAllMocks()
  })

  it("affiche le formulaire d'inscription", () => {
    renderWithProviders(<Inscription />, { route: '/inscription' })

    expect(screen.getByRole('heading', { name: /s'inscrire/i })).toBeInTheDocument()
    expect(screen.getByPlaceholderText(/votre email/i)).toBeInTheDocument()
    expect(screen.getByPlaceholderText(/votre nom/i)).toBeInTheDocument()
    expect(screen.getByPlaceholderText(/votre prénom/i)).toBeInTheDocument()
    expect(screen.getByPlaceholderText(/votre mot de passe/i)).toBeInTheDocument()
  })

  it("désactive le bouton tant que les conditions ne sont pas acceptées", async () => {
    renderWithProviders(<Inscription />, { route: '/inscription' })

    const bouton = screen.getByRole('button', { name: /s'inscrire/i })
    expect(bouton).toBeDisabled()

    await userEvent.click(screen.getByRole('checkbox'))
    expect(bouton).toBeEnabled()
  })

  it("passe à l'étape de vérification après une inscription réussie", async () => {
    registerApi.mockResolvedValue({ message: 'ok' })

    renderWithProviders(<Inscription />, { route: '/inscription' })
    await remplirEtSoumettre()

    expect(registerApi).toHaveBeenCalledWith({
      email: 'jean@example.com',
      firstname: 'Jean',
      lastname: 'Dupont',
      password: 'MotDePasse123!',
    })
    expect(await screen.findByRole('heading', { name: /vérifiez votre email/i })).toBeInTheDocument()
    expect(screen.getByText('jean@example.com')).toBeInTheDocument()
  })

  it("affiche l'erreur de l'API si l'inscription échoue", async () => {
    registerApi.mockRejectedValue(new Error('Cet email est déjà utilisé.'))

    renderWithProviders(<Inscription />, { route: '/inscription' })
    await remplirEtSoumettre()

    expect(await screen.findByText('Cet email est déjà utilisé.')).toBeInTheDocument()
    expect(screen.queryByRole('heading', { name: /vérifiez votre email/i })).not.toBeInTheDocument()
  })

  it('connecte et redirige vers /saisir-code-unique quand le code est valide', async () => {
    registerApi.mockResolvedValue({ message: 'ok' })
    verifyCodeApi.mockResolvedValue({
      token: 'jwt-token',
      user: { id: 1, email: 'jean@example.com', role: 'CLIENT' },
    })

    renderWithProviders(<Inscription />, {
      route: '/inscription',
      routes: { '/saisir-code-unique': <p>Page Saisir Code</p> },
    })
    await remplirEtSoumettre()
    await screen.findByRole('heading', { name: /vérifiez votre email/i })

    await saisirCode('1234')
    await userEvent.click(screen.getByRole('button', { name: /valider le code/i }))

    expect(verifyCodeApi).toHaveBeenCalledWith({ email: 'jean@example.com', code: '1234' })
    expect(await screen.findByText('Page Saisir Code')).toBeInTheDocument()
    expect(localStorage.getItem('token')).toBe('jwt-token')
  })

  it("affiche l'erreur et vide les champs quand le code est invalide", async () => {
    registerApi.mockResolvedValue({ message: 'ok' })
    verifyCodeApi.mockRejectedValue(new Error('Code invalide.'))

    renderWithProviders(<Inscription />, { route: '/inscription' })
    await remplirEtSoumettre()
    await screen.findByRole('heading', { name: /vérifiez votre email/i })

    await saisirCode('0000')
    await userEvent.click(screen.getByRole('button', { name: /valider le code/i }))

    expect(await screen.findByText('Code invalide.')).toBeInTheDocument()
    for (const input of screen.getAllByRole('textbox')) {
      expect(input).toHaveValue('')
    }
  })
})