import { useConversation } from "@features/conversations/hooks/useConversation.js";
import { useChatRealtime } from "@features/messages/hooks/useChatRealtime.js";
import { useMessages } from "@features/messages/hooks/useMessages.js";
import { useSendMessage } from "@features/messages/hooks/useSendMessage.js";
import { authClient } from "@lib/auth.js";
import { useEffect, useMemo, useRef, useState } from "react";
import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";

function ChatLayout() {
  const { conversationId } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  const { data: session } = authClient.useSession();
  const userId = session?.user?.id;

  const [input, setInput] = useState("");
  const inputRef = useRef(null);

  const conversationQuery = useConversation(conversationId);
  const messagesQuery = useMessages(conversationId);
  const { typingUserIds, notifyTyping, stopTyping } = useChatRealtime(conversationId);
  const sendMutation = useSendMessage(conversationId);

  const conversation = conversationQuery.data?.conversation;
  const participant = conversation?.participant;
  const participantName = participant?.name || "Direct message";

  const typingNames = useMemo(
    () =>
      typingUserIds
        .filter((id) => id !== userId)
        .map((id) => (id === participant?.id ? participant.name : "Someone")),
    [typingUserIds, userId, participant]
  );

  useEffect(() => {
    inputRef.current?.focus();
  }, [conversationId]);

  const handleInput = (e) => {
    setInput(e.target.value);
    // TODO : debounce typing notifications when typing quickly.
    notifyTyping();
  };

  const send = (e) => {
    e?.preventDefault?.();
    const text = input.trim();
    if (!text) return;
    sendMutation.mutate(text);
    stopTyping();
    setInput("");
  };

  const canSend = input.trim().length > 0;

  return (
    <div className="flex flex-col h-full overflow-clip">
      <ChatHeader participantName={participantName} onBack={() => navigate("/")} />

      <div key={location.pathname} className="flex-1 min-h-0 flex flex-col animate-page-in">
        <Outlet
          context={{
            conversationId,
            currentUserId: userId,
            messages: messagesQuery.data?.messages ?? [],
            loading: messagesQuery.isPending,
            typingNames,
          }}
        />
      </div>

      <MessageInput
        value={input}
        onChange={handleInput}
        onSubmit={send}
        canSend={canSend}
        placeholder={`Message ${participantName}`}
        inputRef={inputRef}
      />
    </div>
  );
}

window.ChatLayout = ChatLayout;