Tooltip

/**
 * Presentational Tooltip renderers for the showcase page.
 *
 * The Nexus `Tooltip` / `MobileTooltip` components are spec-only (not yet in
 * `nexus/components`), so this file renders the Figma bubble with token-styled
 * HTML. // TODO: swap these out for the real Nexus components once they ship.
 *
 * Faithful to the Figma nodes 438-3534 (Desktop/Tablet) and 438-3710 (Mobile):
 * - dark background (`--components-tooltips-color-background-dark`), white text
 * - `shadow-lg` token (matches Figma "Dropshadow/shadow/shadow-lg")
 * - the arrow is the Figma 20×12 vector (12×20 on the side positions), inset
 *   12px from the bubble edge on desktop / 16px on mobile (the Arrow Frame's
 *   horizontal padding) and tucked 2px under the body (Figma's -2px gap).
 * - widths: SM hugs (min 48 / max 320), LG is fixed 280 wide (min 88 / max 560
 *   per the node), Mobile hugs (min 124 / max 420).
 *
 * Radius note: the Figma node renders BOTH desktop sizes with `round-4` (4px),
 * so we follow the node over the spec prose (which quotes rounded-6 for LG).
 */

import { CloseOutlineIcon } from "nexus/icons";

export type TooltipSize = "sm" | "lg";

export type TooltipPosition =
  | "top-left"
  | "top-center"
  | "top-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right"
  | "left-center"
  | "right-center";

export type MobileTooltipPosition = Exclude<
  TooltipPosition,
  "left-center" | "right-center"
>;

const BG = "bg-[var(--components-tooltips-color-background-dark)]";
const TEXT = "text-[var(--components-tooltips-color-text-white)]";

type ArrowDirection = "up" | "down" | "left" | "right";

const DIRECTION_BY_POSITION: Record<TooltipPosition, ArrowDirection> = {
  "top-left": "up",
  "top-center": "up",
  "top-right": "up",
  "bottom-left": "down",
  "bottom-center": "down",
  "bottom-right": "down",
  "left-center": "left",
  "right-center": "right",
};

/** The Figma arrow vector: 20×12 on top/bottom edges, 12×20 on the sides. */
const ARROW_GEOMETRY: Record<
  ArrowDirection,
  { width: number; height: number; d: string }
> = {
  down: { width: 20, height: 12, d: "M0 0h20l-8.9 10.86a1.5 1.5 0 0 1-2.2 0L0 0Z" },
  up: { width: 20, height: 12, d: "M0 12h20L11.1 1.14a1.5 1.5 0 0 0-2.2 0L0 12Z" },
  left: { width: 12, height: 20, d: "M12 0v20L1.14 11.1a1.5 1.5 0 0 1 0-2.2L12 0Z" },
  right: { width: 12, height: 20, d: "M0 0v20l10.86-8.9a1.5 1.5 0 0 0 0-2.2L0 0Z" },
};

/**
 * Placement classes per position: the arrow sits just outside the bubble edge
 * (`top-full` / `bottom-full` / `left-full` / `right-full`) and a -2px margin
 * pulls it under the body — Figma's "-2px vertical gap between objects". The
 * inset from the corner is the Arrow Frame's horizontal padding: 12px on
 * desktop, 16px on mobile. Full static literals so Tailwind emits them.
 */
const DESKTOP_ARROW: Record<TooltipPosition, string> = {
  "top-left": "bottom-full -mb-2 left-12",
  "top-center": "bottom-full -mb-2 left-1/2 -translate-x-1/2",
  "top-right": "bottom-full -mb-2 right-12",
  "bottom-left": "top-full -mt-2 left-12",
  "bottom-center": "top-full -mt-2 left-1/2 -translate-x-1/2",
  "bottom-right": "top-full -mt-2 right-12",
  "left-center": "right-full -mr-2 top-1/2 -translate-y-1/2",
  "right-center": "left-full -ml-2 top-1/2 -translate-y-1/2",
};

const MOBILE_ARROW: Record<MobileTooltipPosition, string> = {
  "top-left": "bottom-full -mb-2 left-16",
  "top-center": "bottom-full -mb-2 left-1/2 -translate-x-1/2",
  "top-right": "bottom-full -mb-2 right-16",
  "bottom-left": "top-full -mt-2 left-16",
  "bottom-center": "top-full -mt-2 left-1/2 -translate-x-1/2",
  "bottom-right": "top-full -mt-2 right-16",
};

const Arrow = ({
  position,
  placement,
}: {
  position: TooltipPosition;
  placement: string;
}) => {
  const { width, height, d } = ARROW_GEOMETRY[DIRECTION_BY_POSITION[position]];
  return (
    <svg
      aria-hidden
      width={width}
      height={height}
      viewBox={`0 0 ${width} ${height}`}
      className={`absolute ${placement} fill-[var(--components-tooltips-color-background-dark)]`}
    >
      <path d={d} />
    </svg>
  );
};

/** Desktop / Tablet tooltip bubble (SM = label · LG = title + support). */
export const TooltipBubble = ({
  size,
  position,
  label,
  title,
  supportContent,
  showSupportContent,
}: {
  size: TooltipSize;
  position: TooltipPosition;
  label: string;
  title: string;
  supportContent: string;
  showSupportContent: boolean;
}) => (
  <div role="tooltip" className="relative inline-flex">
    <Arrow position={position} placement={DESKTOP_ARROW[position]} />

    {size === "sm" ? (
      <div
        className={`relative flex items-center justify-center rounded-4 px-12 py-8 shadow-lg min-w-[48px] max-w-[320px] ${BG}`}
      >
        <span className={`typography-l1-medium-12 line-clamp-2 break-words ${TEXT}`}>
          {label}
        </span>
      </div>
    ) : (
      <div
        className={`relative flex flex-col gap-4 rounded-4 p-12 shadow-lg w-[280px] min-w-[88px] max-w-[560px] ${BG}`}
      >
        {/* `pr-20` clears the absolute close icon so the title never runs under it. */}
        <span
          className={`typography-l1-semibold-12 line-clamp-2 break-words pr-20 ${TEXT}`}
        >
          {title}
        </span>
        {showSupportContent && supportContent && (
          <span
            className={`typography-l1-regular-12 line-clamp-3 break-words ${TEXT}`}
          >
            {supportContent}
          </span>
        )}
        <CloseOutlineIcon
          aria-label="Close tooltip"
          width={16}
          height={16}
          className="absolute right-8 top-8 size-16 [&_path]:fill-[var(--components-tooltips-color-icon-white)]"
        />
      </div>
    )}
  </div>
);

/** Mobile Application tooltip bubble (support content only, 6 positions). */
export const MobileTooltipBubble = ({
  position,
  supportContent,
}: {
  position: MobileTooltipPosition;
  supportContent: string;
}) => (
  <div role="tooltip" className="relative inline-flex">
    <Arrow position={position} placement={MOBILE_ARROW[position]} />
    <div
      className={`relative flex rounded-6 p-16 shadow-lg min-w-[124px] max-w-[420px] ${BG}`}
    >
      <span
        className={`typography-mobile-b1-regular-14 line-clamp-3 break-words ${TEXT}`}
      >
        {supportContent}
      </span>
    </div>
  </div>
);