// The signature element: a HUD-style rating ring, styled after an in-game
// XP/health ring rather than a generic star row. Pure SVG, no client JS
// needed since the fill is computed server-side from a static value.

const RADIUS = 30;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

export function RatingRing({
  rating, // 0-100
  size = 88,
}: {
  rating: number | null;
  size?: number;
}) {
  const pct = rating != null ? Math.max(0, Math.min(100, rating)) : 0;
  const offset = CIRCUMFERENCE - (pct / 100) * CIRCUMFERENCE;

  return (
    <div className="relative shrink-0" style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox="0 0 72 72" className="-rotate-90">
        <circle cx="36" cy="36" r={RADIUS} fill="none" stroke="currentColor" strokeWidth="5" className="text-ink-line" />
        {rating != null && (
          <circle
            cx="36"
            cy="36"
            r={RADIUS}
            fill="none"
            stroke="currentColor"
            strokeWidth="5"
            strokeLinecap="round"
            strokeDasharray={CIRCUMFERENCE}
            strokeDashoffset={offset}
            className={pct >= 70 ? 'text-signal' : pct >= 40 ? 'text-gold' : 'text-ember'}
          />
        )}
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className="font-mono text-lg font-semibold tabular-nums leading-none">
          {rating != null ? Math.round(pct) : '—'}
        </span>
        <span className="stat-label !text-[9px]">{rating != null ? 'score' : 'unrated'}</span>
      </div>
    </div>
  );
}
