'use client'
// src/components/charts/RingMeter.tsx
// Input: value (0-100), max, label, color, size
// Output: animated donut arc with central label
// Rationale: integrity score in project cards and panels

import { useEffect, useState } from 'react'

export interface RingMeterProps {
  value: number
  max?: number
  label?: string
  color?: string
  size?: number
  strokeWidth?: number
  className?: string
}

export function RingMeter({
  value,
  max = 100,
  label,
  color = '#3DB8E8',
  size = 64,
  strokeWidth = 5,
  className,
}: RingMeterProps) {
  const [animated, setAnimated] = useState(false)

  useEffect(() => {
    const t = setTimeout(() => setAnimated(true), 80)
    return () => clearTimeout(t)
  }, [])

  const radius = (size - strokeWidth) / 2
  const circumference = 2 * Math.PI * radius
  const pct = Math.min(Math.max(value / max, 0), 1)
  const offset = animated ? circumference * (1 - pct) : circumference

  return (
    <div
      className={className}
      style={{ width: size, height: size, position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}
    >
      <svg
        width={size}
        height={size}
        viewBox={`0 0 ${size} ${size}`}
        style={{ position: 'absolute', top: 0, left: 0, transform: 'rotate(-90deg)' }}
      >
        {/* Track */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke="#1E2D3D"
          strokeWidth={strokeWidth}
          fill="none"
        />
        {/* Arc */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke={color}
          strokeWidth={strokeWidth}
          fill="none"
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          style={{ transition: animated ? 'stroke-dashoffset 0.8s cubic-bezier(0.16,1,0.3,1)' : 'none' }}
        />
      </svg>
      <div className="flex flex-col items-center z-10 select-none">
        <span
          className="font-mono tabular-nums text-text-primary leading-none"
          style={{ fontSize: size > 56 ? 16 : 12, fontWeight: 500 }}
        >
          {Math.round(value)}
        </span>
        {label && (
          <span className="text-caption text-text-muted leading-none mt-0.5">{label}</span>
        )}
      </div>
    </div>
  )
}