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

export interface FunnelWidgetProps {
  /** Funnel steps data */
  steps: FunnelStepResult[];
  /** Funnel title */
  title?: string;
  /** Color for bars */
  color?: string;
  /** Loading state */
  loading?: boolean;
  /** Custom CSS class */
  className?: string;
}

export function FunnelWidget({
  steps,
  title,
  color = '#8884d8',
  loading = false,
  className,
}: FunnelWidgetProps) {
  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: '200px', backgroundColor: '#f5f5f5', borderRadius: '4px' }} />
      </div>
    );
  }

  const maxCount = steps.length > 0 ? Math.max(...steps.map((s) => s.count)) : 0;

  return (
    <div
      className={className}
      style={{
        padding: '20px',
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
      }}
    >
      {title && (
        <div
          style={{
            fontSize: '16px',
            fontWeight: 600,
            marginBottom: '16px',
            color: '#111827',
          }}
        >
          {title}
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
        {steps.map((step, index) => (
          <div key={step.stepNumber}>
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '4px',
              }}
            >
              <span style={{ fontSize: '14px', color: '#374151' }}>
                {index + 1}. {step.stepName}
              </span>
              <span style={{ fontSize: '14px', color: '#6b7280' }}>
                {step.count.toLocaleString()} ({step.conversionRate.toFixed(1)}%)
              </span>
            </div>
            <div
              style={{
                height: '24px',
                backgroundColor: '#f3f4f6',
                borderRadius: '4px',
                overflow: 'hidden',
              }}
            >
              <div
                style={{
                  width: maxCount > 0 ? `${(step.count / maxCount) * 100}%` : '0%',
                  height: '100%',
                  backgroundColor: color,
                  borderRadius: '4px',
                  transition: 'width 0.3s ease',
                }}
              />
            </div>
            {index < steps.length - 1 && step.dropoffRate > 0 && (
              <div
                style={{
                  fontSize: '12px',
                  color: '#ef4444',
                  marginTop: '4px',
                  textAlign: 'right',
                }}
              >
                -{step.dropoffRate.toFixed(1)}% dropoff
              </div>
            )}
          </div>
        ))}
      </div>
      {steps.length > 0 && (
        <div
          style={{
            marginTop: '16px',
            paddingTop: '16px',
            borderTop: '1px solid #e5e7eb',
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <span style={{ fontSize: '14px', fontWeight: 500, color: '#374151' }}>
            Overall Conversion
          </span>
          <span style={{ fontSize: '14px', fontWeight: 600, color: '#22c55e' }}>
            {steps.length > 0 && steps[0]
              ? ((steps[steps.length - 1]?.count ?? 0) / steps[0].count * 100).toFixed(1)
              : 0}%
          </span>
        </div>
      )}
    </div>
  );
}
