"use client";

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 Recode from "./Recode";
import SendReq from "./SendReq";

function VerificationPage({ setIsSendMsg, uuid, link, setUuid, 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 === 5 && isError) {
      setIsError(false);
    }
    setCode(newCode);
    if (val && index < inputRefs.length - 1) {
      inputRefs[index + 1].current?.focus();
    }
  };

  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
            num={num}
            timer={timer}
            setUuid={setUuid}
            setTimer={setTimer}
            retryIcon={retryIcon}
          />
        </div>
      </div>
      <SendReq
        code={code}
        uuid={uuid}
        loading={loading}
        setStep={setStep}
        setIsError={setIsError}
        setLoading={setLoading}
        setIsSendMsg={setIsSendMsg}
      />
    </div>
  );
}

export default VerificationPage;