import React, { useEffect, useRef } from 'react';
import { useChatStore, ChatMessage } from '../store/chatStore';
import { ChatMessageComponent } from './ChatMessage';
import { useChat } from '../hooks/useChat';

interface ChatRoomProps {
  conversationId: string;
}

export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
  const { messages, userId, currentConversationId } = useChatStore();
  const { fetchHistory } = useChat();
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const currentMessages = messages[conversationId] || [];

  useEffect(() => {
    if (conversationId && !messages[conversationId]) {
      fetchHistory(conversationId);
    }
  }, [conversationId, messages, fetchHistory]);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [currentMessages]);

  if (!conversationId) {
    return (
      <div className="flex-1 flex items-center justify-center text-gray-500">
        Sélectionnez une conversation pour commencer
      </div>
    );
  }

  return (
    <div className="flex-1 flex flex-col h-full bg-white">
      <div className="flex-1 overflow-y-auto p-4">
        {currentMessages.length === 0 ? (
          <div className="flex items-center justify-center h-full text-gray-500">
            Aucun message. Soyez le premier à envoyer un message !
          </div>
        ) : (
          currentMessages.map((msg) => (
            <ChatMessageComponent key={msg.id} message={msg} />
          ))
        )}
        <div ref={messagesEndRef} />
      </div>
    </div>
  );
};