<!-- #region SettingsPage [C:3] [TYPE Page] [SEMANTICS sveltekit, admin, settings, adfs, logging] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Page component: routes/admin/settings/+page.svelte -->
<!-- @LAYER Page -->
<!--
@UX_STATE: Loading -> Default

@SEMANTICS: admin, adfs, mappings, configuration, logging
@PURPOSE:   UI for configuring Active Directory Group to local Role mappings for ADFS SSO and logging settings.
@LAYER     Feature
@RELATION  DEPENDS_ON -> [EXT:frontend:adminService]
@RELATION  DEPENDS_ON -> [EXT:frontend:ProtectedRoute]

@INVARIANT: Only accessible by users with "admin:settings" permission.
-->

<script lang="ts">
  // [SECTION: IMPORTS]
  import { onMount } from 'svelte';
  import { t } from '$lib/i18n/index.svelte.js';
  import ProtectedRoute from '$lib/components/auth/ProtectedRoute.svelte';
  import { adminService } from '../../../services/adminService';
  import { log } from '$lib/cot-logger';
  // [/SECTION: IMPORTS]

  let mappings = [];
  let roles = [];
  let loading = true;
  let error = null;

  let showCreateModal = false;
  let newMapping = {
    ad_group: '',
    role_id: ''
  };

  // [SECTION: LOGGING_CONFIG]
  let loggingConfig = {
    level: 'INFO',
    task_log_level: 'INFO',
    enable_belief_state: true
  };
  let loggingConfigLoading = false;
  let loggingConfigSaving = false;
  let loggingConfigSaved = false;
  // [/SECTION]

  const LOG_LEVELS = ['DEBUG', 'INFO', 'WARNING', 'ERROR'];

  // #region loadData:Function [TYPE Function]
// @ingroup Routes
  /**
   * @purpose Fetches AD mappings and roles from the backend to populate the UI.
   * @pre     Component is mounted and user has active session.
   * @post    mappings and roles variables are updated with backend data.
   * @returns {Promise<void>}
   * @side_effect Updates local 'mappings', 'roles', 'loading', and 'error' states.
   * @relation CALLS -> [EXT:method:adminService.getRoles]
   * @relation CALLS -> [EXT:method:adminService.getADGroupMappings]
   */
  async function loadData() {
    log("AdminSettingsPage", "REASON", "Loading AD mappings and roles");
    loading = true;
    try {
      // Fetch roles first as they are required for displaying mapping labels
      roles = await adminService.getRoles();
      
      try {
        mappings = await adminService.getADGroupMappings();
      } catch {
        log("AdminSettingsPage", "EXPLORE", "AD Mappings endpoint potentially unavailable");
      }
      
      log("AdminSettingsPage", "REFLECT", "AD mappings and roles loaded");
    } catch (e) {
      error = $t.admin?.settings?.load_failed ;
      log("AdminSettingsPage", "EXPLORE", "Failed to load AD mappings and roles", {}, String(e));
    } finally {
      loading = false;
    }
  }
  // #endregion loadData:Function

  // #region handleCreateMapping:Function [TYPE Function]
// @ingroup Routes
  /**
   * @purpose Submits a new AD Group to Role mapping to the backend.
   * @pre     'newMapping' object contains valid 'ad_group' and 'role_id'.
   * @post    A new mapping is created in the database and the table is refreshed.
   * @returns {Promise<void>}
   * @side_effect Closes the modal on success, shows alert on failure.
   * @relation CALLS -> [EXT:method:adminService.createADGroupMapping]
   */
  async function handleCreateMapping() {
    log("AdminSettingsPage", "REASON", "Creating AD mapping");
    
    // Guard Clause (@PRE)
    if (!newMapping.ad_group || !newMapping.role_id) {
        alert($t.admin?.settings?.fill_all_fields );
        return;
    }

    try {
      await adminService.createADGroupMapping(newMapping);
      showCreateModal = false;
      // Reset form
      newMapping = { ad_group: '', role_id: '' };
      await loadData();
      log("AdminSettingsPage", "REFLECT", "AD mapping created");
    } catch (e) {
      alert(
        ($t.admin?.settings?.create_mapping_failed ?? 'Create mapping failed')
          .replace('{error}', e.message || ($t.common?.unknown ?? 'Unknown')),
      );
      log("AdminSettingsPage", "EXPLORE", "Failed to create AD mapping", {}, String(e));
    }
  }
  // #endregion handleCreateMapping:Function

  // #region loadLoggingConfig:Function [TYPE Function]
