import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useState, type FormEvent } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { api, setToken } from '@/api/client';
import { Logo } from '@/components/logo';
import { Button } from '@/components/ui/button';

/** Cible du lien d'invitation (R1) : la personne choisit son mot de passe et
 *  entre directement. Même moule visuel que la connexion (écran validé R0). */
export default function PageActivation() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const [params] = useSearchParams();
  const token = params.get('token') ?? '';
  const [password, setPassword] = useState('');
  const [confirmation, setConfirmation] = useState('');

  const activation = useMutation({
    mutationFn: async () => {
      const { data, error } = await api.POST('/auth/activate', {
        body: { token, password },
      });
      if (error || !data) {
        throw new Error('Ce lien est invalide ou a expiré — demandez un nouveau lien.');
      }
      return data;
    },
    onSuccess: (data) => {
      setToken(data.accessToken);
      queryClient.clear();
      navigate('/', { replace: true });
    },
  });

  const surEnvoi = (e: FormEvent) => {
    e.preventDefault();
    activation.mutate();
  };
  const differents = confirmation.length > 0 && password !== confirmation;

  return (
    <div className="conn">
      <div className="carte-conn">
        <Logo sousTitre="Activation de votre compte" />
        {token ? (
          <form onSubmit={surEnvoi} className="flex flex-col gap-[14px]" aria-label="Activation">
            <p className="text-[13px] text-encre-2">
              Bienvenue ! Choisissez votre mot de passe pour activer votre compte.
            </p>
            <div className="champ">
              <label htmlFor="act-mdp">Mot de passe (8 caractères minimum)</label>
              <input
                id="act-mdp"
                type="password"
                autoComplete="new-password"
                minLength={8}
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
            </div>
            <div className="champ">
              <label htmlFor="act-conf">Confirmez le mot de passe</label>
              <input
                id="act-conf"
                type="password"
                autoComplete="new-password"
                required
                value={confirmation}
                onChange={(e) => setConfirmation(e.target.value)}
              />
            </div>
            {differents ? (
              <p className="erreur-form">Les deux saisies ne correspondent pas.</p>
            ) : null}
            {activation.isError ? (
              <p className="erreur-form" role="alert">{activation.error.message}</p>
            ) : null}
            <Button
              type="submit"
              variant="prim"
              className="justify-center"
              disabled={activation.isPending || differents || password.length < 8}
            >
              Activer mon compte
            </Button>
          </form>
        ) : (
          <p className="erreur-form" role="alert">
            Lien incomplet — utilisez le lien d'activation transmis par votre administrateur.
          </p>
        )}
      </div>
    </div>
  );
}
