'use client'

import * as React from 'react'
import { Tooltip as RadixTooltip } from 'radix-ui'

type Side = 'top' | 'right' | 'bottom' | 'left'

type Props = {
  content: React.ReactNode
  children: React.ReactNode
  side?: Side
  delayMs?: number
  className?: string
  asChild?: boolean
}

/**
 * Wiederverwendbarer Tooltip auf Radix-Primitive.
 * - Default side=top, delay=300ms
 * - Trigger nutzt asChild damit existing Elements nicht doppelt gewrapped werden
 * - Content nutzt Portal — landet außerhalb des DOM-Tree, kein z-index-Konflikt
 */
export function Tooltip({
  content,
  children,
  side = 'top',
  delayMs = 300,
  className,
  asChild = true,
}: Props) {
  if (content === null || content === undefined || content === '') {
    return <>{children}</>
  }
  return (
    <RadixTooltip.Root delayDuration={delayMs}>
      <RadixTooltip.Trigger asChild={asChild}>{children}</RadixTooltip.Trigger>
      <RadixTooltip.Portal>
        <RadixTooltip.Content
          side={side}
          sideOffset={6}
          className={`z-50 max-w-[300px] rounded-md border border-border bg-card px-2.5 py-1.5 text-xs text-foreground shadow-md ${className ?? ''}`.trim()}
        >
          {content}
          <RadixTooltip.Arrow className="fill-border" />
        </RadixTooltip.Content>
      </RadixTooltip.Portal>
    </RadixTooltip.Root>
  )
}

/**
 * Provider — muss einmal im Root-Layout sein. Wenn die App ohne Provider
 * gestartet wird, fallen alle Tooltips auf Default-Verhalten zurück.
 */
export const TooltipProvider = RadixTooltip.Provider