Mobile Tab Bar

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "motion/react";

type Spring = { stiffness: number; damping: number; mass: number };

export interface MobileTabItem {
  id: string;
  label: string;
  /** Icon (decorative; the label names the tab). */
  icon: React.ReactNode;
  /** Optional icon shown while the tab is active, e.g. a filled variant. */
  activeIcon?: React.ReactNode;
  /** Unread count; hidden when 0 or undefined, shown as "99+" above 99. */
  badge?: number;
  /** Renders the tab as a link. Without it the tab is a button. */
  href?: string;
}

export interface MobileTabBarPrimaryAction {
  /** Accessible name, e.g. "New post". */
  label: string;
  icon: React.ReactNode;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

export interface MobileTabBarProps extends Omit<React.HTMLAttributes<HTMLElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> {
  /** 3–5 destinations. */
  items: MobileTabItem[];
  /** Active tab id (controlled). */
  value?: string;
  /** Initially active tab id (uncontrolled). Defaults to the first item. */
  defaultValue?: string;
  /** Called when a tab is pressed. */
  onValueChange?: (id: string) => void;
  /** Active indicator style. */
  indicator?: "pill" | "blob" | "line";
  /** Which labels are visible. Hidden labels still name the tab for screen readers. */
  labels?: "always" | "active" | "never";
  /** Raised centre action button (not a destination). */
  primaryAction?: MobileTabBarPrimaryAction;
  /** Bounce the icon when a tab becomes active. */
  bounce?: boolean;
  /** Spring for the sliding indicator. */
  spring?: Spring;
  /** Accent for the indicator, badges and the primary action. */
  accent?: string;
  /** Pad the bar with env(safe-area-inset-bottom) for home-indicator devices. */
  safeArea?: boolean;
  /** Pin the bar to the bottom of the viewport. */
  fixed?: boolean;
  /** Accessible name of the nav landmark. */
  label?: string;
}

function subscribeReducedMotion(cb: () => void) {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", cb);
  return () => mq.removeEventListener("change", cb);
}
function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    () => false,
  );
}

/**
 * A bottom navigation bar for mobile apps. It is a navigation landmark: each tab is a link
 * (with href) or a button, and the active one carries aria-current="page" — the same semantics
 * whether you route between pages or swap views in state. A shared-layout indicator (pill, blob or
 * line) slides between tabs, icons bounce on selection, badges show counts, and an optional raised
 * primary action sits in the middle.
 */
