"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import { Form } from "@/components/ui/form";
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 { Icons } from "@/components/icons";
import authBanner from "@/assets/images/AuthImages/restaurant.png";

const formSchema = z.object({
  phone_number: z.string().min(1, "Phone number is required"),
});
type LoginForm = z.infer<typeof formSchema>;

const Login = () => {
  const res: any = sessionStorage.getItem("restaurant");
  const food: any = sessionStorage.getItem("food");
  const bank: any = sessionStorage.getItem("bank");

  const { setUserInfo, Toast, requestNotification, userInfo } = useGlobalContext();
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const form = useForm<LoginForm>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      phone_number: undefined,
    },
  });

  // Determine Step 2 visibility
  const showStep2 = (() => {
    if (!userInfo) return false;
    const { isFoodDelivery, isDineOut } = userInfo;
    const type = userInfo?.restaurant_id?.type;

    if (type !== 'food') return false;
    // Show Step 2 if Food Delivery is true OR both are false
    return isFoodDelivery || (!isFoodDelivery && !isDineOut);
  })();


  // Determine if Step 3 should appear active
  const isStep3Active = (() => {
    // Step 3 is active if Step 1 is complete and either:
    // 1. Step 2 is shown and completed (food === "complete")
    // 2. Step 2 is hidden (showStep2 === false)
    if (res !== "complete") return false;
    if (!showStep2) return true;
    return food === "complete";
  })();



  const [showPasswords, setShowPasswords] = useState({
    old: false,
    new: false,
    confirm: false,
  });

  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 onSubmit = async (data: LoginForm) => {
    setUserInfo(null);
    apis.setToken("");
    destroyCookie(null, COOKIES_USER_ACCESS_TOKEN, {
      maxAge: 0,
      path: "/",
    });
    try {
      let payload: any = {
        ...data,
        device_type: "WEB",
      };
      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);
      if (!apiRes?.data?.is_email_verified) {
        router.replace(
          `/auth/verify/email?email=${apiRes?.data?.email}&key=${apiRes?.data?.unique_string}`
        );
      } else {
        apis.setToken(apiRes?.data?.access_token);
        setCookie(null, "COOKIES_USER_ACCESS_TOKEN", apiRes?.data?.access_token, {
          path: "/",
        });
        setUserInfo({
          ...apiRes?.data,
          access_token: apiRes?.data?.access_token,
        });
        router.replace("/dashboard");
      }
    } catch (error) {
      Toast.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    let token: any = sessionStorage.getItem("token");
    if (!token) {
      router.replace(`/auth/login`);
    }
  }, []);

  const togglePasswordVisibility = (field: keyof typeof showPasswords) => {
    setShowPasswords((prev) => ({
      ...prev,
      [field]: !prev[field],
    }));
  };

  const handleSubmit = async () => {
    try {
      const apiRes = await apis.Auth.Submit();
      if (apiRes) {
        router.replace(`/auth/restaurant/under-review`);
        sessionStorage.clear();
      }
    } catch (error) { }
  };

  const getProfile = async () => {
    try {
      const apiRes = await apis.Profile.getProfile();
      const { data } = apiRes;
      router.push("/auth/restaurant/parent-category");
      setUserInfo((prev: any) => ({
        ...prev,
        ...data,
      }));
      return data;
    } catch (error) { }
  };

  return (
    <>
      <section className="w-full h-full overflow-y-auto ">
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
            <main className="flex items-center justify-center bg-gray-50">
              <div className="w-full max-w-lg rounded-lg  p-6">
                <div className="flex flex-col space-y-8 p-6">
                  {/* Step 1 */}
                  <div className="relative flex items-start">
                    <div className="flex flex-col items-center">
                      <div className="w-10 h-10 flex items-center justify-center">
                        <span
                          className={
                            res === "complete"
                              ? "text-[var(--primary-brand)] text-xl"
                              : "text-gray-500 text-xl"
                          }
                        >
                          <Icons.AuthBellIconActive />
                        </span>
                      </div>
                      <div className="steps-divider"></div>
                    </div>
                    <div className="ml-4">
                      <h3 className="text-lg font-semibold text-gray-900">
                        Vendor Information
                      </h3>
                      <p className="text-sm text-gray-500">
                        Name, location, and contact number
                      </p>
                      {res === "complete" ? (
                        <Button
                          onClick={getProfile}
                          className="flex items-center font-medium gap-2 steps-proceed-btn mt-2 text-[var(--primary-brand)] px-4 py-2 rounded-lg text-sm hover:bg-[var(--primary-brand)]/20 transition-all"
                        >
                          Edit details <Icons.RightArrowYellow />
                        </Button>
                      ) : (
                        <Button
                          onClick={() =>
                            router.push("/auth/restaurant/parent-category")
                          }
                          className="flex items-center font-medium gap-2 steps-proceed-btn mt-2 text-[var(--primary-brand)] px-4 py-2 rounded-lg text-sm hover:bg-[var(--primary-brand)]/20 transition-all"
                        >
                          Proceed <Icons.RightArrowYellow />
                        </Button>
                      )}
                    </div>
                  </div>

                  {/* Step 2 */}
                  {/* Step 2 */}
                  {showStep2 && (
                    <div className="relative flex items-start">
                      <div className="flex flex-col items-center">
                        <div className="w-10 h-10 flex items-center justify-center">
                          <span
                            className={
                              res === "complete"
                                ? "text-[var(--primary-brand)] text-xl"
                                : "text-gray-500 text-xl"
                            }
                          >
                            {res === "complete" ? <Icons.MenuIconActive /> : <Icons.MenuIcon />}
                          </span>
                        </div>
                        <div className="steps-divider"></div>
                      </div>
                      <div className="ml-4">
                        <h3 className={`text-lg font-semibold ${res === "complete" ? "text-gray-900" : "text-gray-400"}`}>
                          Menu and operational details
                        </h3>
                        <p className="text-sm text-gray-500">
                          Menu, dish image, and timings
                        </p>
                        {res === "complete" ? (
                          food === "complete" ? (
                            <Button
                              onClick={() => router.push("/auth/menu/add")}
                              className="flex items-center font-medium gap-2 steps-proceed-btn mt-2 text-[var(--primary-brand)] px-4 py-2 rounded-lg text-sm hover:bg-[var(--primary-brand)]/20 transition-all"
                            >
                              Edit details <Icons.RightArrowYellow />
                            </Button>
                          ) : (
                            <Button
                              onClick={() => router.push("/auth/menu/add")}
                              className="flex items-center font-medium gap-2 steps-proceed-btn mt-2 text-[var(--primary-brand)] px-4 py-2 rounded-lg text-sm hover:bg-[var(--primary-brand)]/20 transition-all"
                            >
                              Proceed <Icons.RightArrowYellow />
                            </Button>
                          )
                        ) : null}
                      </div>
                    </div>
                  )}


                  {/* Step 3 */}
                  {/* Step 3 */}
                  <div className="flex items-start">
                    <div className="flex flex-col items-center">
                      <div className="w-10 h-10  flex items-center justify-center">
                        <span
                          className={
                            isStep3Active
                              ? "text-[var(--primary-brand)] text-xl"
                              : "text-gray-500 text-xl"
                          }
                        >
                          {isStep3Active ? <Icons.BankDetailsActive /> : <Icons.BankDetails />}
                        </span>
                      </div>
                    </div>
                    <div className="ml-4">
                      <h3 className={`text-lg font-semibold ${isStep3Active ? "text-gray-900" : "text-gray-400"}`}>
                        Documents and Bank Details
                      </h3>
                      <p className="text-sm text-gray-500">
                        Bank account and other information
                      </p>
                      {isStep3Active ? (
                        <Button
                          onClick={() => router.push("/auth/restaurant/documents")}
                          className="flex items-center font-medium gap-2 steps-proceed-btn mt-2 text-[var(--primary-brand)] px-4 py-2 rounded-lg text-sm hover:bg-[var(--primary-brand)]/20 transition-all"
                        >
                          {bank === "complete" ? "Edit details" : "Proceed"} <Icons.RightArrowYellow />
                        </Button>
                      ) : null}
                    </div>
                  </div>

                </div>
                {bank === "complete" && (
                  <Button
                    type="submit"
                    onClick={handleSubmit}
                    className="w-full bg-[var(--primary-brand)] text-white hover:bg-[var(--primary-brand)]/90 transition-all"
                  >
                    SUBMIT
                  </Button>
                )}
              </div>
            </main>
          </form>
        </Form>
      </section>
    </>
  );
};

export default function LoginPage() {
  return (
    <AuthLayout
      title="Get started for accepting
Online order’s"
      des="Please keep your menu and the following 
things ready for smooth signup."
      image={authBanner.src}
    >
      <Login />
    </AuthLayout>
  );
}