Real-Time Messaging

// src/contexts/MessageProvider.tsx:62-89
export function MessageProvider({ children }: { children: ReactNode }) {
  const { user } = useAuth();
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [currentConversation, setCurrentConversation] = useState<Conversation | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  const currentUser = useMemo<MessageUser | null>(() => {
    if (!user) return null;
    return {
      id: user.id,
      name: user.user_metadata?.full_name || user.user_metadata?.name || user.email?.split('@')[0] || 'User',
      email: user.email || undefined,
      avatarUrl: user.user_metadata?.avatar_url,
      role: user.role || 'client',
      isOnline: true
    };
  }, [user]);
  
  // ... sendMessage, createConversation, etc.
}

// src/contexts/MessageProvider.tsx:100-136
const mockConversations: Conversation[] = [
  createConversation(
    '1',
    [
      currentUser,
      {
        id: 'user2',
        name: 'María González',
        email: '[email protected]',
        role: 'lawyer',
        isOnline: true
      }
    ],
    false
  ),
  createConversation(
    '2',
    [
      currentUser,
      {
        id: 'user3a',
        name: 'Ana López',
        email: '[email protected]',
        role: 'lawyer',
        isOnline: false
      },
      {
        id: 'user3b',
        name: 'Carlos Mendez',
        email: '[email protected]',
        role: 'lawyer',
        isOnline: true
      }
    ],
    true,
    'Equipo Legal'
  )
];

// src/components/messages/ChatWindow.tsx:12-82
export function ChatWindow({ conversationId }: ChatWindowProps) {
  const { messages, isLoading, currentConversation, fetchMessages } = useMessages();
  const { user } = useAuth();
  
  // Fetch messages when conversationId changes
  useEffect(() => {
    if (conversationId) {
      fetchMessages(conversationId);
    }
  }, [conversationId, fetchMessages]);
  
  const conversationMessages = messages.filter(
    message => message.conversationId === conversationId
  );
  
  return (
    <div className="flex flex-col h-full">
      {/* Messages Container */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {conversationMessages.map((message) => (
          <div 
            key={message.id} 
            className={`flex ${message.senderId === user?.id ? 'justify-end' : 'justify-start'}`}
          >
            <div 
              className={`max-w-[80%] rounded-lg px-4 py-2 ${
                message.senderId === user?.id
                  ? 'bg-primary text-primary-foreground rounded-br-none' 
                  : 'bg-muted rounded-bl-none'
              }`}
            >
              <p className="break-words">{message.content}</p>
              <p className="text-xs mt-1 text-right">
                {formatDistanceToNow(new Date(message.timestamp), { 
                  addSuffix: true, 
                  locale: es 
                })}
              </p>
            </div>
          </div>
        ))}
      </div>
      
      {/* Message Input */}
      <div className="border-t p-4 bg-background">
        <MessageInput conversationId={conversationId} />
      </div>
    </div>
  );
}

// src/components/messages/MessageInput.tsx:10-61
export function MessageInput({ conversationId }: MessageInputProps) {
  const [message, setMessage] = useState('');
  const [isSending, setIsSending] = useState(false);
  const { sendMessage } = useMessages();
  
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const msg = message.trim();
    if (!msg || isSending) return;
    
    setIsSending(true);
    try {
      await sendMessage({
        conversationId,
        content: msg,
      });
      setMessage('');
    } catch (error) {
      console.error('Error sending message:', error);
    } finally {
      setIsSending(false);
    }
  };
  
  return (
    <form onSubmit={handleSubmit} className="flex gap-2 w-full">
      <Input
        type="text"
        placeholder="Escribe un mensaje..."
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        disabled={isSending}
      />
      <Button 
        type="submit" 
        disabled={!message.trim() || isSending}
      >
        {isSending ? 'Enviando...' : 'Enviar'}
      </Button>
    </form>
  );
}

// Message status type definition
type MessageStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';

interface Message {
  id: string;
  content: string;
  senderId: string;
  conversationId: string;
  status: MessageStatus;
  timestamp: Date;
  attachments?: Attachment[];
}

// src/contexts/MessageProvider.tsx:230-303
const sendMessage = useCallback(async (payload: Omit<SendMessagePayload, 'senderId'>) => {
  if (!currentUser) throw new Error('User not authenticated');
  
  const conversation = conversations.find(c => c.id === payload.conversationId);
  if (!conversation) throw new Error('Conversation not found');
  
  const lawyer = conversation.participants.find(p => p.role === 'lawyer');
  if (!lawyer) throw new Error('Lawyer not found in conversation');
  
  // Check if it's the first message from this user
  const isFirstMessage = await isFirstMessageInConversation(payload.conversationId, currentUser.id);
  
  // If not the first message, check if payment is required
  if (!isFirstMessage) {
    const contactFee = await getLawyerContactFee(lawyer.id);
    
    if (contactFee > 0) {
      // Check if payment is already made for this conversation
      const { data: payment, error } = await supabase
        .from('payments')
        .select('id, status')
        .eq('conversation_id', payload.conversationId)
        .eq('user_id', currentUser.id)
        .eq('type', 'contact_fee')
        .single();
      
      if (error || !payment || payment.status !== 'succeeded') {
        // Redirect to payment page
        window.location.href = `/checkout?type=contact_fee&conversation_id=${payload.conversationId}&amount=${contactFee}&lawyer_id=${lawyer.id}`;
        return;
      }
    }
  }
  
  // ... continue with sending message
}, [currentUser]);

// Pseudocode for real-time subscription
const channel = supabase
  .channel('messages')
  .on(
    'postgres_changes',
    {
      event: 'INSERT',
      schema: 'public',
      table: 'messages',
      filter: `conversation_id=eq.${conversationId}`
    },
    (payload) => {
      setMessages(prev => [...prev, payload.new]);
    }
  )
  .subscribe();

// src/contexts/MessageProvider.tsx:318-332
// Update conversation's last message and timestamp
setConversations(prev => 
  prev.map(conv => 
    conv.id === payload.conversationId
      ? { 
          ...conv, 
          lastMessage: newMessage,
          updatedAt: new Date(),
          // Increment unread count for other participants
          unreadCount: currentConversationIdRef.current === payload.conversationId 
            ? 0 
            : conv.unreadCount + 1
        }
      : conv
  )
);

// src/contexts/MessageProvider.tsx:464-472
const markAsRead = useCallback((conversationId: string) => {
  setConversations(prev => 
    prev.map(conv => 
      conv.id === conversationId 
        ? { ...conv, unreadCount: 0 } 
        : conv
    )
  );
}, []);

// src/contexts/MessageProvider.tsx:16-48
interface Conversation {
  id: string;
  participants: MessageUser[];
  unreadCount: number;
  isGroup: boolean;
  groupName?: string;
  createdAt: Date;
  updatedAt: Date;
  lastMessage?: Message;
}

const createConversation = (
  id: string,
  participants: MessageUser[],
  isGroup: boolean = false,
  groupName?: string
): Conversation => ({
  id,
  participants,
  unreadCount: 0,
  isGroup,
  groupName,
  createdAt: new Date(),
  updatedAt: new Date(),
  lastMessage: undefined
});