"use client";

import { Suspense, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { isAxiosError } from "axios";
import Button from "@/components/Button";
import PasswordField from "@/components/PasswordField";
import { IconCadenas } from "@/components/icons";
import { reinitialiserMotDePasse } from "@/lib/api/auth";
import styles from "../connexion/page.module.css";

const schema = z.object({
  email: z.string().min(1, "L'email est requis").email("Adresse e-mail invalide"),
  code: z.string().length(6, "Le code contient 6 chiffres"),
  nouveauMotDePasse: z.string().min(6, "Le mot de passe doit contenir au moins 6 caractères"),
});

type FormValues = z.infer<typeof schema>;

function Formulaire() {
  const router = useRouter();
  const emailInitial = useSearchParams().get("email") ?? "";
  const [erreur, setErreur] = useState<string | null>(null);
  const [envoiEnCours, setEnvoiEnCours] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { email: emailInitial },
  });

  const onSubmit = async (values: FormValues) => {
    setErreur(null);
    setEnvoiEnCours(true);

    try {
      await reinitialiserMotDePasse(values.email, values.code, values.nouveauMotDePasse);
      router.push("/auth/connexion?reinitialisation=ok");
    } catch (err) {
      if (isAxiosError(err)) {
        setErreur(err.response?.data?.detail ?? "Code invalide ou expiré.");
      } else {
        setErreur("Code invalide ou expiré.");
      }
    } finally {
      setEnvoiEnCours(false);
    }
  };

  return (
    <form className={styles.carte} onSubmit={handleSubmit(onSubmit)} noValidate>
      <h1 className={styles.titre}>Réinitialiser le mot de passe</h1>
      <p className={styles.sousTitre}>Entrez le code reçu et votre nouveau mot de passe.</p>

      {erreur && <p className={styles.erreur}>{erreur}</p>}

      <label className={styles.champ}>
        <span className={styles.label}>Email</span>
        <input type="email" autoComplete="email" className={styles.input} {...register("email")} />
        {errors.email && <span className={styles.messageErreur}>{errors.email.message}</span>}
      </label>

      <label className={styles.champ}>
        <span className={styles.label}>Code reçu</span>
        <input
          inputMode="numeric"
          maxLength={6}
          placeholder="123456"
          className={styles.input}
          {...register("code")}
        />
        {errors.code && <span className={styles.messageErreur}>{errors.code.message}</span>}
      </label>

      <label className={styles.champ}>
        <span className={styles.label}>Nouveau mot de passe</span>
        <PasswordField
          autoComplete="new-password"
          inputClassName={styles.input}
          {...register("nouveauMotDePasse")}
        />
        {errors.nouveauMotDePasse && (
          <span className={styles.messageErreur}>{errors.nouveauMotDePasse.message}</span>
        )}
      </label>

      <Button
        type="submit"
        size="lg"
        className={styles.submit}
        disabled={envoiEnCours}
        icone={!envoiEnCours ? <IconCadenas /> : undefined}
      >
        {envoiEnCours ? "Validation..." : "Réinitialiser"}
      </Button>

      <p className={styles.pied}>
        <Link href="/auth/connexion">Retour à la connexion</Link>
      </p>
    </form>
  );
}

export default function ReinitialiserMotDePassePage() {
  return (
    <div className={styles.conteneur}>
      <Suspense fallback={null}>
        <Formulaire />
      </Suspense>
    </div>
  );
}