Animated Tabs

"use client";

import {
  motion,
  MotionConfig,
  useReducedMotion,
  type Transition,
} from "motion/react";
import {
  createContext,
  useContext,
  useId,
  useState,
  type KeyboardEvent,
  type ReactNode,
} from "react";
import { cn } from "@/lib/cn";

const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1];

export type TabsVariant = "pill" | "underline" | "segment";

type TabsContextValue = {
  value: string;
  setValue: (value: string) => void;
  layoutId: string;
  variant: TabsVariant;
  baseId: string;
};

const TabsContext = createContext<TabsContextValue | null>(null);

function useTabs() {
  const context = useContext(TabsContext);
  if (!context) throw new Error("Tabs.* must be used inside <Tabs>");
  return context;
}

/* Values become element ids for aria-controls/labelledby wiring, so squash
   anything id-hostile. Keep tab values short and url-safe regardless. */
const toIdPart = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
const tabIdOf = (baseId: string, value: string) =>
  baseId + "-tab-" + toIdPart(value);
const panelIdOf = (baseId: string, value: string) =>
  baseId + "-panel-" + toIdPart(value);

/* Tabs are switched dozens of times a day, so the indicator lands fast —
   one quick settle, a whisper of life, never a wobble. */
const INDICATOR_TRANSITION: Transition = {
  type: "spring",
  duration: 0.45,
  bounce: 0.16,
};

export interface TabsProps {
  /** Uncontrolled initial tab value. [Optional] */
  defaultValue?: string;
  /** Controlled tab value. [Optional] */
  value?: string;
  /** Fires with the next value on every activation. [Optional] */
  onValueChange?: (value: string) => void;
  /** Visual skin — shared indicator behavior is identical. [Optional, default: "pill"] */
  variant?: TabsVariant;
  children: ReactNode;
  className?: string;
}

/**
 * Tabs — one primitive, three skins (pill, underline, segment) sharing a
 * spring-loaded indicator that slides between triggers. Full tablist keyboard
 * support: ArrowLeft/ArrowRight wrap with automatic activation, Home/End jump,
 * and roving tabindex keeps a single tab stop.
 *
 * @param {string} defaultValue - Uncontrolled initial value [Optional]
 * @param {string} value - Controlled value [Optional]
 * @param {(value: string) => void} onValueChange - Change callback [Optional]
 * @param {TabsVariant} variant - Visual skin [Optional, default: "pill"]
 *
 * @example
 * <Tabs defaultValue="overview">
 *   <TabsList>
 *     <TabsTrigger value="overview">Overview</TabsTrigger>
 *   </TabsList>
 *   <TabsContent value="overview">…</TabsContent>
 * </Tabs>
 */
export function Tabs({
  defaultValue,
  value,
  onValueChange,
  variant = "pill",
  children,
  className,
}: TabsProps) {
  const [internal, setInternal] = useState(defaultValue ?? "");
  const layoutId = useId();
  const baseId = useId();
  const reduce = useReducedMotion();
  const isControlled = value !== undefined;
  const current = isControlled ? value : internal;
  const setValue = (next: string) => {
    if (!isControlled) setInternal(next);
    onValueChange?.(next);
  };
  return (
    <MotionConfig transition={reduce ? { duration: 0 } : INDICATOR_TRANSITION}>
      <TabsContext.Provider
        value={{ value: current, setValue, layoutId, variant, baseId }}
      >
        {/* layoutRoot: the indicator's layoutId measures in page coordinates,
            so inside fixed/scrolled containers it would replay scroll offsets
            as movement. The pill only ever travels within the list, so scoping
            projection to the Tabs wrapper is always correct. */}
        <motion.div layoutRoot className={className}>
          {children}
        </motion.div>
      </TabsContext.Provider>
    </MotionConfig>
  );
}

const LIST_CLASS: Record<TabsVariant, string> = {
  pill: "inline-flex items-center gap-1 rounded-full bg-muted p-1",
  underline: "inline-flex items-center gap-1 border-b border-border",
  segment: "inline-flex items-center gap-0 rounded-lg bg-muted p-0.5",
};

export interface TabsListProps {
  children: ReactNode;
  className?: string;
}

/**
 * TabsList — the tablist container; owns arrow-key travel between triggers.
 */
export function TabsList({ children, className }: TabsListProps) {
  const { variant } = useTabs();

  /* DOM-order roving so no trigger registry is needed: arrows wrap across
     enabled tabs and activate on focus (the WAI-ARIA "automatic" pattern). */
  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key)) return;
    const tabs = Array.from(
      event.currentTarget.querySelectorAll<HTMLButtonElement>(
        '[role="tab"]:not(:disabled)',
      ),
    );
    if (tabs.length === 0) return;
    const index = tabs.indexOf(document.activeElement as HTMLButtonElement);
    event.preventDefault();
    let next = 0;
    if (event.key === "ArrowRight") {
      next = index < 0 ? 0 : (index + 1) % tabs.length;
    } else if (event.key === "ArrowLeft") {
      next = index < 0 ? tabs.length - 1 : (index - 1 + tabs.length) % tabs.length;
    } else if (event.key === "End") {
      next = tabs.length - 1;
    }
    const tab = tabs[next];
    tab.focus();
    tab.click();
  };

  return (
    <div
      role="tablist"
      aria-orientation="horizontal"
      onKeyDown={handleKeyDown}
      className={cn(LIST_CLASS[variant], className)}
    >
      {children}
    </div>
  );
}

