import type { TooltipProps } from "recharts";
import { cn } from "@/lib/utils";

/**
 * Tooltip thémé Rubis — petite card cream + bordure rubis-glow.
 * Reçoit en props un formatter pour personnaliser l'affichage des
 * valeurs (ex. "1 240,00 €" pour les montants, "12 j" pour le DSO).
 */
type ChartTooltipProps = TooltipProps<number, string> & {
  /** Convertit le label X (ex. "2026-04-01" → "avril 2026"). */
  formatLabel?: (label: string) => string;
  /** Convertit chaque valeur. Reçoit (value, dataKey). */
  formatValue?: (value: number, dataKey: string) => string;
  /** Label personnalisé pour chaque dataKey. Défaut : dataKey lui-même. */
  seriesLabel?: Record<string, string>;
  className?: string;
};

export function ChartTooltip({
  active,
  payload,
  label,
  formatLabel,
  formatValue,
  seriesLabel,
  className,
}: ChartTooltipProps) {
  if (!active || !payload || payload.length === 0) return null;

  return (
    <div
      className={cn(
        "rounded-default border border-rubis-glow bg-white px-3 py-2",
        "shadow-card text-[12px] font-sans",
        className,
      )}
    >
      {label && (
        <p className="font-display text-[12px] font-semibold text-ink mb-1 capitalize">
          {formatLabel ? formatLabel(String(label)) : String(label)}
        </p>
      )}
      <ul className="space-y-0.5">
        {payload.map((p, i) => {
          const dataKey = String(p.dataKey ?? p.name ?? i);
          const value = typeof p.value === "number" ? p.value : Number(p.value);
          return (
            <li key={i} className="flex items-center gap-2 text-ink-2 tabular-nums">
              <span
                aria-hidden="true"
                className="size-2 rounded-full"
                style={{ backgroundColor: String(p.color) || "var(--color-rubis)" }}
              />
              <span className="text-ink-3 mr-1">
                {seriesLabel?.[dataKey] ?? dataKey} :
              </span>
              <strong className="font-semibold text-ink">
                {formatValue
                  ? formatValue(Number.isFinite(value) ? value : 0, dataKey)
                  : String(p.value)}
              </strong>
            </li>
          );
        })}
      </ul>
    </div>
  );
}
