<!-- #region SettingsPage [C:4] [TYPE Page] [SEMANTICS sveltekit, settings, tabbed, environment, config] -->
<!-- @BRIEF Consolidated Settings Page shell — thin layout that delegates each tab to its own component. -->
<!-- @LAYER Page -->
<!-- @RATIONALE Decomposed from 1451→287 lines by extracting 6 tab components and centralizing state in the page shell. The C4 rating reflects the page's role as tab orchestrator with settings load/save lifecycle. -->
<!-- @REJECTED Keeping all tab content inline was rejected due to INV_7 violations (single contract exceeded 150 lines, cyclomatic complexity > 10). -->
<!-- @DEPRECATED N/A -->
<!-- @REPLACED_BY N/A -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:EnvironmentsTab] -->
<!-- @RELATION DEPENDS_ON -> [LoggingSettings] -->
<!-- @RELATION DEPENDS_ON -> [LlmSettings] -->
<!-- @RELATION DEPENDS_ON -> [MigrationSettings] -->
<!-- @RELATION DEPENDS_ON -> [StorageSettings] -->
<!-- @RELATION DEPENDS_ON -> [FeaturesSettings] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:SettingsUtils] -->
<!-- @PRE Route is loaded in the authenticated UI shell. -->
<!-- @POST Page exposes consolidated settings tabs; each tab manages its own state. -->
<!-- @SIDE_EFFECT Loads settings data on mount. -->
<!-- @UX_STATE Loading -> Skeleton loader. -->
<!-- @UX_STATE Loaded -> Tabbed settings interface. -->
<!-- @UX_STATE Error -> Error banner with retry. -->
<!-- @UX_FEEDBACK Toast on save. -->
<!-- @UX_RECOVERY Refresh button reloads settings. -->
<script lang="ts">
  import { onMount } from "svelte";
  import { t } from "$lib/i18n/index.svelte.js";
  import { api } from "$lib/api.js";
  import { addToast } from "$lib/toasts.svelte.js";

  import {
    normalizeTab,
    readTabFromUrl,
    writeTabToUrl,
    normalizeLlmSettings,
  } from "./settings-utils.js";

  import EnvironmentsTab from "./EnvironmentsTab.svelte";
  import LoggingSettings from "./LoggingSettings.svelte";
  import LlmSettings from "./LlmSettings.svelte";
  import MigrationSettings from "./MigrationSettings.svelte";
  import StorageSettings from "./StorageSettings.svelte";
  import FeaturesSettings from "./FeaturesSettings.svelte";
  import SystemSettings from "./SystemSettings.svelte";
  import GitSettingsPage from "./git/+page.svelte";
  import AutomationSettingsPage from "./automation/+page.svelte";

  let activeTab = $state("environments");
  let settings = $state(null);
  let isLoading = $state(true);
  let error = $state(null);

  onMount(() => {
    activeTab = readTabFromUrl();
    const syncTabFromUrl = () => {
      activeTab = readTabFromUrl();
    };
    window.addEventListener("popstate", syncTabFromUrl);
    window.addEventListener("hashchange", syncTabFromUrl);
    void loadSettings();
    return () => {
      window.removeEventListener("popstate", syncTabFromUrl);
      window.removeEventListener("hashchange", syncTabFromUrl);
    };
  });

  async function loadSettings() {
    isLoading = true;
    error = null;
    try {
      const response = await api.getConsolidatedSettings();
      response.llm = normalizeLlmSettings(response.llm);
      settings = response;
    } catch (err) {
      error = err.message || $t.settings?.load_failed;
      console.error("[SettingsPage][Coherence:Failed]", err);
    } finally {
      isLoading = false;
    }
  }

  function handleTabChange(tab) {
    const normalizedTab = normalizeTab(tab);
    if (!normalizedTab) return;
    activeTab = normalizedTab;
    writeTabToUrl(activeTab);
  }

  async function handleSave() {
    console.log("[SettingsPage][Action] Saving settings");
    try {
      settings.llm = normalizeLlmSettings(settings.llm);
      await api.updateConsolidatedSettings(settings);
      addToast($t.settings?.save_success, "success");
    } catch (err) {
      console.error("[SettingsPage][Coherence:Failed]", err);
      addToast($t.settings?.save_failed, "error");
    }
  }

  async function handleRefresh() {
    await loadSettings();
  }
</script>

