import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import type { Route } from "../edit/+types/$id";
import { getAgentById } from "@/lib/features/chatbot/agent/query";
import { updateAgent } from "@/lib/features/chatbot/agent/action";
import { listPrompts } from "@/lib/features/chatbot/prompt/query";
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";
import { DEFAULT_TUNING } from "@/lib/features/chatbot/constants/constants";

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

export async function loader({ request, params }: Route.LoaderArgs) {
  const headers = { Cookie: request.headers.get("Cookie") ?? "" };
  const [agentRes, promptsRes] = await Promise.all([
    getAgentById(params.id, { headers }),
    listPrompts(0, 1000, headers),
  ]);
  const agent = agentRes?.success ? agentRes.data : agentRes;

  const prompts: any[] = (promptsRes as any)?.data?.items ?? (promptsRes as any)?.data ?? [];
  return {
    agent,
    promptOptions: prompts.map((p) => ({ value: p.id, label: p.prompt_name })),
    allPrompts: prompts.map((p) => ({ id: p.id, prompt_name: p.prompt_name, prompt_value: p.prompt_value ?? "" })),
    mergedTuning: { ...DEFAULT_TUNING, ...(agent.tuning_parameters ?? {}) },
  };
}

export default function EditAgentPage({ loaderData }: Route.ComponentProps) {
  const { agent, promptOptions, allPrompts, mergedTuning } = loaderData as any;
  const [manualOpened, { open: openManual, close: closeManual }] = useDisclosure(false);

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

      <AgentGuidanceBanner />

      {/* Page-level header with ⓘ button outside the form Paper */}
      <Group mb="sm" gap="xs" align="center">
        <Title order={4} c="dimmed">Edit Agent</Title>
        <ActionIcon variant="subtle" color="blue" onClick={openManual} title="Full quick guide">
          <IconInfoCircle size={18} />
        </ActionIcon>
      </Group>

      <AgentForm
        mode="edit"
        promptOptions={promptOptions}
        allPrompts={allPrompts}
        agentId={agent.id}
        isGlobal={agent.is_global ?? false}
        initial={{
          agent_name: agent.agent_name,
          prompt_id: agent.prompt_id,
          embed_model: agent.embed_model,
          language_model: agent.language_model,
          embed_dimension: agent.embed_dimension,
          is_active: agent.is_active ?? true,
          csv_urls: (agent.data_sources?.map((s: { url: string }) => s.url).filter(Boolean) ?? []) as string[],
          category_key: agent.category_key ?? "",
          tuning: mergedTuning,
        }}
        onSubmit={(payload) => updateAgent(agent.id, payload)}
        manualOpened={manualOpened}
        onManualClose={closeManual}
      />
    </Stack>
  );
}