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

function getScoreColor(score: number): string {
  if (score >= 81) return 'text-success';
  if (score >= 61) return 'text-accent-foreground';
  if (score >= 41) return 'text-warning';
  return 'text-destructive';
}

function getStrokeColorClass(score: number): string {
  if (score >= 81) return 'text-success';
  if (score >= 61) return 'text-accent-foreground';
  if (score >= 41) return 'text-warning';
  return 'text-destructive';
}

export default function ContentScoreGauge({ score, size = 80 }: ContentScoreGaugeProps) {
  const radius = (size - 8) / 2;
  const circumference = 2 * Math.PI * radius;
  const progress = Math.max(0, Math.min(100, score));
  const offset = circumference - (progress / 100) * circumference;

  return (
    <div
      className="relative inline-flex items-center justify-center"
      style={{ width: size, height: size }}
    >
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90" role="img" aria-label={`Content score: ${score} out of 100`}>
        {/* Background circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="currentColor"
          strokeWidth={4}
          className="text-muted/30"
        />
        {/* Progress circle — uses currentColor via Tailwind class for dark mode support */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="currentColor"
          strokeWidth={4}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          className={`transition-all duration-500 ease-out ${getStrokeColorClass(score)}`}
        />
      </svg>
      <span className={`absolute text-lg font-bold ${getScoreColor(score)}`}>
        {score}
        <span className="sr-only"> out of 100 content score</span>
      </span>
    </div>
  );
}