<!-- #region TargetTabForm [C:3] [TYPE Component] [SEMANTICS translate, target, schema, database] -->
<!-- @BRIEF Target configuration tab — target schema/table/database selection, target column
     mapping (translated text, language code, source text, detected language columns),
     Write Settings (batch size, upsert strategy, source reference),
     and schema validation hint (TargetSchemaHint). -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [TargetSchemaHint] -->
<!-- @RELATION BINDS_TO -> [EXT:frontend:getEnvironmentDatabases] -->
<!-- @UX_STATE Editing -> Form with target schema/table/database fields -->
<!-- @UX_STATE Databases loading -> Spinner text below database select -->
<!-- @UX_STATE No environment -> Hint to select environment first -->
<!-- @UX_FEEDBACK Schema hint button shows green/red/yellow result after validation -->
<!-- @UX_REACTIVITY Props -> $bindable() for all target fields -->
<!-- @UX_REACTIVITY Props -> $props() for databases array -->
<script lang="ts">
  import { t } from '$lib/i18n/index.svelte.js';
  import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
  import TargetSchemaHint from './TargetSchemaHint.svelte';

  let {
    targetSchema = $bindable(''),
    targetTable = $bindable(''),
    targetDatabaseId = $bindable(''),
    targetColumn = $bindable(''),
    targetLanguageColumn = $bindable(''),
    targetSourceColumn = $bindable(''),
    targetSourceLanguageColumn = $bindable(''),
    targetKeyCols = $bindable([]),
    translationColumn = $bindable(''),
    batchSize = $bindable(50),
    includeSourceReference = $bindable(true),
    upsertStrategy = $bindable('MERGE'),
    environmentId = '',
    databases = [],
    databasesLoading = false,
  } = $props();
</script>

<section class="bg-white border border-gray-200 rounded-lg p-6">
  <h2 class="text-lg font-semibold text-gray-900 mb-4">{$t.translate?.config?.target_table_title}</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        {$t.translate?.config?.target_schema}
        <HelpTooltip text={$t.translate?.config?.help_target_schema || ''} />
      </label>
      <input
        type="text"
        bind:value={targetSchema}
        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
        placeholder={$t.translate?.config?.target_schema_placeholder}
      />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        {$t.translate?.config?.target_table}
        <HelpTooltip text={$t.translate?.config?.help_target_table || ''} />
      </label>
      <input
        type="text"
        bind:value={targetTable}
        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
        placeholder={$t.translate?.config?.target_table_placeholder}
      />
    </div>
    <div class="md:col-span-2">
      <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
        {$t.translate?.config?.target_database}
        <HelpTooltip text={$t.translate?.config?.help_target_database || ''} />
      </label>
      <select
        bind:value={targetDatabaseId}
        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
        disabled={!environmentId || databasesLoading}
      >
        <option value="">{$t.translate?.config?.select_target_database}</option>
        {#each databases as db}
          <option value={String(db.id || db.uuid)}>
            {db.database_name || db.name} ({db.engine || db.backend || '?'})
          </option>
        {/each}
      </select>
      {#if databasesLoading}
        <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.loading_databases}</p>
      {:else if !environmentId}
        <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.select_environment}</p>
      {:else}
        <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_database_hint}</p>
      {/if}
    </div>
  </div>

  <!-- Target Column Mapping -->
  <div class="mt-4 pt-4 border-t border-gray-100">
    <h3 class="text-sm font-semibold text-gray-900 mb-3 flex items-center gap-2">
      {$t.translate?.config?.target_column_mapping_title || 'Target Column Mapping'}
      <HelpTooltip text={$t.translate?.config?.target_column_mapping_description || ''} />
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
          {$t.translate?.config?.target_column_label}
          <HelpTooltip text={$t.translate?.config?.help_target_column || ''} />
        </label>
        <input
          type="text"
          bind:value={targetColumn}
          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder="e.g. translated_text"
        />
        <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_column_hint}</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
          {$t.translate?.config?.target_language_column_label}
          <HelpTooltip text={$t.translate?.config?.help_target_language_column || ''} />
        </label>
        <input
          type="text"
          bind:value={targetLanguageColumn}
          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder="e.g. lang_code"
        />
        <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_language_column_hint}</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
          {$t.translate?.config?.target_source_column_label}
          <HelpTooltip text={$t.translate?.config?.help_target_source_column || ''} />
        </label>
        <input
          type="text"
          bind:value={targetSourceColumn}
          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder="e.g. source_text"
        />
        <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_source_column_hint}</p>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
          {$t.translate?.config?.target_source_language_column_label}
          <HelpTooltip text={$t.translate?.config?.help_target_source_language_column || ''} />
        </label>
        <input
          type="text"
          bind:value={targetSourceLanguageColumn}
          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder="e.g. src_lang"
        />
        <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_source_language_column_hint}</p>
      </div>
    </div>
  </div>

  <!-- Write Settings: batch size, upsert strategy, source reference -->
  <div class="mt-4 pt-4 border-t border-gray-100">
    <h3 class="text-sm font-semibold text-gray-900 mb-3">
      {$t.translate?.config?.write_settings || 'Write Settings'}
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
          {$t.translate?.config?.batch_size}
          <HelpTooltip text={$t.translate?.config?.help_batch_size || ''} />
        </label>
        <input
          type="number"
          bind:value={batchSize}
          min="1"
          max="1000"
          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
        />
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-1">
          {$t.translate?.config?.upsert_strategy}
          <HelpTooltip text={$t.translate?.config?.help_upsert_strategy || ''} />
        </label>
        <select bind:value={upsertStrategy} class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
          <option value="MERGE">{$t.translate?.config?.upsert_merge}</option>
          <option value="INSERT">{$t.translate?.config?.upsert_insert}</option>
          <option value="UPDATE">{$t.translate?.config?.upsert_update}</option>
        </select>
      </div>
    </div>
    <div class="mt-3">
      <label class="flex items-start gap-3 cursor-pointer">
        <input
          type="checkbox"
          bind:checked={includeSourceReference}
          class="mt-0.5 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
        />
        <div>
          <span class="text-sm font-medium text-gray-700 flex items-center gap-1">
            {$t.translate?.config?.include_source_reference || 'Include source language in translations'}
            <HelpTooltip text={$t.translate?.config?.help_include_source_reference || ''} />
          </span>
          <p class="text-xs text-gray-400 mt-0.5">
            {$t.translate?.config?.include_source_reference_hint || 'The original text will be stored as a verified reference copy in its detected language'}
          </p>
        </div>
      </label>
    </div>
  </div>

  <!-- Schema hint: проверка целевой таблицы -->
  <TargetSchemaHint
    {environmentId}
    {targetDatabaseId}
    {targetSchema}
    {targetTable}
    {targetKeyCols}
    {targetColumn}
    {translationColumn}
    {targetLanguageColumn}
    {targetSourceColumn}
    {targetSourceLanguageColumn}
  />
</section>
<!-- #endregion TargetTabForm -->
