"use client"

interface ExpandableCountBarProps<T> {
  title: string
  items: T[]
  count?: number
  percentage?: number
  inProgressPercentage?: number
  total?: number
  secondaryStats?: Array<{ label: string; count: number }>
  onClick?: (items: T[]) => void
  className?: string
}

export default function ExpandableCountBar<T>({
  title,
  items,
  count,
  percentage,
  inProgressPercentage,
  total,
  secondaryStats,
  onClick,
  className = "",
}: ExpandableCountBarProps<T>) {

  const displayCount = count ?? items.length
  const displayTotal = total ?? items.length
  const displayPercentage = percentage ?? 0
  const displayInProgressPercentage = inProgressPercentage ?? 0
  const radius = 40
  const circumference = 2 * Math.PI * radius
  const completedStrokeDashoffset = circumference - (displayPercentage / 100) * circumference
  const inProgressStrokeDashoffset = circumference - ((displayPercentage + displayInProgressPercentage) / 100) * circumference

  return (
    <button
      onClick={() => onClick?.(items)}
      className={`w-full cursor-pointer rounded-xl border border-brandblue/20 bg-gradient-to-br from-brandlightblue/20 to-brandlightblue/5 shadow-sm hover:shadow-md hover:border-brandblue/40 transition-all duration-300 p-6 flex flex-col gap-4 group active:scale-95 ${className}`}
    >
      <div className="flex items-center justify-between gap-4">
        <div className="flex-1 text-left">
          <p className="text-base font-semibold text-brandblue group-hover:text-brandmidblue transition-colors">
            {title}
          </p>
          <p className="text-xs text-gray-500 mt-1">Click to view breakdown</p>
        </div>

        {/* Circular Progress */}
        <div className="relative w-24 h-24 flex-shrink-0">
          <svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
            {/* Background circle */}
            <circle
              cx="50"
              cy="50"
              r={radius}
              fill="none"
              stroke="currentColor"
              strokeWidth="3"
              className="text-brandblue/10"
            />
            {/* In Progress circle (gold) - drawn first so it appears underneath */}
            {displayInProgressPercentage > 0 && (
              <circle
                cx="50"
                cy="50"
                r={radius}
                fill="none"
                stroke="#f59e0b"
                strokeWidth="3"
                strokeDasharray={circumference}
                strokeDashoffset={inProgressStrokeDashoffset}
                strokeLinecap="round"
                className="transition-all duration-700 ease-out"
              />
            )}
            {/* Completed progress circle (blue) - drawn last so it appears on top */}
            {displayPercentage > 0 && (
              <circle
                cx="50"
                cy="50"
                r={radius}
                fill="none"
                stroke="#14163d"
                strokeWidth="3"
                strokeDasharray={circumference}
                strokeDashoffset={completedStrokeDashoffset}
                strokeLinecap="round"
                className="transition-all duration-700 ease-out"
              />
            )}
          </svg>
          {/* Center text */}
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="text-lg font-bold text-brandblue">
              {displayPercentage.toFixed(0)}%
            </span>
            <span className="text-xs text-gray-600 font-semibold">
              {displayCount}/{displayTotal}
            </span>
          </div>
        </div>
      </div>

      {/* Secondary Stats */}
      {secondaryStats && secondaryStats.length > 0 && (
        <div className="grid grid-cols-2 gap-2 pt-3 border-t border-brandblue/10">
          {secondaryStats.map((stat, index) => (
            <div key={stat.label} className="text-left">
              <p className="text-xs text-gray-600 font-medium mb-1">{stat.label}</p>
              <p className={`text-lg font-bold ${index === 0 ? 'text-brandblue' : 'text-amber-500'}`}>{stat.count}</p>
            </div>
          ))}
        </div>
      )}

      <span className="text-brandblue/40 group-hover:text-brandblue/70 text-xl transition-colors transform group-hover:-rotate-180 duration-300 self-end">▼</span>
    </button>
  )
}