import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { listPrompts } from "@/lib/features/chatbot/prompt/query";
import { createAgent } from "@/lib/features/chatbot/agent/action";
import { ActionIcon, Group, Stack, Title } from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { IconInfoCircle } from "@tabler/icons-react";
import AgentForm, { AgentQuickGuideModal } from "../(widgets)/AgentForm";
import AgentGuidanceBanner from "../(widgets)/AgentGuidanceBanner";

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

export async function loader({ request }: { request: Request }) {
  const headers = { Cookie: request.headers.get("Cookie") ?? "" };
  const res: any = await listPrompts(0, 1000, headers);
  const rows = res?.data?.items ?? res?.data ?? [];
  return {
    promptOptions: rows.map((p: any) => ({ value: p.id, label: p.prompt_name })),
    allPrompts: rows.map((p: any) => ({ id: p.id, prompt_name: p.prompt_name, prompt_value: p.prompt_value ?? "" })),
  };
}

export default function CreateAgentPage({
  loaderData,
}: {
  loaderData: { promptOptions: { value: string; label: string }[]; allPrompts: { id: string; prompt_name: string; prompt_value: string }[] };
}) {
  const [manualOpened, { open: openManual, close: closeManual }] = useDisclosure(false);

  return (
    <Stack>
      <AgentQuickGuideModal opened={manualOpened} onClose={closeManual} />

      <AgentGuidanceBanner />

      <Group mb="sm" gap="xs" align="center">
        <Title order={4} c="dimmed">Create Agent</Title>
        <ActionIcon variant="subtle" color="blue" onClick={openManual} title="Full quick guide">
          <IconInfoCircle size={18} />
        </ActionIcon>
      </Group>

      <AgentForm
        mode="create"
        promptOptions={loaderData.promptOptions}
        allPrompts={loaderData.allPrompts}
        onSubmit={(payload) => createAgent(payload)}
        manualOpened={manualOpened}
        onManualClose={closeManual}
      />
    </Stack>
  );
}