"use client";

import { type Grade, getGradeColor } from "@/lib/scoring";
import { cn } from "@/lib/utils";

export function ScoreGauge({
  score,
  grade,
  label,
  size = 200,
}: {
  score: number;
  grade: Grade;
  label: string;
  size?: number;
}) {
  const strokeWidth = 12;
  const radius = (size - strokeWidth) / 2 - 10;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (score / 100) * circumference;

  // Stitch: tertiary for good, secondary for mid, error for bad
  const strokeColor = score >= 70 ? "#4edea3" : score >= 50 ? "#b9c8de" : "#ffb4ab";

  return (
    <div className="flex flex-col items-center gap-2">
      <div className="relative" style={{ width: size, height: size }}>
        <svg width={size} height={size} className="-rotate-90">
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke="#2d3449"
            strokeWidth={strokeWidth}
          />
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            strokeWidth={strokeWidth}
            strokeLinecap="round"
            strokeDasharray={circumference}
            strokeDashoffset={offset}
            stroke={strokeColor}
            className="transition-all duration-1000 ease-out"
          />
        </svg>
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className="font-[family-name:var(--font-manrope)] text-6xl font-extrabold tracking-tighter text-foreground">
            {score}
          </span>
          <span className="text-xs font-bold tracking-widest text-muted-foreground uppercase">
            {label}
          </span>
        </div>
      </div>
    </div>
  );
}