import { useState, useEffect } from "react";
import { FaTimes, FaBars } from "react-icons/fa";

import Logo from "../../assets/logo.svg";
import { useTranslation } from "react-i18next";

export default () => {
  const [state, setState] = useState(false);
  const { t, i18n } = useTranslation();

  const [colorChange, setColorChange] = useState(false);
  useEffect(() => {
    const changeColor = () => {
      if (window.scrollY >= 100) {
        setColorChange(true);
      } else {
        setColorChange(false);
      }
    };

    window.addEventListener("scroll", changeColor);

    const scrollPath = sessionStorage.getItem("scrollPath");
    if (scrollPath) {
      smoothScroll(scrollPath);
      sessionStorage.removeItem("scrollPath");
    }

    return () => {
      window.removeEventListener("scroll", changeColor);
    };
  }, []);

  const navigation = [
    { title: t("navbar.services"), path: "Services" },
    { title: t("navbar.optimization"), path: "Optimization" },
    { title: t("navbar.advantages"), path: "Advantages" },
    { title: t("navbar.contact"), path: "Contact" },
  ];

  const handleNavigation = (path: string) => {
    if (
      (window.location.pathname === "/tos" ||
        window.location.pathname === "/privacy") &&
      navigation.some((navItem) => navItem.path === path)
    ) {
      sessionStorage.setItem("scrollPath", path);
      window.location.href = "/";
    } else {
      smoothScroll(path);
    }
  };

  const smoothScroll = (path: string) => {
    const element = document.getElementById(path);
    const navbarHeight = 110; // Replace with your navbar's height
    if (element) {
      const top =
        element.getBoundingClientRect().top + window.scrollY - navbarHeight;
      window.scrollTo({ top: top, behavior: "smooth" });
    }
  };

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <nav
      className={`${
        colorChange || state
          ? "bg-custom-bglight w-full border-0 sticky top-0 z-10"
          : "z-10"
      }`}
    >
      <div className="items-center px-4 max-w-screen-xl mx-auto lg:flex lg:justify-between lg:px-8">
        <div className="flex items-center justify-between py-3 lg:py-5">
          <a
            href="Top"
            
            onClick={(e) => {
              e.preventDefault(); // Prevent the default anchor tag behavior
              if (window.location.pathname === "/") {
                window.scrollTo({ top: 0, behavior: "smooth" });
              } else {
                window.location.href = "/";
              }
            }}
          >
            <img src={Logo} width={60} height={60} alt="logo"  />
          </a>
          {/* Only show hamburger button when menu is closed */}
          {!state && (
            <div className="lg:hidden">
              <button
                className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
                onClick={() => setState(true)}
              >
                <FaBars className="h-6 w-6" />
              </button>
            </div>
          )}
        </div>

        {/* Center nav items for desktop */}
        <div className="hidden lg:flex lg:items-center lg:justify-center lg:flex-grow">
          <ul className="text-text-gold flex space-x-6 items-center">
            {navigation.map((item, idx) => {
              return (
                <li key={idx} className="hover:text-white text-center">
                  <a
                    href={item.path}
                    className="block py-0 px-4 text-xl font-medium"
                    onClick={(e) => {
                      e.preventDefault();
                      handleNavigation(item.path);
                    }}
                  >
                    {item.title}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>

        {/* Language toggle for desktop */}
        <div className="hidden lg:flex lg:items-center">
          <button
            className="text-text-gold hover:text-white"
            onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
          >
            {i18n.language === "en" ? "PT" : "EN"}
          </button>
        </div>

        {/* Mobile slide-in menu */}
        <div
          className={`fixed top-0 right-0 h-screen w-[70%] z-50 flex flex-col items-center justify-center pt-16 bg-custom-bglight shadow-lg transition-transform duration-300 ease-in-out lg:hidden ${
            state ? "transform-none" : "translate-x-full"
          }`}
        >
          <button
            className="absolute top-4 left-4 text-text-gold hover:text-white"
            onClick={() => setState(false)}
          >
            <FaTimes className="h-6 w-6" />
          </button>

          <ul className="text-text-gold space-y-8 text-center justify-center items-center">
            {navigation.map((item, idx) => {
              return (
                <li key={idx} className="hover:text-white w-full text-center">
                  <a
                    href={item.path}
                    className="block py-2 text-xl font-medium"
                    onClick={(e) => {
                      e.preventDefault();
                      setState(false);
                      handleNavigation(item.path);
                    }}
                  >
                    {item.title}
                  </a>
                </li>
              );
            })}
          </ul>
          <button
            className="absolute bottom-10 right-10 text-text-gold hover:text-white"
            onClick={() => changeLanguage(i18n.language === "en" ? "pt" : "en")}
          >
            {i18n.language === "en" ? "PT" : "EN"}
          </button>
        </div>

        {/* Dark overlay behind menu */}
        {state && (
          <div
            className="fixed top-0 left-0 w-full h-screen bg-black bg-opacity-60 z-40 lg:hidden"
            onClick={() => setState(false)}
          />
        )}
      </div>
    </nav>
  );
};
