podcastdistributiona/components/auth/forgot-password-form.tsx

"use client";

import { useRef, useState } from "react";
import Link from "next/link";
import { Loader2, MailCheck } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { authClient } from "@/lib/auth/auth-client";
import { Turnstile, type TurnstileHandle } from "./turnstile";

export function ForgotPasswordForm({ turnstileSiteKey }: { turnstileSiteKey: string | null }) {
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  // See sign-in-form: rendered only when configured, verified server-side.
  const [captchaToken, setCaptchaToken] = useState("");
  const turnstileRef = useRef<TurnstileHandle>(null);
  const captchaRequired = !!turnstileSiteKey;

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
    const form = new FormData(e.currentTarget);
    const { error } = await authClient.requestPasswordReset(
      {
        email: String(form.get("email")),
        redirectTo: "/reset-password",
      },
      captchaRequired ? { headers: { "x-captcha-response": captchaToken } } : undefined
    );
    setLoading(false);
    if (error) {
      // Single-use token: re-challenge so the retry fails on its real cause.
      turnstileRef.current?.reset();
      toast.error(error.message ?? "Something went wrong");
      return;
    }
    setSent(true);
  }

  if (sent) {
    return (
      <Card className="rounded-3xl shadow-md">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-2xl">
            <MailCheck className="h-6 w-6 text-brand" /> Check your inbox
          </CardTitle>
          <CardDescription>
            If an account exists for that email, we&apos;ve sent a reset link.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button asChild variant="outline" className="w-full">
            <Link href="/sign-in">Back to sign in</Link>
          </Button>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="rounded-3xl shadow-md">
      <CardHeader className="pb-2">
        <CardTitle className="text-2xl">Forgot your password?</CardTitle>
        <CardDescription>Enter your email and we&apos;ll send you a reset link.</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={onSubmit} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" name="email" type="email" autoComplete="email" required />
          </div>
          {turnstileSiteKey && (
            <Turnstile
              ref={turnstileRef}
              siteKey={turnstileSiteKey}
              onToken={setCaptchaToken}
              onError={() => toast.error("Could not load the security check. Please refresh.")}
              className="flex justify-center"
            />
          )}
          <Button
            type="submit"
            className="w-full"
            disabled={loading || (captchaRequired && !captchaToken)}
          >
            {loading && <Loader2 className="h-4 w-4 animate-spin" />}
            Send reset link
          </Button>
          <p className="text-center text-sm text-muted-foreground">
            <Link href="/sign-in" className="font-semibold text-brand hover:underline">
              Back to sign in
            </Link>
          </p>
        </form>
      </CardContent>
    </Card>
  );
}