// src/components/ui/ring-gauge.tsx
import { cn } from "@/lib/utils";

/**
 * Map a 0..1 score to a green→yellow→orange→red color.
 * Hue warms fast: green (120°) at 0, ~orange by 0.5, red (0°) at 1.
 */
export function scoreColor(t: number): string {
  const clamped = Math.min(Math.max(t, 0), 1);
  const hue = 120 * (1 - clamped) ** 2;
  return `hsl(${hue} 78% 45%)`;
}

/** Small SVG donut gauge: faint track + a colored arc (fraction of full),
 *  with an optional centered label. `color` is any CSS color string. */
export function RingGauge({
  fraction,
  label,
  color,
  size = 30,
  stroke = 3,
  title,
  className,
}: {
  fraction: number;
  label?: string;
  color: string;
  size?: number;
  stroke?: number;
  title?: string;
  className?: string;
}) {
  const r = (size - stroke) / 2;
  const circumference = 2 * Math.PI * r;
  const clamped = Math.min(Math.max(fraction, 0), 1);
  const filled = circumference * clamped;
  return (
    <span
      className={cn(
        "relative inline-flex shrink-0 items-center justify-center",
        className,
      )}
      style={{ width: size, height: size }}
      title={title}
    >
      <svg width={size} height={size} className="-rotate-90" aria-hidden="true">
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          strokeWidth={stroke}
          className="stroke-muted"
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          strokeWidth={stroke}
          stroke={color}
          strokeLinecap="round"
          strokeDasharray={`${filled} ${circumference - filled}`}
        />
      </svg>
      {label ? (
        <span className="absolute text-[10px] font-semibold tabular-nums text-foreground">
          {label}
        </span>
      ) : null}
    </span>
  );
}