<div class="mx-auto w-full max-w-7xl space-y-6">
  <!-- Header -->
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-gray-900">
      {$t.settings?.title}
    </h1>
    <button
      class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
      onclick={handleRefresh}
    >
      {$t.common?.refresh}
    </button>
  </div>

  <!-- Error Banner -->
  {#if error}
    <div
      class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center justify-between"
    >
      <span>{error}</span>
      <button
        class="px-4 py-2 bg-destructive text-white rounded hover:bg-destructive-hover transition-colors"
        onclick={loadSettings}
      >
        {$t.common?.retry}
      </button>
    </div>
  {/if}

  <!-- Loading State -->
  {#if isLoading}
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
      <div class="space-y-3">
        <div class="h-8 animate-pulse rounded bg-slate-200"></div>
        <div class="h-8 animate-pulse rounded bg-slate-200"></div>
        <div class="h-8 animate-pulse rounded bg-slate-200"></div>
        <div class="h-8 animate-pulse rounded bg-slate-200"></div>
        <div class="h-8 animate-pulse rounded bg-slate-200"></div>
      </div>
    </div>
  {:else if settings}
    <!-- Tabs -->
    <div class="border-b border-gray-200 mb-6">
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "environments"}
        class:border-primary={activeTab === "environments"}
        class:text-gray-600={activeTab !== "environments"}
        class:border-transparent={activeTab !== "environments"}
        class:hover:text-gray-800={activeTab !== "environments"}
        class:hover:border-gray-300={activeTab !== "environments"}
        aria-current={activeTab === "environments" ? "page" : undefined}
        onclick={() => handleTabChange("environments")}
      >
        {$t.settings?.environments}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "logging"}
        class:border-primary={activeTab === "logging"}
        class:text-gray-600={activeTab !== "logging"}
        class:border-transparent={activeTab !== "logging"}
        class:hover:text-gray-800={activeTab !== "logging"}
        class:hover:border-gray-300={activeTab !== "logging"}
        aria-current={activeTab === "logging" ? "page" : undefined}
        onclick={() => handleTabChange("logging")}
      >
        {$t.settings?.logging}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "git"}
        class:border-primary={activeTab === "git"}
        class:text-gray-600={activeTab !== "git"}
        class:border-transparent={activeTab !== "git"}
        class:hover:text-gray-800={activeTab !== "git"}
        class:hover:border-gray-300={activeTab !== "git"}
        aria-current={activeTab === "git" ? "page" : undefined}
        onclick={() => handleTabChange("git")}
      >
        {$t.nav?.settings_git || $t.nav?.git || "Git"}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "llm"}
        class:border-primary={activeTab === "llm"}
        class:text-gray-600={activeTab !== "llm"}
        class:border-transparent={activeTab !== "llm"}
        class:hover:text-gray-800={activeTab !== "llm"}
        class:hover:border-gray-300={activeTab !== "llm"}
        aria-current={activeTab === "llm" ? "page" : undefined}
        onclick={() => handleTabChange("llm")}
      >
        {$t.settings?.llm}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "migration"}
        class:border-primary={activeTab === "migration"}
        class:text-gray-600={activeTab !== "migration"}
        class:border-transparent={activeTab !== "migration"}
        class:hover:text-gray-800={activeTab !== "migration"}
        class:hover:border-gray-300={activeTab !== "migration"}
        aria-current={activeTab === "migration" ? "page" : undefined}
        onclick={() => handleTabChange("migration")}
      >
        {$t.settings?.migration_sync}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "storage"}
        class:border-primary={activeTab === "storage"}
        class:text-gray-600={activeTab !== "storage"}
        class:border-transparent={activeTab !== "storage"}
        class:hover:text-gray-800={activeTab !== "storage"}
        class:hover:border-gray-300={activeTab !== "storage"}
        aria-current={activeTab === "storage" ? "page" : undefined}
        onclick={() => handleTabChange("storage")}
      >
        {$t.settings?.storage}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "features"}
        class:border-primary={activeTab === "features"}
        class:text-gray-600={activeTab !== "features"}
        class:border-transparent={activeTab !== "features"}
        class:hover:text-gray-800={activeTab !== "features"}
        class:hover:border-gray-300={activeTab !== "features"}
        aria-current={activeTab === "features" ? "page" : undefined}
        onclick={() => handleTabChange("features")}
      >
        {$t.settings?.features || "Features"}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "automation"}
        class:border-primary={activeTab === "automation"}
        class:text-gray-600={activeTab !== "automation"}
        class:border-transparent={activeTab !== "automation"}
        class:hover:text-gray-800={activeTab !== "automation"}
        class:hover:border-gray-300={activeTab !== "automation"}
        aria-current={activeTab === "automation" ? "page" : undefined}
        onclick={() => handleTabChange("automation")}
      >
        {$t.settings?.automation || "Automation"}
      </button>
      <button
        class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
        class:text-primary={activeTab === "system"}
        class:border-primary={activeTab === "system"}
        class:text-gray-600={activeTab !== "system"}
        class:border-transparent={activeTab !== "system"}
        class:hover:text-gray-800={activeTab !== "system"}
        class:hover:border-gray-300={activeTab !== "system"}
        aria-current={activeTab === "system" ? "page" : undefined}
        onclick={() => handleTabChange("system")}
      >
        {$t.settings?.system || "System"}
      </button>
    </div>

    <!-- Tab Content -->
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
      {#if activeTab === "environments"}
        <EnvironmentsTab bind:settings onSave={loadSettings} />
      {:else if activeTab === "logging"}
        <LoggingSettings bind:settings onSave={handleSave} />
      {:else if activeTab === "git"}
        <GitSettingsPage />
      {:else if activeTab === "llm"}
        <LlmSettings bind:settings onSave={handleSave} />
      {:else if activeTab === "migration"}
        <MigrationSettings />
      {:else if activeTab === "storage"}
        <StorageSettings bind:settings onSave={handleSave} />
      {:else if activeTab === "features"}
        <FeaturesSettings bind:settings onSave={handleSave} />
      {:else if activeTab === "automation"}
        <AutomationSettingsPage />
      {:else if activeTab === "system"}
        <SystemSettings bind:settings onSave={handleSave} />
      {/if}
    </div>
  {/if}
</div>
<!-- #endregion SettingsPage -->
