/**
 * StreamingIndicator Component
 * Shows various loading and streaming states for the assistant
 */

import React from 'react';
import {
  Loader2,
  Bot,
  Brain,
  Sparkles,
  Zap,
  Search,
  BarChart3,
} from 'lucide-react';

type IndicatorVariant =
  | 'thinking'
  | 'analyzing'
  | 'generating'
  | 'searching'
  | 'loading'
  | 'typing';

interface StreamingIndicatorProps {
  variant?: IndicatorVariant;
  text?: string;
  compact?: boolean;
}

const VARIANT_CONFIG: Record<IndicatorVariant, {
  icon: React.ReactNode;
  text: string;
  color: string;
  bgColor: string;
}> = {
  thinking: {
    icon: <Brain className="w-4 h-4" />,
    text: 'Thinking...',
    color: 'text-purple-400',
    bgColor: 'bg-purple-500/20',
  },
  analyzing: {
    icon: <BarChart3 className="w-4 h-4" />,
    text: 'Analyzing market data...',
    color: 'text-blue-400',
    bgColor: 'bg-blue-500/20',
  },
  generating: {
    icon: <Sparkles className="w-4 h-4" />,
    text: 'Generating response...',
    color: 'text-yellow-400',
    bgColor: 'bg-yellow-500/20',
  },
  searching: {
    icon: <Search className="w-4 h-4" />,
    text: 'Searching...',
    color: 'text-cyan-400',
    bgColor: 'bg-cyan-500/20',
  },
  loading: {
    icon: <Loader2 className="w-4 h-4 animate-spin" />,
    text: 'Loading...',
    color: 'text-gray-400',
    bgColor: 'bg-gray-500/20',
  },
  typing: {
    icon: <Bot className="w-4 h-4" />,
    text: 'Assistant is typing...',
    color: 'text-green-400',
    bgColor: 'bg-green-500/20',
  },
};

const StreamingIndicator: React.FC<StreamingIndicatorProps> = ({
  variant = 'thinking',
  text,
  compact = false,
}) => {
  const config = VARIANT_CONFIG[variant];
  const displayText = text || config.text;

  if (compact) {
    return (
      <div className={`inline-flex items-center gap-1.5 px-2 py-1 rounded ${config.bgColor}`}>
        <div className={`${config.color} animate-pulse`}>
          {config.icon}
        </div>
        <span className={`text-xs ${config.color}`}>{displayText}</span>
      </div>
    );
  }

  return (
    <div className="flex items-start gap-3 p-4">
      {/* Avatar */}
      <div className={`flex-shrink-0 w-8 h-8 rounded-full ${config.bgColor} flex items-center justify-center`}>
        <Bot className={`w-4 h-4 ${config.color}`} />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2">
          <span className="text-sm font-medium text-white">Assistant</span>
          <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${config.bgColor}`}>
            <div className={`${config.color} animate-pulse`}>
              {config.icon}
            </div>
            <span className={`text-xs ${config.color}`}>{displayText}</span>
          </div>
        </div>

        {/* Animated Dots */}
        <div className="mt-2 flex items-center gap-1">
          <div
            className={`w-2 h-2 rounded-full ${config.bgColor} animate-bounce`}
            style={{ animationDelay: '0ms' }}
          />
          <div
            className={`w-2 h-2 rounded-full ${config.bgColor} animate-bounce`}
            style={{ animationDelay: '150ms' }}
          />
          <div
            className={`w-2 h-2 rounded-full ${config.bgColor} animate-bounce`}
            style={{ animationDelay: '300ms' }}
          />
        </div>
      </div>
    </div>
  );
};

// Typing Dots Animation Component
export const TypingDots: React.FC<{ className?: string }> = ({ className = '' }) => (
  <div className={`flex items-center gap-1 ${className}`}>
    {[0, 1, 2].map((i) => (
      <div
        key={i}
        className="w-1.5 h-1.5 rounded-full bg-gray-400 animate-bounce"
        style={{ animationDelay: `${i * 150}ms` }}
      />
    ))}
  </div>
);

// Pulse Animation Component
export const PulseIndicator: React.FC<{
  color?: string;
  size?: 'sm' | 'md' | 'lg';
}> = ({ color = 'bg-green-500', size = 'md' }) => {
  const sizes = {
    sm: 'w-2 h-2',
    md: 'w-3 h-3',
    lg: 'w-4 h-4',
  };

  return (
    <span className="relative flex">
      <span
        className={`animate-ping absolute inline-flex h-full w-full rounded-full ${color} opacity-75`}
      />
      <span className={`relative inline-flex rounded-full ${sizes[size]} ${color}`} />
    </span>
  );
};

// Processing Steps Component
interface ProcessingStep {
  id: string;
  label: string;
  status: 'pending' | 'active' | 'complete';
}

export const ProcessingSteps: React.FC<{
  steps: ProcessingStep[];
}> = ({ steps }) => (
  <div className="flex items-center gap-3 p-3 bg-gray-800/50 rounded-lg">
    {steps.map((step, index) => (
      <React.Fragment key={step.id}>
        <div className="flex items-center gap-2">
          <div
            className={`w-5 h-5 rounded-full flex items-center justify-center text-xs font-medium ${
              step.status === 'complete'
                ? 'bg-green-500 text-white'
                : step.status === 'active'
                ? 'bg-blue-500 text-white'
                : 'bg-gray-700 text-gray-400'
            }`}
          >
            {step.status === 'complete' ? (
              <Zap className="w-3 h-3" />
            ) : step.status === 'active' ? (
              <Loader2 className="w-3 h-3 animate-spin" />
            ) : (
              index + 1
            )}
          </div>
          <span
            className={`text-sm ${
              step.status === 'complete'
                ? 'text-green-400'
                : step.status === 'active'
                ? 'text-white'
                : 'text-gray-500'
            }`}
          >
            {step.label}
          </span>
        </div>
        {index < steps.length - 1 && (
          <div
            className={`flex-1 h-px ${
              step.status === 'complete' ? 'bg-green-500' : 'bg-gray-700'
            }`}
          />
        )}
      </React.Fragment>
    ))}
  </div>
);

export default StreamingIndicator;
