"use client";

import { useMemo } from "react";
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 { useAiAgents } from "@/features/ai/hooks/use-ai";
import { panelDict } from "@/features/panel/dict";

type AiNewChatPageContentProps = {
  agentId: string;
};

export function AiNewChatPageContent({ agentId }: AiNewChatPageContentProps) {
  const { data: agents = [], isLoading } = useAiAgents();
  const agent = useMemo(
    () => agents.find((item) => item.id === agentId),
    [agents, agentId],
  );

  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 (!agent) {
    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.noAgents}</p>
      </div>
    );
  }

  return (
    <AiChatView
      key={`new-${agent.id}`}
      agentId={agent.id}
      agentName={agent.name}
      backHref="/panel/ai"
    />
  );
}