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

import AuthHead from "@/components/auth/AuthHead";
import AuthPasswordInput from "@/components/auth/AuthPasswordInput";
import Container from "@/components/elements/Container";
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 { useUser } from "@/hooks/useUser";
import toast from "react-hot-toast";

// Validation schema using Yup
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")],
      "تکرار کلمه عبور باید با کلمه عبور مطابقت داشته باشد"
    )
    .required("تکرار کلمه عبور الزامی است"),
});

function PasswordPage() {
  const router = useRouter();
  const user = useUser();
  const { request, loading } = useAxios();
  const authProvider =
    typeof window !== "undefined"
      ? localStorage.getItem("auth_provider")
      : null;
  const isGoogleUser = authProvider === "google" || user?.auth_provider === "google";

  const formik = useFormik({
    initialValues: {
      password: "",
      confirmPassword: "",
    },
    validationSchema: schema,
    onSubmit: async (values) => {
      try {
        (await request("PATCH", "/login/change_password", {
          ...(user?.mobile ? { mobile: user.mobile } : {}),
          new_password: values.password,
        })) as IVerifyOtp;
        toast.success(
          isGoogleUser
            ? "کلمه عبور تنظیم شد. از این پس می‌توانید با نام کاربری وارد شوید."
            : "کلمه عبور با موفقیت تغییر کرد"
        );
        router.push("/settings/edit");
      } catch (err: any) {
        console.log("Unhandled error:", err?.message);
      }
    },
  });

  return (
    <Container>
      <div className="p-4 flex flex-col items-center h-screen justify-center">
        <AuthHead title={isGoogleUser ? "تنظیم کلمه عبور" : "تغییر کلمه عبور"} />
        {isGoogleUser && (
          <p className="text-sm text-gray-500 text-center mb-4 max-w-sm">
            حساب شما با گوگل ساخته شده است. در صورت تمایل می‌توانید کلمه عبور
            جداگانه تنظیم کنید.
          </p>
        )}
        <form
          onSubmit={formik.handleSubmit}
          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>
          )}

          <AuthNextButton type="submit" className="mt-20" loading={loading} disabled={loading}>
            تایید کلمه عبور
          </AuthNextButton>
        </form>
      </div>
    </Container>
  );
}

export default PasswordPage;
