"use client";

import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils";

const TooltipProvider = TooltipPrimitive.Provider;

const Tooltip = TooltipPrimitive.Root;

const TooltipTrigger = TooltipPrimitive.Trigger;

interface TooltipContentProps
  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
  side?: "top" | "right" | "bottom" | "left";
  align?: "start" | "center" | "end";
  sideOffset?: number;
}

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  TooltipContentProps
>(
  (
    {
      className,
      side = "bottom",
      align = "center",
      sideOffset = 4,
      collisionPadding = 8,
      children,
      ...props
    },
    ref
  ) => (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        ref={ref}
        side={side}
        align={align}
        sideOffset={sideOffset}
        collisionPadding={collisionPadding}
        className={cn(
          "z-50 max-w-[min(18rem,calc(100vw-1rem))] rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-gray-50 shadow-md",
          "text-center leading-none will-change-[transform,opacity]",
          "dark:bg-gray-100 dark:text-gray-900",
          "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-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",
          className
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow
          className="fill-gray-900 dark:fill-gray-100"
          width={11}
          height={5}
        />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
);
TooltipContent.displayName = TooltipPrimitive.Content.displayName;

/**
 * Simple Tooltip component for wrapping elements
 * Usage:
 * <Tooltip content="Your tooltip text">
 *   <button>Hover me</button>
 * </Tooltip>
 */
interface SimpleTooltipProps {
  content: string;
  children: React.ReactNode;
  side?: "top" | "right" | "bottom" | "left";
  align?: "start" | "center" | "end";
  delayDuration?: number;
  asChild?: boolean;
}

const SimpleTooltip = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Trigger>,
  SimpleTooltipProps
>(
  (
    {
      content,
      children,
      side = "bottom",
      align = "center",
      delayDuration = 200,
      asChild = true,
    },
    ref
  ) => (
    <Tooltip delayDuration={delayDuration}>
      <TooltipTrigger asChild={asChild} ref={ref}>
        {children}
      </TooltipTrigger>
      <TooltipContent side={side} align={align}>
        {content}
      </TooltipContent>
    </Tooltip>
  )
);
SimpleTooltip.displayName = "SimpleTooltip";

export {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
  SimpleTooltip,
};