import BreadCrumbLink from "@/layouts/shared/page.breadcrumbLink";
import { getPromptById, listPrompts } from "@/lib/features/chatbot/prompt/query";
import { updatePrompt } from "@/lib/features/chatbot/prompt/action";
import { Title } from "@mantine/core";
import PromptForm from "../(widgets)/PromptForm";

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

export async function loader({ request, params }: { request: Request; params: { id: string } }) {
  const headers = { Cookie: request.headers.get("Cookie") ?? "" };
  const [promptRes, allPromptsRes] = await Promise.all([
    getPromptById(params.id, { headers }),
    listPrompts(0, 200, headers),
  ]);
  const prompt = (promptRes as any)?.success ? (promptRes as any).data : promptRes;
  const rows = (allPromptsRes as any)?.data?.items ?? (allPromptsRes as any)?.data ?? [];
  const usedPipelineKeys = rows
    .map((p: any) => p.prompt_key)
    .filter(Boolean) as string[];
  return { prompt, usedPipelineKeys };
}

export default function EditPromptPage({
  loaderData,
}: {
  loaderData: {
    prompt: { id: string; prompt_name: string; prompt_value: string; prompt_key?: string | null };
    usedPipelineKeys: string[];
  };
}) {
  const { prompt, usedPipelineKeys } = loaderData;
  return (
    <>
      <Title order={4} c="dimmed" mb="sm">Edit Prompt</Title>
      <PromptForm
        mode="edit"
        initial={{ prompt_name: prompt.prompt_name, prompt_value: prompt.prompt_value, prompt_key: prompt.prompt_key ?? null }}
        usedPipelineKeys={usedPipelineKeys}
        onSubmit={(payload) => updatePrompt(prompt.id, payload)}
      />
    </>
  );
}