export interface TabsTriggerProps {
  /** Unique value linking this trigger to its panel. [Required] */
  value: string;
  children: ReactNode;
  className?: string;
  /** Override the indicator surface (disables the exclusion-blend label). [Optional] */
  indicatorClassName?: string;
}

/**
 * TabsTrigger — a single tab. The default pill/segment indicator renders the
 * label in mix-blend exclusion so it inverts exactly as the surface passes
 * beneath it; custom indicators fall back to explicit colors.
 */
export function TabsTrigger({
  value,
  children,
  className,
  indicatorClassName,
}: TabsTriggerProps) {
  const { value: current, setValue, layoutId, variant, baseId } = useTabs();
  const active = current === value;
  const usesDefaultIndicator = indicatorClassName === undefined;
  const sharedAria = {
    id: tabIdOf(baseId, value),
    role: "tab" as const,
    "aria-selected": active,
    "aria-controls": panelIdOf(baseId, value),
    tabIndex: active ? 0 : -1,
  };

  if (variant === "underline") {
    return (
      <button
        type="button"
        {...sharedAria}
        onClick={() => setValue(value)}
        className={cn(
          "relative isolate -mb-px inline-flex min-h-[44px] items-center px-3 pb-2.5 pt-1 text-[13px] font-medium tracking-[-0.01em] outline-none transition-colors duration-150",
          active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
          "focus-visible:text-foreground",
          className,
        )}
      >
        {children}
        {active ? (
          <motion.span
            layoutId={layoutId}
            className={cn(
              "absolute -bottom-px left-0 right-0 h-px bg-primary",
              indicatorClassName,
            )}
          />
        ) : null}
      </button>
    );
  }

  const radius = variant === "pill" ? "rounded-full" : "rounded-md";

  return (
    <div className="relative">
      {active ? (
        <motion.span
          layoutId={layoutId}
          style={{ borderRadius: variant === "pill" ? 9999 : 8 }}
          className={cn("absolute inset-0 bg-primary", radius, indicatorClassName)}
        />
      ) : null}
      <button
        type="button"
        {...sharedAria}
        onClick={() => setValue(value)}
        className={cn(
          // The invisible after-layer stretches the hit target to ~44px on
          // touch without inflating the 30px visual pill.
          "relative z-10 inline-flex items-center justify-center whitespace-nowrap bg-transparent px-3.5 py-1.5 text-[13px] font-medium tracking-[-0.01em] outline-none",
          'after:absolute after:-inset-y-2 after:inset-x-0 after:content-[""]',
          usesDefaultIndicator
            ? "text-white mix-blend-exclusion transition-opacity duration-150"
            : "transition-colors duration-150",
          usesDefaultIndicator
            ? active
              ? "opacity-100"
              : "opacity-60 hover:opacity-100 focus-visible:opacity-100"
            : active
              ? "text-primary-foreground"
              : "text-muted-foreground hover:text-foreground focus-visible:text-foreground",
          radius,
          className,
        )}
      >
        {children}
      </button>
    </div>
  );
}

export interface TabsContentProps {
  /** Value of the trigger this panel belongs to. [Required] */
  value: string;
  children: ReactNode;
  className?: string;
}

/**
 * TabsContent — the panel for one tab. Inactive panels stay mounted but
 * hidden, so their content (e.g. source code) is present in the
 * server-rendered HTML for crawlers and assistive tech, instead of being
 * dropped from the DOM.
 */
export function TabsContent({ value, children, className }: TabsContentProps) {
  const { value: current, baseId } = useTabs();
  const reduce = useReducedMotion();
  const active = current === value;
  const sharedAria = {
    id: panelIdOf(baseId, value),
    role: "tabpanel" as const,
    "aria-labelledby": tabIdOf(baseId, value),
  };
  if (!active) {
    return (
      <div {...sharedAria} hidden className={className}>
        {children}
      </div>
    );
  }
  return (
    <motion.div
      key={value}
      {...sharedAria}
      tabIndex={0}
      // The entrance offset is constant and reduced-motion collapses the
      // transition instead — branching rendered values on the client-only
      // useReducedMotion() would desync SSR and client at hydration.
      initial={{ opacity: 0, y: 5 }}
      animate={{ opacity: 1, y: 0 }}
      transition={reduce ? { duration: 0 } : { duration: 0.2, ease: EASE_OUT }}
      className={cn("mt-4 outline-none", className)}
    >
      {children}
    </motion.div>
  );
}

/* ─── Demo ─────────────────────────────────────────────────────────────────── */

