import { type ReactElement } from "react";
import * as React from "react";
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
import { cn } from "@/lib/utils";
import { asChildProps } from "@/lib/as-child";
import { useThemeVars } from "@/lib/theme-provider";

/**
 * Tooltip — WealthX Design System
 * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-2904
 *
 * Base: official shadcn tooltip (npx shadcn\@latest add tooltip)
 * WealthX overrides: bg-brand-secondary, text-brand-secondary-foreground, sharp corners (no rounded-md)
 */

export type TooltipProviderProps = React.ComponentProps<
  typeof TooltipPrimitive.Provider
>;

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

export type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;

function Tooltip({ ...props }: TooltipProps): ReactElement {
  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
}

export type TooltipTriggerProps = React.ComponentProps<
  typeof TooltipPrimitive.Trigger
> & {
  /** shadcn-compatible alias for Base UI's `render`: replaces the trigger with its single child. */
  asChild?: boolean;
};

function TooltipTrigger({
  asChild,
  children,
  ...props
}: TooltipTriggerProps): ReactElement {
  return (
    <TooltipPrimitive.Trigger
      data-slot="tooltip-trigger"
      {...props}
      {...asChildProps(asChild, children)}
    />
  );
}

export type TooltipContentProps = React.ComponentProps<
  typeof TooltipPrimitive.Popup
> & {
  sideOffset?: number;
  side?: React.ComponentProps<typeof TooltipPrimitive.Positioner>["side"];
};

function TooltipContent({
  className,
  sideOffset = 8,
  side,
  children,
  style,
  ...props
}: TooltipContentProps): ReactElement {
  const themeVars = useThemeVars();
  return (
    // Force the portal to render directly in document.body so the Positioner's
    // `position: fixed` coordinates are relative to the viewport — not to any
    // parent floating element (e.g. a Dialog) that may inherit its own portal
    // context via FloatingPortal's PortalContext.
    <TooltipPrimitive.Portal
      container={typeof document !== "undefined" ? document.body : undefined}
    >
      <TooltipPrimitive.Positioner
        className="z-[200]"
        sideOffset={sideOffset}
        side={side}
        positionMethod="fixed"
      >
        <TooltipPrimitive.Popup
          className={cn(
            "relative z-50 w-fit animate-in overflow-visible bg-brand-secondary px-3 py-1.5 text-caption text-balance text-brand-secondary-foreground fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards",
            className,
          )}
          data-slot="tooltip-content"
          style={{ ...themeVars, ...style } as React.CSSProperties}
          {...props}
        >
          {children}
          <TooltipPrimitive.Arrow className="z-50 size-2.5 rotate-45 bg-brand-secondary data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1" />
        </TooltipPrimitive.Popup>
      </TooltipPrimitive.Positioner>
    </TooltipPrimitive.Portal>
  );
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };