interface Props {
  score: number;
  grade: string;
  size?: number;
}

const RADIUS = 54;
const CIRC   = 2 * Math.PI * RADIUS;

function gradeColor(score: number): string {
  if (score >= 90) return '#22c55e';  // green
  if (score >= 75) return '#84cc16';  // lime
  if (score >= 55) return '#f59e0b';  // amber
  if (score >= 35) return '#f97316';  // orange
  return '#ef4444';                   // red
}

export default function ScoreRing({ score, grade, size = 140 }: Props) {
  const clipped = Math.max(0, Math.min(100, score));
  const offset  = CIRC - (clipped / 100) * CIRC;
  const color   = gradeColor(clipped);

  return (
    <div className="score-ring" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox="0 0 120 120">
        {/* Background track */}
        <circle
          cx="60" cy="60" r={RADIUS}
          fill="none" stroke="var(--aai-border)" strokeWidth="10"
        />
        {/* Filled arc */}
        <circle
          cx="60" cy="60" r={RADIUS}
          fill="none"
          stroke={color}
          strokeWidth="10"
          strokeLinecap="round"
          strokeDasharray={CIRC}
          strokeDashoffset={offset}
          transform="rotate(-90 60 60)"
          style={{ transition: 'stroke-dashoffset 0.6s ease' }}
        />
      </svg>
      <div className="score-ring__label">
        <span className="score-ring__score" style={{ color }}>{clipped}</span>
        <span className="score-ring__grade" style={{ color }}>{grade}</span>
      </div>
    </div>
  );
}