import React from 'react'
import { motion, useMotionValue, useTransform, animate } from 'framer-motion'
import { cn } from '@/lib/utils'

interface Vo2MaxCardProps {
  title: string
  value: number
  status: string
  description: React.ReactNode
  progress: number
  icon: React.ReactNode
  className?: string
}

export const Vo2MaxCard: React.FC<Vo2MaxCardProps> = ({
  title, value, status, description, progress, icon, className,
}) => {
  const count = useMotionValue(0)
  const rounded = useTransform(count, (latest) => Math.round(latest).toLocaleString('fa-IR'))
  const progressValue = useMotionValue(0)

  React.useEffect(() => {
    const valueAnim    = animate(count, value,    { duration: 1.5, ease: [0.43, 0.13, 0.23, 0.96] })
    const progressAnim = animate(progressValue, progress, { duration: 1.5, ease: [0.43, 0.13, 0.23, 0.96] })
    return () => { valueAnim.stop(); progressAnim.stop() }
  }, [value, progress, count, progressValue])

  const radius = 80
  const circumference = 2 * Math.PI * radius
  const strokeDashoffset = useTransform(progressValue, (v) => circumference - (v / 100) * circumference)

  return (
    <div className={cn(
      'relative flex w-full max-w-sm flex-col gap-4 rounded-2xl border bg-card p-6 text-card-foreground shadow-[0_8px_24px_rgba(3,35,64,0.10),0_2px_6px_rgba(3,35,64,0.06)] overflow-hidden',
      className,
    )} style={{ fontFamily: 'Vazir, sans-serif' }}>
      <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-48 h-48 bg-primary/10 rounded-full blur-3xl -z-10" />

      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium text-muted-foreground">{title}</h3>
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
          {icon}
        </div>
      </div>

      <div className="relative flex h-56 w-full items-center justify-center">
        <svg width="200" height="200" viewBox="0 0 200 200" className="-rotate-90"
          role="progressbar" aria-valuenow={progress} aria-valuemin={0} aria-valuemax={100}>
          <circle cx="100" cy="100" r={radius} strokeWidth="12" fill="transparent"
            strokeDasharray="8 12" strokeLinecap="round" style={{ stroke: 'rgba(3,35,64,0.12)' }} />
          <motion.circle cx="100" cy="100" r={radius} strokeWidth="12" fill="transparent"
            strokeDasharray={`${circumference} ${circumference}`}
            strokeLinecap="round" style={{ strokeDashoffset, stroke: '#032340' }} />
        </svg>
        <div className="absolute flex flex-col items-center justify-center">
          <motion.span className="text-6xl font-bold tracking-tighter">{rounded}</motion.span>
          <p className="text-xl font-medium text-muted-foreground">{status}</p>
        </div>
      </div>

      <div className="text-center text-sm text-muted-foreground">{description}</div>
    </div>
  )
}
