<script lang="ts">
  import { current_task, current_task_prompts } from "$lib/stores"
  import { page } from "$app/stores"
  import { type KilnError, createKilnError } from "$lib/utils/error_handlers"
  import { client } from "$lib/api_client"
  import AppPage from "../../../../../app_page.svelte"
  import Output from "../../../../../run/output.svelte"

  let prompt: string | null = null
  let prompt_loading = true
  let prompt_error: KilnError | null = null

  $: project_id = $page.params.project_id
  $: task_id = $page.params.task_id
  $: generator_id = $page.params.generator_id
  $: generator_name = $current_task_prompts?.generators.find(
    (generator) => generator.id === generator_id,
  )?.name
  $: generator_description = $current_task_prompts?.generators.find(
    (generator) => generator.id === generator_id,
  )?.description

  $: (() => {
    get_prompt(generator_id)
  })()

  async function get_prompt(prompt_generator: string | undefined) {
    if (!prompt_generator) {
      prompt = null
      return
    }
    try {
      prompt_loading = true
      const { data: prompt_response, error: get_error } = await client.GET(
        "/api/projects/{project_id}/task/{task_id}/gen_prompt/{prompt_generator}",
        {
          params: {
            path: {
              project_id,
              task_id,
              prompt_generator,
            },
          },
        },
      )
      if (get_error) {
        throw get_error
      }
      prompt = prompt_response.prompt
    } catch (e) {
      prompt_error = createKilnError(e)
    } finally {
      prompt_loading = false
    }
  }
</script>

<div class="max-w-[1400px]">
  <AppPage title="Prompt Generator" subtitle={generator_name}>
    {#if prompt_loading}
      <div class="w-full min-h-[50vh] flex justify-center items-center">
        <div class="loading loading-spinner loading-lg"></div>
      </div>
    {:else if $current_task?.id != task_id}
      <div class="text-error">
        This link is to another task's prompts. Either select that task in the
        sidebar, or click prompts in the sidebar to load the current task's
        prompts.
      </div>
    {:else if prompt && !prompt_error}
      <div>
        <h2 class="text-sm font-medium mt-4 mb-1">Generator Description</h2>
        <p class="mb-6 text-sm text-gray-500">
          {generator_description}
        </p>

        <h2 class="text-sm font-medium mt-4 mb-1">
          How to Improve this Prompt
        </h2>
        <p class="mb-6 text-sm text-gray-500">
          To improve the quality of this prompt, <a
            href={`/settings/edit_task/${project_id}/${task_id}`}
            class="link">edit the task instructions or requirements</a
          ><span class={generator_id === "basic" ? "hidden" : ""}
            >, or add more data to your dataset by <a class="link" href="/run"
              >running the task</a
            >, or add ratings and repairs to your
            <a class="link" href={`/dataset/${project_id}/${task_id}`}
              >existing dataset</a
            ></span
          >.
        </p>

        <h2 class="text-sm font-medium mt-4 mb-1">Generated Prompt</h2>
        <p class="mb-2 text-sm text-gray-500">
          This is the current prompt generated by the &quot;{generator_name}&quot;
          generator. It may change over time if your underlying dataset or task
          definition changes.
        </p>
        <Output raw_output={prompt} />
      </div>
    {:else}
      <div class="text-error">
        {prompt_error?.getMessage() || "An unknown error occurred"}
      </div>
    {/if}
  </AppPage>
</div>