const OVERVIEW_STATS = [
  { label: "Revenue", value: "$128.4k", delta: "+12.4%" },
  { label: "Active users", value: "8,210", delta: "+3.1%" },
  { label: "Conversion", value: "3.9%", delta: "+0.4%" },
];

const TRAFFIC_BARS = [34, 52, 41, 68, 57, 82, 64];
const TRAFFIC_DAYS = ["M", "T", "W", "T", "F", "S", "S"];

const ALERTS = [
  { tone: "bg-amber-500", text: "Latency above 300 ms", time: "2m" },
  { tone: "bg-emerald-500", text: "Deploy completed", time: "1h" },
  { tone: "bg-sky-500", text: "Weekly report ready", time: "3h" },
];

function TrafficChart() {
  const reduce = useReducedMotion();
  return (
    <div>
      <div className="flex h-[88px] items-end justify-between px-0.5">
        {TRAFFIC_BARS.map((height, index) => (
          <div
            key={index}
            className="relative h-full w-[7px] overflow-hidden rounded-full bg-black/[0.05]"
          >
            <motion.div
              initial={{ height: 0 }}
              animate={{ height: height + "%" }}
              transition={
                reduce
                  ? { duration: 0 }
                  : { duration: 0.5, ease: EASE_OUT, delay: 0.06 + index * 0.045 }
              }
              className="absolute inset-x-0 bottom-0 rounded-full bg-[#211E19]"
            />
          </div>
        ))}
      </div>
      <div className="mt-2 flex justify-between px-0.5">
        {TRAFFIC_DAYS.map((day, index) => (
          <span
            key={index}
            className="w-[7px] text-center text-[10px] text-muted-foreground"
          >
            {day}
          </span>
        ))}
      </div>
    </div>
  );
}

/**
 * AnimatedTabsDemo — a workspace fragment: underline tabs as page nav, an
 * analytics card driven by the pill variant, and the segment variant as the
 * card's range picker.
 */
export default function AnimatedTabsDemo() {
  return (
    <div className="flex h-dvh w-full items-center justify-center bg-[#F5F4F1] p-6">
      <div className="w-full max-w-[400px]">
        <Tabs defaultValue="analytics" variant="underline">
          <TabsList className="w-full border-black/[0.07]">
            <TabsTrigger value="analytics">Analytics</TabsTrigger>
            <TabsTrigger value="deploys">Deployments</TabsTrigger>
            <TabsTrigger value="settings">Settings</TabsTrigger>
          </TabsList>
        </Tabs>

        <div className="mt-5 rounded-2xl border border-black/[0.07] bg-white p-5 shadow-[0_1px_2px_rgba(28,25,18,0.04),0_16px_40px_-16px_rgba(28,25,18,0.14)]">
          <Tabs defaultValue="overview" variant="pill">
            <TabsList>
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="traffic">Traffic</TabsTrigger>
              <TabsTrigger value="alerts">Alerts</TabsTrigger>
            </TabsList>
            <TabsContent value="overview" className="min-h-[108px]">
              <div className="space-y-3">
                {OVERVIEW_STATS.map((stat) => (
                  <div
                    key={stat.label}
                    className="flex items-baseline justify-between"
                  >
                    <span className="text-[12.5px] text-muted-foreground">
                      {stat.label}
                    </span>
                    <span className="flex items-baseline gap-2">
                      <span className="text-[13.5px] font-semibold tracking-[-0.01em] tabular-nums text-foreground">
                        {stat.value}
                      </span>
                      <span className="w-12 text-right text-[11px] font-medium tabular-nums text-emerald-700">
                        {stat.delta}
                      </span>
                    </span>
                  </div>
                ))}
              </div>
            </TabsContent>
            <TabsContent value="traffic" className="min-h-[108px]">
              <TrafficChart />
            </TabsContent>
            <TabsContent value="alerts" className="min-h-[108px]">
              <div className="space-y-3">
                {ALERTS.map((alert) => (
                  <div key={alert.text} className="flex items-center gap-2.5">
                    <span
                      aria-hidden
                      className={cn(
                        "h-1.5 w-1.5 shrink-0 rounded-full",
                        alert.tone,
                      )}
                    />
                    <span className="flex-1 truncate text-[13px] text-foreground">
                      {alert.text}
                    </span>
                    <span className="text-[11px] tabular-nums text-muted-foreground">
                      {alert.time}
                    </span>
                  </div>
                ))}
              </div>
            </TabsContent>
          </Tabs>

          <div className="mt-4 flex items-center justify-between border-t border-black/[0.06] pt-3.5">
            <span className="text-[11px] text-muted-foreground">
              Updated 2m ago
            </span>
            <Tabs defaultValue="week" variant="segment">
              <TabsList>
                <TabsTrigger value="day">Day</TabsTrigger>
                <TabsTrigger value="week">Week</TabsTrigger>
                <TabsTrigger value="month">Month</TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
        </div>
      </div>
    </div>
  );
}