// @ingroup Routes
  /**
   * @purpose Fetches current logging configuration from the backend.
   * @pre     Component is mounted and user has active session.
   * @post    loggingConfig variable is updated with backend data.
   * @returns {Promise<void>}
   * @relation CALLS -> [EXT:method:adminService.getLoggingConfig]
   */
  async function loadLoggingConfig() {
    log("AdminSettingsPage", "REASON", "Loading logging config");
    loggingConfigLoading = true;
    try {
      const config = await adminService.getLoggingConfig();
      loggingConfig = {
        level: config.level || 'INFO',
        task_log_level: config.task_log_level || 'INFO',
        enable_belief_state: config.enable_belief_state ?? true
      };
      log("AdminSettingsPage", "REFLECT", "Logging config loaded");
    } catch (e) {
      log("AdminSettingsPage", "EXPLORE", "Failed to load logging config", {}, String(e));
    } finally {
      loggingConfigLoading = false;
    }
  }
  // #endregion loadLoggingConfig:Function

  // #region saveLoggingConfig:Function [TYPE Function]
// @ingroup Routes
  /**
   * @purpose Saves logging configuration to the backend.
   * @pre     loggingConfig contains valid values.
   * @post    Configuration is saved and feedback is shown.
   * @returns {Promise<void>}
   * @relation CALLS -> [EXT:method:adminService.updateLoggingConfig]
   */
  async function saveLoggingConfig() {
    log("AdminSettingsPage", "REASON", "Saving logging config");
    loggingConfigSaving = true;
    loggingConfigSaved = false;
    try {
      await adminService.updateLoggingConfig(loggingConfig);
      loggingConfigSaved = true;
      log("AdminSettingsPage", "REFLECT", "Logging config saved");
      // Reset saved indicator after 2 seconds
      setTimeout(() => { loggingConfigSaved = false; }, 2000);
    } catch (e) {
      alert(
        ($t.admin?.settings?.save_logging_failed ?? 'Save logging config failed')
          .replace('{error}', e.message || ($t.common?.unknown ?? 'Unknown')),
      );
      log("AdminSettingsPage", "EXPLORE", "Failed to save logging config", {}, String(e));
    } finally {
      loggingConfigSaving = false;
    }
  }
  // #endregion saveLoggingConfig:Function

  onMount(() => {
    loadData();
    loadLoggingConfig();
  });
</script>

