"use client";

import { useEffect, useRef } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import type { ChatMessage } from "@/lib/hooks/use-chat";
import { MessageBubble } from "./MessageBubble";

interface MessageListProps {
  messages: ChatMessage[];
  currentUserId: number;
  isLoading: boolean;
  onLoadMore?: () => void;
  hasMore: boolean;
  otherUserTyping: boolean;
}

export function MessageList({
  messages,
  currentUserId,
  isLoading,
  onLoadMore,
  hasMore,
  otherUserTyping,
}: MessageListProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const messagesContainerRef = useRef<HTMLDivElement>(null);
  const prevMessagesLengthRef = useRef(0);

  // Scroll para última mensagem quando novas mensagens chegarem
  useEffect(() => {
    if (messages.length > prevMessagesLengthRef.current) {
      // Nova mensagem adicionada
      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
    }
    prevMessagesLengthRef.current = messages.length;
  }, [messages.length]);

  // Scroll inicial para o final
  useEffect(() => {
    if (messages.length > 0 && !isLoading) {
      messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
    }
  }, [isLoading, messages.length]);

  // Detectar scroll no topo para carregar mais
  const handleScroll = () => {
    const container = messagesContainerRef.current;
    if (!container || !onLoadMore || !hasMore || isLoading) return;

    if (container.scrollTop === 0) {
      const previousScrollHeight = container.scrollHeight;
      onLoadMore();

      // Ajustar scroll após carregar mais mensagens
      setTimeout(() => {
        const newScrollHeight = container.scrollHeight;
        container.scrollTop = newScrollHeight - previousScrollHeight;
      }, 100);
    }
  };

  return (
    <div
      ref={messagesContainerRef}
      onScroll={handleScroll}
      className="flex-1 overflow-y-auto p-4 space-y-1"
    >
      {isLoading && messages.length === 0 ? (
        <div className="space-y-4">
          {Array.from({ length: 5 }).map((_, i) => (
            <Skeleton key={i} className="h-16 w-full" />
          ))}
        </div>
      ) : messages.length === 0 ? (
        <div className="flex items-center justify-center h-full text-center text-muted-foreground">
          <div>
            <p className="text-sm">Nenhuma mensagem ainda</p>
            <p className="text-xs mt-1">
              Envie a primeira mensagem para começar a conversa
            </p>
          </div>
        </div>
      ) : (
        <>
          {hasMore && (
            <div className="text-center py-2">
              <button
                onClick={onLoadMore}
                className="text-xs text-muted-foreground hover:text-foreground"
                disabled={isLoading}
              >
                {isLoading ? "Carregando..." : "Carregar mensagens anteriores"}
              </button>
            </div>
          )}
          {messages.map((message) => (
            <MessageBubble
              key={message._id}
              message={message}
              isOwn={message.sender_id === currentUserId}
            />
          ))}
          {otherUserTyping && (
            <div className="flex justify-start mb-2">
              <div className="bg-muted rounded-lg px-4 py-2">
                <div className="flex items-center gap-1">
                  <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce" />
                  <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce delay-75" />
                  <div className="w-2 h-2 bg-muted-foreground rounded-full animate-bounce delay-150" />
                </div>
              </div>
            </div>
          )}
          <div ref={messagesEndRef} />
        </>
      )}
    </div>
  );
}