<!-- #region LLMReportPage [C:3] [TYPE Page] [SEMANTICS sveltekit, admin, llm, provider, config] -->
<!-- @BRIEF Page component: routes/admin/settings/llm/+page.svelte -->
<!-- @LAYER Page -->
<!--
@UX_STATE: Loading -> Default

@SEMANTICS: admin, llm, provider, config, prompt
@PURPOSE: Admin settings page for LLM provider configuration.
@LAYER UI
@RELATION CALLS -> [ProviderConfig]
-->

<script lang="ts">
  import { onMount } from 'svelte';
  import ProviderConfig from '../../../../components/llm/ProviderConfig.svelte';
  import { t } from '$lib/i18n/index.svelte.js';
  import { addToast } from '$lib/toasts.svelte.js';
  import { requestApi } from '../../../../lib/api';

  let providers = [];
  let loading = true;
  let savingPrompts = false;
  let plannerProvider = '';
  let plannerModel = '';
  let bindings = {
    documentation: '',
    git_commit: '',
  };
  let prompts = {
    documentation_prompt: '',
    git_commit_prompt: '',
  };

  const DEFAULT_LLM_PROMPTS = {
    documentation_prompt:
      "Generate professional documentation for the following dataset and its columns.\\nDataset: {dataset_name}\\nColumns: {columns_json}\\n\\nProvide the documentation in JSON format:\\n{\\n    \\\"dataset_description\\\": \\\"General description of the dataset\\\",\\n    \\\"column_descriptions\\\": [\\n        {\\n            \\\"name\\\": \\\"column_name\\\",\\n            \\\"description\\\": \\\"Generated description\\\"\\n        }\\n    ]\\n}",
    git_commit_prompt:
      "Generate a concise and professional git commit message based on the following diff and recent history.\\nUse Conventional Commits format (e.g., feat: ..., fix: ..., docs: ...).\\n\\nRecent History:\\n{history}\\n\\nDiff:\\n{diff}\\n\\nCommit Message:",
  };
  const DEFAULT_LLM_PROVIDER_BINDINGS = {
    documentation: '',
    git_commit: '',
  };

  async function fetchProviders() {
    loading = true;
    try {
      const [providerList, consolidatedSettings] = await Promise.all([
        requestApi('/llm/providers'),
        requestApi('/settings/consolidated'),
      ]);
      providers = providerList;
      prompts = {
        ...DEFAULT_LLM_PROMPTS,
        ...(consolidatedSettings?.llm?.prompts || {}),
      };
      bindings = {
        ...DEFAULT_LLM_PROVIDER_BINDINGS,
        ...(consolidatedSettings?.llm?.provider_bindings || {}),
      };
      plannerProvider = consolidatedSettings?.llm?.assistant_planner_provider || '';
      plannerModel = consolidatedSettings?.llm?.assistant_planner_model || '';
    } catch (err) {
      console.error("Failed to fetch providers", err);
    } finally {
      loading = false;
    }
  }

  async function saveSettings() {
    savingPrompts = true;
    try {
      const current = await requestApi('/settings/consolidated');
      const payload = {
        ...current,
        llm: {
          ...(current?.llm || {}),
          prompts: {
            ...DEFAULT_LLM_PROMPTS,
            ...prompts,
          },
          provider_bindings: {
            ...DEFAULT_LLM_PROVIDER_BINDINGS,
            ...bindings,
          },
          assistant_planner_provider: plannerProvider || '',
          assistant_planner_model: plannerModel || '',
        },
      };
      await requestApi('/settings/consolidated', 'PATCH', payload);
      addToast($t.settings?.save_success , 'success');
    } catch (err) {
      console.error('[LLMSettingsPage][Coherence:Failed] Failed to save llm settings', err);
      addToast($t.settings?.save_failed , 'error');
    } finally {
      savingPrompts = false;
    }
  }

  onMount(fetchProviders);
</script>

<div class="max-w-4xl mx-auto py-8 px-4">
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900">{$t.settings?.llm }</h1>
      <p class="mt-2 text-gray-600">
        {$t.settings?.llm_description ||
          "Configure LLM providers for documentation generation and git assistance."}
      </p>
  </div>

  {#if loading}
    <div class="flex justify-center py-12">
      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
    </div>
  {:else}
    <ProviderConfig {providers} onSave={fetchProviders} />

    <div class="mt-6 rounded-lg border border-gray-200 bg-white p-4">
      <h2 class="text-lg font-semibold text-gray-900">
        {$t.settings?.llm_chatbot_settings_title }
      </h2>
      <p class="mt-1 text-sm text-gray-600">
        {$t.settings?.llm_chatbot_settings_description ||
          'Select provider and optional model override for assistant intent planning.'}
      </p>

      <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label for="admin-planner-provider" class="block text-sm font-medium text-gray-700">
            {$t.settings?.llm_chatbot_provider }
          </label>
          <select
            id="admin-planner-provider"
            bind:value={plannerProvider}
            class="mt-1 block w-full rounded-md border border-gray-300 p-2 text-sm"
          >
            <option value="">{$t.dashboard?.use_default }</option>
            {#each providers as provider}
              <option value={provider.id}>
                {provider.name} ({provider.default_model})
              </option>
            {/each}
          </select>
        </div>

        <div>
          <label for="admin-planner-model" class="block text-sm font-medium text-gray-700">
            {$t.settings?.llm_chatbot_model }
          </label>
          <input
            id="admin-planner-model"
            type="text"
            bind:value={plannerModel}
            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">
      <h2 class="text-lg font-semibold text-gray-900">
        {$t.settings?.llm_provider_bindings_title }
      </h2>
      <p class="mt-1 text-sm text-gray-600">
        {$t.settings?.llm_provider_bindings_description ||
          'Select which provider is used by default for each LLM task.'}
      </p>

      <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label for="admin-binding-documentation" class="block text-sm font-medium text-gray-700">
            {$t.settings?.llm_binding_documentation }
          </label>
          <select
            id="admin-binding-documentation"
            bind:value={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 providers as provider}
              <option value={provider.id}>
                {provider.name} ({provider.default_model})
              </option>
            {/each}
          </select>
        </div>

        <div>
          <label for="admin-binding-git-commit" class="block text-sm font-medium text-gray-700">
            {$t.settings?.llm_binding_git_commit }
          </label>
          <select
            id="admin-binding-git-commit"
            bind:value={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 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">
      <h2 class="text-lg font-semibold text-gray-900">
        {$t.settings?.llm_prompts_title }
      </h2>
      <p class="mt-1 text-sm text-gray-600">
        {$t.settings?.llm_prompts_description ||
          'Edit reusable prompts used for documentation and git commit generation.'}
      </p>

      <div class="mt-4 space-y-4">
        <div>
          <label for="admin-documentation-prompt" class="block text-sm font-medium text-gray-700">
            {$t.settings?.llm_prompt_documentation }
          </label>
          <textarea
            id="admin-documentation-prompt"
            bind:value={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>
          <label for="admin-git-commit-prompt" class="block text-sm font-medium text-gray-700">
            {$t.settings?.llm_prompt_git_commit }
          </label>
          <textarea
            id="admin-git-commit-prompt"
            bind:value={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 disabled:opacity-60"
          disabled={savingPrompts}
          onclick={saveSettings}
        >
          {savingPrompts ? '...' : ($t.settings?.save_llm_prompts )}
        </button>
      </div>
    </div>
  {/if}
</div>

<!-- #endregion LLMReportPage -->
