"use client";
import { Link, usePathname } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import { useEffect } from "react";

export default function DesktopNavigation() {
  const t = useTranslations("Header");
  const pathname = usePathname();

  const menuItems = [
    { label: t("ourFeatures"), href: "/#about-us" },
    { label: t("aboutUs"), href: "/#about-us" },
    { label: t("ourPackages"), href: "/#our-packages" },
    { label: t("faq"), href: "/#faq" },
    { label: t("dashboard"), href: process.env.NEXT_PUBLIC_DASHBAORD_URL || "https://app.motakamil.sa", target: "_blank" },
  ];

  useEffect(() => {
    const handleHashScroll = () => {
      const hash = window.location.hash;
      if (hash) {
        const element = document.querySelector(hash);
        if (element) {
          setTimeout(() => {
            element.scrollIntoView({ behavior: "smooth", block: "start" });
          }, 100);
        }
      }
    };

    handleHashScroll();
    window.addEventListener("hashchange", handleHashScroll);
    return () => window.removeEventListener("hashchange", handleHashScroll);
  }, [pathname]);

  const handleClick = (
    e: React.MouseEvent<HTMLAnchorElement>,
    href: string
  ) => {
    if (href.includes("#")) {
      const hash = href.split("#")[1];
      const element = document.querySelector(`#${hash}`);
      if (element) {
        e.preventDefault();
        element.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    }
  };

  return (
    <nav className="hidden lg:flex items-center gap-6 flex-1 justify-center">
      {menuItems.map((item, index) => (
        <Link
          key={index}
          href={item.href}
          onClick={(e) => handleClick(e, item.href)}
          target={item.target}
          rel={item.target === "_blank" ? "noopener noreferrer" : undefined}
          className="text-[16px] font-medium text-primary-main hover:text-primary-main/80 transition-colors"
        >
          {item.label}
        </Link>
      ))}
    </nav>
  );
}