"use client";
import { type FC } from "react";

import MessageBar from "@/components/message_bar";
import EvaluationModal from "@/components/evaluation_modal";
import WelcomeScreen from "@/components/welcome-screen";
import ChatMessages from "@/components/chat-messages";
import TranscriptsPanel from "@/components/transcripts-panel";
import { useChatPage } from "@/hooks/useChatPage";

const ChatPage: FC = () => {
  const {
    selectedTranscripts,
    selectedTranscript,
    isLoading,
    evaluatingMessageIndex,
    setEvaluatingMessageIndex,
    selectedChat,
    selectedChatId,
    scrollRef,
    scrollToBottom,
    handleTranscriptClick,
    handleEvaluate,
    isTranscriptsOpen,
    setIsTranscriptsOpen,
  } = useChatPage();

  const showWelcome =
    selectedChatId === null || selectedChat?.messages.length === 0;

  return (
    <div className="flex-1 flex h-full bg-gradient-to-br from-background via-background to-muted/20">
      <div className="flex-1 flex flex-col min-w-0">
        {showWelcome ? (
          <WelcomeScreen
            selectedChatId={selectedChatId}
            hasMessages={Boolean(selectedChat?.messages?.length)}
          />
        ) : (
          <ChatMessages
            selectedChat={selectedChat}
            isLoading={isLoading}
            scrollRef={scrollRef}
            onTranscriptClick={handleTranscriptClick}
            onEvaluate={handleEvaluate}
          />
        )}

        {selectedChatId && (
          <div className="bg-trasparent backdrop-blur supports-[backdrop-filter]:bg-transparent">
            <MessageBar
              selectedChatId={selectedChatId}
              selectedChat={selectedChat}
              scrollToBottom={scrollToBottom}
            />
          </div>
        )}
      </div>

      <TranscriptsPanel
        selectedTranscript={selectedTranscript}
        selectedTranscripts={selectedTranscripts}
        selectedChatId={selectedChatId}
        isTranscriptsOpen={isTranscriptsOpen}
        setIsTranscriptsOpen={setIsTranscriptsOpen}
      />

      {selectedChat !== null && evaluatingMessageIndex && (
        <EvaluationModal
          open={!!evaluatingMessageIndex}
          onOpenChange={(open) => !open && setEvaluatingMessageIndex(null)}
          message={selectedChat.messages[evaluatingMessageIndex]}
          prevMessage={selectedChat.messages[evaluatingMessageIndex - 1]}
        />
      )}
    </div>
  );
};

export default ChatPage;