Drift Pill Navbar

"use client";

import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useMotionValue, useSpring, useTransform, useVelocity } from "motion/react";
import { AltArrowDown } from "@solar-icons/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  DriftPillNavbar                                                     */
/* ------------------------------------------------------------------ */

interface NavChild {
  label: string;
  href: string;
  description?: string;
  icon?: ReactNode;
}

export interface NavLink {
  label: string;
  href: string;
  children?: NavChild[];
  featured?: { label: string; description?: string; href: string; visual?: ReactNode };
}

interface DriftPillNavbarProps {
  logo?: ReactNode;
  links?: NavLink[];
  /** CTA that slides in once scrolled past the threshold [Optional] */
  cta?: ReactNode;
  /** Scroll distance in px before the CTA appears [Optional, default: 80] */
  ctaThreshold?: number;
  /** Scrollable ancestor to track instead of the window [Optional] */
  scrollRef?: React.RefObject<HTMLElement | null>;
  stickyTop?: string;
  className?: string;
}

/**
 * A floating pill navbar that leans with scroll velocity: scroll speed maps
 * to a vertical offset through a spring, so the bar dips as you rush past and
 * settles back at rest. Hovering links slides one shared highlight pill
 * between them, a dropdown opens a featured panel, and crossing the scroll
 * threshold slides in a CTA while the pill widens to make room.
 * @param {NavLink[]} links - Links, optionally with dropdown children [Optional]
 * @param {ReactNode} cta - Call to action revealed past the threshold [Optional]
 */
