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

import AuthHead from "@/components/auth/AuthHead";
import AuthPageLayout, {
  AuthFormFooter,
  AuthPageContent,
} from "@/components/auth/AuthPageLayout";
import React, { useState } 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";

// Validation schema using Yup
const schema = yup.object().shape({
  selectedButton: yup.string(),
});

function UsertypePage() {
  const router = useRouter();
  const { request, loading } = useAxios();
  const mobile =
    typeof window !== "undefined" ? localStorage.getItem("mobile") : null;

  // State for managing submit action
  const [submitAction, setSubmitAction] = useState<"register" | "login" | null>(
    null
  );

  const formik = useFormik({
    initialValues: {
      selectedButton: "",
    },
    validationSchema: schema,
    onSubmit: async (values, { setSubmitting }) => {
      try {
        await request("POST", "/register/user_type", {
          mobile: mobile,
          // user_type: values.selectedButton,
          user_type: "user",
        });

        if (submitAction === "register") {
          // localStorage.setItem("usertype", values.selectedButton);
          localStorage.setItem("usertype", "user");
          router.push("/verify/avatar");
        } else if (submitAction === "login") {
          // localStorage.setItem("usertype", values.selectedButton);
          localStorage.setItem("usertype", "user");
          router.push("/");
        }
      } catch (err: any) {
        toast.error(err?.message || "خطای نامشخصی رخ داد.");
      } finally {
        setSubmitting(false);
      }
    },
  });

  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">
          {/* User Type Buttons */}
          {/* <AuthNextButton
            type="button"
            onClick={() => formik.setFieldValue("selectedButton", "user")}
            className={`mt-5 w-full py-3 max-w-[250px] ${
              formik.values.selectedButton === "user"
                ? "!bg-[#FC8EAC] !border-[#FC8EAC] !text-white"
                : ""
            }`}
          >
            کاربر
          </AuthNextButton>
          <AuthNextButton
            type="button"
            onClick={() => formik.setFieldValue("selectedButton", "employer")}
            className={`mt-5 w-full py-3 max-w-[250px] ${
              formik.values.selectedButton === "employer"
                ? "!bg-[#FC8EAC] !border-[#FC8EAC] !text-white"
                : ""
            }`}
          >
            کارفرما
          </AuthNextButton> */}

          {formik.errors.selectedButton && formik.touched.selectedButton && (
            <div className="text-red-500 mt-2 text-sm">
              {formik.errors.selectedButton}
            </div>
          )}
          </div>
        </AuthPageContent>

        <AuthFormFooter>
          <div className="flex gap-3">
            <AuthNextButton
              type="submit"
              onClick={() => setSubmitAction("register")}
              className="!border-[#0C8002] !text-[#0C8002]"
              disabled={loading}
            >
              ادامه ثبت نام
            </AuthNextButton>
            <AuthNextButton
              type="submit"
              onClick={() => setSubmitAction("login")}
              className="!border-[#FF0000] !text-[#FF0000]"
              disabled={loading}
            >
              ورود به برنامه
            </AuthNextButton>
          </div>
        </AuthFormFooter>
      </form>
    </AuthPageLayout>
  );
}

export default UsertypePage;
