import { MessageCircle } from 'lucide-react';

interface DriverChatBubbleProps {
  unreadCount?: number;
  awaitingResponse?: boolean;
  onClick: () => void;
  className?: string;
}

export function DriverChatBubble({
  unreadCount = 0,
  awaitingResponse = false,
  onClick,
  className = ''
}: DriverChatBubbleProps) {
  const hasUnread = unreadCount > 0;

  // Determine icon color based on state
  const getIconColorClass = () => {
    if (awaitingResponse && !hasUnread) return 'text-orange-500';
    if (hasUnread) return 'text-primary';
    return 'text-muted-foreground hover:text-primary';
  };

  const getTitle = () => {
    if (awaitingResponse && !hasUnread) return 'Awaiting driver response - click to message';
    if (hasUnread) return `${unreadCount} unread message${unreadCount > 1 ? 's' : ''}`;
    return 'Send message';
  };

  // Subtle orange glow when awaiting response (no unread messages)
  const glowStyle = awaitingResponse && !hasUnread
    ? { boxShadow: '0 0 8px 2px rgba(249, 115, 22, 0.5)' }
    : {};

  return (
    <button
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      className={`relative inline-flex items-center justify-center p-1.5 rounded-full
        transition-all duration-200 hover:bg-primary/10
        ${getIconColorClass()}
        ${className}`}
      style={glowStyle}
      title={getTitle()}
    >
      <MessageCircle className="w-5 h-5" />

      {/* Unread count badge */}
      {hasUnread && (
        <span className="absolute -top-1 -right-1 flex items-center justify-center">
          <span className="absolute inline-flex h-4 w-4 rounded-full bg-primary/40 animate-ping" />
          <span className="relative inline-flex items-center justify-center h-4 w-4 rounded-full bg-primary text-[10px] font-bold text-white">
            {unreadCount > 9 ? '9+' : unreadCount}
          </span>
        </span>
      )}
    </button>
  );
}
