"use client";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { Form } from "@/shared/ui/form";
import AppButton from "@/shared/buttons/AppButton";
import { useRouter } from "nextjs-toploader/app";
import ShowAlertMixin from "@/shared/ShowAlertMixin";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store/store";
import { UseMutate } from "@/hooks/UseMutate";
import { addForgetPassword } from "@/store/forget.slice";
import FormOtp from "@/shared/form-controls/FormOtp";
import LocalePath from "@/shared/LocalePath";

const VerifyCodeEmail: React.FC = () => {
  const [pinCodeValue, setPinCodeValue] = useState("");
  const locale = useLocale();
  const t = useTranslations("");
  const router = useRouter();
  const dispatch = useDispatch();
  const { storedValues } = useSelector(
    (state: RootState) => state.ForgetConfig,
  );
  const formSchema = yup.object({
    code: yup
      .string()
      .required(t("validations.code_required"))
      .length(
        4,
        t("validations.The code must be equal 4 numbers", { length: 4 }),
      ),
  });
  const form = useForm({
    resolver: yupResolver(formSchema),
    defaultValues: { code: "" },
  });

  const { mutate: VerifyMutate, isLoading: isLoadingVerify } = UseMutate({
    endpoint: "client/auth/confirm-reset-code",
    onSuccess: (responseData: any) => {
      ShowAlertMixin({
        icon: "success",
        title: responseData?.message,
      });
      dispatch(
        addForgetPassword({
          code: pinCodeValue,
          email: storedValues?.email,
        }),
      );
      router.replace(`${locale == "ar" ? "" : "/en"}/auth/change-password`);
    },
  });
  const { mutate: ResendMutate, isLoading: isLoadingResend } = UseMutate({
    endpoint: "client/auth/resend-forgot-password",
    onSuccess: (responseData: any) => {
      ShowAlertMixin({
        icon: "success",
        title: responseData?.message,
      });
    },
  });
  async function onSubmit(values: yup.InferType<typeof formSchema>) {
    const finalOut = {
      code: pinCodeValue,
      token: storedValues?.verification_token,
    };
    await VerifyMutate({ ...finalOut });
  }

  // Resend Code
  const handleSendTime = async () => {
    await ResendMutate({
      token: storedValues?.verification_token,
    });
  };
  useEffect(() => {
    if (!storedValues?.verification_token)
      router.replace(`${locale == "ar" ? "/" : "/en"}`);
  }, [storedValues?.verification_token]);

  return (
    <div className="flex flex-col gap-3  lg:w-[450px] md:[550px] w-[300px] h-fit py-2">
      <div className="text-center mb-2">
        <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="lucide lucide-mail *:stroke-primary"
          >
            <rect width="20" height="16" x="2" y="4" rx="2"></rect>
            <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
          </svg>
        </div>
        <h2 className="text-2xl mb-2">{t("Text.confirm_account")}</h2>
        <p className="text-text-secondary">
          {t("Text.verify_code_email", {
            phone: storedValues?.phone,
            phone_code: storedValues?.phone_code,
          })}
        </p>
      </div>

      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="flex flex-col items-center justify-center gap-4 mt-5">
            <FormOtp
              pinCodeValue={pinCodeValue}
              setPinCodeValue={setPinCodeValue}
              name="code"
              length={4}
              handleSendTime={handleSendTime}
            />

            <div className="!pt-2 w-full h-max ">
              <AppButton
                title={t("BUTTONS.confirm")}
                buttonType="submit"
                button
                loader={isLoadingVerify}
                disabled={isLoadingVerify}
                className="!w-full  !h-[56px] !rounded-xl "
              />
            </div>
          </div>
        </form>
      </Form>
      <p className="flex justify-center items-center mt-4 text-sm text-text-secondary ">
        <LocalePath
          href="/auth/login"
          className="font-medium hover:underline text-text-secondary cursor-pointer ms-1 text-sm"
        >
          {t("BUTTONS.back_to_login")}
        </LocalePath>
      </p>
    </div>
  );
};

export default VerifyCodeEmail;