<!-- #region TargetTabForm [C:3] [TYPE Component] [SEMANTICS translate, target, schema, database] -->
<!-- @ingroup Translate -->
<!-- @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 fields, Insert Method selector -->
<!-- @UX_STATE sqllab_selected -> SQL Lab database select visible (below Insert Method with left-border indent) -->
<!-- @UX_STATE direct_db_selected -> Direct DB connection dropdown visible via InsertMethodSelector -->
<!-- @UX_STATE Databases loading -> Spinner text below SQL Lab database select -->
<!-- @UX_STATE No environment -> Hint to select environment first (SQL Lab database disabled) -->
<!-- @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 { getT } from '$lib/i18n/index.svelte.js';
  import HelpTooltip from '$lib/ui/HelpTooltip.svelte';
  import TargetSchemaHint from './TargetSchemaHint.svelte';
  import InsertMethodSelector from './InsertMethodSelector.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,
    insertMethod = $bindable('sqllab'),
    connectionId = $bindable(null),
    databaseDialect = '',
    onSchemaCheckResult = null as ((allPresent: boolean) => void) | null,
  } = $props();

  // @RATIONALE Svelte 5 store detection fails for `$t` in deeply nested templates.
  //             Use getT() + $derived to keep reactivity to locale changes.
  const _t = $derived(getT());
</script>

<section class="bg-surface-card border border-border rounded-lg p-6">
  <h3 class="text-lg font-semibold text-text mb-4">{_t.translate?.config?.target_table_title}</h3>
  <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?.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-border-strong 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-text 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-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
        placeholder={_t.translate?.config?.target_table_placeholder}
      />
    </div>
  </div>

  <!-- Insert Method -->
  <div class="mt-4 pt-4 border-t border-border">
    <h3 class="text-lg font-semibold text-text mb-4">{_t.translate?.config?.insert_method || 'Insert Method'}</h3>
    <InsertMethodSelector
      bind:insertMethod
      bind:connectionId
      bind:targetDatabaseId
      {databases}
      {databasesLoading}
      {environmentId}
      jobDialect={databaseDialect}
    />
  </div>

  <!-- Write Settings: batch size, upsert strategy, source reference -->
  <div class="mt-4 pt-4 border-t border-border">
      <h3 class="text-lg font-semibold text-text mb-4">
        {_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-text mb-1 flex items-center gap-1">
          {_t.translate?.config?.batch_size}
          <HelpTooltip text={_t.translate?.config?.help_batch_size || ''} />
        </label>
        <div class="relative">
          <input
            type="number"
            bind:value={batchSize}
            min="1"
            max="1000"
            class="w-full px-3 py-2 pr-16 border border-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          />
          <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-text-subtle pointer-events-none">
            {_t.translate?.config?.batch_size_suffix || 'rows'}
          </span>
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium text-text 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-border-strong 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-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?.include_source_reference || 'Include source language in translations'}
            <HelpTooltip text={_t.translate?.config?.help_include_source_reference || ''} />
          </span>
          <p class="text-xs text-text-subtle 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>

  <!-- Target Column Mapping -->
  <div class="mt-4 pt-4 border-t border-border">
    <h3 class="text-lg font-semibold text-text mb-4">{_t.translate?.config?.target_column_mapping_title || 'Target Column Mapping'}</h3>
    <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?.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-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder={_t.translate?.config?.target_column_placeholder || 'translated_text'}
        />
      </div>
      <div>
        <label class="block text-sm font-medium text-text 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-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder={_t.translate?.config?.target_language_column_placeholder || 'lang_code'}
        />
      </div>
      <div>
        <label class="block text-sm font-medium text-text 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-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder={_t.translate?.config?.target_source_column_placeholder || 'source_text'}
        />
      </div>
      <div>
        <label class="block text-sm font-medium text-text 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-border-strong rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
          placeholder={_t.translate?.config?.target_source_language_column_placeholder || 'src_lang'}
        />
      </div>
    </div>
  </div>

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