"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Loader2 } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { FormField } from "@/components/auth/form-field";
import { FormError } from "@/components/auth/form-error";
import { PasswordInput } from "@/components/auth/password-input";
import { resetPasswordAction } from "@/actions/password-actions";
import { resetPasswordSchema, type ResetPasswordInput } from "@/validators/auth";
import { useLanguage } from "@/lib/i18n/context";

export function ResetPasswordForm({ token }: { token: string }) {
  const router = useRouter();
  const { t, locale } = useLanguage();
  const f = t.auth.form;
  const [isPending, startTransition] = useTransition();

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors },
  } = useForm<ResetPasswordInput>({
    resolver: zodResolver(resetPasswordSchema),
    defaultValues: { token, password: "", confirmPassword: "" },
  });

  function onSubmit(values: ResetPasswordInput) {
    startTransition(async () => {
      const result = await resetPasswordAction(values, locale);

      if (!result.success) {
        toast.error(result.error);
        setError("root", { message: result.error });
        return;
      }

      toast.success(f.passwordUpdatedToast);
      router.push("/login");
    });
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="flex flex-col gap-4">
      <input type="hidden" {...register("token")} />

      <FormField
        id="password"
        label={f.newPassword}
        error={errors.password?.message}
        hint={errors.password ? undefined : f.passwordHint}
      >
        <PasswordInput
          id="password"
          autoComplete="new-password"
          aria-invalid={!!errors.password}
          {...register("password")}
        />
      </FormField>

      <FormField
        id="confirmPassword"
        label={f.confirmNewPassword}
        error={errors.confirmPassword?.message}
      >
        <PasswordInput
          id="confirmPassword"
          autoComplete="new-password"
          aria-invalid={!!errors.confirmPassword}
          {...register("confirmPassword")}
        />
      </FormField>

      <FormError message={errors.root?.message} />

      <Button type="submit" size="lg" disabled={isPending} className="mt-2">
        {isPending ? <Loader2 className="size-4 animate-spin" /> : null}
        {f.resetPasswordCta}
      </Button>
    </form>
  );
}