"use client";

import { useTransition } from "react";
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 { changePasswordAction } from "@/actions/password-actions";
import { changePasswordSchema, type ChangePasswordInput } from "@/validators/auth";
import { useLanguage } from "@/lib/i18n/context";

export function ChangePasswordForm() {
  const { t, locale } = useLanguage();
  const f = t.app.changePassword;
  const [isPending, startTransition] = useTransition();

  const {
    register,
    handleSubmit,
    setError,
    reset,
    formState: { errors },
  } = useForm<ChangePasswordInput>({
    resolver: zodResolver(changePasswordSchema),
    defaultValues: { currentPassword: "", newPassword: "", confirmPassword: "" },
  });

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

      if (!result.success) {
        toast.error(result.error);
        if (result.fieldErrors) {
          for (const [field, messages] of Object.entries(result.fieldErrors)) {
            if (messages?.[0]) {
              setError(field as keyof ChangePasswordInput, { message: messages[0] });
            }
          }
        } else {
          setError("root", { message: result.error });
        }
        return;
      }

      toast.success(f.passwordUpdatedToast);
      reset();
    });
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate className="flex flex-col gap-4">
      <FormField
        id="currentPassword"
        label={f.currentPassword}
        error={errors.currentPassword?.message}
      >
        <PasswordInput
          id="currentPassword"
          autoComplete="current-password"
          aria-invalid={!!errors.currentPassword}
          {...register("currentPassword")}
        />
      </FormField>

      <FormField
        id="newPassword"
        label={f.newPassword}
        error={errors.newPassword?.message}
        hint={errors.newPassword ? undefined : f.passwordHint}
      >
        <PasswordInput
          id="newPassword"
          autoComplete="new-password"
          aria-invalid={!!errors.newPassword}
          {...register("newPassword")}
        />
      </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 self-start">
        {isPending ? <Loader2 className="size-4 animate-spin" /> : null}
        {f.updatePassword}
      </Button>
    </form>
  );
}