// src/components/content/pages-health/score-ring.tsx — anneau de score (donut SVG)
// répliqué du proto (Frame A : r=15, épaisseur 3.5) mais colorisé via les tokens
// de l'app (emerald/amber/red) selon le `level` du scorer (Task 1), jamais les
// couleurs du proto. Piste circulaire en `text-muted`, arc rempli à `score/100`.
import type { ScoreLevel } from "@/lib/pages/score";

const RADIUS = 15;
const STROKE = 3.5;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS; // ≈ 94.25

const ARC_COLOR: Record<ScoreLevel, string> = {
  ok: "text-emerald-500",
  warn: "text-amber-500",
  bad: "text-red-500",
};

/** Anneau de score : arc coloré selon `level`, valeur au centre. */
export function ScoreRing({
  score,
  level,
}: {
  score: number;
  level: ScoreLevel;
}) {
  const pct = Math.max(0, Math.min(100, score)) / 100;
  const filled = CIRCUMFERENCE * pct;
  return (
    <span className="relative inline-grid size-[38px] place-items-center">
      <svg
        width={38}
        height={38}
        viewBox="0 0 38 38"
        role="img"
        aria-label={`Score ${score} sur 100`}
      >
        <circle
          cx={19}
          cy={19}
          r={RADIUS}
          fill="none"
          strokeWidth={STROKE}
          className="stroke-muted"
        />
        <circle
          cx={19}
          cy={19}
          r={RADIUS}
          fill="none"
          strokeWidth={STROKE}
          strokeLinecap="round"
          strokeDasharray={`${filled} ${CIRCUMFERENCE}`}
          transform="rotate(-90 19 19)"
          className={`stroke-current ${ARC_COLOR[level]}`}
        />
      </svg>
      <b className="absolute font-semibold text-[11px] tabular-nums">{score}</b>
    </span>
  );
}