/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import AuthHead from "@/components/auth/AuthHead";
import AuthPasswordInput from "@/components/auth/AuthPasswordInput";
import AuthPageLayout, {
  AuthFormFooter,
  AuthPageContent,
} from "@/components/auth/AuthPageLayout";
import React, { useMemo } from "react";
import useAxios from "@/hooks/useAxios";
import { useFormik } from "formik";
import * as yup from "yup";
import { useRouter } from "next/navigation";
import { IVerifyOtp } from "@/types/types";
import AuthNextButton from "@/components/auth/AuthNextButton";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import LocalePageShell from "@/components/i18n/LocalePageShell";

function PasswordPage() {
  const { t } = useTranslation("common");
  const router = useRouter();
  const { request, loading } = useAxios();

  const schema = useMemo(
    () =>
      yup.object().shape({
        password: yup
          .string()
          .required(t("auth.passwordRequired"))
          .min(8, t("auth.passwordMin"))
          .matches(
            /^(?=.*[a-zA-Zآ-ی])(?=.*\d).{8,}$/,
            t("auth.passwordLettersNumbers")
          ),
        confirmPassword: yup
          .string()
          .required(t("auth.confirmPasswordRequired"))
          .oneOf([yup.ref("password")], t("auth.confirmPasswordMismatch")),
      }),
    [t]
  );

  const formik = useFormik({
    initialValues: {
      password: "",
      confirmPassword: "",
    },
    validationSchema: schema,
    onSubmit: async (values) => {
      try {
        (await request("POST", "/register/password", {
          new_password: values.password,
        })) as IVerifyOtp;
        router.push("/register/fullname");
      } catch (err: any) {
        const message =
          err?.response?.data?.message || t("auth.savePasswordFailed");
        toast.error(message);
      }
    },
  });

  return (
    <LocalePageShell>
      <AuthPageLayout>
        <form
          onSubmit={formik.handleSubmit}
          className="flex w-full flex-1 flex-col items-center"
        >
          <AuthPageContent>
            <AuthHead title={t("auth.passwordTitle")} />
            <div className="w-full max-w-sm flex flex-col items-center">
              <AuthPasswordInput
                name="password"
                placeholder={t("auth.passwordPlaceholder")}
                wrapperClassName="mt-4"
                className={`border ${
                  formik.touched.password && formik.errors.password
                    ? "border-red-500 dark:border-red-500"
                    : "border-gray-300"
                }`}
                value={formik.values.password}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
              />
              {formik.touched.password && formik.errors.password && (
                <small className="text-red-500 mt-2 block">
                  {formik.errors.password}
                </small>
              )}

              <AuthPasswordInput
                name="confirmPassword"
                placeholder={t("auth.confirmPasswordPlaceholder")}
                wrapperClassName="mt-4"
                className={`border ${
                  formik.touched.confirmPassword && formik.errors.confirmPassword
                    ? "border-red-500 dark:border-red-500"
                    : "border-gray-300"
                }`}
                value={formik.values.confirmPassword}
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
              />
              {formik.touched.confirmPassword &&
                formik.errors.confirmPassword && (
                  <small className="text-red-500 mt-2 block">
                    {formik.errors.confirmPassword}
                  </small>
                )}
            </div>
          </AuthPageContent>

          <AuthFormFooter>
            <AuthNextButton type="submit" loading={loading} disabled={loading}>
              {t("auth.saveAndContinue")}
            </AuthNextButton>
          </AuthFormFooter>
        </form>
      </AuthPageLayout>
    </LocalePageShell>
  );
}

export default PasswordPage;
