{_t.translate?.config?.basic_info}

{_t.translate?.config?.name} * {#if validationErrors.name}

{validationErrors.name}

{/if}

{_t.translate?.config?.description}

</div>
    </div>
  </section>

<section class="bg-surface-card border border-border rounded-lg p-6">
    <h2 class="text-lg font-semibold text-text mb-4">{_t.translate?.config?.datasource}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-text mb-1 flex items-center gap-1">
          {_t.translate?.config?.environment}
          <HelpTooltip text={_t.translate?.config?.help_environment || ''} />
        </label>
        <select
          bind:value={environmentId}
          onchange={(e) => onEnvChange(e.target.value)}
          class="w-full px-3 py-2 border border-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
        >
          <option value="">{_t.translate?.config?.select_environment}</option>
          {#each environments as env}
            <option value={env.id}>{env.name} ({env.id})</option>
          {/each}
        </select>
      </div>
      <div class="relative">
        <label class="block text-sm font-medium text-text mb-1 flex items-center gap-1">
          {_t.translate?.config?.datasource_id}
          <HelpTooltip text={_t.translate?.config?.help_datasource || ''} />
        </label>
        <input
          type="text"
          bind:value={datasourceSearch}
          oninput={handleDatasourceSearch}
          onfocus={() => searchDatasources('')}
          onblur={() => setTimeout(() => (showDatasourceDropdown = false), 150)}
          class="w-full px-3 py-2 border border-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
          placeholder={_t.translate?.config?.datasource_search_placeholder || 'Search datasets...'}
        />
        {#if datasourceLoading}
          <div class="absolute right-3 top-9 animate-spin h-4 w-4 border-2 border-primary-ring border-t-transparent rounded-full"></div>
        {/if}
        {#if showDatasourceDropdown}
          <div class="absolute z-10 mt-1 w-full bg-surface-card border border-border rounded-lg shadow-lg max-h-60 overflow-y-auto">
            {#each datasourceList as ds}
              <button
                type="button"
                onmousedown={() => selectDatasource(ds)}
                class="w-full text-left px-3 py-2 text-sm hover:bg-primary-light border-b border-border last:border-b-0"
              >
                <span class="font-medium">{ds.table_name}</span>
                <span class="text-text-subtle ml-2">{ds.schema}</span>
                <span class="float-right text-xs text-text-subtle">{ds.database_name} · {ds.database_dialect}</span>
              </button>
            {/each}
          </div>
        {/if}
      </div>
      {#if databaseDialect}
        <div class="md:col-span-2">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-light text-success">
            {_t.translate?.config?.detected_dialect.replace('{dialect}', databaseDialect)}
          </span>
        </div>
      {/if}
    </div>

{#if isColumnsLoading}
      <div class="mt-4 h-8 bg-surface-muted rounded animate-pulse" />
    {/if}

{#if columnList.length > 0}
      <div class="mt-4">
        <label class="block text-sm font-medium text-text mb-2">
          {_t.translate?.config?.available_columns.replace('{count}', columnList.length)}
        </label>
        <div class="max-h-40 overflow-y-auto border border-border rounded-lg divide-y divide-border">
          {#each columnList as col}
            <div class="px-3 py-1.5 text-sm flex items-center gap-2 {isVirtual(col.name) ? 'bg-warning-light' : ''}">
              <span class="font-mono text-xs">{col.name}</span>
              {#if col.type}
                <span class="text-xs text-text-subtle">({col.type})</span>
              {/if}
              {#if isVirtual(col.name)}
                <span class="text-xs text-warning italic">{_t.translate?.config?.virtual}</span>
              {/if}
            </div>
          {/each}
        </div>
      </div>
    {/if}
  </section>

<section class="bg-surface-card border border-border rounded-lg p-6">
    <h2 class="text-lg font-semibold text-text mb-4">{_t.translate?.config?.column_mapping}</h2>

<div class="mb-4">
      <label class="block text-sm font-medium text-text mb-1 flex items-center gap-1">
        {_t.translate?.config?.translation_column} <span class="text-destructive">*</span>
        <HelpTooltip text={_t.translate?.config?.help_translation_column || ''} />
      </label>
      <select
        bind:value={translationColumn}
        class="w-full px-3 py-2 border rounded-lg text-sm {validationErrors.translationColumn ? 'border-destructive-ring bg-destructive-light' : 'border-border-strong'} focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
      >
        <option value="">{_t.translate?.config?.select_column}</option>
        {#each columnList as col}
          <option value={col.name}>{col.name}{isVirtual(col.name) ? ` (${_t.translate?.config?.virtual})` : ''}</option>
        {/each}
      </select>
      {#if validationErrors.translationColumn}
        <p class="text-xs text-destructive mt-1">{validationErrors.translationColumn}</p>
      {/if}
    </div>

<div class="mb-4">
      <div class="flex items-center justify-between mb-2">
        <label class="block text-sm font-medium text-text flex items-center gap-1">
          {_t.translate?.config?.key_columns}
          <HelpTooltip text={_t.translate?.config?.help_key_columns || ''} />
        </label>
        {#if sourceKeyCols.length > 0}
          <button
            onclick={() => { sourceKeyCols = []; targetKeyCols = []; }}
            class="text-xs text-destructive hover:text-destructive"
          >
            {_t.translate?.config?.clear_all}
          </button>
        {/if}
      </div>

{#if columnList.length === 0}
        <div class="flex flex-wrap gap-2 mb-3">
          <button
            onclick={() => {
              sourceKeyCols = [...sourceKeyCols, ''];
              targetKeyCols = [...targetKeyCols, ''];
            }}
            class="px-3 py-1 text-xs border border-dashed border-border-strong rounded text-text-muted hover:border-primary-ring hover:text-primary"
          >
            {_t.translate?.config?.add_key_column}
          </button>
        </div>
      {:else}
        <div class="flex flex-wrap gap-2 mb-3">
          {#each columnList as col}
            <button
              onclick={() => toggleSourceKeyCol(col.name)}
              class="px-2.5 py-1 text-xs rounded-full border transition-colors
                {sourceKeyCols.includes(col.name)
                  ? 'bg-primary-light border-primary-ring text-primary'
                  : 'bg-surface-card border-border text-text-muted hover:border-border-strong'}"
              title={isVirtual(col.name) ? _t.translate?.config?.virtual_column_warning.replace('{col}', col.name) : ''}
            >
              {col.name}
              {#if isVirtual(col.name)}
                <span class="text-warning">*</span>
              {/if}
            </button>
          {/each}
        </div>
      {/if}

{#if sourceKeyCols.length > 0}
        <div class="space-y-2">
          {#each sourceKeyCols as srcCol, idx}
            <div class="flex items-center gap-2">
              <input
                type="text"
                value={srcCol}
                disabled
                class="flex-1 px-3 py-1.5 border border-border bg-surface-muted rounded text-sm font-mono"
              />
              <span class="text-text-subtle text-sm">→</span>
              <input
                type="text"
                value={targetKeyCols[idx] || ''}
                placeholder={_t.translate?.config?.target_column_placeholder}
                oninput={(e) => updateTargetKeyCol(idx, e.target.value)}
                class="flex-1 px-3 py-1.5 border border-border-strong rounded text-sm font-mono focus-visible:ring-2 focus-visible:ring-primary-ring"
              />
              <button
                onclick={() => {
                  sourceKeyCols = sourceKeyCols.filter((_, i) => i !== idx);
                  targetKeyCols = targetKeyCols.filter((_, i) => i !== idx);
                }}
                class="p-1 text-text-subtle hover:text-destructive"
              >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
          {/each}
        </div>
      {/if}
      {#if validationErrors.targetKeyCols}
        <p class="text-xs text-destructive mt-1">{validationErrors.targetKeyCols}</p>
      {/if}
    </div>

<div>
      <label class="block text-sm font-medium text-text mb-2 flex items-center gap-1">
        {_t.translate?.config?.context_columns}
        <HelpTooltip text={_t.translate?.config?.help_context_columns || ''} />
      </label>
      {#if columnList.length === 0}
        <p class="text-xs text-text-subtle">{_t.translate?.config?.select_datasource_hint}</p>
      {:else}
        <div class="flex flex-wrap gap-2">
          {#each columnList as col}
            <button
              onclick={() => toggleContextColumn(col.name)}
              class="px-2.5 py-1 text-xs rounded-full border transition-colors
                {contextColumns.includes(col.name)
                  ? 'bg-info-light border-purple-300 text-info'
                  : 'bg-surface-card border-border text-text-muted hover:border-border-strong'}"
            >
              {col.name}
              {#if isVirtual(col.name)}
                <span class="text-warning">*</span>
              {/if}
            </button>
          {/each}
        </div>
      {/if}
    </div>
  </section>

<section class="bg-surface-card border border-border rounded-lg p-6">
    <h2 class="text-lg font-semibold text-text mb-4">{_t.translate?.config?.llm_settings}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-text mb-1 flex items-center gap-1">
          {_t.translate?.config?.provider}
          <HelpTooltip text={_t.translate?.config?.help_provider || ''} />
        </label>
        <select bind:value={providerId} class="w-full px-3 py-2 border border-border-strong rounded-lg text-sm">
          <option value="">{_t.translate?.config?.select_provider}</option>
          {#each llmProviders as provider}
            <option value={provider.id}>{provider.name || provider.provider_type}</option>
          {/each}
        </select>
      </div>
      <div>
        <div class="flex items-center gap-1 mb-1">
          <span class="text-sm font-medium text-text">{_t.translate?.config?.target_language}</span>
          <span class="text-destructive">*</span>
          <HelpTooltip text={_t.translate?.config?.help_target_language || ''} />
        </div>
        <MultiSelect
          label=""
          options={languageOptions}
          bind:selected={targetLanguages}
          searchable={true}
          placeholder={_t.translate?.config?.target_language_search_placeholder || 'Search languages...'}
          required={false}
        />
        {#if targetLanguages.length === 0}
          <p class="text-xs text-warning mt-1">{_t.translate?.config?.target_language_required || 'Select at least one target language'}</p>
        {/if}
      </div>
    </div>

<div class="mt-3">
      <label class="flex items-start gap-3 cursor-pointer">
        <input
          type="checkbox"
          bind:checked={disableReasoning}
          class="mt-0.5 rounded border-border-strong text-primary focus-visible:ring-primary-ring"
        />
        <div>
          <span class="text-sm font-medium text-text flex items-center gap-1">
            {_t.translate?.config?.disable_reasoning || 'Disable reasoning (save tokens)'}
            <HelpTooltip text={_t.translate?.config?.help_disable_reasoning || ''} />
          </span>
          <p class="text-xs text-text-subtle mt-0.5">
            {_t.translate?.config?.disable_reasoning_hint || 'Saves output tokens by suppressing Chain of Thought reasoning'}
          </p>
        </div>
      </label>
    </div>
  </section>

<section class="bg-surface-card border border-border rounded-lg p-6">
    <h2 class="text-lg font-semibold text-text mb-4 flex items-center gap-2">
      {_t.translate?.config?.terminology_dictionaries}
      <HelpTooltip text={_t.translate?.config?.help_dictionaries || ''} />
    </h2>
    {#if availableDictionaries.length === 0}
      <p class="text-sm text-text-subtle">
        {_t.translate?.config?.no_dictionaries}
      </p>
    {:else}
      <div class="space-y-2">
        {#each availableDictionaries as dict}
          <label class="flex items-center gap-3 p-3 border border-border rounded-lg hover:bg-surface-muted cursor-pointer">
            <input
              type="checkbox"
              checked={dictionaryIds.includes(dict.id)}
              onchange={() => {
                if (dictionaryIds.includes(dict.id)) {
                  dictionaryIds = dictionaryIds.filter(d => d !== dict.id);
                } else {
                  dictionaryIds = [...dictionaryIds, dict.id];
                }
              }}
              class="rounded border-border-strong text-primary focus-visible:ring-primary-ring"
            />
            <div>
              <span class="text-sm font-medium text-text">{dict.name}</span>
              {#if dict.description}
                <p class="text-xs text-text-muted">{dict.description}</p>
              {/if}
            </div>
          </label>
        {/each}
      </div>
    {/if}
  </section>
</div>