import { forwardRef } from 'react';
import { clsx } from 'clsx';
import { LucideIcon } from 'lucide-react';
import { Card } from '../Card';

export type StatsCardVariant = 'default' | 'success' | 'info' | 'warning' | 'error' | 'purple';
export type StatsCardSize = 'sm' | 'md' | 'lg';

export interface StatsCardProps {
  title: string;
  value: string | number;
  icon?: LucideIcon;
  variant?: StatsCardVariant;
  size?: StatsCardSize;
  trend?: {
    value: number;
    label?: string;
    direction: 'up' | 'down' | 'neutral';
  };
  subtitle?: string;
  loading?: boolean;
  className?: string;
  formatValue?: (value: string | number) => string;
  onClick?: () => void;
}

const StatsCard = forwardRef<HTMLDivElement, StatsCardProps>(({
  title,
  value,
  icon: Icon,
  variant = 'default',
  size = 'md',
  trend,
  subtitle,
  loading = false,
  className,
  formatValue,
  onClick,
  ...props
}, ref) => {
  const formattedValue = formatValue ? formatValue(value) : value;

  const variantStyles = {
    default: {
      iconColor: 'var(--text-tertiary)',
      valueColor: 'var(--text-primary)',
      iconBg: 'var(--bg-tertiary)',
    },
    success: {
      iconColor: 'var(--color-success)',
      valueColor: 'var(--color-success)',
      iconBg: 'var(--color-success-50)',
    },
    info: {
      iconColor: 'var(--color-info)',
      valueColor: 'var(--color-info)',
      iconBg: 'var(--color-info-50)',
    },
    warning: {
      iconColor: 'var(--color-warning)',
      valueColor: 'var(--color-warning)',
      iconBg: 'var(--color-warning-50)',
    },
    error: {
      iconColor: 'var(--color-error)',
      valueColor: 'var(--color-error)',
      iconBg: 'var(--color-error-50)',
    },
    purple: {
      iconColor: '#a78bfa',
      valueColor: '#a78bfa',
      iconBg: 'rgba(167, 139, 250, 0.1)',
    },
  };

  const sizeStyles = {
    sm: {
      padding: 'p-4',
      iconSize: 20,
      valueSize: 'text-2xl',
      titleSize: 'text-sm',
      iconPadding: 'p-2',
    },
    md: {
      padding: 'p-6',
      iconSize: 24,
      valueSize: 'text-3xl',
      titleSize: 'text-sm',
      iconPadding: 'p-2.5',
    },
    lg: {
      padding: 'p-8',
      iconSize: 28,
      valueSize: 'text-4xl',
      titleSize: 'text-base',
      iconPadding: 'p-3',
    },
  };

  const currentVariant = variantStyles[variant];
  const currentSize = sizeStyles[size];
  const isInteractive = !!onClick;

  const cardClasses = clsx(
    {
      'animate-pulse': loading,
    },
    className
  );

  const iconContainerClasses = clsx(
    'rounded-xl flex items-center justify-center',
    currentSize.iconPadding
  );

  const iconContainerStyle = {
    backgroundColor: currentVariant.iconBg,
  };

  if (loading) {
    return (
      <Card
        padding={size}
        interactive={isInteractive}
        className={cardClasses}
        ref={ref}
        {...props}
      >
        <div className="flex items-start justify-between">
          <div className="flex-1 space-y-4">
            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20"></div>
            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
            {subtitle && <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>}
          </div>
          <div 
            className="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-xl"
          ></div>
        </div>
      </Card>
    );
  }

  return (
    <Card
      padding={size}
      interactive={isInteractive}
      onClick={onClick}
      className={cardClasses}
      ref={ref}
      {...props}
    >
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          <h3 
            className={clsx('font-medium mb-2 leading-tight', currentSize.titleSize)}
            style={{ color: 'var(--text-secondary)' }}
          >
            {title}
          </h3>
          
          <div className="flex items-baseline gap-2 mb-1">
            <span 
              className={clsx('font-bold leading-none', currentSize.valueSize)}
              style={{ color: currentVariant.valueColor }}
            >
              {formattedValue}
            </span>
            
            {trend && (
              <span 
                className={clsx(
                  'text-xs font-medium px-1.5 py-0.5 rounded-full',
                  {
                    'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400': trend.direction === 'up',
                    'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400': trend.direction === 'down',
                    'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': trend.direction === 'neutral',
                  }
                )}
              >
                {trend.direction === 'up' && '+'}
                {trend.value}
                {trend.label && ` ${trend.label}`}
              </span>
            )}
          </div>
          
          {subtitle && (
            <p 
              className="text-xs leading-relaxed"
              style={{ color: 'var(--text-tertiary)' }}
            >
              {subtitle}
            </p>
          )}
        </div>

        {Icon && (
          <div 
            className={iconContainerClasses}
            style={iconContainerStyle}
          >
            <Icon 
              size={currentSize.iconSize}
              style={{ color: currentVariant.iconColor }}
            />
          </div>
        )}
      </div>
    </Card>
  );
});

StatsCard.displayName = 'StatsCard';

export default StatsCard;