<div class="tfe">
  <div class="tfe-header">
    <h3 class="tfe-label">{{ label || ('templateFieldsEditor.defaultLabel' | translate) }}</h3>
    @if (hint) {
      <p class="tfe-hint">{{ hint }}</p>
    }
  </div>

  <div class="tfe-list">
    @for (f of fields; track f; let i = $index) {
      <div class="tfe-item">
        <div class="tfe-row" [class.invalid]="isDuplicate(f, i) || !f.name.trim()">
          <div class="tfe-row-controls">
            <button type="button" class="btn-arrow" (click)="moveUp(i)" [disabled]="i === 0" [title]="'templateFieldsEditor.moveUp' | translate">
              <lucide-icon [img]="ArrowUp" [size]="14"></lucide-icon>
            </button>
            <button type="button" class="btn-arrow" (click)="moveDown(i)" [disabled]="i === fields.length - 1" [title]="'templateFieldsEditor.moveDown' | translate">
              <lucide-icon [img]="ArrowDown" [size]="14"></lucide-icon>
            </button>
          </div>
          <input
            type="text"
            class="tfe-name"
            [(ngModel)]="f.name"
            [name]="'name-' + i"
            (ngModelChange)="onFieldChanged()"
            [placeholder]="'templateFieldsEditor.fieldNamePlaceholder' | translate"
            />
          <select
            class="tfe-type"
            [(ngModel)]="f.type"
            [name]="'type-' + i"
            (ngModelChange)="onFieldChanged()">
            @for (opt of typeOptions; track opt) {
              <option [value]="opt.value">{{ opt.label }}</option>
            }
          </select>
          @if (f.type === 'IMAGE') {
            <select
              class="tfe-layout"
              [(ngModel)]="f.layout"
              [name]="'layout-' + i"
              (ngModelChange)="onFieldChanged()">
              @for (opt of layoutOptions; track opt) {
                <option [value]="opt.value">{{ opt.label }}</option>
              }
            </select>
          }
          <button type="button" class="btn-remove" (click)="remove(i)" [title]="'templateFieldsEditor.removeField' | translate">
            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          </button>
        </div>
        <!-- Sous-editeur des labels pour KEY_VALUE_LIST -->
        @if (f.type === 'KEY_VALUE_LIST') {
          <div class="tfe-labels">
            <div class="tfe-labels-header">
              <lucide-icon [img]="ListOrdered" [size]="12"></lucide-icon>
              <span>{{ 'templateFieldsEditor.labelsHeader' | translate }}</span>
            </div>
            <div class="tfe-labels-list">
              @for (lbl of f.labels; track $index; let li = $index) {
                <div class="tfe-label-row">
                  <button type="button" class="btn-arrow-mini" (click)="moveLabelUp(f, li)" [disabled]="li === 0" [title]="'templateFieldsEditor.moveUp' | translate">
                    <lucide-icon [img]="ArrowUp" [size]="11"></lucide-icon>
                  </button>
                  <button type="button" class="btn-arrow-mini" (click)="moveLabelDown(f, li)" [disabled]="li === (f.labels?.length || 0) - 1" [title]="'templateFieldsEditor.moveDown' | translate">
                    <lucide-icon [img]="ArrowDown" [size]="11"></lucide-icon>
                  </button>
                  <input
                    type="text"
                    class="tfe-label-input"
                    [ngModel]="lbl"
                    (ngModelChange)="updateLabelAt(f, li, $event)"
                    [name]="'lbl-' + i + '-' + li"
                    [placeholder]="'templateFieldsEditor.labelPlaceholder' | translate"
                    />
                  <button type="button" class="btn-remove-mini" (click)="removeLabel(f, li)" [title]="'templateFieldsEditor.removeLabel' | translate">
                    <lucide-icon [img]="X" [size]="11"></lucide-icon>
                  </button>
                </div>
              }
            </div>
            <button type="button" class="chip chip-mini" (click)="addLabel(f)">
              <lucide-icon [img]="Plus" [size]="11"></lucide-icon>
              {{ 'templateFieldsEditor.addLabel' | translate }}
            </button>
          </div>
        }
      </div>
    }

    @if (fields.length === 0) {
      <div class="tfe-empty">
        {{ 'templateFieldsEditor.empty' | translate }}
      </div>
    }
  </div>

  <div class="tfe-add">
    <span class="tfe-add-label">{{ 'templateFieldsEditor.addPrefix' | translate }}</span>
    @for (s of suggestions; track s) {
      <button
        type="button"
        class="chip"
        [class.disabled]="isSuggestionUsed(s)"
        [disabled]="isSuggestionUsed(s)"
        (click)="addSuggestion(s)">
        <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
        {{ s }}
      </button>
    }
    <button type="button" class="chip chip-custom" (click)="addBlank('TEXT')">
      <lucide-icon [img]="Type" [size]="12"></lucide-icon>
      {{ 'templateFieldsEditor.typeText' | translate }}
    </button>
    <button type="button" class="chip chip-custom" (click)="addBlank('NUMBER')">
      <lucide-icon [img]="Hash" [size]="12"></lucide-icon>
      {{ 'templateFieldsEditor.typeNumber' | translate }}
    </button>
    <button type="button" class="chip chip-custom" (click)="addBlank('IMAGE')">
      <lucide-icon [img]="ImageIcon" [size]="12"></lucide-icon>
      {{ 'templateFieldsEditor.typeImage' | translate }}
    </button>
    <button type="button" class="chip chip-custom" (click)="addBlank('KEY_VALUE_LIST')">
      <lucide-icon [img]="ListOrdered" [size]="12"></lucide-icon>
      {{ 'templateFieldsEditor.typeKeyValue' | translate }}
    </button>
  </div>
</div>
