"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { buttonClassName } from "@/components/ui/Button";
import { ArrowRight, ChevronDown, Menu } from "@/components/ui/Icons";
import { Logo } from "@/components/ui/Logo";
import { IndustriesPanel, ServicesPanel } from "@/components/layout/MegaMenu";
import { MobileNav } from "@/components/layout/MobileNav";
import { cn } from "@/lib/cn";
import { routes } from "@/lib/routes";

type PanelId = "services" | "industries";

const simpleLinks = [
  { label: "How We Work", href: routes.howWeWork },
  { label: "Resources", href: routes.resources },
  { label: "About", href: routes.about },
];

export function Navbar() {
  const pathname = usePathname();
  // Menus remember the path they were opened on, so navigating anywhere closes them without an effect.
  const [menu, setMenu] = useState<{ panel: PanelId; path: string } | null>(null);
  const [mobileMenuPath, setMobileMenuPath] = useState<string | null>(null);
  const [scrolled, setScrolled] = useState(false);
  const openPanel = menu && menu.path === pathname ? menu.panel : null;
  const mobileOpen = mobileMenuPath === pathname;
  const setOpenPanel = useCallback(
    (panel: PanelId | null) => setMenu(panel ? { panel, path: pathname } : null),
    [pathname],
  );
  const headerRef = useRef<HTMLElement>(null);
  const hoverTimer = useRef<number | undefined>(undefined);
  const triggerRefs = useRef<Record<PanelId, HTMLButtonElement | null>>({ services: null, industries: null });

  const close = useCallback(
    (returnFocus?: PanelId) => {
      window.clearTimeout(hoverTimer.current);
      setOpenPanel(null);
      if (returnFocus) triggerRefs.current[returnFocus]?.focus();
    },
    [setOpenPanel],
  );

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    if (!openPanel) return;
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") close(openPanel);
    };
    const onPointer = (event: PointerEvent) => {
      if (!headerRef.current?.contains(event.target as Node)) close();
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("pointerdown", onPointer);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("pointerdown", onPointer);
    };
  }, [openPanel, close]);

  const closeMobile = useCallback(() => setMobileMenuPath(null), []);

  const hoverOpen = (panel: PanelId) => (event: React.PointerEvent) => {
    if (event.pointerType !== "mouse") return;
    window.clearTimeout(hoverTimer.current);
    hoverTimer.current = window.setTimeout(() => setOpenPanel(panel), 90);
  };

  const hoverClose = (event: React.PointerEvent) => {
    if (event.pointerType !== "mouse") return;
    window.clearTimeout(hoverTimer.current);
    hoverTimer.current = window.setTimeout(() => setOpenPanel(null), 160);
  };

  const cancelHoverClose = () => window.clearTimeout(hoverTimer.current);

  return (
    <header
      ref={headerRef}
      className={cn(
        "sticky top-0 z-50 border-b transition-[background-color,border-color] duration-300",
        scrolled || openPanel ? "border-line bg-paper/[0.97]" : "border-transparent bg-paper",
      )}
      onBlur={(event) => {
        if (openPanel && !event.currentTarget.contains(event.relatedTarget as Node | null)) close();
      }}
    >
      <div
        className={cn(
          "container-page flex items-center justify-between gap-6 transition-[height] duration-300",
          scrolled ? "h-16" : "h-16 lg:h-[4.5rem]",
        )}
      >
        <Link href={routes.home} aria-label="Axidys Media home" className="-m-1 rounded-sm p-1">
          <Logo />
        </Link>

        <nav aria-label="Primary" className="hidden lg:block" onPointerLeave={hoverClose} onPointerEnter={cancelHoverClose}>
          <ul className="flex items-center gap-1">
            {(["services", "industries"] as const).map((panel) => (
              <li key={panel}>
                <button
                  ref={(node) => {
                    triggerRefs.current[panel] = node;
                  }}
                  type="button"
                  aria-expanded={openPanel === panel}
                  aria-controls={`nav-panel-${panel}`}
                  onClick={() => setOpenPanel(openPanel === panel ? null : panel)}
                  onPointerEnter={hoverOpen(panel)}
                  className={cn(
                    "inline-flex h-10 items-center gap-1.5 rounded-md px-3 text-[0.9375rem] transition-colors",
                    openPanel === panel ? "bg-paper-deep text-ink" : "text-ink-soft hover:text-ink",
                  )}
                >
                  {panel === "services" ? "Services" : "Industries"}
                  <ChevronDown
                    size={14}
                    className={cn("transition-transform duration-300", openPanel === panel && "rotate-180")}
                  />
                </button>
              </li>
            ))}
            {simpleLinks.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  aria-current={pathname === link.href ? "page" : undefined}
                  className={cn(
                    "inline-flex h-10 items-center rounded-md px-3 text-[0.9375rem] transition-colors",
                    pathname === link.href ? "text-ink" : "text-ink-soft hover:text-ink",
                  )}
                  onPointerEnter={(event) => event.pointerType === "mouse" && setOpenPanel(null)}
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>

        <div className="flex items-center gap-2">
          <div className="hidden sm:block">
            <Link href={routes.audit} className={buttonClassName({ size: "sm" })}>
              <span className="btn-fill" aria-hidden="true" />
              <span>Get a Growth Audit</span>
              <ArrowRight className="btn-arrow" size={14} />
            </Link>
          </div>
          <button
            type="button"
            className="inline-flex size-11 items-center justify-center rounded-md text-ink hover:bg-paper-deep lg:hidden"
            aria-label="Open menu"
            aria-haspopup="dialog"
            aria-expanded={mobileOpen}
            onClick={() => setMobileMenuPath(pathname)}
          >
            <Menu size={22} />
          </button>
        </div>
      </div>

      <div onPointerEnter={cancelHoverClose} onPointerLeave={hoverClose}>
        {openPanel === "services" ? <ServicesPanel id="nav-panel-services" onNavigate={() => close()} /> : null}
        {openPanel === "industries" ? <IndustriesPanel id="nav-panel-industries" onNavigate={() => close()} /> : null}
      </div>

      <MobileNav open={mobileOpen} onClose={closeMobile} />
    </header>
  );
}