import React, { forwardRef } from 'react';
import { clsx } from 'clsx';
import { baseColors, statusColors } from '../../../styles/colors';

/**
 * ProgressBar component with global color system integration
 *
 * Supports both base color variants (with gradients) and status color variants (solid colors)
 * - Base variants: default, success, warning, danger, info (use gradients from color scales)
 * - Status variants: pending, inProgress, completed (use solid colors from statusColors)
 */
export interface ProgressBarProps {
  value: number;
  max?: number;
  size?: 'sm' | 'md' | 'lg';
  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info' | 'pending' | 'inProgress' | 'completed';
  showLabel?: boolean;
  label?: string;
  className?: string;
  animated?: boolean;
  customColor?: string;
}

const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(({
  value,
  max = 100,
  size = 'md',
  variant = 'default',
  showLabel = false,
  label,
  className,
  animated = false,
  customColor,
  ...props
}, ref) => {
  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);

  const sizeClasses = {
    sm: 'h-2',
    md: 'h-3',
    lg: 'h-4',
  };

  const getVariantStyle = (variant: string) => {
    // Map base color variants
    const baseColorMap = {
      default: baseColors.primary,
      success: baseColors.success,
      warning: baseColors.warning,
      danger: baseColors.error,
      info: baseColors.info,
    };

    // Map status color variants (these use single colors from statusColors)
    const statusColorMap = {
      pending: statusColors.pending.primary,
      inProgress: statusColors.inProgress.primary,
      completed: statusColors.completed.primary,
    };

    // Check if it's a base color variant (has color scales)
    if (variant in baseColorMap) {
      const colors = baseColorMap[variant as keyof typeof baseColorMap];
      return {
        background: `linear-gradient(to right, ${colors[400]}, ${colors[500]})`,
      };
    }

    // Check if it's a status color variant (single color)
    if (variant in statusColorMap) {
      const color = statusColorMap[variant as keyof typeof statusColorMap];
      return {
        backgroundColor: color,
      };
    }

    // Default fallback
    return {
      background: `linear-gradient(to right, ${baseColors.primary[400]}, ${baseColors.primary[500]})`,
    };
  };

  return (
    <div ref={ref} className={clsx('w-full', className)} {...props}>
      {(showLabel || label) && (
        <div className="flex justify-between items-center mb-1">
          <span className="text-sm font-medium text-[var(--text-primary)]">
            {label || `${value}/${max}`}
          </span>
          <span className="text-sm text-[var(--text-secondary)]">
            {Math.round(percentage)}%
          </span>
        </div>
      )}
      <div 
        className={clsx(
          'w-full bg-[var(--bg-quaternary)] rounded-full overflow-hidden',
          sizeClasses[size]
        )}
      >
        <div
          className={clsx(
            'h-full rounded-full transition-all duration-300 ease-out relative overflow-hidden',
            {
              'animate-pulse': animated && percentage < 100,
            }
          )}
          style={{
            width: `${percentage}%`,
            ...(customColor ? { backgroundColor: customColor } : getVariantStyle(variant))
          }}
        >
          {animated && percentage < 100 && (
            <div
              className="absolute inset-0 opacity-20 animate-pulse"
              style={{
                background: 'linear-gradient(to right, transparent, var(--text-inverse), transparent)'
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
});

ProgressBar.displayName = 'ProgressBar';

export default ProgressBar;