// src/components/keywords/metric-badge.tsx
import { cn } from "@/lib/utils";

/** KD difficulty thresholds (design ELEVA-79): unknown/0 gray, <30 green,
 *  <50 amber, ≥50 red. Hardcoded hues — the donut color IS the signal. */
export function kdColor(value: number): { ring: string; text: string } {
  if (value <= 0) return { ring: "transparent", text: "" };
  if (value < 30) return { ring: "#34d399", text: "#34d399" };
  if (value < 50) return { ring: "#f5b544", text: "#d99a23" };
  return { ring: "#e8645a", text: "#e8645a" };
}

const SIZE = 30;
const STROKE = 3;
const R = (SIZE - STROKE) / 2;
const C = 2 * Math.PI * R;

/** KD on a fixed 0–100 scale rendered as a 30px donut, number centered. */
export function KdBadge({ value }: { value: number }) {
  const c = kdColor(value);
  const filled = (C * Math.min(Math.max(value, 0), 100)) / 100;
  return (
    <span
      className="relative inline-flex shrink-0 items-center justify-center"
      style={{ width: SIZE, height: SIZE }}
      title={`KD ${value}/100`}
    >
      <svg
        width={SIZE}
        height={SIZE}
        className="-rotate-90"
        aria-hidden="true"
        role="presentation"
      >
        <circle
          cx={SIZE / 2}
          cy={SIZE / 2}
          r={R}
          fill="none"
          strokeWidth={STROKE}
          className="stroke-muted"
        />
        {value > 0 ? (
          <circle
            cx={SIZE / 2}
            cy={SIZE / 2}
            r={R}
            fill="none"
            strokeWidth={STROKE}
            stroke={c.ring}
            strokeLinecap="round"
            strokeDasharray={`${filled} ${C - filled}`}
          />
        ) : null}
      </svg>
      <span
        className={cn(
          "absolute font-semibold text-[11px] tabular-nums",
          value <= 0 && "text-muted-foreground",
        )}
        style={value > 0 ? { color: c.text } : undefined}
      >
        {value}
      </span>
    </span>
  );
}

/** CPC as plain tabular text: `$` muted, zero values muted entirely. */
export function CpcBadge({ value }: { value: number }) {
  return (
    <span
      className={cn(
        "whitespace-nowrap text-[13px] tabular-nums",
        value === 0 ? "text-muted-foreground/50" : "text-foreground/80",
      )}
      title={`CPC $${value.toFixed(2)}`}
    >
      <span className={value === 0 ? "" : "text-muted-foreground/70"}>$</span>
      {value.toFixed(2)}
    </span>
  );
}