"use client";
import { useTranslations } from "next-intl";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

import { FormItem, FormWrapper } from "@/components/ui/form";
import { useEffect, useState } from "react";
import { useRouter } from "@/i18n/routing";
import AppButton from "@/components/ui/button";
import { useAppDispatch } from "@/lib/redux/hooks";
import { doResetPassword } from "@/lib/redux/features/auth";
import AppInput from "@/components/ui/input";
import { hashMD5 } from "@/lib/utils";
import { ResetPasswordRequest, ResetPasswordResponse } from "@/types/auth";
import { ResponseStatus, STORAGE_KEYS } from "@/types/common";
import StorageHelper from "@/lib/storeHelper";
import { toast } from "react-toastify";

export default function ResetPasswordForm({
  resetCode,
}: {
  resetCode: string;
}) {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const t = useTranslations("ResetPasswordPage");

  const [isLoading, setIsLoading] = useState(false);

  const formSchema = z
    .object({
      newPassword: z
        .string()
        .min(6, { message: t("validate.min_length_6") })
        .max(32, { message: t("validate.max_length_32") })
        .refine((value) => !/\s/.test(value), {
          message: t("validate.password_no_spaces"),
        }),
      confirmPassword: z
        .string()
        .min(6, { message: t("validate.min_length_6") })
        .max(32, { message: t("validate.max_length_32") })
        .refine((value) => !/\s/.test(value), {
          message: t("validate.password_no_spaces"),
        }),
    })
    .refine((data) => data.newPassword === data.confirmPassword, {
      path: ["confirmPassword"],
      message: t("validate.password_do_not_match"),
    });

  type ResetPasswordSchema = z.infer<typeof formSchema>;

  const resetPasswordForm = useForm<ResetPasswordSchema>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      newPassword: "",
      confirmPassword: "",
    },
  });

  async function onSubmit(values: ResetPasswordSchema) {
    try {
      if (!resetCode) {
        console.error("Reset code not found!");
        return;
      }
      setIsLoading(true);
      const request: ResetPasswordRequest = {
        resetCode: resetCode,
        newPassword: hashMD5(values.newPassword),
        confirmPassword: hashMD5(values.confirmPassword),
      };
      const result = await dispatch(doResetPassword(request));
      const payload = result.payload as ResetPasswordResponse;

      if (payload && payload.status === ResponseStatus.SUCCESS) {
        toast.success(t("reset_success"));
        StorageHelper.removeCookie(STORAGE_KEYS.resetCode);
        router.push("/sign-in");
      }
    } catch (error: any) {
      console.error("Reset password error:", error?.message);
    } finally {
      setIsLoading(false);
    }
  }

  useEffect(() => {
    // Handle keydown enter to submit form
    const keyDownHandler = (event) => {
      if (event.key === "Enter") {
        event.preventDefault();
        resetPasswordForm.handleSubmit(onSubmit)();
      }
    };

    document.addEventListener("keydown", keyDownHandler);

    return () => {
      document.removeEventListener("keydown", keyDownHandler);
    };
  }, [resetPasswordForm]);

  return (
    <FormWrapper<ResetPasswordSchema>
      form={resetPasswordForm}
      onSubmit={onSubmit}
      layout="vertical"
      className="space-y-4"
    >
      <FormItem name="newPassword" label={t("new_password")}>
        {({ value, ref, ...field }) => (
          <AppInput
            ref={ref}
            inputType="password"
            {...field}
            placeholder={t("enter_new_password")}
          />
        )}
      </FormItem>

      <FormItem name="confirmPassword" label={t("confirm_password")}>
        {({ value, ref, ...field }) => (
          <AppInput
            ref={ref}
            inputType="password"
            {...field}
            placeholder={t("enter_confirm_password")}
          />
        )}
      </FormItem>

      <AppButton
        type="primary"
        htmlType="submit"
        loading={isLoading}
        className="w-full"
      >
        {t("title")}
      </AppButton>
    </FormWrapper>
  );
}