Disclosure & Overlays/Tabs

"use client";

import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { LayoutGroup, motion, useReducedMotion } from "motion/react";

import { cn } from "@/lib/utils";
import { SPRING } from "@/craft/lib/motion";

// the indicator is a shared-layout element, so each trigger needs to
// know whether it's the active one at render time. radix keeps that
// private, so the root mirrors the value into context — radix stays
// the source of truth and hands us the next value at commit time.
const TabsValueContext = React.createContext<string | undefined>(undefined);

export interface TabsProps
	extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
	ref?: React.Ref<React.ComponentRef<typeof TabsPrimitive.Root>>;
}

const Tabs = ({
	ref,
	value,
	defaultValue,
	onValueChange,
	...props
}: TabsProps) => {
	const [internalValue, setInternalValue] = React.useState(defaultValue);
	const currentValue = value ?? internalValue;

	return (
		<TabsValueContext.Provider value={currentValue}>
			<TabsPrimitive.Root
				ref={ref}
				value={value}
				defaultValue={defaultValue}
				onValueChange={(next) => {
					setInternalValue(next);
					onValueChange?.(next);
				}}
				{...props}
			/>
		</TabsValueContext.Provider>
	);
};
Tabs.displayName = TabsPrimitive.Root.displayName;

const TabsList = ({
	ref,
	className,
	children,
	...props
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
	ref?: React.Ref<React.ComponentRef<typeof TabsPrimitive.List>>;
}) => {
	// LayoutGroup namespaces the indicator's layoutId, so two Tabs on
	// one page never trade indicators
	const groupId = React.useId();
	return (
		<TabsPrimitive.List
			ref={ref}
			className={cn(
				"inline-flex h-9 items-center justify-center rounded-lg bg-secondary-dim p-1 text-muted-foreground",
				className
			)}
			{...props}
		>
			<LayoutGroup id={groupId}>{children}</LayoutGroup>
		</TabsPrimitive.List>
	);
};
TabsList.displayName = TabsPrimitive.List.displayName;

const TabsTrigger = ({
	ref,
	className,
	value,
	children,
	...props
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
	ref?: React.Ref<React.ComponentRef<typeof TabsPrimitive.Trigger>>;
}) => {
	const isActive = React.useContext(TabsValueContext) === value;
	const reduceMotion = useReducedMotion();

	return (
		<TabsPrimitive.Trigger
			ref={ref}
			value={value}
			className={cn(
				"relative inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-colors duration-150 ease-swift focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground motion-reduce:transition-none",
				className
			)}
			{...props}
		>
			{isActive && (
				// rendered only on the active trigger — the shared layoutId is
				// what makes it travel instead of remount
				<motion.span
					layoutId="tabs-indicator"
					transition={reduceMotion ? { duration: 0 } : SPRING.gentle}
					className="absolute inset-0 rounded-md border border-border-faint bg-card"
					aria-hidden
				/>
			)}
			<span className="relative">{children}</span>
		</TabsPrimitive.Trigger>
	);
};
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

const TabsContent = ({
	ref,
	className,
	...props
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
	ref?: React.Ref<React.ComponentRef<typeof TabsPrimitive.Content>>;
}) => (
	<TabsPrimitive.Content
		ref={ref}
		className={cn(
			"mt-3 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
			className
		)}
		{...props}
	/>
);
TabsContent.displayName = TabsPrimitive.Content.displayName;

export { Tabs, TabsList, TabsTrigger, TabsContent };