/**
 * WebSocket connection status indicator.
 * Shows real-time connection state with animated pulse.
 */

import { Wifi, WifiOff, RefreshCw } from 'lucide-react';
import { useWebSocket } from '../contexts/WebSocketContext';
import { cn } from '../lib/utils';

interface ConnectionStatusProps {
  showLabel?: boolean;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export default function ConnectionStatus({
  showLabel = true,
  size = 'sm',
  className,
}: ConnectionStatusProps) {
  const { status, isConnected, connect } = useWebSocket();

  const sizeClasses = {
    sm: 'text-xs gap-1.5',
    md: 'text-sm gap-2',
    lg: 'text-base gap-2',
  };

  const iconSizes = {
    sm: 12,
    md: 14,
    lg: 16,
  };

  const dotSizes = {
    sm: 'w-1.5 h-1.5',
    md: 'w-2 h-2',
    lg: 'w-2.5 h-2.5',
  };

  const statusConfig = {
    connected: {
      icon: Wifi,
      label: 'Live',
      color: 'text-green-400',
      dotColor: 'bg-green-400',
      bgColor: 'bg-green-400/10',
      borderColor: 'border-green-400/30',
      pulse: true,
    },
    connecting: {
      icon: RefreshCw,
      label: 'Connecting',
      color: 'text-yellow-400',
      dotColor: 'bg-yellow-400',
      bgColor: 'bg-yellow-400/10',
      borderColor: 'border-yellow-400/30',
      pulse: false,
      spin: true,
    },
    reconnecting: {
      icon: RefreshCw,
      label: 'Reconnecting',
      color: 'text-yellow-400',
      dotColor: 'bg-yellow-400',
      bgColor: 'bg-yellow-400/10',
      borderColor: 'border-yellow-400/30',
      pulse: false,
      spin: true,
    },
    disconnected: {
      icon: WifiOff,
      label: 'Offline',
      color: 'text-red-400',
      dotColor: 'bg-red-400',
      bgColor: 'bg-red-400/10',
      borderColor: 'border-red-400/30',
      pulse: false,
    },
  };

  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <button
      onClick={() => !isConnected && connect()}
      disabled={status === 'connecting' || status === 'reconnecting'}
      className={cn(
        'inline-flex items-center rounded-full px-2 py-0.5 border transition-all',
        config.bgColor,
        config.borderColor,
        config.color,
        sizeClasses[size],
        !isConnected && 'cursor-pointer hover:opacity-80',
        (status === 'connecting' || status === 'reconnecting') && 'cursor-wait',
        className
      )}
      title={isConnected ? 'Real-time updates active' : 'Click to reconnect'}
      aria-label={`Connection status: ${config.label}. ${isConnected ? 'Real-time updates are active.' : 'Click to reconnect.'}`}
      aria-live="polite"
    >
      {/* Status dot with pulse */}
      <span className="relative flex">
        <span className={cn('rounded-full', dotSizes[size], config.dotColor)} />
        {config.pulse && (
          <span
            className={cn(
              'absolute inset-0 rounded-full animate-ping',
              config.dotColor,
              'opacity-75'
            )}
          />
        )}
      </span>

      {showLabel && (
        <span className="font-medium">{config.label}</span>
      )}

      {(config as { spin?: boolean }).spin && (
        <Icon size={iconSizes[size]} className="animate-spin" />
      )}
    </button>
  );
}

/**
 * Compact dot-only indicator for tight spaces.
 */
export function ConnectionDot({ className }: { className?: string }) {
  const { status } = useWebSocket();

  const colors = {
    connected: 'bg-green-400',
    connecting: 'bg-yellow-400',
    reconnecting: 'bg-yellow-400',
    disconnected: 'bg-red-400',
  };

  return (
    <span className={cn('relative flex', className)}>
      <span className={cn('w-2 h-2 rounded-full', colors[status])} />
      {status === 'connected' && (
        <span
          className={cn(
            'absolute inset-0 w-2 h-2 rounded-full animate-ping',
            colors[status],
            'opacity-75'
          )}
        />
      )}
    </span>
  );
}
