import {
  Conversation,
  ConversationContent,
} from "@code/ui/components/ai-elements/conversation";
import { LoaderCircle, MessagesSquare } from "lucide-react";

import { ChatMessage } from "@/components/chat/chat-message";
import { ChatThinkingResponse } from "@/components/chat/chat-thinking-response";
import type { ChatAgentState } from "@/lib/chat/types";

interface ConversationPanelProps {
  readonly agent: ChatAgentState;
  readonly title: string;
  readonly emptyHint: string;
}

export const ConversationPanel = ({
  agent,
  emptyHint,
  title,
}: ConversationPanelProps) => {
  if (agent.status === "connecting" && !agent.historyReady) {
    return (
      <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
        <LoaderCircle className="mr-2 size-4 animate-spin" />
        Loading conversation…
      </div>
    );
  }

  if (agent.historyReady && agent.messages.length === 0) {
    return (
      <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
        <MessagesSquare className="size-6 text-muted-foreground/50" />
        <p className="mt-3 text-sm font-medium">{title}</p>
        <p className="mt-1 max-w-xs text-xs leading-5 text-muted-foreground">
          {emptyHint}
        </p>
      </div>
    );
  }

  return (
    <Conversation className="min-h-0 flex-1">
      <ConversationContent className="min-h-full gap-4 px-4 py-4">
        {agent.messages.map((message) => (
          <ChatMessage key={message.id} message={message} />
        ))}
        {agent.status === "submitted" ? <ChatThinkingResponse /> : null}
      </ConversationContent>
    </Conversation>
  );
};