import type { ReactNode } from "react";
import { cn } from "@/lib/utils";

const TOOLTIP_WIDTH_GUESS = 200;
const OFFSET = 12;

/**
 * The one tooltip panel every chart uses, positioned inside the chart's
 * `relative` wrapper. It flips to the left of the pointer near the right edge
 * so it never spills out of the card.
 */
export function ChartTooltip({
  x,
  y,
  containerWidth,
  children,
}: {
  x: number;
  y: number;
  containerWidth: number;
  children: ReactNode;
}) {
  const flip = x + OFFSET + TOOLTIP_WIDTH_GUESS > containerWidth;
  return (
    <div
      role="presentation"
      className="pointer-events-none absolute z-20 whitespace-nowrap"
      style={{
        left: flip ? undefined : x + OFFSET,
        right: flip ? containerWidth - x + OFFSET : undefined,
        top: Math.max(0, y - 8),
      }}
    >
      <div className="rounded-lg border border-border bg-popover/95 backdrop-blur-sm px-3 py-2 shadow-xl text-xs space-y-1">
        {children}
      </div>
    </div>
  );
}

/** A tooltip row: series key (a short line or square of its colour), name, value. */
export function TooltipRow({
  color,
  label,
  value,
  mark = "rect",
  className,
}: {
  color?: string;
  label: ReactNode;
  value: ReactNode;
  mark?: "rect" | "line";
  className?: string;
}) {
  return (
    <p className={cn("flex items-center justify-between gap-4", className)}>
      <span className="flex items-center gap-1.5 text-muted-foreground">
        {color && (
          <span
            aria-hidden
            className={mark === "line" ? "h-0.5 w-3 rounded-full" : "h-2 w-2 rounded-sm"}
            style={{ backgroundColor: color }}
          />
        )}
        {label}
      </span>
      <span className="tabular-nums font-medium text-foreground">{value}</span>
    </p>
  );
}