'use client';

import * as React from 'react';
import * as ProgressPrimitive from '@radix-ui/react-progress';

import { cn } from '../../shared/utils';

type ProgressVariant = 'default' | 'success' | 'info' | 'warning' | 'destructive';

const trackVariants: Record<ProgressVariant, string> = {
  default: 'bg-primary/20',
  success: 'bg-success/20',
  info: 'bg-info/20',
  warning: 'bg-warning/20',
  destructive: 'bg-destructive/20',
};

const indicatorVariants: Record<ProgressVariant, string> = {
  default: 'bg-primary',
  success: 'bg-success',
  info: 'bg-info',
  warning: 'bg-warning',
  destructive: 'bg-destructive',
};

/**
 * Numeric progress bar from 0 to 100.
 *
 * @description
 * Indicates deterministic task progress (file upload %, form completion steps, etc.).
 * Built on Radix UI Progress with smooth CSS transition.
 *
 * @ai-rules
 * 1. Control progress via the `value` prop (e.g., `value={66}`).
 * 2. Use `variant` to communicate semantic state: `success`, `info`, `warning`, `destructive`.
 * 3. For indeterminate / infinite loading, use `<Loader2 className="animate-spin" />` — not `<Progress>`.
 * 4. Available variants: `default`, `success`, `info`, `warning`, `destructive`.
 */
function Progress({
  className,
  value,
  variant = 'default',
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
  variant?: ProgressVariant;
}) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      aria-label={props['aria-label'] || 'Progresso'}
      className={cn(
        'relative h-2 w-full overflow-hidden rounded-full',
        trackVariants[variant],
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className={cn('h-full w-full flex-1 transition-all', indicatorVariants[variant])}
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  );
}

export { Progress };
export type { ProgressVariant };
