/* 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 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";

const schema = yup.object().shape({
  password: yup
    .string()
    .required("کلمه عبور نمی\u200Cتواند خالی باشد")
    .min(8, "کلمه عبور نباید کوتاه تر از 8 کاراکتر باشد")
    .matches(
      /^(?=.*[a-zA-Zآ-ی])(?=.*\d).{8,}$/,
      "کلمه عبور باید شامل حروف و اعداد باشد"
    ),
  confirmPassword: yup
    .string()
    .required("تکرار کلمه عبور نمی\u200Cتواند خالی باشد")
    .oneOf(
      [yup.ref("password")],
      "تکرار کلمه عبور باید با کلمه عبور مطابقت داشته باشد"
    ),
});

function PasswordPage() {
  const router = useRouter();
  const { request, loading } = useAxios();

  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 || "ذخیره کلمه عبور ناموفق بود";
        toast.error(message);
      }
    },
  });

  return (
    <AuthPageLayout>
      <form
        onSubmit={formik.handleSubmit}
        className="flex w-full flex-1 flex-col items-center"
      >
        <AuthPageContent>
          <AuthHead title="کلمه عبور" />
          <div className="w-full max-w-sm flex flex-col items-center">
            <AuthPasswordInput
              name="password"
              placeholder="کلمه عبور"
              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="تکرار کلمه عبور"
              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}>
            ثبت و ادامه
          </AuthNextButton>
        </AuthFormFooter>
      </form>
    </AuthPageLayout>
  );
}

export default PasswordPage;
