// @design-system: overlays/Tooltip
// Registered at /design-system#tooltip-overlay - Phase 3 (Agent 3E) will render the gallery.

import * as RadixTooltip from '@radix-ui/react-tooltip';
import { cn } from '@/lib/cn';

// ─── Provider ─────────────────────────────────────────────────────────────

/**
 * Tooltip provider - wraps the app root to share tooltip delay/skip-delay.
 * Usage: wrap once at app root level.
 */
export const TooltipProvider = RadixTooltip.Provider;

// ─── Root + Trigger ────────────────────────────────────────────────────────

/** Root tooltip controller. */
export const Tooltip = RadixTooltip.Root;

/** Trigger element - the element that shows the tooltip on hover/focus. */
export const TooltipTrigger = RadixTooltip.Trigger;

/** Portal wrapper. */
export const TooltipPortal = RadixTooltip.Portal;

// ─── Content ──────────────────────────────────────────────────────────────

/** Props for TooltipContent */
export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof RadixTooltip.Content>;

/**
 * Multideal-styled tooltip panel.
 *
 * @example
 * ```tsx
 * <TooltipProvider>
 *   <Tooltip>
 *     <TooltipTrigger asChild><Button variant="ghost" aria-label={t('save')}>...</Button></TooltipTrigger>
 *     <TooltipContent>{t('save')}</TooltipContent>
 *   </Tooltip>
 * </TooltipProvider>
 * ```
 */
export function TooltipContent({
  className,
  sideOffset = 4,
  children,
  ...props
}: TooltipContentProps) {
  return (
    <TooltipPortal>
      <RadixTooltip.Content
        sideOffset={sideOffset}
        className={cn(
          'z-popover',
          'rounded-md bg-neutral-900 px-3 py-1.5',
          'text-xs font-medium text-white',
          'shadow-md',
          'animate-in fade-in-0 zoom-in-95',
          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
          'data-[side=bottom]:slide-in-from-top-1',
          'data-[side=top]:slide-in-from-bottom-1',
          'data-[side=start]:slide-in-from-end-1',
          'data-[side=end]:slide-in-from-start-1',
          'motion-reduce:animate-none motion-reduce:transition-none',
          className,
        )}
        {...props}
      >
        {children}
        <RadixTooltip.Arrow className="fill-neutral-900" />
      </RadixTooltip.Content>
    </TooltipPortal>
  );
}