import Field from "@/app/component/element/Field";
import { validatePhoneNumber } from "@/helper";
import { request } from "@/services/response";
import { InputAdornment, Button, CircularProgress } from "@mui/material";
import Link from "next/link";
import { useState } from "react";
import { toast } from "react-toastify";
import Altcha from "@/components/Altcha";

function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity, setStep }) {
  const [error, setError] = useState({ valid: true, text: "" });
  const [loading, setLoading] = useState(false);
  const [altcha, setAltcha] = useState("");
  const [altchaKey, setAltchaKey] = useState(0); // remount widget برای challenge تازه بعد از خطا

  const handleChange = (val) => {
    const checkedNum = validatePhoneNumber(val);

    // اگر کاراکتر غیر عددی بود، notification نشون بده
    if (!checkedNum.valid && checkedNum.text === "فقط از اعداد انگلیسی استفاده کنید.") {
      toast.error("فقط از اعداد انگلیسی استفاده کنید.");
    }

    setError(checkedNum);
    setNum(val);
  };
  const handleReq = async () => {
    setLoading(true);
    request
      .sendCode(num, altcha, typeof window !== "undefined" ? window.location.hostname : "")
      .then((response) => {
        setLoading(false);
        if (response.uuid) {
          setIsSendMsg(true);
          setUuid(response.uuid);
          // به مرحله بعد (VerificationPage) می‌رود
          setStep && setStep(2);
        }
      })
      .catch(() => {
        setLoading(false);
        // challenge یک‌بارمصرف است؛ بعد از خطا widget را برای challenge تازه ری‌مانت کن
        setAltcha("");
        setAltchaKey((k) => k + 1);
      });
  };

  return (
    <div
      className="rounded-[16px] mt-[28px] opacity-page sm:mt-[14px] 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] overflow-hidden"
    >
      <p className="text-[#525252] text-[18px] font-bold">
        ورود یا ثبت نام در {matchedCity?.site_name || "نوبت 724"}
      </p>
      <p className="text-[#616161] text-[14px] mt-[40px] sm:mt-[43px] md:mt-[46px] lg:mt-[48px] font-normal">
        شماره همراه خود را وارد نمایید.
      </p>
      <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[19px] sm:mb-[16px] md:mb-[15px] lg:mb-[11px]">
        <Field
          dir="ltr"
          value={num}
          type="tel"
          error={!error.valid}
          placeholder="09xxxxxxxxx"
          updateState={handleChange}
        />
        <p
          className={` text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out transform ${error.valid ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"} `}
        >
          {error.text}
        </p>
      </div>
      <Altcha key={altchaKey} onVerified={setAltcha} />
      <Button
        fullWidth
        variant="contained"
        disabled={loading}
        onClick={() => {
          const checkedNum = validatePhoneNumber(num);
          if (!checkedNum.valid) {
            setError(checkedNum);
            return;
          }
          handleReq();
        }}
        className="!rounded-[8px] !bg-[#5559CE] !py-[7.5px] md:!py-[8.5px] lg:!py-[10px]"
      >
        {loading ? <CircularProgress size={22} sx={{ color: "#fff" }} /> : "ورود"}
      </Button>
      <p className="text-[#525252] text-[14px] font-normal text-center mt-[34px] sm:mt-[36px] md:mt-[38px] lg:mt-[40px]">
        <Link href="/">
          <span className="text-[#F17732] underline">قوانین استفاده</span>
        </Link>{" "}
        از {matchedCity?.site_name || "نوبت 724"} را می پذیرم.
      </p>
    </div>
  );
}

export default LogInPage;
