import React, { useState, useEffect, useRef, useCallback } from 'react';
import { MessageSquare, Plus, Search, Trash2, ArrowLeft } from 'lucide-react';
import { useSession } from 'next-auth/react';
import { useCsrfToken } from '@/context/CsrfContext';
import { useNotification } from '@/context/NotificationContext';
import { useChatConnection } from '@/context/ChatConnectionContext';
import { useEstablishment } from '@/context/EstablishmentContext';
import { format, isSameMinute } from 'date-fns';
import { fr } from 'date-fns/locale';
import ConnectionStatus from './ConnectionStatus';
import ConversationItem from './ConversationItem';
import MessageBubble from './MessageBubble';
import MessageInput from './MessageInput';
import TypingIndicator from './TypingIndicator';
import logger from '@/utils/logger';
import { getGravatarUrl } from '@/utils/gravatar';
import Popup from '@/components/Popup';
import {
  fetchConversations,
  fetchMessages,
  searchMessagerieRecipients,
  createConversation,
  deleteConversation,
} from '@/app/actions/messagerieAction';

// Fonction pour grouper les messages consécutifs du même utilisateur dans la même minute
const groupMessages = (messages) => {
  if (!messages || messages.length === 0) return [];

  const groups = [];
  let currentGroup = null;

  messages.forEach((message, index) => {
    const messageTime = new Date(message.created_at || message.date_envoi);
    const senderId =
      message.sender?.id || message.sender_id || message.emetteur;
    const senderInfo = message.sender || null;

    // Vérifier si ce message peut être groupé avec le précédent
    const canGroup =
      currentGroup &&
      currentGroup.senderId === senderId &&
      isSameMinute(new Date(currentGroup.lastMessageTime), messageTime);

    if (canGroup) {
      // Ajouter au groupe existant
      currentGroup.messages.push(message);
      currentGroup.lastMessageTime = message.created_at || message.date_envoi;
    } else {
      // Créer un nouveau groupe
      currentGroup = {
        senderId,
        senderInfo,
        messages: [message],
        firstMessageTime: message.created_at || message.date_envoi,
        lastMessageTime: message.created_at || message.date_envoi,
        isFirstInGroup: true,
      };
      groups.push(currentGroup);
    }
  });

  return groups;
};

