"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";

import {
  useParams,
  usePathname,
  useRouter,
} from "next/navigation";

import {
  FaBars,
  FaUser,
  FaSignOutAlt,
} from "react-icons/fa";

import logoPlaceholder from "@/assets/images/log.png";

import menu, {
  languages,
} from "./menu";

import MobileMenu from "./MobileMenu";

export default function Navbar() {
  /* ==================================================
     ROUTER
  ================================================== */

  const params = useParams();
  const pathname = usePathname();
  const router = useRouter();

  const locale =
    params?.locale || "en";

  /* ==================================================
     STATE
  ================================================== */

  const [header, setHeader] =
    useState(null);

  const [loading, setLoading] =
    useState(true);

  const [user, setUser] =
    useState(null);

  const [userLoading, setUserLoading] =
    useState(true);

  const [mobileOpen, setMobileOpen] =
    useState(false);

  /* ==================================================
     GET HEADER
  ================================================== */

  useEffect(() => {
    let mounted = true;

    const getHeader = async () => {
      try {
        const response = await fetch(
          "/api/header",
          {
            method: "GET",
            cache: "no-store",
          }
        );

        if (!response.ok) {
          throw new Error(
            "Failed to fetch header"
          );
        }

        const data =
          await response.json();

        if (
          mounted &&
          data?.success
        ) {
          setHeader(data.header);
        }
      } catch (error) {
        console.error(
          "Header error:",
          error
        );
      } finally {
        if (mounted) {
          setLoading(false);
        }
      }
    };

    getHeader();

    return () => {
      mounted = false;
    };
  }, []);

  /* ==================================================
     GET CURRENT USER
  ================================================== */

  useEffect(() => {
    let mounted = true;

    const getUser = async () => {
      try {
        const response =
          await fetch(
            "/api/auth/me",
            {
              method: "GET",
              credentials: "include",
              cache: "no-store",
            }
          );

        /*
         * کاربر لاگین نیست.
         * 401 طبیعی است.
         */

        if (!response.ok) {
          if (mounted) {
            setUser(null);
          }

          return;
        }

        const data =
          await response.json();

        if (
          mounted &&
          data?.success &&
          data?.user
        ) {
          setUser(data.user);
        } else if (mounted) {
          setUser(null);
        }
      } catch (error) {
        console.error(
          "User error:",
          error
        );

        if (mounted) {
          setUser(null);
        }
      } finally {
        if (mounted) {
          setUserLoading(false);
        }
      }
    };

    getUser();

    return () => {
      mounted = false;
    };
  }, []);

  /* ==================================================
     CLOSE MOBILE MENU
     WHEN ROUTE CHANGES
  ================================================== */

  useEffect(() => {
    setMobileOpen(false);
  }, [pathname]);

  /* ==================================================
     BODY SCROLL LOCK
  ================================================== */

  useEffect(() => {
    if (mobileOpen) {
      document.body.style.overflow =
        "hidden";
    } else {
      document.body.style.overflow =
        "";
    }

    return () => {
      document.body.style.overflow =
        "";
    };
  }, [mobileOpen]);

  /* ==================================================
     ESC KEY
  ================================================== */

  useEffect(() => {
    if (!mobileOpen) {
      return;
    }

    const handleEscape = (event) => {
      if (event.key === "Escape") {
        setMobileOpen(false);
      }
    };

    document.addEventListener(
      "keydown",
      handleEscape
    );

    return () => {
      document.removeEventListener(
        "keydown",
        handleEscape
      );
    };
  }, [mobileOpen]);

  /* ==================================================
     CHANGE LANGUAGE
  ================================================== */

  const changeLanguage = (lang) => {
    const segments =
      pathname.split("/");

    if (segments.length > 1) {
      segments[1] = lang;
    }

    return (
      segments.join("/") ||
      `/${lang}`
    );
  };

  /* ==================================================
     ACTIVE MENU
  ================================================== */

  const isActive = (href) => {
    if (!href) {
      return (
        pathname ===
        `/${locale}`
      );
    }

    const currentPath =
      `/${locale}${href}`;

    return (
      pathname === currentPath ||
      pathname.startsWith(
        `${currentPath}/`
      )
    );
  };

  /* ==================================================
     LOGO
  ================================================== */

  const logo =
    header?.logo ||
    logoPlaceholder;

  /* ==================================================
     USER NAME
  ================================================== */

  const userName =
    user?.name ||
    user?.username ||
    user?.firstName ||
    user?.fullName ||
    user?.email ||
    "User";

  /* ==================================================
     ADMIN CHECK
  ================================================== */

  const isAdmin =
    user?.role === "admin";

  /* ==================================================
     LOGOUT
  ================================================== */

  const handleLogout = async () => {
    try {
      const response =
        await fetch(
          "/api/auth/logout",
          {
            method: "POST",
            credentials: "include",
          }
        );

      const data =
        await response.json();

      if (
        !response.ok ||
        !data?.success
      ) {
        throw new Error(
          data?.message ||
            "Logout failed."
        );
      }

      /*
       * پاک کردن وضعیت کاربر
       */

      setUser(null);

      /*
       * بستن منوی موبایل
       */

      setMobileOpen(false);

      /*
       * برگشت به صفحه اصلی
       */

      router.replace(
        `/${locale}`
      );

      router.refresh();
    } catch (error) {
      console.error(
        "LOGOUT ERROR:",
        error
      );
    }
  };

  /* ==================================================
     LOADING
  ================================================== */

  if (loading) {
    return null;
  }

  /* ==================================================
     RENDER
  ================================================== */

  return (
    <>
      {/* ==================================================
          DESKTOP / MAIN HEADER
      ================================================== */}

      <header
        className="
          absolute
          left-0
          top-0
          z-30
          w-full
        "
      >
        <div
          className="
            flex
            items-center
            justify-between
            px-6
            py-8
            lg:px-20
          "
        >

          {/* ==================================================
              LOGO
          ================================================== */}

          <Link
            href={`/${locale}`}
            className="
              flex
              items-center
            "
          >
            <Image
              src={logo}
              alt={
                header?.siteName ||
                "Logo"
              }
              width={230}
              height={70}
              priority
              className="
                h-auto
                w-44
                object-contain
                md:w-56
              "
            />
          </Link>

          {/* ==================================================
              DESKTOP NAVIGATION
          ================================================== */}

          <div
            className="
              hidden
              items-center
              lg:flex
            "
          >

            {/* MAIN MENU */}

            <nav
              className="
                flex
                items-center
                space-x-10
              "
            >
              {menu.map((item) => (
                <Link
                  key={
                    item.id ||
                    item.key
                  }
                  href={
                    `/${locale}${item.href}`
                  }
                  className={`
                    text-sm
                    uppercase
                    tracking-[3px]
                    transition-all
                    duration-300
                    ${
                      isActive(
                        item.href
                      )
                        ? "text-gold"
                        : "text-white hover:text-gold"
                    }
                  `}
                >
                  {item.title?.[
                    locale
                  ] ||
                    item.title?.en ||
                    item.title}
                </Link>
              ))}
            </nav>

            {/* ==================================================
                LANGUAGES
            ================================================== */}

            <div
              className="
                ml-12
                flex
                items-center
                text-xs
                uppercase
              "
            >
              {languages.map(
                (
                  lang,
                  index
                ) => (
                  <div
                    key={
                      lang.code
                    }
                    className="
                      flex
                      items-center
                    "
                  >
                    <Link
                      href={changeLanguage(
                        lang.code
                      )}
                      className={`
                        transition-all
                        duration-300
                        ${
                          locale ===
                          lang.code
                            ? "text-gold"
                            : "text-white hover:text-gold"
                        }
                      `}
                    >
                      {lang.short}
                    </Link>

                    {index !==
                      languages.length -
                        1 && (
                      <span
                        className="
                          mx-3
                          text-gray-600
                        "
                      >
                        |
                      </span>
                    )}
                  </div>
                )
              )}
            </div>

            {/* ==================================================
                USER / LOGIN / LOGOUT
            ================================================== */}

            <div
              className="
                ml-10
                border-l
                border-gray-700
                pl-10
              "
            >
              {userLoading ? (
                <div
                  className="
                    h-5
                    w-20
                    animate-pulse
                    rounded
                    bg-gray-800
                  "
                />
              ) : isAdmin ? (
                /*
                 * ADMIN
                 *
                 * در فرانت هیچ User / Logout
                 * نمایش داده نمی‌شود.
                 */
                null
              ) : (
                <div className="flex items-center gap-6">

                  {/* USER / LOGIN */}

                  <Link
                    href={
                      user
                        ? `/${locale}/account`
                        : `/${locale}/login`
                    }
                    className="
                      flex
                      items-center
                      gap-3
                      text-sm
                      uppercase
                      tracking-[2px]
                      text-white
                      transition-all
                      duration-300
                      hover:text-gold
                    "
                  >
                    <FaUser
                      size={15}
                    />

                    <span>
                      {user
                        ? userName
                        : "Login"}
                    </span>
                  </Link>

                  {/* LOGOUT */}

                  {user && (
                    <button
                      type="button"
                      onClick={
                        handleLogout
                      }
                      className="
                        flex
                        cursor-pointer
                        items-center
                        gap-2
                        text-sm
                        uppercase
                        tracking-[2px]
                        text-gray-400
                        transition-all
                        duration-300
                        hover:text-red-400
                      "
                    >
                      <FaSignOutAlt
                        size={14}
                      />

                      <span>
                        Logout
                      </span>
                    </button>
                  )}

                </div>
              )}
            </div>
          </div>

          {/* ==================================================
              MOBILE HAMBURGER
          ================================================== */}

          {!mobileOpen && (
            <button
              type="button"
              onClick={() =>
                setMobileOpen(true)
              }
              aria-label="Open mobile menu"
              aria-expanded={false}
              className="
                flex
                h-10
                w-10
                items-center
                justify-center
                text-white
                transition-colors
                duration-300
                hover:text-gold
                lg:hidden
              "
            >
              <FaBars size={28} />
            </button>
          )}
        </div>
      </header>

      {/* ==================================================
          MOBILE MENU
      ================================================== */}

      <MobileMenu
        open={mobileOpen}
        setOpen={setMobileOpen}
        menu={menu}
        locale={locale}
        pathname={pathname}
        languages={languages}
        changeLanguage={changeLanguage}
        header={header}
        logoPlaceholder={logoPlaceholder}
        user={user}
        isAdmin={isAdmin}
        userName={userName}
        onLogout={handleLogout}
      />
    </>
  );
}