<!-- #region LanguagesSettings [C:2] [TYPE Component] [SEMANTICS settings, languages, allowed, select] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Translation languages settings tab: choose which BCP-47 languages are allowed for translation
     jobs, dictionary entries, and everywhere else languages are specified. -->
<!-- @PRE settings object with allowed_languages array is provided. -->
<!-- @POST User can select/deselect languages from the full list. -->
<script lang="ts">
  import { t } from '$lib/i18n/index.svelte.js';
  import { ALL_LANGUAGES } from '$lib/i18n/languages.js';

  let { settings = $bindable(), onSave } = $props();

  // Ensure allowed_languages exists on the settings object
  let allowed = $derived(settings.allowed_languages as string[] || []);

  function toggleLanguage(code: string) {
    if (allowed.includes(code)) {
      settings.allowed_languages = allowed.filter((c: string) => c !== code);
    } else {
      settings.allowed_languages = [...allowed, code];
    }
  }

  function selectAll() {
    settings.allowed_languages = ALL_LANGUAGES.map(l => l.code);
  }

  function selectNone() {
    settings.allowed_languages = [];
  }
</script>

<div>
  <h2 class="text-xl font-bold mb-4">
    {$t.settings?.languages || 'Languages'}
  </h2>
  <p class="text-text-muted mb-6">
    {$t.settings?.languages_description || 'Choose which languages are available for translation jobs, dictionary entries, and language selection components. Changes apply immediately on save.'}
  </p>

  <div class="bg-surface-muted p-6 rounded-lg border border-border">
    <!-- Count & quick actions -->
    <div class="flex items-center justify-between mb-4">
      <span class="text-sm text-text-muted">
        {$t.settings?.languages_count?.replace('{count}', String(allowed.length)).replace('{total}', String(ALL_LANGUAGES.length)) || `${allowed.length} of ${ALL_LANGUAGES.length} selected`}
      </span>
      <div class="flex gap-2">
        <button
          onclick={selectAll}
          class="px-3 py-1 text-xs border border-border-strong rounded hover:bg-surface-card text-text-muted hover:text-text"
        >
          {$t.common?.select_all || 'Select All'}
        </button>
        <button
          onclick={selectNone}
          class="px-3 py-1 text-xs border border-border-strong rounded hover:bg-surface-card text-text-muted hover:text-text"
        >
          {$t.common?.clear || 'Clear'}
        </button>
      </div>
    </div>

    <!-- Language list with search -->
    <div class="max-h-80 overflow-y-auto border border-border rounded-lg divide-y divide-border bg-surface-card">
      {#each ALL_LANGUAGES as lang}
        <label
          class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-primary-light cursor-pointer transition-colors {allowed.includes(lang.code) ? 'bg-primary-light' : ''}"
        >
          <input
            type="checkbox"
            checked={allowed.includes(lang.code)}
            onchange={() => toggleLanguage(lang.code)}
            class="rounded border-border-strong text-primary focus-visible:ring-primary-ring"
          />
          <span class="flex-1">{lang.name}</span>
          <span class="text-xs text-text-subtle font-mono">{lang.code}</span>
        </label>
      {/each}
    </div>

    <!-- Extra hint -->
    <div class="mt-4 flex items-start gap-2 text-xs text-text-muted">
      <svg class="w-4 h-4 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <span>
        {$t.settings?.languages_hint || 'These codes follow the BCP-47 standard (e.g., "ru" for Russian, "en" for English, "de" for German). Only checked languages will appear in language dropdowns across the application.'}
      </span>
    </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_languages || $t.settings?.save_logging || 'Save'}
      </button>
    </div>
  </div>
</div>
<!-- #endregion LanguagesSettings -->
