the-tip-top-frontend/app/forgot-password/page.tsx

"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Input } from "@/components/ui/Input";
import Button from "@/components/Button";
import { Card } from "@/components/ui/Card";
import Link from "next/link";
import { ROUTES } from "@/utils/constants";
import toast from "react-hot-toast";

const forgotPasswordSchema = z.object({
  email: z.string().email("Email invalide"),
});

type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;

export default function ForgotPasswordPage() {
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [emailSent, setEmailSent] = useState(false);

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

  const onSubmit = async (data: ForgotPasswordFormData) => {
    setIsSubmitting(true);
    try {
      // TODO: Implement password reset API call
      console.log("Password reset requested for:", data.email);

      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));

      setEmailSent(true);
      toast.success("Email de réinitialisation envoyé !");
    } catch (error) {
      console.error("Password reset error:", error);
      toast.error("Erreur lors de l'envoi de l'email");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center py-12 px-4">
      <Card className="w-full max-w-md p-8">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            Mot de passe oublié
          </h1>
          <p className="text-gray-600">
            Entrez votre email pour recevoir un lien de réinitialisation
          </p>
        </div>

        {!emailSent ? (
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
            <Input
              id="email"
              type="email"
              label="Email"
              placeholder="votre.email@example.com"
              error={errors.email?.message}
              {...register("email")}
              required
            />

            <Button
              type="submit"
              isLoading={isSubmitting}
              disabled={isSubmitting}
              fullWidth
              size="lg"
            >
              Envoyer le lien de réinitialisation
            </Button>
          </form>
        ) : (
          <div className="text-center py-6">
            <div className="text-6xl mb-4">✅</div>
            <h2 className="text-xl font-semibold text-gray-900 mb-2">
              Email envoyé !
            </h2>
            <p className="text-gray-600 mb-6">
              Vérifiez votre boîte mail et suivez les instructions pour réinitialiser votre mot de passe.
            </p>
            <Link href={ROUTES.LOGIN}>
              <Button variant="outline" fullWidth>
                Retour à la connexion
              </Button>
            </Link>
          </div>
        )}

        <p className="mt-6 text-center text-sm text-gray-600">
          Vous vous souvenez de votre mot de passe ?{" "}
          <Link
            href={ROUTES.LOGIN}
            className="font-medium text-blue-600 hover:text-blue-700 hover:underline"
          >
            Se connecter
          </Link>
        </p>
      </Card>
    </div>
  );
}