import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { listAgents } from "@/lib/features/chatbot/agent/query";
import type { Route } from "./+types/page";
import AgentsClientPage from "./_client";

export const handle = {
  breadcrumb: () => (
    <BreadCrumbLink 
      links={[
        { label: "Chatbot", to: "/admin/chatbot" },
        { label: "Agents" }
      ]} 
    />
  ),
};

export async function loader({ request }: Route.LoaderArgs) {
  const headers = {
    Cookie: request.headers.get("Cookie") ?? "",
  };

  // Fetch all agents at once — table handles client-side pagination + filtering
  const agentsRes = await listAgents(0, 200, headers);

  return {
    agents: agentsRes,
  };
}

const AgentsPage: React.FC<Route.ComponentProps> = ({ loaderData }) => {
  const { agents } = loaderData;
  const { data: rows = [], total = 0 } = agents.success ? (agents as any) : {};

  return (
    <AgentsClientPage
      tableProps={{
        data: rows,
        totalRows: total,
      }}
    />
  );
};

export default AgentsPage;