<!-- #region LlmSettings [C:3] [TYPE Component] [SEMANTICS settings, llm, provider, prompt, binding] -->
<!-- @BRIEF LLM configuration tab: providers, bindings, prompts for chatbot and validation. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [ProviderConfig] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:SettingsUtils] -->
<!-- @PRE: settings object with llm config and llm_providers list is provided. -->
<!-- @POST: User can configure LLM provider bindings and prompts. -->
<!-- @UX_STATE Loaded -> Full LLM settings panel with provider config, bindings, and prompts. -->
<!-- @UX_FEEDBACK Toast on save. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";
  import ProviderConfig from "../../components/llm/ProviderConfig.svelte";
  import HelpTooltip from "$lib/ui/HelpTooltip.svelte";

  let { settings = $bindable(), onSave } = $props();
</script>

<div class="text-lg font-medium mb-4">
  <h2 class="text-xl font-bold mb-4">
    {$t.settings?.llm}
  </h2>
  <p class="text-gray-600 mb-6">
    {$t.settings?.llm_description}
  </p>

  <ProviderConfig
    providers={settings.llm_providers || []}
    onSave={onSave}
  />

  <div class="mt-6 rounded-lg border border-gray-200 bg-white p-4">
    <h3 class="text-base font-semibold text-gray-900">
      {$t.settings?.llm_chatbot_settings_title}
    </h3>
    <p class="mt-1 text-sm text-gray-600">
      {$t.settings?.llm_chatbot_settings_description}
    </p>

    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
      <div>
        <span class="flex items-center gap-1.5 mb-1.5">
          <label
            for="planner-provider"
            class="text-sm font-medium text-gray-700"
          >
            {$t.settings?.llm_chatbot_provider}
          </label>
          <HelpTooltip text={$t.settings?.help_llm_chatbot_provider || ""} />
        </span>
        <select
          id="planner-provider"
          bind:value={settings.llm.assistant_planner_provider}
          class="mt-1 block w-full rounded-md border border-gray-300 p-2 text-sm"
        >
          <option value="">{$t.dashboard?.use_default}</option>
          {#each settings.llm_providers || [] as provider}
            <option value={provider.id}>
              {provider.name} ({provider.default_model})
            </option>
          {/each}
        </select>
      </div>

      <div>
        <span class="flex items-center gap-1.5 mb-1.5">
          <label
            for="planner-model"
            class="text-sm font-medium text-gray-700"
          >
            {$t.settings?.llm_chatbot_model}
          </label>
          <HelpTooltip text={$t.settings?.help_llm_chatbot_model || ""} />
        </span>
        <input
          id="planner-model"
          type="text"
          bind:value={settings.llm.assistant_planner_model}
          placeholder={$t.settings?.llm_chatbot_model_placeholder}
          class="mt-1 block w-full rounded-md border border-gray-300 p-2 text-sm"
        />
      </div>
    </div>
  </div>

  <div class="mt-6 rounded-lg border border-gray-200 bg-white p-4">
    <h3 class="text-base font-semibold text-gray-900">
      {$t.settings?.llm_provider_bindings_title}
    </h3>
    <p class="mt-1 text-sm text-gray-600">
      {$t.settings?.llm_provider_bindings_description}
    </p>

    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
      <div>
        <span class="flex items-center gap-1.5 mb-1.5">
          <label
            for="binding-documentation"
            class="text-sm font-medium text-gray-700"
          >
            {$t.settings?.llm_binding_documentation}
          </label>
          <HelpTooltip text={$t.settings?.help_llm_binding_documentation || ""} />
        </span>
        <select
          id="binding-documentation"
          bind:value={settings.llm.provider_bindings.documentation}
          class="mt-1 block w-full rounded-md border border-gray-300 p-2 text-sm"
        >
          <option value="">{$t.dashboard?.use_default}</option>
          {#each settings.llm_providers || [] as provider}
            <option value={provider.id}>
              {provider.name} ({provider.default_model})
            </option>
          {/each}
        </select>
      </div>

      <div>
        <span class="flex items-center gap-1.5 mb-1.5">
          <label
            for="binding-git-commit"
            class="text-sm font-medium text-gray-700"
          >
            {$t.settings?.llm_binding_git_commit}
          </label>
          <HelpTooltip text={$t.settings?.help_llm_binding_git_commit || ""} />
        </span>
        <select
          id="binding-git-commit"
          bind:value={settings.llm.provider_bindings.git_commit}
          class="mt-1 block w-full rounded-md border border-gray-300 p-2 text-sm"
        >
          <option value="">{$t.dashboard?.use_default}</option>
          {#each settings.llm_providers || [] as provider}
            <option value={provider.id}>
              {provider.name} ({provider.default_model})
            </option>
          {/each}
        </select>
      </div>
    </div>
  </div>

  <div class="mt-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
    <h3 class="text-base font-semibold text-gray-900">
      {$t.settings?.llm_prompts_title}
    </h3>
    <p class="mt-1 text-sm text-gray-600">
      {$t.settings?.llm_prompts_description}
    </p>

    <div class="mt-4 space-y-4">
      <div>
        <span class="flex items-center gap-1.5 mb-1.5">
          <label
            for="documentation-prompt"
            class="text-sm font-medium text-gray-700"
          >
            {$t.settings?.llm_prompt_documentation}
          </label>
          <HelpTooltip text={$t.settings?.help_llm_prompt_documentation || ""} />
        </span>
        <textarea
          id="documentation-prompt"
          bind:value={settings.llm.prompts.documentation_prompt}
          rows="8"
          class="mt-1 block w-full rounded-md border border-gray-300 p-2 font-mono text-xs"
        ></textarea>
      </div>

      <div>
        <span class="flex items-center gap-1.5 mb-1.5">
          <label
            for="git-commit-prompt"
            class="text-sm font-medium text-gray-700"
          >
            {$t.settings?.llm_prompt_git_commit}
          </label>
          <HelpTooltip text={$t.settings?.help_llm_prompt_git_commit || ""} />
        </span>
        <textarea
          id="git-commit-prompt"
          bind:value={settings.llm.prompts.git_commit_prompt}
          rows="8"
          class="mt-1 block w-full rounded-md border border-gray-300 p-2 font-mono text-xs"
        ></textarea>
      </div>
    </div>

    <div class="mt-4 flex justify-end">
      <button
        class="rounded bg-primary px-4 py-2 text-white hover:bg-primary-hover"
        onclick={onSave}
      >
        {$t.settings?.save_llm_prompts}
      </button>
    </div>
  </div>
</div>
<!-- #endregion LlmSettings -->
