import { RefreshCw, Wifi, WifiOff, AlertCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

type ConnectionState = 'connecting' | 'connected' | 'disconnected' | 'error';

interface RealtimeConnectionStatusProps {
  connectionState: ConnectionState;
  onReconnect: () => void;
  className?: string;
}

export function RealtimeConnectionStatus({
  connectionState,
  onReconnect,
  className = '',
}: RealtimeConnectionStatusProps) {
  const getStatusConfig = () => {
    switch (connectionState) {
      case 'connected':
        return {
          icon: Wifi,
          color: 'text-green-500',
          label: 'Connected',
          description: 'Live updates active',
          showReconnect: false,
        };
      case 'connecting':
        return {
          icon: RefreshCw,
          color: 'text-yellow-500',
          label: 'Connecting',
          description: 'Establishing connection...',
          showReconnect: false,
          animate: 'animate-spin',
        };
      case 'error':
        return {
          icon: AlertCircle,
          color: 'text-red-500',
          label: 'Error',
          description: 'Connection failed. Retrying...',
          showReconnect: true,
        };
      case 'disconnected':
        return {
          icon: WifiOff,
          color: 'text-muted-foreground',
          label: 'Disconnected',
          description: 'Live updates unavailable',
          showReconnect: true,
        };
      default:
        return {
          icon: WifiOff,
          color: 'text-muted-foreground',
          label: 'Unknown',
          description: 'Connection status unknown',
          showReconnect: true,
        };
    }
  };

  const config = getStatusConfig();
  const Icon = config.icon;

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <div className="flex items-center gap-2">
              <Icon 
                className={`w-4 h-4 ${config.color} ${config.animate || ''}`} 
              />
              <span className="text-sm text-muted-foreground hidden sm:inline">
                {config.label}
              </span>
            </div>
          </TooltipTrigger>
          <TooltipContent>
            <p>{config.description}</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>

      {config.showReconnect && (
        <Button
          variant="ghost"
          size="sm"
          onClick={onReconnect}
          className="h-8 px-2"
        >
          <RefreshCw className="w-3 h-3 mr-1" />
          Reconnect
        </Button>
      )}
    </div>
  );
}