"use client";

import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { requestPasswordResetOTP } from "@/lib/actions/auth";

export function ForgotForm() {
  const t = useTranslations("Auth.forgotPassword");
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [isPending, startTransition] = useTransition();

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const trimmed = email.trim();
    if (!trimmed) return;
    startTransition(async () => {
      try {
        await requestPasswordResetOTP({ email: trimmed });
        toast.success(t("sentSuccess"));
        router.push(`/reset-password?email=${encodeURIComponent(trimmed)}`);
      } catch {
        // Don't reveal whether the email exists — same response either way.
        // BA's emailOTP plugin already neutralizes this server-side, but the
        // toast intentionally uses success copy to avoid enumeration.
        toast.success(t("sentSuccess"));
        router.push(`/reset-password?email=${encodeURIComponent(trimmed)}`);
      }
    });
  }

  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label htmlFor="forgot-email">{t("emailLabel")}</Label>
        <Input
          id="forgot-email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder={t("emailPlaceholder")}
          required
          autoFocus
        />
      </div>
      <Button type="submit" disabled={isPending || !email.trim()}>
        {isPending ? t("sending") : t("submit")}
      </Button>
    </form>
  );
}