"use client";

import { useEffect, useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Skeleton } from "@/components/ui/skeleton";
import { useChat } from "@/lib/hooks/use-chat";
import { useSession } from "@/lib/hooks/use-session";
import { ChatHeader } from "./ChatHeader";
import { MessageInput } from "./MessageInput";
import { MessageList } from "./MessageList";

interface ChatModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  listingId?: number | null;
  chatId?: string | null;
  initialMessage?: string;
}

export function ChatModal({
  open,
  onOpenChange,
  listingId,
  chatId: initialChatId,
  initialMessage,
}: ChatModalProps) {
  const { user } = useSession();
  const [chatId, setChatId] = useState<string | null>(initialChatId || null);
  const [isCreatingChat, setIsCreatingChat] = useState(false);

  const {
    chat,
    messages,
    isLoading,
    isSending,
    sendMessage,
    loadMoreMessages,
    hasMore,
    otherUserTyping,
  } = useChat(chatId);

  // Se chatId for fornecido diretamente, usar ele
  useEffect(() => {
    if (initialChatId) {
      setChatId(initialChatId);
      return;
    }
  }, [initialChatId]);

  // Criar ou buscar chat quando modal abrir (apenas se não tiver chatId)
  useEffect(() => {
    if (!open || !user || !listingId || initialChatId) {
      if (!initialChatId && !listingId) {
        setChatId(null);
      }
      return;
    }

    const createOrGetChat = async () => {
      setIsCreatingChat(true);
      try {
        const res = await fetch("/api/chats", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          credentials: "include",
          body: JSON.stringify({
            listing_id: listingId,
            buyer_message: initialMessage,
          }),
        });

        if (!res.ok) {
          throw new Error("Erro ao criar chat");
        }

        const data = await res.json();
        setChatId(data.chat.chat_id);

        // Se houver mensagem inicial, já foi enviada no backend
      } catch (error) {
        console.error("Erro ao criar/buscar chat:", error);
      } finally {
        setIsCreatingChat(false);
      }
    };

    createOrGetChat();
  }, [open, user, listingId, initialMessage, initialChatId]);

  if (!user) {
    return null;
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl h-[80vh] flex flex-col p-0 gap-0">
        <DialogHeader className="sr-only">
          <DialogTitle>Chat com vendedor</DialogTitle>
          <DialogDescription>Conversa sobre o anúncio</DialogDescription>
        </DialogHeader>

        {isCreatingChat || (isLoading && !chat) ? (
          <div className="flex-1 flex items-center justify-center">
            <div className="space-y-4 w-full px-4">
              <Skeleton className="h-24 w-full" />
              <Skeleton className="h-64 w-full" />
              <Skeleton className="h-20 w-full" />
            </div>
          </div>
        ) : chat ? (
          <>
            <ChatHeader chat={chat} currentUserId={user.userId} />
            <MessageList
              messages={messages}
              currentUserId={user.userId}
              isLoading={isLoading}
              onLoadMore={loadMoreMessages}
              hasMore={hasMore}
              otherUserTyping={otherUserTyping}
            />
            <MessageInput
              onSend={sendMessage}
              isSending={isSending}
              disabled={!chat.is_active}
              chatId={chatId}
            />
          </>
        ) : (
          <div className="flex-1 flex items-center justify-center text-center text-muted-foreground">
            <p>Erro ao carregar chat</p>
          </div>
        )}
      </DialogContent>
    </Dialog>
  );
}