"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import Button from "@/components/Button";
import { IconEnvoi } from "@/components/icons";
import { demanderReinitialisationMotDePasse } 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"),
});

type FormValues = z.infer<typeof schema>;

export default function MotDePasseOubliePage() {
  const router = useRouter();
  const [envoiEnCours, setEnvoiEnCours] = useState(false);

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

  const onSubmit = async (values: FormValues) => {
    setEnvoiEnCours(true);
    try {
      await demanderReinitialisationMotDePasse(values.email);
    } finally {
      setEnvoiEnCours(false);
      router.push(`/auth/reinitialiser-mot-de-passe?email=${encodeURIComponent(values.email)}`);
    }
  };

  return (
    <div className={styles.conteneur}>
      <form className={styles.carte} onSubmit={handleSubmit(onSubmit)} noValidate>
        <h1 className={styles.titre}>Mot de passe oublié</h1>
        <p className={styles.sousTitre}>
          Indiquez votre email, nous vous envoyons un code de réinitialisation.
        </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>

        <Button
          type="submit"
          size="lg"
          className={styles.submit}
          disabled={envoiEnCours}
          icone={!envoiEnCours ? <IconEnvoi /> : undefined}
        >
          {envoiEnCours ? "Envoi..." : "Recevoir le code"}
        </Button>

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