"use client";

import { Button } from "@/components/ui/button";
import { useEffect, useState } from "react";
import apis from "@/utils/apis";
import { destroyCookie, setCookie } from "nookies";
import { useGlobalContext } from "@/context/Provider";
import { useRouter } from "next/navigation";
import Loader from "@/components/common/loader";
import { COOKIES_USER_ACCESS_TOKEN } from "@/context/actionTypes";
import AuthLayout from "@/components/layout/layout";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import authBanner from "@/assets/images/AuthImages/auth.png";
import { Label } from "@/components/ui/label";
import CountryPickerModal from "@/components/countrycode/page";
import countries from "@/utils/CountryCode.json";

const Login = () => {
  const { setUserInfo, Toast, userInfo, requestNotification } =
    useGlobalContext();
  const [loading, setLoading] = useState(false);
  const [value, setValue] = useState<any>(countries?.[97]);
  const [state, setState] = useState<any>("");
  const [errMsg, setErrMsg] = useState("");
  const [visibleFields, setVisibleFields] = useState(1);
  const router = useRouter();

  function getDeviceType() {
    const userAgent = navigator.userAgent.toLowerCase();
    const width = window.screen.width;
    const height = window.screen.height;
    if (/mobile/i.test(userAgent)) {
      return "mobile";
    } else if (/tablet/i.test(userAgent)) {
      return "tablet";
    } else if (width > 1024 && height <= 800) {
      return "laptop";
    } else {
      return "computer";
    }
  }

  const validatePhoneNumber = (phoneNumber: string) => {
    if (!phoneNumber) {
      setErrMsg("Phone number is required!");
      return false;
    }

    const minLength = value?.min_length || 6;
    const maxLength = value?.max_length || 15;
    const phoneLength = phoneNumber.length;

    if (phoneLength < minLength) {
      setErrMsg(`Phone number must be at least ${minLength} digits for ${value?.name}!`);
      return false;
    }

    if (phoneLength > maxLength) {
      setErrMsg(`Phone number must not exceed ${maxLength} digits for ${value?.name}!`);
      return false;
    }

    setErrMsg("");
    return true;
  };

  const handleSubmit = async () => {
    setUserInfo(null);
    apis.setToken("");
    // destroyCookie(null, COOKIES_USER_ACCESS_TOKEN, {
    //   maxAge: 0,
    //   path: "/",
    // });

    if (!validatePhoneNumber(state)) {
      return;
    }

    if (state?.length < 6) {
      Toast.error("Enter a valid number !");
      return;
    }
    // router.push("/auth/verify/phone")
    try {
      let phoneNumber = state || "";
      let dialCode = value?.dial_code || "";

      if (phoneNumber.startsWith(dialCode)) {
        phoneNumber = phoneNumber.slice(dialCode.length);
      }

      let payload: any = {
        country_code: "+" + dialCode,
        phone: phoneNumber,
        type: "customer",
      };

      setLoading(true);
      const fcm_token = await requestNotification();
      if (fcm_token) {
        payload["fcm_token"] = fcm_token;
      }
      const system_type = getDeviceType();
      if (system_type) {
        payload["system_type"] = system_type;
      }
      const apiRes = await apis.Auth.login(payload);
      //   setUserInfo(apiRes)
      if (apiRes?.token) {
        sessionStorage.setItem("token", apiRes?.token);
        sessionStorage.setItem("phone", phoneNumber);
        sessionStorage.setItem("code", dialCode);
        apis.setToken(apiRes?.token);

        setUserInfo({ ...userInfo, access_token: apiRes?.token });
        router.push("/auth/verify/phone");
        sessionStorage.removeItem("hasReloadedLoginPage");
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    const hasReloaded = sessionStorage.getItem("hasReloadedLoginPage");
    if (!hasReloaded) {
      sessionStorage.setItem("hasReloadedLoginPage", "true");
      window.location.reload();
    }
  }, []);

  useEffect(() => {
    if (state) {
      validatePhoneNumber(state);
    }
  }, [value]);

  return (
    <>
      <section className="w-full">
        <div className="bg-white p-6 rounded-xl shadow-md">
          <h2 className="text-lg font-semibold">Login or Sign up to</h2>
          <h1 className="text-2xl font-bold text-primary">ReadyEats</h1>

          <label className="block mt-4 text-sm text-gray-500">
            Phone Number
          </label>

          <div className="flex flex-row w-full">
            <CountryPickerModal setValue={setValue} value={value} />
            <input
              type="tel"
              placeholder="Enter mobile number"
              value={state}
              onChange={(e: any) => {
                const numericValue = e.target.value.replace(/\D/g, "");
                setState(numericValue);
                if (errMsg) setErrMsg("");
              }}
              onBlur={() => {
                if (state) validatePhoneNumber(state);
              }}
              minLength={value?.min_length || 6}
              maxLength={value?.max_length || 15}
              className={`w-full border px-3 py-2 placeholder:text-[12px] rounded-md focus:outline-none focus:bg-white-500 focus:ring-2 ${errMsg ? "border-red-500 focus:ring-red-400" : "focus:ring-primary"
                }`}
            />
          </div>

          {errMsg && (
            <p className="text-red-500 text-xs mt-2 ml-1">{errMsg}</p>
          )}

          <Button
            // onClick={() => router.push("/auth/verify/phone")}
            onClick={handleSubmit}
            className="theme-background mt-6 btn-text-color h-11 w-full text-white"
            variant={"default"}
          >
            <Loader loading={loading} />
            Continue
          </Button>

          <Button
            onClick={() => router.push("/home")}
            className="theme-background mt-3 btn-text-color h-11 w-full text-white"
            variant={"default"}
          >
            Skip
          </Button>
        </div>
      </section>
    </>
  );
};

export default function LoginPage() {
  return (
    <AuthLayout backgroundImage={authBanner.src}>
      <Login />
    </AuthLayout>
  );
}