const InstantChat = ({ userProfileId, establishmentId }) => {
  // Hook de notification
  const { showNotification } = useNotification();

  // Hook pour récupérer l'utilisateur connecté
  const { user } = useEstablishment();

  // Hook de connexion au chat
  const {
    isConnected,
    connectionStatus,
    connectToChat,
    sendMessage: sendChatMessage,
    getWebSocket,
    addMessageCallback, // Ajouter le callback
    userPresences, // Récupérer les présences du contexte
  } = useChatConnection();

  // États pour les conversations et messages
  const [conversations, setConversations] = useState([]);
  const csrfToken = useCsrfToken();
  const [selectedConversation, setSelectedConversation] = useState(null);
  const [messages, setMessages] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const [showSearch, setShowSearch] = useState(false);

  // États pour l'interface utilisateur
  const [typingUsers, setTypingUsers] = useState([]);
  const [unreadCounts, setUnreadCounts] = useState({});
  const [loading, setLoading] = useState(false);
  const [processedMessages, setProcessedMessages] = useState(new Set()); // Éviter les doublons

  // États pour la confirmation de suppression
  const [confirmDeleteVisible, setConfirmDeleteVisible] = useState(false);
  const [conversationToDelete, setConversationToDelete] = useState(null);
  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(true);

  // Refs
  const messagesEndRef = useRef(null);
  const messagesContainerRef = useRef(null);

  // Fonction pour faire défiler vers le bas
  const scrollToBottom = useCallback(() => {
    if (messagesEndRef.current) {
      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, []);

  // Gestionnaire des messages WebSocket
  const handleWebSocketMessage = useCallback(
    (data) => {
      // Debug : vérifier userProfileId à chaque message
      logger.debug(' handleWebSocketMessage appelé:', {
        messageType: data.type,
        currentUserProfileId: userProfileId,
        userProfileIdType: typeof userProfileId,
      });

      switch (data.type) {
        case 'conversations_list':
          setConversations(data.conversations || []);
          break;

        case 'new_conversation':
          // Nouvelle conversation créée
          setConversations((prev) => {
            const existingIndex = prev.findIndex(
              (conv) =>
                conv.conversation_id === data.conversation.conversation_id ||
                conv.id === data.conversation.id
            );
            if (existingIndex >= 0) {
              // Mettre à jour la conversation existante
              const updated = [...prev];
              updated[existingIndex] = data.conversation;
              return updated;
            } else {
              // Ajouter la nouvelle conversation
              return [data.conversation, ...prev];
            }
          });

          // Lorsqu'une nouvelle conversation est reçue,
          // les présences des participants devraient aussi être diffusées par le backend
          break;

        case 'new_message':
          const newMessage = data.message;

          logger.debug(' NOUVEAU MESSAGE WebSocket reçu:', {
            senderId: newMessage.sender?.id,
            content: newMessage.content?.substring(0, 50),
            conversationId:
              newMessage.conversation || newMessage.conversation_id,
            timestamp: new Date().toISOString(),
          });

          // Créer un identifiant unique pour le message
          const conversationId =
            newMessage.conversation || newMessage.conversation_id;
          const messageId =
            newMessage.id ||
            newMessage.message_id ||
            `${conversationId}_${newMessage.sender?.id}_${newMessage.content}_${newMessage.created_at}`;

          // Vérifier si ce message a déjà été traité
          if (processedMessages.has(messageId)) {
            logger.debug(' Message déjà traité, ignoré:', {
              messageId,
              processedCount: processedMessages.size,
            });
            break;
          }

          logger.debug(' ID unique généré pour le message:', messageId);

          // Marquer le message comme traité
          setProcessedMessages((prev) => {
            const newSet = new Set([...prev, messageId]);
            // Nettoyage automatique si on dépasse 150 messages traités
            if (newSet.size > 150) {
              // Garder seulement les 100 plus récents (conversion en array, slice, puis reconversion)
              const entries = Array.from(newSet);
              return new Set(entries.slice(-100));
            }
            return newSet;
          });

          // Debug: vérifier le type de message reçu
          logger.debug(' Message reçu:', {
            content: newMessage.content?.substring(0, 50),
            message_type: newMessage.message_type,
            sender_id: newMessage.sender_id,
            userProfileId,
          });

          // Vérifier si le message appartient à la conversation sélectionnée
          const messageConversationId =
            newMessage.conversation_id || newMessage.conversation;
          const selectedConversationId =
            selectedConversation?.id || selectedConversation?.conversation_id;

          if (messageConversationId === selectedConversationId) {
            setMessages((prev) => {
              // Vérifier si le message n'existe pas déjà
              const messageExists = prev.some(
                (msg) =>
                  (msg.id && msg.id === newMessage.id) ||
                  (msg.message_id && msg.message_id === newMessage.message_id)
              );

              if (!messageExists) {
                return [...prev, newMessage];
              }
              return prev;
            });
          }

          // Mettre à jour la liste des conversations
          setConversations((prev) =>
            prev.map((conv) => {
              // Utiliser le même pattern que partout ailleurs dans le code
              const convId = conv.id;
              const messageConvId = newMessage.conversation;

              if (convId === messageConvId) {
                // Vérifier si le message doit incrémenter le compteur non lu
                const isFromCurrentUser =
                  String(newMessage.sender.id) === String(userProfileId);

                // Debug détaillé pour comprendre le problème d'incrémentation
                logger.debug(' Analyse du message pour compteur:', {
                  messageId: messageId,
                  senderId: newMessage.sender.id,
                  userProfileId: userProfileId,
                  senderIdType: typeof newMessage.sender.id,
                  userProfileIdType: typeof userProfileId,
                  isFromCurrentUser: isFromCurrentUser,
                  currentUnreadCount: conv.unread_count,
                });

                // Pour les messages WebSocket, is_read n'est pas fiable car le backend
                // ne passe pas le contexte utilisateur au serializer.
                // On considère que tous les nouveaux messages WebSocket sont non lus
                // sauf s'ils viennent de l'utilisateur connecté
                const shouldIncrementUnread = !isFromCurrentUser;

                if (shouldIncrementUnread) {
                  logger.debug(
                    ' INCRÉMENTATION du compteur non lu pour conversation:',
                    convId
                  );
                } else {
                  logger.debug(
                    " Pas d'incrémentation (message de l'utilisateur connecté)"
                  );
                }

                return {
                  ...conv,
                  last_message: newMessage,
                  // Incrémenter le unread_count seulement si applicable
                  unread_count: shouldIncrementUnread
                    ? (conv.unread_count || 0) + 1
                    : conv.unread_count,
                };
              }
              return conv;
            })
          );
          break;

        case 'typing_status':
          const { user_id, is_typing, conversation_id, user_name } = data;
          logger.debug(' Typing status reçu:', {
            user_id,
            is_typing,
            conversation_id,
            user_name,
          });

          // Identifier l'ID de la conversation sélectionnée (peut être .id ou .conversation_id)
          const currentConversationId =
            selectedConversation?.id || selectedConversation?.conversation_id;

          if (
            currentConversationId &&
            String(currentConversationId) === String(conversation_id)
          ) {
            logger.debug(
              ' Mise à jour typing pour conversation sélectionnée'
            );
            setTypingUsers((prev) => {
              // Utiliser le nom de l'utilisateur s'il est disponible, sinon l'ID
              const displayName = user_name || `Utilisateur ${user_id}`;
              logger.debug(
                ' Display name:',
                displayName,
                'is_typing:',
                is_typing
              );

              if (is_typing) {
                const newUsers = prev.includes(displayName)
                  ? prev
                  : [...prev, displayName];
                logger.debug(
                  ' Nouveaux utilisateurs en train de taper:',
                  newUsers
                );
                return newUsers;
              } else {
                const newUsers = prev.filter((name) => name !== displayName);
                logger.debug(
                  ' Utilisateurs en train de taper après suppression:',
                  newUsers
                );
                return newUsers;
              }
            });
          } else {
            logger.debug(' Typing status pour une autre conversation:', {
              selectedConversationId: currentConversationId,
              messageConversationId: conversation_id,
            });
          }
          break;

        case 'messages_read':
          // Marquer les messages comme lus
          setMessages((prev) =>
            prev.map((msg) =>
              msg.conversation_id === data.conversation_id
                ? { ...msg, is_read: true }
                : msg
            )
          );
          break;

        case 'presence_update':
          // Les mises à jour de présence sont maintenant gérées dans le contexte
          break;

        case 'error':
          logger.error('Erreur WebSocket:', data.message);
          break;

        default:
        // Message WebSocket non géré
      }
    },
    [
      selectedConversation,
      userProfileId,
      processedMessages,
      setProcessedMessages,
    ]
  );

  // Charger les conversations
  const loadConversations = useCallback(async () => {
    if (!userProfileId) return;

    try {
      setLoading(true);
      const data = await fetchConversations(userProfileId, csrfToken);

      // Vérifier la structure des données des conversations
      if (data && Array.isArray(data)) {
        // Structure validée
      }

      setConversations(data || []);
    } catch (error) {
      logger.error(' Erreur lors du chargement des conversations:', error);
      setConversations([]);
    } finally {
      setLoading(false);
    }
  }, [userProfileId, csrfToken]);

  // Effet pour défiler automatiquement vers le bas quand de nouveaux messages arrivent
  useEffect(() => {
    scrollToBottom();
  }, [messages, scrollToBottom]);

  // Gestionnaire de changement de connexion - version stable
  const handleConnectionChange = useCallback(
    (isConnected) => {
      if (isConnected && userProfileId) {
        // Éviter de recharger si on est déjà en train de charger
        loadConversations();
      }
    },
    [userProfileId, loadConversations]
  );

  // Effet de chargement initial
  useEffect(() => {
    if (userProfileId) {
      loadConversations();
    }
  }, [userProfileId, loadConversations]);

  // Effet pour la gestion des messages WebSocket via le système de callbacks
  useEffect(() => {
    if (isConnected && addMessageCallback) {
      // S'abonner aux messages WebSocket via le contexte
      const unsubscribe = addMessageCallback(handleWebSocketMessage);

      return () => {
        // Se désabonner au démontage du composant
        if (unsubscribe && typeof unsubscribe === 'function') {
          unsubscribe();
        }
      };
    }
  }, [isConnected, addMessageCallback, handleWebSocketMessage]);

  // Fonctions WebSocket déléguées
  const sendTypingStart = useCallback(
    (conversationId) => {
      return sendChatMessage({
        type: 'typing_start',
        conversation_id: conversationId,
        user_id: userProfileId,
      });
    },
    [sendChatMessage, userProfileId]
  );

  const sendTypingStop = useCallback(
    (conversationId) => {
      return sendChatMessage({
        type: 'typing_stop',
        conversation_id: conversationId,
        user_id: userProfileId,
      });
    },
    [sendChatMessage, userProfileId]
  );

  const markAsRead = useCallback(
    (conversationId, userId) => {
      return sendChatMessage({
        type: 'mark_as_read',
        conversation_id: conversationId,
        user_id: userId,
      });
    },
    [sendChatMessage]
  );

  const joinConversation = useCallback(
    (conversationId) => {
      return sendChatMessage({
        type: 'join_conversation',
        conversation_id: conversationId,
        user_id: userProfileId,
      });
    },
    [sendChatMessage, userProfileId]
  );

  const reconnect = useCallback(() => {
    connectToChat(userProfileId);
  }, [connectToChat, userProfileId]);

  // Charger les messages d'une conversation
  const loadMessages = useCallback(
    async (conversationId) => {
      if (!conversationId) return;

      try {
        const data = await fetchMessages(
          conversationId,
          1,
          50,
          csrfToken,
          userProfileId
        );
        setMessages(data || []);

        // Marquer comme lu
        if (userProfileId) {
          await markAsRead(conversationId, userProfileId);
        }

        // Réinitialiser le compteur de messages non lus
        setUnreadCounts((prev) => ({
          ...prev,
          [conversationId]: 0,
        }));

        // Mettre aussi à jour le unread_count dans les conversations
        setConversations((prev) =>
          prev.map((conv) =>
            (conv.id || conv.conversation_id) === conversationId
              ? { ...conv, unread_count: 0 }
              : conv
          )
        );
      } catch (error) {
        logger.error('Erreur lors du chargement des messages:', error);
      }
    },
    [userProfileId, markAsRead, csrfToken]
  );

  // Recherche de destinataires
  const handleSearch = async (query) => {
    setSearchQuery(query);

    if (query.trim() && establishmentId) {
      try {
        const results = await searchMessagerieRecipients(
          establishmentId,
          query,
          csrfToken
        );
        setSearchResults(results || []);
        setShowSearch(true);
      } catch (error) {
        logger.error('Erreur lors de la recherche:', error);
        setSearchResults([]);
      }
    } else {
      setSearchResults([]);
      setShowSearch(false);
    }
  };

  // Sélectionner une conversation
  const selectConversation = useCallback(
    (conversation) => {
      logger.debug(' Sélection de la conversation:', conversation);
      setSelectedConversation(conversation);
      setTypingUsers([]);
      setIsMobileSidebarOpen(false);

      // Utiliser id ou conversation_id selon ce qui est disponible
      const conversationId = conversation.id || conversation.conversation_id;
      logger.debug(' ID de conversation extrait:', conversationId);

      if (conversationId) {
        logger.debug(
          ' Chargement des messages pour conversation:',
          conversationId
        );
        loadMessages(conversationId);

        logger.debug(
          ' Tentative de rejoindre la conversation:',
          conversationId
        );
        const joinResult = joinConversation(conversationId);
        logger.debug(' Résultat joinConversation:', joinResult);
      } else {
        logger.error(" Impossible de trouver l'ID de conversation");
      }
    },
    [loadMessages, joinConversation]
  );

  // Envoyer un message
  const handleSendMessage = useCallback(
    (content, attachment = null) => {
      logger.debug(' handleSendMessage appelé:', {
        content,
        attachment,
        selectedConversation,
      });

      if (!selectedConversation) {
        logger.warn(' Aucune conversation sélectionnée');
        return;
      }

      // Vérifier qu'on a soit du contenu, soit un fichier
      if (!content.trim() && !attachment) {
        logger.warn(' Aucun contenu ni fichier à envoyer');
        return;
      }

      // Utiliser id ou conversation_id selon ce qui est disponible
      const conversationId =
        selectedConversation.id || selectedConversation.conversation_id;
      if (!conversationId) {
        logger.error(" Impossible de trouver l'ID de la conversation");
        return;
      }

      // Construire le message selon le format attendu par le WebSocket
      const messageData = {
        type: 'send_message', // Utiliser 'send_message' au lieu de 'message'
        conversation_id: conversationId,
        content: content.trim() || '',
        user_id: userProfileId,
      };

      if (attachment) {
        messageData.attachment = attachment;
      }

      logger.debug(' Envoi du message via WebSocket:', messageData);
      logger.debug(' Type de message:', messageData.type);
      logger.debug(' État de la connexion:', {
        isConnected,
        connectionStatus,
      });

      const success = sendChatMessage(messageData);

      logger.debug(' Résultat envoi message:', success);

      if (!success) {
        logger.error(
          " Impossible d'envoyer le message - WebSocket non connecté"
        );
      } else {
        logger.debug(' Message envoyé avec succès');
      }
    },
    [
      selectedConversation,
      sendChatMessage,
      userProfileId,
      isConnected,
      connectionStatus,
    ]
  );

  // Gestion des événements de frappe
  const handleTypingStart = useCallback(() => {
    if (selectedConversation) {
      const conversationId =
        selectedConversation.id || selectedConversation.conversation_id;
      if (conversationId) {
        sendTypingStart(conversationId);
      }
    }
  }, [selectedConversation, sendTypingStart]);

  const handleTypingStop = useCallback(() => {
    if (selectedConversation) {
      const conversationId =
        selectedConversation.id || selectedConversation.conversation_id;
      if (conversationId) {
        sendTypingStop(conversationId);
      }
    }
  }, [selectedConversation, sendTypingStop]);

  // Créer une nouvelle conversation
  const handleCreateConversation = useCallback(
    async (recipientUser) => {
      try {
        setLoading(true);
        logger.debug('Tentative de création de conversation avec:', {
          userProfileId,
          recipientId: recipientUser.id,
        });

        // Vérifier si une conversation existe déjà avec cet utilisateur
        const existingConversation = conversations.find(
          (conv) =>
            conv.participants?.some(
              (p) => p.participant?.id === recipientUser.id
            ) || conv.interlocuteur?.id === recipientUser.id
        );

        if (existingConversation) {
          logger.debug('Conversation existante trouvée:', existingConversation);
          // Sélectionner la conversation existante
          selectConversation(existingConversation);
          setShowSearch(false);
          setSearchQuery('');
          setSearchResults([]);
          return;
        }

        // Créer la conversation avec l'utilisateur sélectionné
        const conversationData = await createConversation(
          [userProfileId, recipientUser.id],
          csrfToken
        );

        if (conversationData) {
          logger.debug('Conversation créée avec succès:', conversationData);

          // Recharger les conversations pour inclure la nouvelle
          await loadConversations();

          // Attendre un peu que les conversations se chargent puis sélectionner la nouvelle
          setTimeout(() => {
            const newConv = conversations.find(
              (conv) =>
                conv.id === conversationData.id ||
                conv.conversation_id === conversationData.conversation_id
            );
            if (newConv) {
              selectConversation(newConv);
            } else {
              // Si on ne trouve pas dans la liste, utiliser directement les données retournées
              selectConversation(conversationData);
            }
          }, 500);

          // Fermer la recherche
          setShowSearch(false);
          setSearchQuery('');
          setSearchResults([]);
        }
      } catch (error) {
        logger.error('Erreur lors de la création de la conversation:', error);
      } finally {
        setLoading(false);
      }
    },
    [
      userProfileId,
      conversations,
      loadConversations,
      selectConversation,
      csrfToken,
    ]
  );

  // Demander la confirmation de suppression d'une conversation
  const requestDeleteConversation = useCallback((conversation) => {
    setConversationToDelete(conversation);
    setConfirmDeleteVisible(true);
  }, []);

  // Supprimer une conversation (après confirmation)
  const handleDeleteConversation = useCallback(async () => {
    if (!conversationToDelete) return;

    try {
      setLoading(true);
      logger.debug('Suppression de la conversation:', conversationToDelete);

      const conversationId =
        conversationToDelete.id || conversationToDelete.conversation_id;
      const result = await deleteConversation(conversationId, csrfToken);

      if (result.success) {
        logger.debug('Conversation supprimée avec succès');

        // Retirer la conversation de la liste
        setConversations((prev) =>
          prev.filter(
            (conv) => (conv.id || conv.conversation_id) !== conversationId
          )
        );

        // Si c'était la conversation sélectionnée, la désélectionner
        if (
          selectedConversation &&
          (selectedConversation.id || selectedConversation.conversation_id) ===
            conversationId
        ) {
          setSelectedConversation(null);
          setMessages([]);
        }

        // Afficher un message de succès
        showNotification(
          'Conversation supprimée avec succès',
          'success',
          'Suppression réussie'
        );
      } else {
        logger.error('Erreur lors de la suppression:', result.error);
        showNotification(
          'Erreur lors de la suppression de la conversation',
          'error',
          'Erreur de suppression'
        );
      }
    } catch (error) {
      logger.error('Erreur lors de la suppression de la conversation:', error);
      showNotification(
        'Erreur lors de la suppression de la conversation',
        'error',
        'Erreur de suppression'
      );
    } finally {
      setLoading(false);
      setConfirmDeleteVisible(false);
      setConversationToDelete(null);
    }
  }, [conversationToDelete, selectedConversation, csrfToken, showNotification]);

  // Annuler la suppression
  const handleCancelDelete = useCallback(() => {
    setConfirmDeleteVisible(false);
    setConversationToDelete(null);
  }, []);

  // Démarrer une nouvelle recherche de conversation
  const handleStartNewConversation = useCallback(() => {
    setShowSearch(true);
    setSearchQuery('');
    setSearchResults([]);
    setSelectedConversation(null); // Désélectionner la conversation actuelle
    // Focus sur la barre de recherche après un court délai
    setTimeout(() => {
      const searchInput = document.querySelector(
        'input[placeholder*="Rechercher"]'
      );
      if (searchInput) {
        searchInput.focus();
      }
    }, 100);
  }, []);

  // Effet pour le scroll
  useEffect(() => {
    scrollToBottom();
  }, [messages, scrollToBottom]);

  // Rendu
  return (
    <div className="flex h-full bg-white">
      {/* Sidebar des conversations */}
      <div className={`${isMobileSidebarOpen ? 'flex' : 'hidden'} md:flex w-full md:w-80 bg-gray-50 border-r border-gray-200 flex-col`}>
        {/* En-tête */}
        <div className="p-4 border-b border-gray-200">
          <div className="flex items-center justify-between mb-3">
            <h2 className="font-headline text-lg font-semibold text-gray-900">Messages</h2>
            <button
              onClick={handleStartNewConversation}
              className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
              title="Nouvelle conversation"
            >
              <Plus className="w-5 h-5 text-gray-600" />
            </button>
          </div>

          {/* Barre de recherche */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
            <input
              type="text"
              placeholder={
                showSearch
                  ? 'Rechercher une personne...'
                  : 'Rechercher dans les conversations...'
              }
              value={searchQuery}
              onChange={(e) => handleSearch(e.target.value)}
              className={`w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-lg focus:outline-none focus:ring-2 ${
                showSearch ? 'focus:ring-primary' : 'focus:ring-primary'
              }`}
            />
            {showSearch && searchQuery && (
              <button
                onClick={() => {
                  setShowSearch(false);
                  setSearchQuery('');
                  setSearchResults([]);
                }}
                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                title="Annuler la recherche"
              >
                ×
              </button>
            )}
          </div>

          {/* Statut de connexion */}
          <div className="mt-3">
            <ConnectionStatus
              status={connectionStatus}
              onReconnect={reconnect}
              selectedConversationId={
                selectedConversation?.id ||
                selectedConversation?.conversation_id
              }
            />
          </div>
        </div>

        {/* Liste des conversations */}
        <div className="flex-1 overflow-y-auto">
          {loading ? (
            <div className="p-4 text-center text-gray-500">
              Chargement des conversations...
            </div>
          ) : showSearch && searchResults.length > 0 ? (
            <div className="p-2">
              <h3 className="font-headline text-sm font-medium text-gray-700 mb-2 px-2">
                Résultats de recherche
              </h3>
              {searchResults.map((user) => (
                <div
                  key={user.id}
                  className="flex items-center p-3 hover:bg-gray-100 cursor-pointer rounded-lg transition-colors"
                  onClick={() => handleCreateConversation(user)}
                >
                  <div className="relative">
                    <img
                      src={getGravatarUrl(user.email || user.id, 40)}
                      alt={`Avatar de ${user.first_name || user.email}`}
                      className="w-10 h-10 rounded-full object-cover shadow-sm"
                    />
                    {/* Indicateur de statut en ligne pour les résultats de recherche */}
                    <div
                      className={`absolute -bottom-0.5 -right-0.5 w-3 h-3 ${
                        userPresences[user.id]?.status === 'online'
                          ? 'bg-tertiary'
                          : 'bg-gray-400'
                      } border-2 border-white rounded-full`}
                      title={
                        userPresences[user.id]?.status === 'online'
                          ? 'En ligne'
                          : 'Hors ligne'
                      }
                    ></div>
                  </div>
                  <div className="ml-3 flex-1">
                    <div className="font-medium text-gray-900">
                      {user.first_name && user.last_name
                        ? `${user.first_name} ${user.last_name}`
                        : user.email}
                    </div>
                    {user.first_name && user.last_name && (
                      <div className="text-sm text-gray-500">{user.email}</div>
                    )}
                    <div
                      className={`text-xs ${
                        userPresences[user.id]?.status === 'online'
                          ? 'text-primary'
                          : 'text-gray-500'
                      }`}
                    >
                      {userPresences[user.id]?.status === 'online'
                        ? 'En ligne'
                        : 'Hors ligne'}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : showSearch ? (
            <div className="p-4 text-gray-500 text-center">
              Recherchez un contact pour démarrer une conversation
            </div>
          ) : conversations.length > 0 ? (
            <div className="p-2">
              {conversations.map((conversation) => (
                <ConversationItem
                  key={conversation.conversation_id || conversation.id}
                  conversation={conversation}
                  isSelected={
                    (selectedConversation?.id ||
                      selectedConversation?.conversation_id) ===
                    (conversation.id || conversation.conversation_id)
                  }
                  onClick={() => selectConversation(conversation)}
                  onDelete={() => requestDeleteConversation(conversation)}
                  unreadCount={
                    // Utiliser prioritairement le compteur du backend
                    conversation.unread_count !== undefined
                      ? conversation.unread_count
                      : unreadCounts[
                          conversation.id || conversation.conversation_id
                        ] || 0
                  }
                  lastMessage={conversation.last_message}
                  userPresences={userPresences}
                />
              ))}
            </div>
          ) : (
            <div className="p-4 text-center text-gray-500">
              Aucune conversation disponible. Cliquez sur + pour en créer une.
            </div>
          )}
        </div>
      </div>

      {/* Zone de chat principale */}
      <div className={`${!isMobileSidebarOpen ? 'flex' : 'hidden'} md:flex flex-1 flex-col`}>
        {selectedConversation ? (
          <>
            {/* En-tête de la conversation */}
            <div className="p-4 border-b border-gray-200 bg-white">
              <div className="flex items-center">
                {/* Bouton retour liste sur mobile */}
                <button
                  onClick={() => setIsMobileSidebarOpen(true)}
                  className="mr-3 p-1 rounded hover:bg-gray-100 md:hidden"
                  aria-label="Retour aux conversations"
                >
                  <ArrowLeft className="w-5 h-5 text-gray-600" />
                </button>
                <div className="flex items-center">
                  <div className="relative">
                    <img
                      src={getGravatarUrl(
                        selectedConversation.interlocuteur?.email ||
                          selectedConversation.interlocuteur?.id ||
                          selectedConversation.id
                      )}
                      alt={`Avatar de ${selectedConversation.interlocuteur?.first_name || 'Utilisateur'}`}
                      className="w-12 h-12 rounded-full object-cover shadow-md"
                    />
                    {/* Indicateur de statut en ligne */}
                    <div
                      className={`absolute -bottom-0.5 -right-0.5 w-4 h-4 ${
                        selectedConversation.interlocuteur?.id &&
                        userPresences[selectedConversation.interlocuteur.id]
                          ?.status === 'online'
                          ? 'bg-tertiary'
                          : 'bg-gray-400'
                      } border-2 border-white rounded-full`}
                      title={
                        selectedConversation.interlocuteur?.id &&
                        userPresences[selectedConversation.interlocuteur.id]
                          ?.status === 'online'
                          ? 'En ligne'
                          : 'Hors ligne'
                      }
                    ></div>
                  </div>
                  <div className="flex-1 ml-3 overflow-hidden">
                    <h3 className="font-headline font-semibold text-gray-900">
                      {selectedConversation.interlocuteur
                        ? selectedConversation.interlocuteur.first_name &&
                          selectedConversation.interlocuteur.last_name
                          ? `${selectedConversation.interlocuteur.first_name} ${selectedConversation.interlocuteur.last_name}`
                          : selectedConversation.interlocuteur.email ||
                            'Utilisateur'
                        : selectedConversation.name || 'Conversation'}
                    </h3>
                    <p
                      className={`text-sm ${
                        selectedConversation.interlocuteur?.id &&
                        userPresences[selectedConversation.interlocuteur.id]
                          ?.status === 'online'
                          ? 'text-primary'
                          : 'text-gray-500'
                      }`}
                    >
                      {selectedConversation.interlocuteur?.id &&
                      userPresences[selectedConversation.interlocuteur.id]
                        ?.status === 'online'
                        ? 'En ligne'
                        : 'Hors ligne'}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Zone des messages */}
            <div
              ref={messagesContainerRef}
              className="flex-1 overflow-y-auto p-4"
            >
              {groupMessages(messages).map((group, groupIndex) => {
                const isOwnMessage = group.senderId === userProfileId;

                // Utiliser les vraies données du sender au lieu de l'interlocuteur par défaut
                let senderName = '';
                let senderEmail = '';

                if (isOwnMessage && user) {
                  // Pour l'utilisateur connecté, utiliser ses données
                  senderName = 'Moi';
                  senderEmail = user.email || '';
                } else if (!isOwnMessage && group.senderInfo) {
                  // Utiliser les données du sender réel
                  senderName =
                    `${group.senderInfo.first_name || ''} ${group.senderInfo.last_name || ''}`.trim();
                  senderEmail = group.senderInfo.email || '';

                  // Fallback sur l'email si pas de nom
                  if (!senderName && senderEmail) {
                    senderName = senderEmail;
                  }
                } else if (
                  !isOwnMessage &&
                  selectedConversation.interlocuteur
                ) {
                  // Fallback sur l'interlocuteur de la conversation si pas de données sender
                  senderName =
                    `${selectedConversation.interlocuteur.first_name || ''} ${selectedConversation.interlocuteur.last_name || ''}`.trim();
                  senderEmail = selectedConversation.interlocuteur.email || '';

                  // Fallback sur l'email si pas de nom
                  if (!senderName && senderEmail) {
                    senderName = senderEmail;
                  }
                }

                // Rendre chaque message individuellement avec le nouveau style Discord
                return group.messages.map((message, messageIndex) => (
                  <MessageBubble
                    key={message.id || `${groupIndex}-${messageIndex}`}
                    message={message}
                    isOwnMessage={isOwnMessage}
                    showAvatar={true} // Toujours afficher l'avatar (géré dans MessageBubble)
                    senderName={senderName}
                    senderEmail={senderEmail}
                    isRead={message.is_read}
                    isFirstInGroup={messageIndex === 0} // Premier message du groupe
                    isLastInGroup={messageIndex === group.messages.length - 1}
                    showTime={messageIndex === group.messages.length - 1} // Temps seulement sur le dernier message
                  />
                ));
              })}
              <div ref={messagesEndRef} />
            </div>

            {/* Indicateur de frappe */}
            <TypingIndicator typingUsers={typingUsers} />

            {/* Zone de saisie */}
            <MessageInput
              onSendMessage={handleSendMessage}
              onTypingStart={handleTypingStart}
              onTypingStop={handleTypingStop}
              disabled={!isConnected}
              placeholder={
                isConnected ? 'Tapez votre message...' : 'Connexion en cours...'
              }
              conversationId={selectedConversation?.id}
              senderId={userProfileId}
            />
          </>
        ) : (
          <div className="flex-1 flex items-center justify-center bg-gray-50">
            <div className="text-center">
              <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <MessageSquare className="w-8 h-8 text-primary" />
              </div>
              <h3 className="font-headline text-lg font-medium text-gray-900 mb-2">
                Sélectionnez une conversation
              </h3>
              <p className="text-gray-500">
                Choisissez une conversation dans la liste ou commencez-en une
                nouvelle
              </p>
            </div>
          </div>
        )}
      </div>

      {/* Popup de confirmation de suppression */}
      {confirmDeleteVisible && (
        <Popup
          isOpen={confirmDeleteVisible}
          setIsOpen={setConfirmDeleteVisible}
          message="Êtes-vous sûr de vouloir supprimer cette conversation ? Cette action ne peut pas être annulée."
          onConfirm={handleDeleteConversation}
          onCancel={handleCancelDelete}
        />
      )}
    </div>
  );
};

export default InstantChat;
