<!-- #region FeaturesSettings [C:2] [TYPE Component] [SEMANTICS settings, features, toggle, enable] -->
<!-- @BRIEF Feature flags configuration tab: enable/disable top-level application features. -->
<!-- @LAYER UI -->
<!-- @PRE: settings object with features config is provided. -->
<!-- @POST: User can toggle feature flags. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";
  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?.features || "Features"}
  </h2>
  <p class="text-gray-600 mb-6">
    {$t.settings?.features_description || "Enable or disable top-level application features."}
  </p>

  <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
    <div class="space-y-4">
      <!-- dataset_review toggle -->
      <div class="flex items-center justify-between">
        <div>
          <span class="flex items-center gap-1.5">
            <label for="feature-dataset-review" class="text-sm font-medium text-gray-900">
              {$t.settings?.feature_dataset_review || "Dataset Review"}
            </label>
            <HelpTooltip text={$t.settings?.help_feature_dataset_review || ""} />
          </span>
          <p class="text-xs text-gray-500 mt-1">
            {$t.settings?.feature_dataset_review_hint || "Automatic dataset review, clarification workflow, and SQL execution."}
          </p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input id="feature-dataset-review" type="checkbox" class="sr-only peer" bind:checked={settings.features.dataset_review}>
          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
        </label>
      </div>

      <!-- health_monitor toggle -->
      <div class="flex items-center justify-between border-t border-gray-200 pt-4">
        <div>
          <span class="flex items-center gap-1.5">
            <label for="feature-health-monitor" class="text-sm font-medium text-gray-900">
              {$t.settings?.feature_health_monitor || "Health Monitor"}
            </label>
            <HelpTooltip text={$t.settings?.help_feature_health_monitor || ""} />
          </span>
          <p class="text-xs text-gray-500 mt-1">
            {$t.settings?.feature_health_monitor_hint || "Dashboard health monitoring and validation report aggregation."}
          </p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input id="feature-health-monitor" type="checkbox" class="sr-only peer" bind:checked={settings.features.health_monitor}>
          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
        </label>
      </div>
    </div>

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