"use client";

import { AiChatView } from "@/features/ai/components/ai-chat-view";
import { AiPageHeader } from "@/features/ai/components/ai-page-header";
import { aiDict } from "@/features/ai/dict";
import { useAiConversation } from "@/features/ai/hooks/use-ai";
import { panelDict } from "@/features/panel/dict";

type AiConversationPageContentProps = {
  conversationId: string;
};

export function AiConversationPageContent({
  conversationId,
}: AiConversationPageContentProps) {
  const { data: conversation, isLoading } = useAiConversation(conversationId);

  if (isLoading) {
    return (
      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4 px-4 py-4 sm:gap-5 sm:px-6 sm:py-6">
        <AiPageHeader title={aiDict.title} backHref="/panel/ai" showHistory />
        <p className="px-1 text-sm text-muted-foreground">{panelDict.loading}</p>
      </div>
    );
  }

  if (!conversation) {
    return (
      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4 px-4 py-4 sm:gap-5 sm:px-6 sm:py-6">
        <AiPageHeader title={aiDict.title} backHref="/panel/ai" showHistory />
        <p className="px-1 text-sm text-muted-foreground">
          {aiDict.noConversations}
        </p>
      </div>
    );
  }

  return (
    <AiChatView
      key={conversation.id}
      agentId={conversation.agentId}
      agentName={conversation.agent.name}
      conversationId={conversation.id}
      initialMessages={conversation.messages}
      backHref="/panel/ai/history"
    />
  );
}