'use client'

import {useState} from 'react'
import AuthForm from '@/components/auth-form/index.js'
import AuthAlert from '@/components/auth-form/auth-alert.js'

export default function RegistrationForm() {
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [isSuccessAlertOpen, setIsSuccessAlertOpen] = useState(false)
  const [isErrorAlertOpen, setIsErrorAlertOpen] = useState(false)

  const handleFormSubmit = async data => {
    setIsSuccessAlertOpen(false)
    setIsErrorAlertOpen(false)

    if (data.password_verification && data.password_verification !== data.password) {
      setError('Les mots de passe ne correspondent pas !')
      setIsErrorAlertOpen(true)
      return
    }

    const response = await fetch('/api/auth/register', {
      method: 'POST',
      body: JSON.stringify({
        ...data
      })
    })

    if (response.status === 201) {
      setSuccess('Votre compte est en attente de validation !')
      setIsSuccessAlertOpen(true)
    } else {
      const errorResponse = await response.json()
      setError(errorResponse.message)
      setIsErrorAlertOpen(true)
    }
  }

  return (
    <>
      {error && <AuthAlert isOpen={isErrorAlertOpen} setIsOpen={setIsErrorAlertOpen} message={error} severity='error' />}
      {success && <AuthAlert isOpen={isSuccessAlertOpen} setIsOpen={setIsSuccessAlertOpen} message={success} severity='success' />}
      <AuthForm
        isRegister
        title='Inscrivez-vous et devenez constituant'
        buttonText='S’enregistrer'
        linkDescription='Vous avez déjà un compte ?'
        linkText='Se connecter'
        linkHref='/login'
        onSubmit={handleFormSubmit}
      />
    </>
  )
}