import { useState } from 'react'
import type { UnlockAccountModalProps } from './types'
import { UnlockAccountButtons } from './UnlockAccountButtons'
import { UnlockAccountForm } from './UnlockAccountForm'
import { useUnlockAccountController } from './useUnlockAccountController'

export function UnlockAccountModal(params: UnlockAccountModalProps): React.ReactElement {
  const [words, setWords] = useState<string[]>(['', '', '', ''])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const controller = useUnlockAccountController({
    words,
    setWords,
    setLoading,
    setError,
    onSuccess: params.onSuccess,
    onClose: params.onClose,
  })

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
        <h2 className="text-2xl font-bold mb-4">Déverrouiller votre compte</h2>
        <p className="text-gray-600 mb-6">
          Entrez vos 4 mots-clés de récupération (dictionnaire BIP39) pour déverrouiller votre compte. Ces mots déchiffrent la clé de chiffrement
          (KEK) stockée dans l&apos;API Credentials, qui déchiffre ensuite votre clé privée.
        </p>
        <UnlockAccountForm words={words} onWordChange={controller.handleWordChange} onPaste={controller.handlePaste} />
        {error ? <p className="text-sm text-red-600 mb-4">{error}</p> : null}
        <UnlockAccountButtons loading={loading} words={words} onUnlock={controller.handleUnlock} onClose={params.onClose} />
      </div>
    </div>
  )
}