"use client";

import Link from "next/link";
import { ChevronDown } from "lucide-react";
import { usePathname } from "next/navigation";
import { useEffect, useLayoutEffect, useRef, useState } from "react";

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

// ----------------------
// Main Component
// ----------------------
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 pathname = usePathname();

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

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

  // ----------------------
  // Close Dropdown on Outside Click
  // ----------------------
  useEffect(() => {
    if (!open) return;

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

    document.addEventListener("mousedown", onDown);

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

  // ----------------------
  // Keep Desktop Dropdown Inside the Viewport
  // ----------------------
  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;

      // Calculate the available space on either side of the trigger.
      const spaceRight = window.innerWidth - right - padding;
      const spaceLeft = left - padding;

      /*
       * Dropdowns normally open left-aligned with their trigger.
       *
       * If the menu would run off the right side of the viewport, and there
       * is more room available on the left, switch to right alignment.
       *
       * This is particularly useful for the last few navigation items,
       * where a wide dropdown could otherwise overflow the page.
       */
      setAlignRight(spaceRight < menuWidth && spaceLeft > spaceRight);
    };

    // useLayoutEffect runs after the menu has been rendered but before the
    // browser paints, allowing us to measure it and correct its position
    // without showing a visible alignment jump.
    updateAlignment();

    // Recalculate if the browser width changes while the menu is open.
    window.addEventListener("resize", updateAlignment);

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

  // ----------------------
  // Shared Link Styles
  // ----------------------
  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";

  // ----------------------
  // Dropdown Navigation Item
  // ----------------------
  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)}
      >
        {/* Dropdown trigger */}
        <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>

        {/* Dropdown menu */}
        <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 ${
                  // Align to the opposite edge when necessary to keep the
                  // dropdown from overflowing the viewport.
                  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
                    href={item.href}
                    // whitespace-nowrap prevents long dropdown labels from
                    // wrapping and changing the menu's height unexpectedly.
                    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>
    );
  }

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

// ----------------------
// Export Component
// ----------------------
export default HeaderNavLink;