import { Link, useLocation } from "@tanstack/react-router";
import { ChevronDown } from "lucide-react";
import { useEffect, useLayoutEffect, useRef, useState } from "react";

type NavLinkProps = {
  text: string;
  href?: string;
  variant?: "desktop" | "mobile";
  dropdown?: boolean;
  items?: { text: string; href: string }[];
};

const HeaderNavLink = ({
  text,
  href = "#",
  variant = "desktop",
  dropdown = false,
  items = [],
}: NavLinkProps) => {
  const [open, setOpen] = useState(false);
  const [alignRight, setAlignRight] = useState(false);
  const wrapperRef = useRef<HTMLDivElement>(null);
  const menuRef = useRef<HTMLDivElement>(null);
  const location = useLocation();
  const pathname = location.pathname;

  const childIsActive =
    dropdown && items.length > 0
      ? items.some((it) => pathname === it.href || pathname.startsWith(it.href))
      : false;

  const isActive = (!dropdown && pathname === href) || childIsActive;

  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) =>
      wrapperRef.current &&
      !wrapperRef.current.contains(e.target as Node) &&
      setOpen(false);

    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, [open]);

  useLayoutEffect(() => {
    if (!open || variant !== "desktop") return;

    const updateAlignment = () => {
      const wrapper = wrapperRef.current;
      const menu = menuRef.current;
      if (!wrapper || !menu) return;

      const padding = 8;
      const { right, left } = wrapper.getBoundingClientRect();
      const menuWidth = menu.offsetWidth;

      const spaceRight = window.innerWidth - right - padding;
      const spaceLeft = left - padding;

      // If it doesn't fit to the right, and there's more room on the left, align right.
      setAlignRight(spaceRight < menuWidth && spaceLeft > spaceRight);
    };

    updateAlignment();
    window.addEventListener("resize", updateAlignment);
    return () => window.removeEventListener("resize", updateAlignment);
  }, [open, variant, items.length]);

  const base =
    variant === "mobile"
      ? "block w-full px-3 py-2 rounded-md transition text-left"
      : "flex items-center px-5 py-3 h-full transition relative";

  const active =
    variant === "mobile"
      ? "bg-byu-navy/7 text-byu-navy font-semibold"
      : "border-b-2 md:border-b-3 border-byu-navy font-semibold";

  if (dropdown && items.length > 0) {
    return (
      <div
        ref={wrapperRef}
        className={variant === "desktop" ? "relative h-full" : "w-full"}
        onMouseEnter={() => variant === "desktop" && setOpen(true)}
        onMouseLeave={() => variant === "desktop" && setOpen(false)}
      >
        <button
          type="button"
          className={`${base} ${isActive ? active : ""} flex items-center gap-2`}
          aria-haspopup="menu"
          aria-expanded={open}
          onClick={() => setOpen((v) => !v)}
        >
          <span className="whitespace-nowrap">{text}</span>
          <ChevronDown
            className={`h-4 w-4 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
            aria-hidden="true"
          />
        </button>

        <div
          ref={menuRef}
          role="menu"
          className={`${open ? "block" : "hidden"} ${
            variant === "desktop"
              ? `absolute top-full min-w-48 rounded-b-md rounded-t-none bg-white shadow-lg border border-gray-200 z-30 ${
                  alignRight ? "right-0 left-auto" : "left-0"
                }`
              : "mt-1 w-full"
          }`}
        >
          <ul className="py-1">
            {items.map((item) => {
              const itemActive =
                pathname === item.href || pathname.startsWith(item.href);

              return (
                <li key={item.href}>
                  <Link
                    to={item.href}
                    className={`block w-full whitespace-nowrap px-5 py-2 rounded-md text-left ${
                      itemActive
                        ? "bg-byu-navy/7 text-byu-navy font-semibold"
                        : "hover:bg-gray-100"
                    }`}
                    onClick={() => setOpen(false)}
                  >
                    {item.text}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  }

  return (
    <Link
      to={href}
      className={`${base} ${isActive ? active : ""} hover:bg-gray-100`}
    >
      {text}
    </Link>
  );
};

export default HeaderNavLink;