'use client'

import type { ComponentRenderProps } from '@json-render/react'

const barColors: Record<string, string> = {
  green: 'from-emerald-500 to-emerald-600',
  blue: 'from-blue-500 to-blue-600',
  purple: 'from-purple-500 to-purple-600',
  yellow: 'from-amber-400 to-amber-500',
  red: 'from-red-500 to-red-600',
}

export function ProgressBar({ element }: ComponentRenderProps) {
  const { label, value, max = 100, color = 'blue', showPercent = true, benchmark, benchmarkLabel } = element.props as {
    label: string; value: number; max?: number; color?: string
    showPercent?: boolean; benchmark?: number; benchmarkLabel?: string
  }
  const pct = Math.min(100, (value / max) * 100)

  return (
    <div className="mb-5">
      <div className="flex justify-between items-center mb-2">
        <span className="text-sm font-medium text-gray-700">{label}</span>
        <span className="text-sm text-gray-500">
          <span className="font-semibold text-gray-900">{value.toLocaleString()}</span>
          {max !== 100 && ` / ${max.toLocaleString()}`}
          {showPercent && ` (${pct.toFixed(1)}%)`}
        </span>
      </div>
      <div className="relative h-6 bg-gray-200 rounded-xl overflow-hidden">
        <div
          className={`h-full rounded-xl bg-gradient-to-r ${barColors[color] || barColors.blue} transition-all duration-500`}
          style={{ width: `${pct}%` }}
        />
        {benchmark !== undefined && (
          <>
            <div className="absolute top-0 h-full w-0.5 bg-gray-900/50" style={{ left: `${(benchmark / max) * 100}%` }} />
            {benchmarkLabel && (
              <span className="absolute -top-4 text-[10px] text-gray-500 -translate-x-1/2" style={{ left: `${(benchmark / max) * 100}%` }}>
                {benchmarkLabel}
              </span>
            )}
          </>
        )}
      </div>
    </div>
  )
}
