<!-- #region LoggingSettings [C:3] [TYPE Component] [SEMANTICS settings, logging, config, level] -->
<!-- @BRIEF Logging configuration tab: log level, task log level, belief state toggle. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:SettingsUtils] -->
<!-- @PRE: settings object with logging config is provided. -->
<!-- @POST: User can adjust logging levels and toggle belief state. -->
<!-- @UX_STATE Loaded -> Form controls for logging configuration. -->
<!-- @UX_FEEDBACK Toast on save. -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";

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

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

  <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label
          for="log_level"
          class="block text-sm font-medium text-gray-700"
          >{$t.settings?.log_level}</label
        >
        <select
          id="log_level"
          bind:value={settings.logging.level}
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        >
          <option value="DEBUG">DEBUG</option>
          <option value="INFO">INFO</option>
          <option value="WARNING">WARNING</option>
          <option value="ERROR">ERROR</option>
          <option value="CRITICAL">CRITICAL</option>
        </select>
      </div>
      <div>
        <label
          for="task_log_level"
          class="block text-sm font-medium text-gray-700"
          >{$t.settings?.task_log_level}</label
        >
        <select
          id="task_log_level"
          bind:value={settings.logging.task_log_level}
          class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
        >
          <option value="DEBUG">DEBUG</option>
          <option value="INFO">INFO</option>
          <option value="WARNING">WARNING</option>
          <option value="ERROR">ERROR</option>
        </select>
      </div>
      <div class="md:col-span-2">
        <label class="flex items-center">
          <input
            type="checkbox"
            id="enable_belief_state"
            bind:checked={settings.logging.enable_belief_state}
            class="h-4 w-4 text-primary border-gray-300 rounded"
          />
          <span class="ml-2 block text-sm text-gray-900"
            >{$t.settings?.enable_belief_state}</span
          >
        </label>
        <p class="text-xs text-gray-500 mt-1 ml-6">
          {$t.settings?.belief_state_hint}
        </p>
      </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_logging}
      </button>
    </div>
  </div>
</div>
<!-- #endregion LoggingSettings -->
