<!-- [DEF:LLMSettingsPage:Component] -->
<!-- 
@TIER: STANDARD
@PURPOSE: Admin settings page for LLM provider configuration.
@LAYER: UI
@RELATION: CALLS -> frontend/src/components/llm/ProviderConfig.svelte
-->

<script>
  import { onMount } from 'svelte';
  import ProviderConfig from '../../../../components/llm/ProviderConfig.svelte';
  import { requestApi } from '../../../../lib/api';

  let providers = [];
  let loading = true;

  async function fetchProviders() {
    loading = true;
    try {
      providers = await requestApi('/llm/providers');
    } catch (err) {
      console.error("Failed to fetch providers", err);
    } finally {
      loading = 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">LLM Settings</h1>
    <p class="mt-2 text-gray-600">
      Configure LLM providers for dashboard validation, 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} />
  {/if}
</div>

<!-- [/DEF:LLMSettingsPage:Component] -->