import { useState, FormEvent } from 'react';
import { useNavigate } from 'react-router-dom';
import { useIdentity } from '../hooks/useIdentity';
import { useErrorHandler } from '../hooks/useErrorHandler';
import { ErrorDisplay } from './ErrorDisplay';

export function CreateIdentityScreen(): JSX.Element {
  const navigate = useNavigate();
  const { createNewIdentity } = useIdentity();
  const { error, handleError, clearError } = useErrorHandler();
  const [name, setName] = useState('');
  const [isCreating, setIsCreating] = useState(false);

  const handleSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
    e.preventDefault();
    setIsCreating(true);
    clearError();
    try {
      createNewIdentity(name || undefined);
      navigate('/');
    } catch (err) {
      handleError(err, 'Erreur lors de la création de l\'identité');
    } finally {
      setIsCreating(false);
    }
  };

  return (
    <main>
      <h1>Créer une identité locale</h1>
      {error !== null && <ErrorDisplay error={error} onDismiss={clearError} />}
      <form onSubmit={handleSubmit} aria-label="Formulaire de création d'identité">
        <div>
          <label htmlFor="name">
            Nom local de l'identité (optionnel)
            <input
              id="name"
              type="text"
              value={name}
              onChange={(e) => {
                setName(e.target.value);
              }}
              placeholder="Mon identité"
            />
          </label>
        </div>
        <div>
          <button type="submit" disabled={isCreating}>
            {isCreating ? 'Création...' : "Générer l'identité"}
          </button>
          <button type="button" onClick={() => navigate('/')}>
            Annuler
          </button>
        </div>
      </form>
    </main>
  );
}