import { cn } from '@/lib/cn';

export function Progress({ value, className }: { value: number; className?: string }) {
  return (
    <div className={cn('h-1.5 w-full bg-ink-100 rounded-full overflow-hidden', className)}>
      <div
        // Longer transition + ease-out so the bar GLIDES between discrete
        // events instead of snapping. Engine steps (build/upload) happen
        // every few seconds; 700ms feels alive without lagging behind reality.
        className="h-full bg-brand-500 rounded-full transition-[width] duration-700 ease-out"
        style={{ width: `${Math.max(0, Math.min(100, value))}%` }}
      />
    </div>
  );
}

export function Ring({
  value,
  size = 96,
  stroke = 8,
  label,
  tone = 'light',
}: {
  value: number;
  size?: number;
  stroke?: number;
  label?: string;
  tone?: 'light' | 'dark';
}) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const offset = c - (value / 100) * c;
  const trackColor    = tone === 'dark' ? 'rgba(255,255,255,0.12)' : '#eef0f2';
  const progressColor = tone === 'dark' ? '#1dd1a1'                 : '#1dd1a1';
  const valueColor    = tone === 'dark' ? 'text-white'              : 'text-ink-900';
  const labelColor    = tone === 'dark' ? 'text-white/60'           : 'text-ink-500';
  return (
    <div className="relative inline-flex items-center justify-center">
      <svg width={size} height={size} className="-rotate-90">
        <circle cx={size / 2} cy={size / 2} r={r} stroke={trackColor} strokeWidth={stroke} fill="none" />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          stroke={progressColor}
          strokeWidth={stroke}
          strokeLinecap="round"
          fill="none"
          strokeDasharray={c}
          strokeDashoffset={offset}
          className="transition-all"
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className={'text-lg font-semibold ' + valueColor}>{Math.round(value)}%</span>
        {label && <span className={'text-[10px] ' + labelColor}>{label}</span>}
      </div>
    </div>
  );
}
