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

import Container from "@/components/elements/Container";
import React, { useEffect } from "react";
import useAxios from "@/hooks/useAxios";
import { useFormik } from "formik";
import * as yup from "yup";
import { useRouter } from "next/navigation";
import AuthNextButton from "@/components/auth/AuthNextButton";
import toast from "react-hot-toast";
import AuthInput from "@/components/auth/AuthInput";
import { useUser } from "@/hooks/useUser";

// Validation schema using Yup
const schema = yup.object().shape({
  shaba: yup
    .string()
    .matches(/^(?=.{24}$)[0-9]*$/, "شماره شبا باید ۲۴ رقم باشد")
    .required("شماره شبا الزامی است"),
});

function AuthPage() {
  const router = useRouter();
  const { request, loading } = useAxios();
  const user = useUser();

  const formik = useFormik({
    initialValues: {
      shaba: "",
    },
    validationSchema: schema,
    onSubmit: async (values, { setSubmitting }) => {
      try {
        await request("PATCH", "/verify/shaba", {
          shaba: values.shaba,
        });
        router.push("/settings/edit");
      } catch (err: any) {
        toast.error(err?.message || "خطای نامشخصی رخ داد.");
      } finally {
        setSubmitting(false);
      }
    },
  });

  useEffect(() => {
    if (user?.shaba) {
      formik.setValues({ shaba: user.shaba });
    }
  }, [user?.shaba]);

  return (
    <Container>
      <div className="p-4 flex flex-col items-center h-screen justify-center auth-page">
        <span className="text-xl font-bold text-foreground">شماره شبا</span>
        <div className="mt-5"></div>

        <form
          onSubmit={formik.handleSubmit}
          className="w-full max-w-sm flex flex-col items-center"
        >
          <small className="font-bold mt-10"> جهت واریز حق الزحمه</small>
          {/* شماره شبا */}
          <div className="flex flex-col w-full relative mt-4 ">
            <span className="absolute left-4 top-1.5">IR</span>
            <AuthInput
              name="shaba"
              type="text"
              placeholder="شماره شبا"
              className={`border w-full mx-auto h-[36px] p-2 max-w-full pl-8 text-sm ${
                formik.touched.shaba && formik.errors.shaba
                  ? "border-red-500 dark:border-red-500"
                  : "border-gray-300"
              }`}
              value={formik.values.shaba}
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
            />
            {formik.touched.shaba && formik.errors.shaba && (
              <small className="text-red-500 mt-2 block text-center">
                {formik.errors.shaba}
              </small>
            )}
          </div>

          <small className="font-bold mt-10">
            شماره شبا باید به نام خود شخص باشد
          </small>
          <AuthNextButton type="submit" className="mt-20" loading={loading} disabled={loading}>
            ویرایش
          </AuthNextButton>
        </form>
      </div>
    </Container>
  );
}

export default AuthPage;
