import { motion } from 'motion/react';

interface ScoreRingProps {
  score: number;
  maxScore?: number;
  size?: number;
  label?: string;
  color?: string;
}

function getScoreColor(score: number, maxScore: number): string {
  const pct = (score / maxScore) * 100;
  if (pct <= 40) return '#C084CF';   // 소프트 바이올렛 — critical
  if (pct <= 60) return '#8B9CF7';   // 페리윙클 블루 — caution
  if (pct <= 80) return '#7C6DD8';   // 미디엄 퍼플 — good
  return '#6C5CE7';                  // Infinith 메인 퍼플 — excellent
}

export function ScoreRing({
  score,
  maxScore = 100,
  size = 120,
  label,
  color,
}: ScoreRingProps) {
  const strokeWidth = 8;
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const progress = Math.min(score / maxScore, 1);
  const strokeDashoffset = circumference * (1 - progress);
  const resolvedColor = color ?? getScoreColor(score, maxScore);

  return (
    <div className="flex flex-col items-center gap-2">
      <div className="relative" style={{ width: size, height: size }}>
        <svg
          width={size}
          height={size}
          viewBox={`0 0 ${size} ${size}`}
          className="-rotate-90"
        >
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke="#f1f5f9"
            strokeWidth={strokeWidth}
          />
          <motion.circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke={resolvedColor}
            strokeWidth={strokeWidth}
            strokeLinecap="round"
            strokeDasharray={circumference}
            initial={{ strokeDashoffset: circumference }}
            whileInView={{ strokeDashoffset }}
            viewport={{ once: true, margin: '-50px' }}
            transition={{ duration: 1.2, ease: 'easeOut' }}
          />
        </svg>
        <div className="absolute inset-0 flex items-center justify-center">
          <span className="text-2xl font-bold text-[#0A1128]">{score}</span>
        </div>
      </div>
      {label && (
        <span className="text-sm text-slate-500 text-center">{label}</span>
      )}
    </div>
  );
}
