import { useRef, useState } from "react";

import { Button } from "@mui/material";
import OTPForm from "../element/OTPForm";
import EditLogin from "../../icons/EditLogin";
import ArrowRightS from "../../icons/ArrowRightS";
import { request } from "@/services/response";
import { changeNumToDefault } from "@/helper";
import Recode from "./Recode";

function VerificationPage({ setIsSendMsg, link, num, setStep }) {
  const retryIcon = useRef();

  const [timer, setTimer] = useState(0);
  const [loading, setLoading] = useState(false);
  const [code, setCode] = useState(["", "", "", ""]);
  const [isError, setIsError] = useState(false);
  const inputRefs = Array.from({ length: 5 }, () => useRef());

  const handleChange = (index, val) => {
    const newCode = [...code];

    if (val === "backspace") {
      newCode[index] = "";
      setCode(newCode);
      if (index > 0) {
        inputRefs[index - 1].current?.focus();
      }
      return;
    }

    newCode[index] = val;

    if (newCode.join("").length === 4 && isError) {
      setIsError(false);
    }
    // if (newCode.join("").length === 4) {
    //   handleReq();
    // }

    setCode(newCode);

    if (val && index < inputRefs.length - 1) {
      inputRefs[index + 1].current?.focus();
    }
  };

  const handleReq = async () => {
    // const formData = new URLSearchParams();
    // formData.append("grant_type", "mobile");
    // formData.append("client_id", process.env.NEXT_PUBLIC_CLIENT_ID);
    // formData.append("client_secret", process.env.NEXT_PUBLIC_CLIENT_SECRET);
    // formData.append("mobile_number", changeNumToDefault(num));
    // formData.append("code", code.join(""));

    // try {
    //   const res = await axios.post(
    //     "https://back-dev.clinic-pro.ir/oauth/token",
    //     formData,
    //     {
    //       withCredentials: true,
    //       headers: {
    //         "Content-Type": "application/x-www-form-urlencoded",
    //       },
    //     }
    //   );
    //   console.log(res);
    // } catch (err) {
    //   console.error("Request failed:", err);
    // }

    setLoading(true);
    request
      .getToken(
        "mobile",
        process.env.NEXT_PUBLIC_CLIENT_ID,
        process.env.NEXT_PUBLIC_CLIENT_SECRET,
        changeNumToDefault(num),
        code.join("")
      )
      .then((response) => {
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
  };

  return (
    <div
      className="rounded-[16px] opacity-page mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF] 
        p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]"
    >
      <div
        className="cursor-pointer"
        onClick={() => {
          setStep && setStep((prev) => prev - 1);
          setIsSendMsg && setIsSendMsg(false);
        }}
      >
        <ArrowRightS />
      </div>
      <p className="text-[#525252] mt-[10px] sm:mt-[12px] md:mt-[14px] lg:mt-[16px] text-[18px] font-bold">
        کد تایید را وارد نمایید
      </p>
      <p className="text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right">
        کد تایید برای شماره <span dir="ltr">09{num}</span> ارسال شد.
      </p>
      <div className="mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]">
        <div className="mb-[27px]" dir="ltr">
          <div
            className="w-full flex items-center justify-center gap-6 sm:gap-6"
            dir="ltr"
          >
            {code.map((digit, index) => (
              <OTPForm
                key={index}
                index={index}
                value={digit}
                isError={isError}
                onChange={handleChange}
                inputRef={inputRefs[index]}
              />
            ))}
          </div>
          <p
            className={`
          text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
            transform text-right 
            ${!isError ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
        `}
          >
            !کد را وارد کنید
          </p>
        </div>
        <div className="flex w-full items-center justify-between flex-wrap gap-y-5">
          <Button
            className="flex !p-1 items-center justify-start gap-1 cursor-pointer"
            onClick={() => {
              setStep && setStep((prev) => prev - 1);
              setIsSendMsg && setIsSendMsg(false);
            }}
          >
            <EditLogin />
            <p className="text-[#F17732] text-[14px] font-normal select-none">
              ویرایش شماره موبایل
            </p>
          </Button>

          <Recode retryIcon={retryIcon} timer={timer} setTimer={setTimer} />
        </div>
      </div>
      <Button
        fullWidth
        loading={loading}
        variant="contained"
        onClick={() => {
          setIsSendMsg && setIsSendMsg(true);
          setStep && setStep((prev) => prev + 1);
          if (code.join("").length !== 4) {
            setIsError(true);
          } else {
            handleReq();
          }
        }}
        className="!rounded-[8px] !bg-[#5559CE]"
      >
        تایید
      </Button>
    </div>
  );
}

export default VerificationPage;