"use client";

import { useState } from "react";
import { ArrowRight, Check, Mail } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth/client";

export function ForgotForm() {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setLoading(true);

    // Better Auth gere la verification : si l'email n'existe pas, il ne dit
    // RIEN pour ne pas reveler la liste des comptes. On affiche un message
    // generique de succes dans tous les cas.
    const result = await authClient.requestPasswordReset({
      email: email.trim(),
      redirectTo: "/reset-password",
    });

    setLoading(false);

    if (result.error) {
      setError(messageFromError(result.error));
      return;
    }

    setDone(true);
  }

  if (done) {
    return (
      <div className="mt-8 text-center">
        <div className="mx-auto inline-flex size-12 items-center justify-center rounded-full bg-success-soft text-success border border-success/20">
          <Check className="size-6" />
        </div>
        <p className="mt-5 text-sm text-text leading-relaxed">
          Si un compte existe pour <strong>{email}</strong>, vous allez recevoir un email avec un
          lien pour définir un nouveau mot de passe.
        </p>
        <p className="mt-3 text-xs text-text-faint">
          Le lien est valable 1 heure. Pensez à vérifier vos spams.
        </p>
      </div>
    );
  }

  return (
    <form className="mt-8 space-y-5" onSubmit={handleSubmit}>
      <Field id="email" label="Adresse e-mail">
        <div className="relative">
          <Mail
            aria-hidden
            className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-faint pointer-events-none"
          />
          <Input
            type="email"
            name="email"
            autoComplete="email"
            inputMode="email"
            required
            placeholder="vous@entreprise.fr"
            className="pl-9"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            disabled={loading}
          />
        </div>
      </Field>

      {error ? (
        <p
          role="alert"
          className="rounded-md border border-[color:var(--color-danger)]/30 bg-[color:var(--color-danger)]/10 px-3 py-2 text-sm text-[color:var(--color-danger)]"
        >
          {error}
        </p>
      ) : null}

      <Button type="submit" variant="primary" className="w-full mt-2" size="lg" loading={loading}>
        Envoyer le lien
        <ArrowRight className="size-4" />
      </Button>
    </form>
  );
}

function messageFromError(error: { code?: string; message?: string }): string {
  switch (error.code) {
    case "TOO_MANY_REQUESTS":
      return "Trop de demandes. Reessayez dans quelques minutes.";
    default:
      return error.message ?? "Impossible d'envoyer le lien pour le moment.";
  }
}