import { useEffect, useState } from 'react'

// Gauge is the animated Mission Readiness™ score dial (Screening Results Section B).
export function Gauge({
  value,
  color,
  status,
}: {
  value: number
  color: string
  status: string
}) {
  const size = 230
  const stroke = 16
  const r = (size - stroke) / 2
  const c = 2 * Math.PI * r

  // animate from 0 on mount / value change
  const [shown, setShown] = useState(0)
  useEffect(() => {
    const id = requestAnimationFrame(() => setShown(value))
    return () => cancelAnimationFrame(id)
  }, [value])
  const offset = c * (1 - Math.max(0, Math.min(100, shown)) / 100)

  return (
    <div className="relative grid place-items-center" style={{ width: size, height: size }}>
      <svg width={size} height={size} className="-rotate-90">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#13314f" strokeWidth={stroke} />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke={color}
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={c}
          strokeDashoffset={offset}
          style={{ transition: 'stroke-dashoffset 1.1s cubic-bezier(0.22,1,0.36,1)', filter: `drop-shadow(0 0 6px ${color}66)` }}
        />
      </svg>
      <div className="absolute text-center">
        <div className="text-[13px] font-bold uppercase tracking-[0.18em] text-muted">Mission Readiness</div>
        <div className="mt-1 text-6xl font-extrabold tabular-nums leading-none">{Math.round(value)}%</div>
        <div
          className="mt-2 inline-block rounded-full px-3 py-1 text-xs font-bold uppercase tracking-widest"
          style={{ color: '#06121f', background: color }}
        >
          {status}
        </div>
      </div>
    </div>
  )
}