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

/**
 * Term wrapper — affiche un terme avec une petite astérisque cliquable/hoverable
 * qui révèle sa définition. Pour le glossaire métier (DSO, LME, mise en demeure…).
 *
 * Pas de tooltip natif (`title=`) parce qu'il s'affiche en gris système et
 * casse la DA. Radix Tooltip est déjà dans la stack pour Dialog, on en
 * profite ici.
 */
type GlossaryTermProps = {
  /** Le mot/expression visible (ex. "DSO moyen"). */
  children: React.ReactNode;
  /** Définition affichée dans le tooltip. */
  definition: React.ReactNode;
  /** Côté du tooltip (défaut bottom). */
  side?: "top" | "right" | "bottom" | "left";
  /** Classe sur le wrapper. */
  className?: string;
  /** Position de l'astérisque (défaut : after = à droite). */
  marker?: "before" | "after";
};

export function GlossaryTerm({
  children,
  definition,
  side = "bottom",
  className,
  marker = "after",
}: GlossaryTermProps) {
  const star = (
    <Asterisk
      size={9}
      strokeWidth={2.5}
      aria-hidden="true"
      className="inline-block text-rubis align-text-top translate-y-[1px]"
    />
  );

  return (
    <TooltipPrimitive.Provider delayDuration={200}>
      <TooltipPrimitive.Root>
        <TooltipPrimitive.Trigger asChild>
          <span
            className={cn(
              "inline-flex items-center gap-0.5 cursor-help",
              "underline-offset-4 decoration-dotted decoration-ink-3/40",
              "hover:decoration-rubis hover:decoration-solid",
              className,
            )}
            tabIndex={0}
          >
            {marker === "before" && star}
            {children}
            {marker === "after" && star}
          </span>
        </TooltipPrimitive.Trigger>
        <TooltipPrimitive.Portal>
          <TooltipPrimitive.Content
            side={side}
            sideOffset={6}
            collisionPadding={12}
            className={cn(
              "z-50 max-w-[280px] rounded-default border border-rubis-glow bg-white",
              "px-3 py-2 text-[12.5px] leading-snug text-ink-2",
              "shadow-card",
              "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out",
              "data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0",
            )}
          >
            {definition}
            <TooltipPrimitive.Arrow className="fill-white" />
          </TooltipPrimitive.Content>
        </TooltipPrimitive.Portal>
      </TooltipPrimitive.Root>
    </TooltipPrimitive.Provider>
  );
}
