'use client';

import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

interface ProgressCardProps {
  title: string;
  current: number;
  total: number;
  subtitle?: string;
  color?: string;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function ProgressCard({
  title,
  current,
  total,
  subtitle,
  color = 'var(--primary)',
  size = 'md',
  className,
}: ProgressCardProps) {
  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;

  const sizeConfig = {
    sm: { circleSize: 80, strokeWidth: 6, fontSize: 'text-lg' },
    md: { circleSize: 110, strokeWidth: 8, fontSize: 'text-2xl' },
    lg: { circleSize: 140, strokeWidth: 10, fontSize: 'text-3xl' },
  };

  const config = sizeConfig[size];
  const radius = (config.circleSize - config.strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - (percentage / 100) * circumference;

  return (
    <motion.div
      whileHover={{ y: -2 }}
      className={cn(
        'rounded-2xl border border-border/50 bg-card p-5 shadow-sm flex flex-col items-center',
        className
      )}
    >
      <div className="relative" style={{ width: config.circleSize, height: config.circleSize }}>
        {/* Background circle */}
        <svg
          width={config.circleSize}
          height={config.circleSize}
          className="rotate-[-90deg]"
        >
          <circle
            cx={config.circleSize / 2}
            cy={config.circleSize / 2}
            r={radius}
            fill="none"
            stroke="currentColor"
            strokeWidth={config.strokeWidth}
            className="text-muted/50"
          />
          <motion.circle
            cx={config.circleSize / 2}
            cy={config.circleSize / 2}
            r={radius}
            fill="none"
            stroke={color}
            strokeWidth={config.strokeWidth}
            strokeLinecap="round"
            strokeDasharray={circumference}
            initial={{ strokeDashoffset: circumference }}
            animate={{ strokeDashoffset: offset }}
            transition={{ duration: 1.2, ease: 'easeOut', delay: 0.2 }}
          />
        </svg>
        {/* Percentage text */}
        <div className="absolute inset-0 flex items-center justify-center">
          <span className={cn('font-heading font-bold', config.fontSize)}>
            {percentage}%
          </span>
        </div>
      </div>

      <h3 className="mt-3 font-heading text-sm font-semibold text-card-foreground">
        {title}
      </h3>
      <p className="text-xs text-muted-foreground">
        {current} / {total} {subtitle || 'selesai'}
      </p>
    </motion.div>
  );
}