"use client";

import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";

import { cn } from "./cn";

/*
 * Base UI owns hover/focus detection, Escape, delay groups, anchored
 * positioning, and dismissal. In 1.6 it intentionally treats Tooltip as a
 * visual-only hint: it adds neither `role="tooltip"` nor `aria-describedby`,
 * so every trigger still needs its own accessible name. The platform wrapper
 * supplies stable composition/ref contracts and themed presentation only.
 */

function TooltipProvider({
  delay = 300,
  closeDelay = 0,
  ...props
}: TooltipPrimitive.Provider.Props) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delay={delay}
      closeDelay={closeDelay}
      {...props}
    />
  );
}

// Tooltip.Root renders no DOM of its own, so it takes no data-slot marker.
function Tooltip(props: TooltipPrimitive.Root.Props) {
  return <TooltipPrimitive.Root {...props} />;
}

function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}

export interface TooltipContentProps
  extends
    TooltipPrimitive.Popup.Props,
    Pick<
      TooltipPrimitive.Positioner.Props,
      "align" | "alignOffset" | "side" | "sideOffset"
    > {
  container?: TooltipPrimitive.Portal.Props["container"];
}

function TooltipContent({
  className,
  container,
  align = "center",
  alignOffset = 0,
  side = "top",
  sideOffset = 7,
  children,
  ...props
}: TooltipContentProps) {
  return (
    <TooltipPrimitive.Portal container={container}>
      <TooltipPrimitive.Positioner
        className="isolate z-50 outline-none"
        align={align}
        alignOffset={alignOffset}
        side={side}
        sideOffset={sideOffset}
      >
        <TooltipPrimitive.Popup
          data-slot="tooltip-content"
          className={cn(
            "z-50 w-fit max-w-(--tooltip-max-width) origin-(--transform-origin)",
            "rounded-(--tooltip-radius) bg-(color:--color-content)",
            "px-2.5 py-1.5 text-(length:--font-size-control-sm) leading-snug text-(color:--color-surface)",
            "shadow-md outline-none",
            "transition-[opacity,transform] duration-(--motion-duration) ease-(--motion-ease)",
            "data-starting-style:scale-95 data-starting-style:opacity-0",
            "data-ending-style:scale-95 data-ending-style:opacity-0",
            "data-instant:transition-none",
            className,
          )}
          {...props}
        >
          {children}
          <TooltipPrimitive.Arrow
            data-slot="tooltip-arrow"
            className={cn(
              "relative block h-1.5 w-3 overflow-clip",
              "data-[side=bottom]:top-[-6px]",
              "data-[side=left]:right-[-9px] data-[side=left]:rotate-90",
              "data-[side=right]:left-[-9px] data-[side=right]:-rotate-90",
              "data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180",
              "before:absolute before:bottom-0 before:left-1/2 before:size-[calc(6px*1.414)]",
              "before:bg-(color:--color-content)",
              "before:[transform:translate(-50%,50%)_rotate(45deg)]",
            )}
          />
        </TooltipPrimitive.Popup>
      </TooltipPrimitive.Positioner>
    </TooltipPrimitive.Portal>
  );
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };