Unfold Panel Navbar

"use client";

import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { AltArrowDown, CloseCircle, HamburgerMenu } from "@solar-icons/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  UnfoldPanelNavbar                                                   */
/* ------------------------------------------------------------------ */

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

export interface NavLink {
  label: string;
  href: string;
  children?: NavChild[];
}

interface UnfoldPanelNavbarProps {
  logo?: ReactNode;
  links?: NavLink[];
  cta?: { label: string; href: string };
  className?: string;
}

const PANEL_SPRING = { type: "spring", stiffness: 400, damping: 40 } as const;

/**
 * Panel body: every menu's grid sits side by side in a flex row; switching
 * menus slides the row by -index*100% while the container animates to the
 * active panel's measured height — content glides between menus instead of
 * swapping.
 * @param {NavLink[]} menus - Links that carry children [Required]
 * @param {string} active - Label of the open menu [Required]
 */
function PanelContents({ menus, active }: { menus: NavLink[]; active: string }) {
  const idx = Math.max(0, menus.findIndex((m) => m.label === active));
  const panelRefs = useRef<(HTMLDivElement | null)[]>([]);
  const [height, setHeight] = useState<number | "auto">("auto");

  useLayoutEffect(() => {
    const el = panelRefs.current[idx];
    if (el) setHeight(el.offsetHeight);
  }, [idx]);

  return (
    <motion.div animate={{ height }} transition={PANEL_SPRING} className="overflow-hidden">
      <motion.div
        className="flex w-full"
        animate={{ x: `-${idx * 100}%` }}
        transition={PANEL_SPRING}
      >
        {menus.map((menu) => (
          <div
            key={menu.label}
            ref={(el) => {
              panelRefs.current[menus.indexOf(menu)] = el;
            }}
            className="w-full shrink-0 self-start"
          >
            <div className="mx-auto grid max-w-4xl grid-cols-3 gap-2 px-6 py-5">
              {(menu.children ?? []).map((child, i) => (
                <motion.div
                  key={child.href}
                  initial={{ opacity: 0, y: 8 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.18, delay: 0.05 * i }}
                >
                  <a
                    href={child.href}
                    onClick={(e) => e.preventDefault()}
                    className="group flex items-start gap-3 rounded-lg p-3 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800/60"
                  >
                    {child.icon && (
                      <div className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-white text-zinc-500 transition-colors group-hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400 dark:group-hover:text-zinc-100">
                        <child.icon size={16} weight="Bold" />
                      </div>
                    )}
                    <div>
                      <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                        {child.label}
                      </div>
                      {child.description && (
                        <p className="mt-0.5 text-xs leading-relaxed text-zinc-500">
                          {child.description}
                        </p>
                      )}
                    </div>
                  </a>
                </motion.div>
              ))}
            </div>
          </div>
        ))}
      </motion.div>
    </motion.div>
  );
}

/**
 * A full-width sticky navbar whose bar itself expands: hovering a link with
 * children accordions the area beneath the bar open (height 0 to auto on a
 * spring) and moving between menus slides the panel contents sideways while
 * the height re-measures. Plain links share one gliding highlight pill, and
 * on mobile a circular clip-path reveal opens a numbered full-screen menu.
 * @param {NavLink[]} links - Links, optionally with panel children [Optional]
 * @param {{label, href}} cta - Right-aligned action button [Optional]
 */