export function MobileTabBar({
  items,
  value,
  defaultValue,
  onValueChange,
  indicator = "pill",
  labels = "always",
  primaryAction,
  bounce = true,
  spring = { stiffness: 500, damping: 36, mass: 0.8 },
  accent = "#FF7448",
  safeArea = true,
  fixed = false,
  label = "Main",
  className = "",
  style,
  ...props
}: MobileTabBarProps) {
  const uid = React.useId();
  const reduceMotion = usePrefersReducedMotion();
  const [internal, setInternal] = React.useState(defaultValue ?? items[0]?.id);
  const active = value ?? internal;

  const select = (id: string) => {
    if (value === undefined) setInternal(id);
    if (id !== active) onValueChange?.(id);
  };

  const layoutTransition = reduceMotion ? { duration: 0 } : { type: "spring" as const, ...spring };
  const middle = Math.ceil(items.length / 2);

  const renderTab = (item: MobileTabItem) => {
    const isActive = item.id === active;
    const showLabel = labels === "always" || (labels === "active" && isActive);
    const count = item.badge && item.badge > 0 ? (item.badge > 99 ? "99+" : String(item.badge)) : null;
    const tabClass = `group relative flex h-full w-full flex-col items-center justify-center gap-1 rounded-xl px-1 outline-hidden [-webkit-tap-highlight-color:transparent] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-solid focus-visible:outline-[var(--mtb-accent)] ${isActive ? "text-zinc-950 dark:text-white" : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"}`;

    const content = (
      <>
        {indicator === "line" && isActive ? (
          <motion.span
            layoutId={`${uid}-indicator`}
            transition={layoutTransition}
            aria-hidden="true"
            className="absolute inset-x-[22%] top-0 h-[3px] rounded-b-full bg-[var(--mtb-accent)]"
          />
        ) : null}
        <span className={`relative grid place-items-center ${indicator === "line" ? "h-7 w-12" : "h-8 w-12"}`}>
          {indicator !== "line" && isActive ? (
            <motion.span
              layoutId={`${uid}-indicator`}
              transition={layoutTransition}
              aria-hidden="true"
              className={
                indicator === "blob"
                  ? "absolute left-1/2 top-1/2 -ml-[18px] -mt-[18px] size-9 rounded-full bg-[var(--mtb-accent)] shadow-[0_6px_16px_-6px_var(--mtb-accent)]"
                  : "absolute inset-0 rounded-full bg-[color-mix(in_oklab,var(--mtb-accent)_20%,transparent)]"
              }
            />
          ) : null}
          <motion.span
            aria-hidden="true"
            initial={false}
            animate={isActive && bounce && !reduceMotion ? { y: [0, -5, 0], scale: [1, 1.14, 1] } : { y: 0, scale: 1 }}
            transition={{ duration: 0.42, ease: [0.34, 1.56, 0.64, 1] }}
            className={`relative grid size-6 place-items-center [&_svg]:size-[22px] ${indicator === "blob" && isActive ? "text-zinc-950" : ""}`}
          >
            {isActive && item.activeIcon ? item.activeIcon : item.icon}
          </motion.span>
          <AnimatePresence initial={false}>
            {count ? (
              <motion.span
                key={count}
                aria-hidden="true"
                initial={reduceMotion ? { opacity: 0 } : { scale: 0.4, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                exit={reduceMotion ? { opacity: 0 } : { scale: 0.4, opacity: 0 }}
                transition={reduceMotion ? { duration: 0.1 } : { type: "spring", stiffness: 600, damping: 22 }}
                className="absolute -top-0.5 left-[calc(50%+6px)] grid h-4 min-w-4 place-items-center rounded-full bg-red-500 px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-white tabular-nums dark:ring-[#16191c]"
              >
                {count}
              </motion.span>
            ) : null}
          </AnimatePresence>
        </span>
        <span
          className={`max-w-full truncate text-[11px] leading-none tracking-tight transition-[opacity,translate] duration-200 ${isActive ? "font-semibold" : "font-medium"} ${showLabel ? "opacity-100" : labels === "active" ? "translate-y-1 opacity-0" : "sr-only"}`}
        >
          {item.label}
          {count ? <span className="sr-only">, {count} new</span> : null}
        </span>
      </>
    );

    return (
      <li key={item.id} className="h-full min-w-0">
        {item.href ? (
          <a href={item.href} aria-current={isActive ? "page" : undefined} className={tabClass} onClick={() => select(item.id)}>
            {content}
          </a>
        ) : (
          <button type="button" aria-current={isActive ? "page" : undefined} className={tabClass} onClick={() => select(item.id)}>
            {content}
          </button>
        )}
      </li>
    );
  };

  const columns = items.length + (primaryAction ? 1 : 0);

  return (
    <nav
      aria-label={label}
      className={`w-full border-t border-zinc-900/10 bg-white/90 backdrop-blur-md dark:border-white/10 dark:bg-[#16191c]/90 ${fixed ? "fixed inset-x-0 bottom-0 z-40" : "relative"} ${safeArea ? "pb-[env(safe-area-inset-bottom)]" : ""} ${className}`}
      style={{ ["--mtb-accent" as string]: accent, ...style }}
      {...props}
    >
      <ul className="grid h-16 items-stretch px-2" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
        {items.slice(0, middle).map(renderTab)}
        {primaryAction ? (
          <li className="relative flex justify-center">
            <motion.button
              type="button"
              aria-label={primaryAction.label}
              title={primaryAction.label}
              onClick={primaryAction.onClick}
              whileTap={reduceMotion ? undefined : { scale: 0.9 }}
              transition={{ type: "spring", stiffness: 600, damping: 24 }}
              className="absolute -top-5 grid size-14 place-items-center rounded-full bg-[var(--mtb-accent)] text-zinc-950 shadow-[0_10px_24px_-8px_var(--mtb-accent)] ring-[5px] ring-white outline-hidden focus-visible:outline-2 focus-visible:outline-offset-[7px] focus-visible:outline-solid focus-visible:outline-[var(--mtb-accent)] dark:ring-[#16191c] [&_svg]:size-6"
            >
              <span aria-hidden="true" className="grid place-items-center">
                {primaryAction.icon}
              </span>
            </motion.button>
          </li>
        ) : null}
        {items.slice(middle).map(renderTab)}
      </ul>
    </nav>
  );
}