import React from 'react';
import { CollaborationUser } from '../client/useCollaboration';

interface UserPresenceProps {
  users: CollaborationUser[];
  maxDisplay?: number;
  showCursors?: boolean;
  className?: string;
}

/**
 * User Presence Component
 * Displays active users with avatars and status indicators
 */
export const UserPresence: React.FC<UserPresenceProps> = ({
  users,
  maxDisplay = 5,
  showCursors = true,
  className = ''
}) => {
  const visibleUsers = users.slice(0, maxDisplay);
  const hiddenCount = Math.max(0, users.length - maxDisplay);

  const getInitials = (name: string) => {
    return name
      .split(' ')
      .map(word => word[0])
      .join('')
      .toUpperCase()
      .slice(0, 2);
  };

  const getUserStatusColor = (user: CollaborationUser) => {
    // Use user's color or generate one from their ID
    if (user.color) return user.color;
    
    const colors = [
      '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', 
      '#FFEAA7', '#DDA0DD', '#98D8C8', '#FFD93D'
    ];
    const index = user.id.charCodeAt(0) % colors.length;
    return colors[index];
  };

  return (
    <div className={`user-presence ${className}`}>
      <div className="user-presence__container">
        {visibleUsers.map((user) => (
          <div
            key={user.id}
            className="user-presence__item"
            title={`${user.name}${user.email ? ` (${user.email})` : ''}`}
          >
            <div 
              className="user-presence__avatar"
              style={{ 
                backgroundColor: getUserStatusColor(user),
                borderColor: getUserStatusColor(user)
              }}
            >
              {user.avatar ? (
                <img 
                  src={user.avatar} 
                  alt={user.name}
                  className="user-presence__avatar-image"
                />
              ) : (
                <span className="user-presence__initials">
                  {getInitials(user.name)}
                </span>
              )}
              
              {/* Typing indicator */}
              {showCursors && user.cursor && (
                <div className="user-presence__typing-indicator">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              )}
            </div>
            
            <span className="user-presence__name">
              {user.name}
            </span>
          </div>
        ))}
        
        {hiddenCount > 0 && (
          <div className="user-presence__more">
            <div className="user-presence__more-count">
              +{hiddenCount}
            </div>
          </div>
        )}
      </div>
      
      <style jsx>{`
        .user-presence {
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }
        
        .user-presence__container {
          display: flex;
          align-items: center;
          gap: -8px;
        }
        
        .user-presence__item {
          position: relative;
          display: flex;
          align-items: center;
          z-index: 1;
          transition: transform 0.2s ease;
        }
        
        .user-presence__item:hover {
          transform: translateY(-2px);
          z-index: 10;
        }
        
        .user-presence__avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #e0e0e0;
          border: 2px solid white;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          position: relative;
          overflow: hidden;
        }
        
        .user-presence__avatar-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .user-presence__initials {
          font-size: 12px;
          font-weight: bold;
          color: white;
          user-select: none;
        }
        
        .user-presence__name {
          position: absolute;
          bottom: -20px;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(0, 0, 0, 0.8);
          color: white;
          padding: 2px 6px;
          border-radius: 3px;
          font-size: 11px;
          white-space: nowrap;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.2s ease;
        }
        
        .user-presence__item:hover .user-presence__name {
          opacity: 1;
        }
        
        .user-presence__typing-indicator {
          position: absolute;
          bottom: -2px;
          right: -2px;
          background: white;
          border-radius: 50%;
          padding: 2px;
          display: flex;
          gap: 2px;
        }
        
        .user-presence__typing-indicator span {
          width: 3px;
          height: 3px;
          background: #4ECDC4;
          border-radius: 50%;
          animation: typing 1.4s infinite;
        }
        
        .user-presence__typing-indicator span:nth-child(2) {
          animation-delay: 0.2s;
        }
        
        .user-presence__typing-indicator span:nth-child(3) {
          animation-delay: 0.4s;
        }
        
        @keyframes typing {
          0%, 60%, 100% {
            opacity: 0.3;
            transform: scale(0.8);
          }
          30% {
            opacity: 1;
            transform: scale(1);
          }
        }
        
        .user-presence__more {
          margin-left: 8px;
        }
        
        .user-presence__more-count {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-color: #f0f0f0;
          border: 2px solid white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          font-weight: bold;
          color: #666;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      `}</style>
    </div>
  );
};