import React, { useMemo } from 'react';
import { Wifi, WifiOff, Clock, AlertCircle, Shield } from 'lucide-react';
import { Machine } from '../types';
import { ProtocolHelper, OSInfo } from '../utils/protocolHelper';

interface ConnectionStatusBadgeProps {
  machine: Machine;
  isConnected: boolean;
  connectionTime?: Date;
  protocol?: string;
  className?: string;
}

const ConnectionStatusBadge: React.FC<ConnectionStatusBadgeProps> = ({
  machine,
  isConnected,
  connectionTime,
  protocol,
  className = ''
}) => {
  const osInfo: OSInfo = useMemo(() => {
    return ProtocolHelper.parseOS(machine.os);
  }, [machine.os]);

  const getProtocolIcon = (proto?: string) => {
    if (!proto) return null;
    
    const protocolIcons: Record<string, string> = {
      rdp: '🖥️',
      vnc: '🖱️',
      ssh: '⌨️',
      telnet: '📡'
    };
    
    return protocolIcons[proto.toLowerCase()] || '🔗';
  };

  const formatConnectionTime = (time: Date) => {
    const now = new Date();
    const diff = Math.floor((now.getTime() - time.getTime()) / 1000);
    
    if (diff < 60) return `${diff}s`;
    if (diff < 3600) return `${Math.floor(diff / 60)}m`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
    return `${Math.floor(diff / 86400)}d`;
  };

  const getStatusConfig = () => {
    if (isConnected) {
      return {
        icon: <Wifi size={14} className="text-green-600" />,
        text: 'Connected',
        bgColor: 'bg-green-50',
        borderColor: 'border-green-200',
        textColor: 'text-green-800',
        animation: 'animate-pulse'
      };
    }

    switch (machine.status) {
      case 'running':
        return {
          icon: <WifiOff size={14} className="text-gray-500" />,
          text: 'Available',
          bgColor: 'bg-gray-50',
          borderColor: 'border-gray-200',
          textColor: 'text-gray-700'
        };
      case 'stopped':
        return {
          icon: <AlertCircle size={14} className="text-red-500" />,
          text: 'Offline',
          bgColor: 'bg-red-50',
          borderColor: 'border-red-200',
          textColor: 'text-red-700'
        };
      default:
        return {
          icon: <Clock size={14} className="text-yellow-500" />,
          text: 'Unknown',
          bgColor: 'bg-yellow-50',
          borderColor: 'border-yellow-200',
          textColor: 'text-yellow-700'
        };
    }
  };

  const statusConfig = getStatusConfig();
  const osIcon = osInfo.family === 'windows' ? '🖥️' : 
                 osInfo.family === 'linux' ? '🐧' : 
                 osInfo.family === 'macos' ? '🍎' : '💻';

  return (
    <div className={`inline-flex items-center gap-2 ${className}`}>
      {/* Main status badge */}
      <div
        className={`
          flex items-center gap-2 px-3 py-1.5 rounded-full border
          ${statusConfig.bgColor} ${statusConfig.borderColor} ${statusConfig.textColor}
          ${statusConfig.animation || ''}
          transition-all duration-200
        `}
      >
        {statusConfig.icon}
        <span className="text-xs font-medium">{statusConfig.text}</span>
        
        {isConnected && connectionTime && (
          <>
            <span className="text-gray-400">•</span>
            <span className="text-xs">{formatConnectionTime(connectionTime)}</span>
          </>
        )}
      </div>

      {/* Protocol indicator */}
      {protocol && isConnected && (
        <div className="flex items-center gap-1 px-2 py-1 bg-blue-50 border border-blue-200 rounded text-xs text-blue-700">
          <span>{getProtocolIcon(protocol)}</span>
          <span className="font-medium">{protocol.toUpperCase()}</span>
        </div>
      )}

      {/* OS indicator */}
      <div 
        className="flex items-center gap-1 px-2 py-1 bg-gray-100 border border-gray-200 rounded text-xs text-gray-600"
        title={machine.os}
      >
        <span>{osIcon}</span>
        <span className="hidden sm:inline capitalize">{osInfo.family}</span>
      </div>

      {/* Security indicator for secure protocols */}
      {protocol && ['ssh', 'rdp'].includes(protocol.toLowerCase()) && (
        <div 
          className="flex items-center px-2 py-1 bg-green-50 border border-green-200 rounded"
          title="Secure connection"
        >
          <Shield size={12} className="text-green-600" />
        </div>
      )}
    </div>
  );
};

export default ConnectionStatusBadge; 