import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from "@code/ui/components/ai-elements/conversation";

import { useChatAgent } from "@/hooks/chat/use-chat-agent";

import { ChatComposer } from "./chat-composer";
import { ChatConversation } from "./chat-conversation";
import { ChatHeader } from "./chat-header";

export const ChatPage = () => {
  const agent = useChatAgent();
  const handleSendMessage = (message: string) => agent.sendMessage(message);

  return (
    <section className="chat-surface flex h-full min-h-0 flex-col bg-[#fefefe]">
      <ChatHeader status={agent.status} />

      <main aria-label="Conversation" className="min-h-0 flex-1">
        <Conversation className="ai-conversation-mobile h-full">
          <ConversationContent className="min-h-full w-full gap-0 px-4 pt-4 pb-6">
            <ChatConversation
              historyReady={agent.historyReady}
              messages={agent.messages}
              onSuggestion={(suggestion) => void handleSendMessage(suggestion)}
              status={agent.status}
            />
          </ConversationContent>
          <ConversationScrollButton
            aria-label="Scroll to latest message"
            className="bottom-3 size-9 rounded-full border border-[#dededb] bg-[#fefefe]/95 shadow-sm backdrop-blur"
          />
        </Conversation>
      </main>

      <ChatComposer
        error={agent.error}
        onSend={handleSendMessage}
        status={agent.status}
      />
    </section>
  );
};