"use client";

import { useState, useTransition } from "react";
import Icon from "@/components/Icon";
import { requestPasswordReset } from "@/app/(public)/_actions/password-reset";

export default function ForgotPasswordForm() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim())) {
      setError("Email invalide.");
      return;
    }
    startTransition(async () => {
      const res = await requestPasswordReset({ email: email.trim() });
      if (!res.ok) {
        setError(res.error);
        return;
      }
      setSubmitted(true);
    });
  }

  if (submitted) {
    return (
      <div className="text-center space-y-6 py-4">
        <Icon name="mark_email_read" className="!text-5xl text-secondary" filled />
        <p className="font-serif text-xl text-primary">
          Email envoyé
        </p>
        <p className="text-sm text-on-surface-variant">
          Si un compte existe à cette adresse, vous allez recevoir un email
          avec un lien pour définir un nouveau mot de passe. Le lien est
          valable 24 heures.
        </p>
        <p className="text-xs text-on-surface-variant">
          Pensez à vérifier votre dossier spam si vous ne le voyez pas.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6" noValidate>
      <p className="text-sm text-on-surface-variant">
        Entrez l'adresse email de votre compte. Nous vous enverrons un lien
        pour définir un nouveau mot de passe.
      </p>

      <div className="space-y-2">
        <label
          htmlFor="email"
          className="eyebrow !text-on-surface-variant block"
        >
          Email
        </label>
        <input
          id="email"
          type="email"
          required
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
        />
      </div>

      {error && <p className="text-error body-md">{error}</p>}

      <button
        type="submit"
        disabled={isPending}
        className="btn btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isPending ? "Envoi…" : "Envoyer le lien"}
      </button>
    </form>
  );
}