export function UnfoldPanelNavbar({ logo, links = [], cta, className }: UnfoldPanelNavbarProps) {
  const [openMenu, setOpenMenu] = useState<string | null>(null);
  const [lastMenu, setLastMenu] = useState<string | null>(null);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [hoveredLink, setHoveredLink] = useState<string | null>(null);
  const menus = links.filter((l) => l.children?.length);

  const openPanel = (label: string) => {
    setOpenMenu(label);
    setLastMenu(label);
  };

  return (
    <>
      <div
        className={cn(
          "sticky top-0 z-50 w-full border-b border-zinc-200/60 bg-white/80 backdrop-blur-lg dark:border-zinc-800/60 dark:bg-zinc-950/80",
          className,
        )}
        onMouseLeave={() => setOpenMenu(null)}
      >
        <div className="mx-auto flex h-14 max-w-5xl items-center px-6">
          <div className="flex flex-1 items-center">
            <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>
          </div>

          <nav
            className="hidden flex-1 items-center justify-center gap-0.5 md:flex"
            onMouseLeave={() => setHoveredLink(null)}
          >
            {links.map((link) => {
              const hasPanel = !!link.children?.length;
              const inner = (
                <>
                  {hoveredLink === link.label && (
                    <motion.span
                      layoutId="unfold-panel-highlight"
                      className="absolute inset-0 -z-10 rounded-md bg-zinc-900/8 dark:bg-white/10"
                      transition={{ type: "spring", stiffness: 400, damping: 30 }}
                    />
                  )}
                  {link.label}
                </>
              );
              return hasPanel ? (
                <button
                  key={link.label}
                  type="button"
                  aria-expanded={openMenu === link.label}
                  onMouseEnter={() => {
                    setHoveredLink(link.label);
                    openPanel(link.label);
                  }}
                  className="relative flex cursor-pointer items-center gap-1 rounded-md 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"
                >
                  {inner}
                  <motion.span
                    animate={{ rotate: openMenu === link.label ? 180 : 0 }}
                    transition={{ duration: 0.2 }}
                    className="inline-flex"
                  >
                    <AltArrowDown size={13} weight="Bold" />
                  </motion.span>
                </button>
              ) : (
                <a
                  key={link.label}
                  href={link.href}
                  onClick={(e) => e.preventDefault()}
                  onMouseEnter={() => {
                    setHoveredLink(link.label);
                    setOpenMenu(null);
                  }}
                  className="relative rounded-md 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"
                >
                  {inner}
                </a>
              );
            })}
          </nav>

          <div className="flex flex-1 items-center justify-end gap-1.5">
            {cta && (
              <a
                href={cta.href}
                onClick={(e) => e.preventDefault()}
                className="hidden items-center rounded-md bg-zinc-900 px-3.5 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 md:inline-flex dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200"
              >
                {cta.label}
              </a>
            )}
            <button
              type="button"
              onClick={() => setMobileOpen(true)}
              aria-label="Open menu"
              className="rounded-md p-2 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 md:hidden dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
            >
              <HamburgerMenu size={18} weight="Bold" />
            </button>
          </div>
        </div>

        {/* Inline expansion under the bar */}
        <AnimatePresence>
          {openMenu && lastMenu && (
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: "auto", opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={PANEL_SPRING}
              className="overflow-hidden"
            >
              <PanelContents menus={menus} active={lastMenu} />
            </motion.div>
          )}
        </AnimatePresence>
      </div>

      {/* Mobile full-screen menu — circular clip-path reveal */}
      <AnimatePresence>
        {mobileOpen && (
          <motion.div
            initial={{ clipPath: "circle(0% at calc(100% - 1.5rem) 1.75rem)" }}
            animate={{ clipPath: "circle(150% at calc(100% - 1.5rem) 1.75rem)" }}
            exit={{ clipPath: "circle(0% at calc(100% - 1.5rem) 1.75rem)" }}
            transition={{ duration: 0.5, ease: [0.76, 0, 0.24, 1] }}
            className="fixed inset-0 z-[60] flex flex-col bg-white dark:bg-zinc-950"
          >
            <div className="flex h-14 items-center justify-between border-b border-zinc-200/60 px-6 dark:border-zinc-800/60">
              <span className="text-sm font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
                {logo ?? "Logo"}
              </span>
              <button
                type="button"
                onClick={() => setMobileOpen(false)}
                aria-label="Close menu"
                className="rounded-md p-2 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
              >
                <CloseCircle size={18} weight="Bold" />
              </button>
            </div>
            <nav className="flex flex-1 flex-col overflow-y-auto px-4 py-4">
              {links.map((link, i) => (
                <motion.div
                  key={link.label}
                  initial={{ opacity: 0, x: -16 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.1 + 0.06 * i, duration: 0.3 }}
                >
                  <div className="flex items-center gap-3 px-3 py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100">
                    <span className="w-5 shrink-0 text-right font-mono text-xs tabular-nums text-zinc-400/70">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    {link.label}
                  </div>
                  {link.children && (
                    <div className="mb-2 ml-10 flex flex-col gap-0.5">
                      {link.children.map((child) => (
                        <a
                          key={child.href}
                          href={child.href}
                          onClick={(e) => {
                            e.preventDefault();
                            setMobileOpen(false);
                          }}
                          className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
                        >
                          {child.icon && <child.icon size={16} weight="Bold" className="shrink-0" />}
                          <span>{child.label}</span>
                        </a>
                      ))}
                    </div>
                  )}
                </motion.div>
              ))}
            </nav>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}