import type { MetricWithComparison } from '../types';

export interface MetricsCardProps {
  /** Card title */
  title: string;
  /** Main value to display */
  value: number | string;
  /** Optional comparison data */
  comparison?: MetricWithComparison;
  /** Format function for the value */
  formatter?: (value: number | string) => string;
  /** Icon component or element */
  icon?: React.ReactNode;
  /** Loading state */
  loading?: boolean;
  /** Custom CSS class */
  className?: string;
}

const defaultFormatter = (value: number | string): string => {
  if (typeof value === 'string') return value;
  if (value >= 1000000) {
    return `${(value / 1000000).toFixed(1)}M`;
  }
  if (value >= 1000) {
    return `${(value / 1000).toFixed(1)}K`;
  }
  return value.toLocaleString();
};

const getTrendColor = (trend: 'up' | 'down' | 'stable'): string => {
  switch (trend) {
    case 'up':
      return '#22c55e';
    case 'down':
      return '#ef4444';
    default:
      return '#6b7280';
  }
};

const getTrendIcon = (trend: 'up' | 'down' | 'stable'): string => {
  switch (trend) {
    case 'up':
      return '↑';
    case 'down':
      return '↓';
    default:
      return '→';
  }
};

export function MetricsCard({
  title,
  value,
  comparison,
  formatter = defaultFormatter,
  icon,
  loading = false,
  className,
}: MetricsCardProps) {
  if (loading) {
    return (
      <div
        className={className}
        style={{
          padding: '20px',
          backgroundColor: '#fff',
          borderRadius: '8px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        }}
      >
        <div style={{ height: '80px', backgroundColor: '#f5f5f5', borderRadius: '4px' }} />
      </div>
    );
  }

  return (
    <div
      className={className}
      style={{
        padding: '20px',
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
        }}
      >
        <div>
          <div
            style={{
              fontSize: '14px',
              color: '#6b7280',
              marginBottom: '8px',
              fontWeight: 500,
            }}
          >
            {title}
          </div>
          <div
            style={{
              fontSize: '28px',
              fontWeight: 600,
              color: '#111827',
            }}
          >
            {formatter(value)}
          </div>
          {comparison && (
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '4px',
                marginTop: '8px',
                fontSize: '14px',
              }}
            >
              <span style={{ color: getTrendColor(comparison.trend) }}>
                {getTrendIcon(comparison.trend)} {Math.abs(comparison.changePercent).toFixed(1)}%
              </span>
              <span style={{ color: '#9ca3af' }}>vs previous period</span>
            </div>
          )}
        </div>
        {icon && (
          <div
            style={{
              padding: '12px',
              backgroundColor: '#f3f4f6',
              borderRadius: '8px',
            }}
          >
            {icon}
          </div>
        )}
      </div>
    </div>
  );
}
