/**
 * ScoreRing
 * ---------
 * An SVG circular progress ring that visualises a score out of 100.
 *
 * - Green  for scores 80+
 * - Amber  for scores 50–79
 * - Red    for scores below 50
 *
 * Props:
 *   score  – number 0–100
 *   size   – diameter of the SVG in px (default 120)
 */

interface ScoreRingProps {
  score: number;
  size?: number;
}

export function ScoreRing({ score, size = 120 }: ScoreRingProps) {
  const strokeWidth = 10;
  const center = size / 2;
  const radius = center - strokeWidth;
  const circumference = 2 * Math.PI * radius;
  const filled = (Math.min(score, 100) / 100) * circumference;

  const color =
    score >= 80 ? "#16a34a" : score >= 50 ? "#d97706" : "#dc2626";

  const label =
    score >= 80 ? "Good" : score >= 50 ? "Needs work" : "Poor";

  return (
    <div className="flex flex-col items-center gap-2">
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        {/* Background track */}
        <circle
          cx={center}
          cy={center}
          r={radius}
          fill="none"
          stroke="#e2e8f0"
          strokeWidth={strokeWidth}
        />
        {/* Filled arc */}
        <circle
          cx={center}
          cy={center}
          r={radius}
          fill="none"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeDasharray={`${filled} ${circumference}`}
          strokeLinecap="round"
          transform={`rotate(-90 ${center} ${center})`}
        />
        {/* Score text */}
        <text
          x={center}
          y={center - 6}
          textAnchor="middle"
          fontSize={size * 0.22}
          fontWeight="700"
          fill="#0f172a"
        >
          {score}
        </text>
        {/* "/100" label */}
        <text
          x={center}
          y={center + 12}
          textAnchor="middle"
          fontSize={size * 0.1}
          fill="#94a3b8"
        >
          / 100
        </text>
      </svg>
      {/* Verdict text below the ring */}
      <p className="text-xs font-semibold" style={{ color }}>
        {label}
      </p>
    </div>
  );
}