export function DriftPillNavbar({
  logo,
  links = [],
  cta,
  ctaThreshold = 80,
  scrollRef,
  stickyTop = "1rem",
  className,
}: DriftPillNavbarProps) {
  const [scrolled, setScrolled] = useState(false);
  const [showCta, setShowCta] = useState(false);
  const [hoveredLink, setHoveredLink] = useState<string | null>(null);
  const [openMenu, setOpenMenu] = useState<string | null>(null);
  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  /* Scroll velocity → lean: fast scrolling dips the bar, springs restore. */
  const scrollY = useMotionValue(0);
  const smoothY = useSpring(scrollY, { stiffness: 200, damping: 15 });
  const velocity = useVelocity(smoothY);
  const lean = useTransform(velocity, [-2000, -1000, 0, 1000, 2000], [12, 8, 0, -8, -12]);

  useEffect(() => {
    const read = () =>
      scrollRef?.current ? scrollRef.current.scrollTop : window.scrollY;
    const onScroll = () => {
      const y = read();
      scrollY.set(y);
      setScrolled(y > 0);
      setShowCta(!!cta && y > ctaThreshold);
    };
    const target: HTMLElement | Window = scrollRef?.current ?? window;
    target.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => target.removeEventListener("scroll", onScroll);
  }, [cta, ctaThreshold, scrollY, scrollRef]);

  const scheduleClose = useCallback(() => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setOpenMenu(null), 180);
  }, []);
  const cancelClose = useCallback(() => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
  }, []);
  useEffect(() => () => cancelClose(), [cancelClose]);

  return (
    <div
      className={cn("pointer-events-none sticky z-50 flex w-full justify-center", className)}
      style={{ top: stickyTop }}
    >
      <motion.div className="pointer-events-auto" style={{ y: lean }}>
        <div
          className={cn(
            "flex items-center justify-between gap-6 rounded-full border border-zinc-200 bg-white px-6 py-3 transition-all duration-300 dark:border-zinc-800 dark:bg-zinc-950",
            scrolled && "shadow-lg",
            showCta ? "min-w-[640px]" : "min-w-[540px]",
          )}
        >
          <a href="#" className="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
            {logo ?? "Logo"}
          </a>

          <nav
            className="relative flex items-center gap-0.5"
            onMouseLeave={() => setHoveredLink(null)}
          >
            {links.map((link) => {
              const hasMenu = !!link.children?.length;
              return (
                <div
                  key={link.label}
                  className="relative"
                  onMouseEnter={() => {
                    setHoveredLink(link.label);
                    if (hasMenu) {
                      cancelClose();
                      setOpenMenu(link.label);
                    } else {
                      scheduleClose();
                    }
                  }}
                  onMouseLeave={() => {
                    if (hasMenu) scheduleClose();
                  }}
                >
                  <a
                    href={link.href}
                    onClick={(e) => e.preventDefault()}
                    aria-haspopup={hasMenu ? "menu" : undefined}
                    aria-expanded={hasMenu ? openMenu === link.label : undefined}
                    className="relative flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-zinc-500 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
                  >
                    {hoveredLink === link.label && (
                      <motion.span
                        layoutId="drift-pill-highlight"
                        className="absolute inset-0 -z-10 rounded-full bg-zinc-100 dark:bg-zinc-800"
                        transition={{ type: "spring", stiffness: 400, damping: 30 }}
                      />
                    )}
                    {link.label}
                    {hasMenu && (
                      <AltArrowDown
                        size={12}
                        weight="Bold"
                        className={cn(
                          "transition-transform duration-300",
                          openMenu === link.label && "rotate-180",
                        )}
                      />
                    )}
                  </a>

                  {/* Dropdown */}
                  {hasMenu && (
                    <AnimatePresence>
                      {openMenu === link.label && (
                        <motion.div
                          role="menu"
                          initial={{ opacity: 0, y: 8, scale: 0.97 }}
                          animate={{ opacity: 1, y: 0, scale: 1 }}
                          exit={{ opacity: 0, y: 6, scale: 0.97 }}
                          transition={{ type: "spring", stiffness: 380, damping: 30 }}
                          onMouseEnter={cancelClose}
                          onMouseLeave={scheduleClose}
                          className="absolute left-1/2 top-full z-50 mt-3 w-[420px] -translate-x-1/2 rounded-xl border border-zinc-200 bg-white p-1.5 shadow-lg dark:border-zinc-800 dark:bg-zinc-950"
                        >
                          <div
                            className={cn(
                              "grid gap-0",
                              link.featured ? "grid-cols-[0.85fr_1fr]" : "grid-cols-1",
                            )}
                          >
                            {link.featured && (
                              <a
                                href={link.featured.href}
                                onClick={(e) => e.preventDefault()}
                                className="row-span-full m-0.5 flex min-h-[140px] flex-col justify-end rounded-lg border border-zinc-200 bg-zinc-50 p-4 no-underline outline-none select-none dark:border-zinc-800 dark:bg-zinc-900"
                              >
                                {link.featured.visual && (
                                  <div className="mb-3 text-zinc-300 dark:text-zinc-600">
                                    {link.featured.visual}
                                  </div>
                                )}
                                <div className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
                                  {link.featured.label}
                                </div>
                                {link.featured.description && (
                                  <p className="mt-1 text-xs leading-snug text-zinc-500">
                                    {link.featured.description}
                                  </p>
                                )}
                              </a>
                            )}
                            <div>
                              {link.children!.map((child) => (
                                <a
                                  key={child.href}
                                  href={child.href}
                                  onClick={(e) => e.preventDefault()}
                                  className="block rounded-lg px-3 py-2 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800"
                                >
                                  <div className="flex items-center justify-between gap-2">
                                    <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                                      {child.label}
                                    </span>
                                    {child.icon}
                                  </div>
                                  {child.description && (
                                    <p className="mt-0.5 text-xs leading-snug text-zinc-500">
                                      {child.description}
                                    </p>
                                  )}
                                </a>
                              ))}
                            </div>
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  )}
                </div>
              );
            })}
          </nav>

          {/* CTA slides in past the scroll threshold */}
          <AnimatePresence>
            {showCta && (
              <motion.div
                key="cta"
                initial={{ opacity: 0, x: 16, width: 0 }}
                animate={{ opacity: 1, x: 0, width: "auto" }}
                exit={{ opacity: 0, x: 16, width: 0 }}
                transition={{ type: "spring", stiffness: 380, damping: 32 }}
                className="shrink-0 overflow-hidden"
              >
                {cta}
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </motion.div>
    </div>
  );
}