import { useState, useRef, useEffect, type ReactNode } from 'react'

interface TooltipProps {
  /** i18n key for the term definition */
  text: string
  /** Optional children to wrap; defaults to a "?" icon */
  children?: ReactNode
}

export function Tooltip({ text, children }: TooltipProps) {
  const [visible, setVisible] = useState(false)
  const tooltipRef = useRef<HTMLSpanElement>(null)

  useEffect(() => {
    if (!visible) return
    const handler = (e: MouseEvent) => {
      if (tooltipRef.current && !tooltipRef.current.contains(e.target as Node)) {
        setVisible(false)
      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [visible])

  return (
    <span
      ref={tooltipRef}
      className="term-tooltip-wrap"
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      {children ?? <span className="term-tooltip-icon">?</span>}
      {visible && (
        <span className="term-tooltip-popup">
          {text}
        </span>
      )}
    </span>
  )
}

interface TermLabelProps {
  /** The visible label text */
  label: string
  /** The tooltip definition text (already translated) */
  term: string
}

/**
 * A label with an inline "?" tooltip showing the term definition.
 * Usage: <TermLabel label={t('entity.relations')} term={t('term.relation')} />
 */
export function TermLabel({ label, term }: TermLabelProps) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
      {label}
      <Tooltip text={term} />
    </span>
  )
}