<ProtectedRoute requiredPermission="admin:settings">
  <!-- [SECTION: TEMPLATE] -->
  <div class="container mx-auto p-4">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">{$t.admin.settings.title}</h1>
      <button
        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover transition-colors"
        onclick={() => showCreateModal = true}
      >
        {$t.admin.settings.add_mapping}
      </button>
    </div>

    {#if loading}
      <div class="flex justify-center py-8">
        <p class="text-text-muted animate-pulse">{$t.common.loading}</p>
      </div>
    {:else if error}
      <div class="bg-destructive-light border-l-4 border-destructive-ring text-destructive p-4 rounded mb-4" role="alert">
        <p class="font-bold">{$t.common.error}</p>
        <p>{error}</p>
      </div>
    {:else}
      <div class="bg-surface-card shadow rounded-lg overflow-hidden border border-border">
        <table class="min-w-full divide-y divide-border">
          <thead class="bg-surface-muted">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{$t.admin.settings.ad_group}</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{$t.admin.settings.local_role}</th>
            </tr>
          </thead>
          <tbody class="bg-surface-card divide-y divide-border">
            {#each mappings as mapping}
              <tr class="hover:bg-surface-muted transition-colors">
                <td class="px-6 py-4 whitespace-nowrap font-mono text-sm text-text-muted">{mapping.ad_group}</td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <span class="px-2 py-1 bg-primary-light text-primary text-xs font-semibold rounded-full">
                    {roles.find(r => r.id === mapping.role_id)?.name || mapping.role_id}
                  </span>
                </td>
              </tr>
            {/each}
            {#if mappings.length === 0}
              <tr>
                <td colspan="2" class="px-6 py-12 text-center text-text-muted">
                  <div class="flex flex-col items-center">
                    <svg class="w-12 h-12 text-text-subtle mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    <p>{$t.admin.settings.no_mappings}</p>
                  </div>
                </td>
              </tr>
            {/if}
          </tbody>
        </table>
      </div>
    {/if}

    <!-- [SECTION: LOGGING_CONFIG_UI] -->
    <div class="mt-8 bg-surface-card shadow rounded-lg border border-border p-6">
      <h2 class="text-xl font-bold mb-4 text-text">{$t.settings?.logging }</h2>
      
      {#if loggingConfigLoading}
        <div class="flex justify-center py-4">
          <p class="text-text-muted animate-pulse">{$t.admin?.settings?.loading_logging }</p>
        </div>
      {:else}
        <div class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label for="admin-app-log-level" class="block text-sm font-medium text-text mb-1">{$t.admin?.settings?.app_log_level }</label>
              <select
                id="admin-app-log-level"
                bind:value={loggingConfig.level}
                class="w-full border border-border-strong p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-primary-ring"
              >
                {#each LOG_LEVELS as level}
                  <option value={level}>{level}</option>
                {/each}
              </select>
              <p class="text-xs text-text-muted mt-1">{$t.admin?.settings?.app_log_level_hint }</p>
            </div>
            
            <div>
              <label for="admin-task-log-level" class="block text-sm font-medium text-text mb-1">{$t.settings?.task_log_level }</label>
              <select
                id="admin-task-log-level"
                bind:value={loggingConfig.task_log_level}
                class="w-full border border-border-strong p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-primary-ring"
              >
                {#each LOG_LEVELS as level}
                  <option value={level}>{level}</option>
                {/each}
              </select>
              <p class="text-xs text-text-muted mt-1">{$t.admin?.settings?.task_log_level_hint }</p>
            </div>
          </div>
          
          <div class="flex items-center">
            <input
              type="checkbox"
              id="enable_belief_state"
              bind:checked={loggingConfig.enable_belief_state}
              class="h-4 w-4 text-primary focus-visible:ring-primary-ring border-border-strong rounded"
            />
            <label for="enable_belief_state" class="ml-2 block text-sm text-text">
              {$t.settings?.enable_belief_state }
            </label>
          </div>
          <p class="text-xs text-text-muted -mt-2">{$t.admin?.settings?.belief_state_hint }</p>
          
          <div class="flex items-center gap-3 pt-2">
            <button
              onclick={saveLoggingConfig}
              disabled={loggingConfigSaving}
              class="px-4 py-2 bg-primary text-white rounded font-medium hover:bg-primary-hover disabled:bg-border-strong disabled:cursor-not-allowed transition-colors"
            >
              {loggingConfigSaving ? ($t.settings?.saving ) : ($t.admin?.settings?.save_configuration )}
            </button>
            {#if loggingConfigSaved}
              <span class="text-success text-sm font-medium">✓ {$t.admin?.settings?.saved }</span>
            {/if}
          </div>
        </div>
      {/if}
    </div>
    <!-- [/SECTION: LOGGING_CONFIG_UI] -->

    {#if showCreateModal}
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
        <div class="bg-surface-card rounded-lg shadow-xl p-6 max-w-md w-full">
          <h2 class="text-xl font-bold mb-4 border-b pb-2">{$t.admin.settings.modal_title}</h2>
          <form onsubmit={(event) => {
            event.preventDefault();
            handleCreateMapping();
          }}>
            <div class="mb-4">
              <label for="admin-ad-group-dn" class="block text-sm font-medium text-text mb-1">{$t.admin.settings.ad_group_dn}</label>
              <input
                id="admin-ad-group-dn"
                type="text"
                bind:value={newMapping.ad_group}
                class="w-full border border-border-strong p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-primary-ring"
                placeholder={$t.admin?.settings?.ad_group_placeholder }
                required
              />
              <p class="text-xs text-text-muted mt-1">{$t.admin.settings.ad_group_hint}</p>
            </div>
            <div class="mb-6">
              <label for="admin-local-role-select" class="block text-sm font-medium text-text mb-1">{$t.admin.settings.local_role_select}</label>
              <select
                id="admin-local-role-select"
                bind:value={newMapping.role_id}
                class="w-full border border-border-strong p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-primary-ring"
                required
              >
                <option value="" disabled>{$t.admin.settings.select_role}</option>
                {#each roles as role}
                  <option value={role.id}>{role.name}</option>
                {/each}
              </select>
            </div>
            <div class="flex justify-end gap-3">
              <button
                type="button"
                class="px-4 py-2 text-text-muted hover:text-text font-medium"
                onclick={() => showCreateModal = false}
              >
                {$t.common.cancel}
              </button>
              <button
                type="submit"
                class="px-6 py-2 bg-primary text-white rounded font-bold hover:bg-primary-hover shadow-md"
              >
                {$t.common.save}
              </button>
            </div>
          </form>
        </div>
      </div>
    {/if}
  </div>
  <!-- [/SECTION: TEMPLATE] -->
</ProtectedRoute>


<!-- #endregion SettingsPage -->
