<ng-container *transloco="let t; prefix: 'metadata.manager'">
<div class="main-container enclosing-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-sitemap"></i>
      {{ t('title') }}
      <app-external-doc-link docType="metadataManager"></app-external-doc-link>
    </h2>
    <p class="settings-description">
      {{ t('description') }}
      <i
        class="pi pi-exclamation-triangle info-icon"
        [pTooltip]="t('writeToFileWarning')"
        tooltipPosition="right"
        [escape]="false"></i>
    </p>
  </div>

  <div class="settings-content">
    <p-tabs [(value)]="activeTab">
      <p-tablist>
        @for (tab of tabConfigs; track tab.type) {
          <p-tab [value]="tab.type">
            <i class="pi {{ tab.icon }}"></i> {{ t(tab.labelPluralKey) }} ({{ getMetadataItems(tab.type).length }})
          </p-tab>
        }
      </p-tablist>
      <p-tabpanels>
        @for (tab of tabConfigs; track tab.type) {
          <p-tabpanel [value]="tab.type">
            <div class="section-header">
              <p-iconfield class="search-input">
                <p-inputicon class="pi pi-search"/>
                <input
                  pInputText
                  type="text"
                  #tableFilter
                  (input)="filterGlobal($event, dataTable)"
                  [placeholder]="t(tab.placeholderKey)"/>
              </p-iconfield>
              <div class="actions">
                <p-button
                  [label]="t('clearSelection')"
                  icon="pi pi-times"
                  [disabled]="getSelectedItems(tab.type).length === 0"
                  (onClick)="clearSelection(tab.type)"
                  severity="secondary"
                  size="small"
                  outlined></p-button>
                <p-button
                  [label]="t('deleteSelected')"
                  icon="pi pi-trash"
                  [disabled]="getSelectedItems(tab.type).length === 0"
                  (onClick)="openDeleteDialog(tab.type)"
                  severity="danger"
                  size="small"
                  outlined></p-button>
                <p-button
                  [label]="t('mergeSplitSelected')"
                  icon="pi pi-sitemap"
                  [disabled]="getSelectedItems(tab.type).length < 2"
                  (onClick)="openMergeDialog(tab.type)"
                  severity="success"
                  size="small"
                  outlined></p-button>
              </div>
            </div>

            <div class="table-card">
              <p-table
                #dataTable
                [value]="getMetadataItems(tab.type)"
                [loading]="loading"
                [globalFilterFields]="['value']"
                [paginator]="true"
                [rows]="50"
                [rowsPerPageOptions]="[25, 50, 100]"
                [scrollable]="true"
                scrollHeight="flex">
                <ng-template pTemplate="header">
                  <tr>
                    <th style="width: 3rem">
                      <div class="header-content">
                        <p-checkbox
                          [binary]="true"
                          [ngModel]="getSelectAll(tab.selectAllKey)"
                          (ngModelChange)="setSelectAll(tab.selectAllKey, $event); toggleAll(tab.type, $event, dataTable.filteredValue || dataTable.value)"></p-checkbox>
                      </div>
                    </th>
                    <th pSortableColumn="value">
                      <div class="header-content">
                        <i class="pi {{ tab.icon }}"></i>
                        <span>{{ t(tab.labelKey) }}</span>
                        <p-sortIcon field="value"></p-sortIcon>
                      </div>
                    </th>
                    <th pSortableColumn="count">
                      <div class="header-content">
                        <i class="pi pi-book"></i>
                        <span>{{ t('booksColumn') }}</span>
                        <p-sortIcon field="count"></p-sortIcon>
                      </div>
                    </th>
                    <th class="actions-header">
                      <div class="header-content">
                        <i class="pi pi-cog"></i>
                        <span>{{ t('actionsColumn') }}</span>
                      </div>
                    </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-item>
                  <tr>
                    <td>
                      <p-checkbox
                        [(ngModel)]="item.selected"
                        [binary]="true"
                        (ngModelChange)="onRowSelect(tab.type)"></p-checkbox>
                    </td>
                    <td>
                      <span class="clickable-cell" (click)="onMetadataClick(tab.type, item.value)">
                        {{ item.value }}
                      </span>
                    </td>
                    <td>{{ item.count }}</td>
                    <td class="actions-cell">
                      <p-button
                        icon="pi pi-filter"
                        severity="info"
                        size="small"
                        [outlined]="true"
                        [rounded]="true"
                        [pTooltip]="t('selectSimilarTooltip')"
                        (onClick)="selectSimilar(tab.type, item.value)"></p-button>
                      <p-button
                        icon="pi pi-pencil"
                        severity="secondary"
                        size="small"
                        [outlined]="true"
                        [rounded]="true"
                        [pTooltip]="t('renameSplitTooltip')"
                        (onClick)="openRenameDialog(tab.type, item)"></p-button>
                      <p-button
                        icon="pi pi-trash"
                        severity="danger"
                        size="small"
                        [outlined]="true"
                        [rounded]="true"
                        [pTooltip]="t('deleteTooltip')"
                        (onClick)="openDeleteDialog(tab.type, item)"></p-button>
                    </td>
                  </tr>
                </ng-template>
              </p-table>
            </div>
          </p-tabpanel>
        }
      </p-tabpanels>
    </p-tabs>
  </div>

  <p-dialog
    [header]="t('mergeSplitDialogTitle', { type: getTypeLabel(currentMergeType, true) })"
    [(visible)]="showMergeDialog"
    [modal]="true"
    class="user-dialog"
    [style]="{width: '50rem'}">
    <div class="dialog-form">
      <p>{{ t('mergeSplitDescription', { count: getSelectedItems(currentMergeType).length, type: getTypeLabel(currentMergeType, true) }) }}</p>
      <ul class="selected-items">
        @for (item of getSelectedItems(currentMergeType); track item.value) {
          <li>
            &#8226; {{ item.value }} <span class="count">{{ t('booksCount', { count: item.count }) }}</span>
          </li>
        }
      </ul>

      <div class="form-field">
        <label for="mergeTarget">{{ isSingleValueField(currentMergeType) ? t('targetValueLabel') : t('targetValuesLabel') }}</label>
        <input
          id="mergeTarget"
          type="text"
          pInputText
          [(ngModel)]="mergeTarget"
          class="full-width-input"
          [placeholder]="isSingleValueField(currentMergeType) ? t('singleValuePlaceholder') : t('multiValuePlaceholder')"/>
        @if (isSingleValueField(currentMergeType)) {
          <small class="help-text" [innerHTML]="t('singleMergeHowItWorks', { type: getTypeLabel(currentMergeType, true), singular: getTypeLabel(currentMergeType, false) })"></small>
        } @else {
          <small class="help-text" [innerHTML]="t('multiMergeHowItWorks', { type: getTypeLabel(currentMergeType, true) })"></small>
        }
      </div>
      @if (mergingInProgress) {
        <div class="processing-note">
          <i class="pi pi-info-circle"></i>
          <span>{{ t('processingNote') }}</span>
        </div>
      }
    </div>

    <ng-template pTemplate="footer">
      <div class="dialog-actions">
        <p-button
          [label]="'common.cancel' | transloco"
          icon="pi pi-times"
          (onClick)="showMergeDialog = false"
          [disabled]="mergingInProgress"
          severity="secondary"
          outlined></p-button>
        <p-button
          [label]="mergingInProgress ? t('processing') : ('common.confirm' | transloco)"
          [icon]="mergingInProgress ? 'pi pi-spin pi-spinner' : 'pi pi-check'"
          [loading]="mergingInProgress"
          [disabled]="mergingInProgress"
          (onClick)="confirmMerge()"
          severity="success"></p-button>
      </div>
    </ng-template>
  </p-dialog>

  <p-dialog
    [header]="t('renameSplitDialogTitle', { type: getTypeLabel(currentMergeType, true) })"
    [(visible)]="showRenameDialog"
    [modal]="true"
    class="user-dialog"
    [style]="{width: '40rem'}">
    <div class="dialog-form">
      <p>{{ t('renameSplitDescription') }}</p>
      <div class="current-value">
        <strong>{{ currentRenameItem?.value }}</strong>
        <span class="count">{{ t('booksCount', { count: currentRenameItem?.count }) }}</span>
      </div>

      <div class="form-field">
        <label for="renameTarget">{{ t('newNamesLabel') }}</label>
        <input
          id="renameTarget"
          type="text"
          pInputText
          [(ngModel)]="renameTarget"
          class="full-width-input"
          [placeholder]="isSingleValueField(currentMergeType) ? t('singleRenamePlaceholder') : t('multiRenamePlaceholder')"
          (keyup.enter)="confirmRename()"/>
        @if (isSingleValueField(currentMergeType)) {
          <small class="help-text" [innerHTML]="t('singleRenameHowItWorks', { singular: getTypeLabel(currentMergeType, false) })"></small>
        } @else {
          <small class="help-text" [innerHTML]="t('multiRenameHowItWorks', { singular: getTypeLabel(currentMergeType, false), type: getTypeLabel(currentMergeType, true) })"></small>
        }
      </div>
      @if (mergingInProgress) {
        <div class="processing-note">
          <i class="pi pi-info-circle"></i>
          <span>{{ t('renameProcessingNote') }}</span>
        </div>
      }
    </div>

    <ng-template pTemplate="footer">
      <div class="dialog-actions">
        <p-button
          [label]="'common.cancel' | transloco"
          icon="pi pi-times"
          (onClick)="showRenameDialog = false"
          [disabled]="mergingInProgress"
          severity="secondary"
          outlined></p-button>
        <p-button
          [label]="mergingInProgress ? t('processing') : ('common.confirm' | transloco)"
          [icon]="mergingInProgress ? 'pi pi-spin pi-spinner' : 'pi pi-check'"
          [loading]="mergingInProgress"
          [disabled]="mergingInProgress"
          (onClick)="confirmRename()"
          severity="success"></p-button>
      </div>
    </ng-template>
  </p-dialog>

  <p-dialog
    [header]="t('deleteDialogTitle', { type: getTypeLabel(currentMergeType, true) })"
    [(visible)]="showDeleteDialog"
    [modal]="true"
    class="user-dialog"
    [style]="{width: '40rem'}">
    <div class="dialog-form">
      <div class="warning-message">
        <i class="pi pi-exclamation-triangle"></i>
        <p>{{ t('deleteWarning', { count: currentDeleteItem ? 1 : getSelectedItems(currentMergeType).length, type: getTypeLabel(currentMergeType, true) }) }}</p>
      </div>

      @if (currentDeleteItem) {
        <div class="current-value">
          <strong>{{ currentDeleteItem.value }}</strong>
          <span class="count">{{ t('booksCount', { count: currentDeleteItem.count }) }}</span>
        </div>
      } @else {
        <ul class="selected-items">
          @for (item of getSelectedItems(currentMergeType); track item.value) {
            <li>
              &#8226; {{ item.value }} <span class="count">{{ t('booksCount', { count: item.count }) }}</span>
            </li>
          }
        </ul>
      }

      <div class="delete-info">
        <p><strong>{{ t('whatWillHappen') }}</strong></p>
        <ul>
          <li>{{ t('deleteItemRemoved', { singular: getTypeLabel(currentMergeType, false) }) }}</li>
          <li>{{ t('deleteCannotUndo') }}</li>
          <li>{{ t('totalBooksAffected') }} <strong>{{ currentDeleteItem ? currentDeleteItem.count : getTotalAffectedBooks(getSelectedItems(currentMergeType)) }}</strong></li>
        </ul>
      </div>
      @if (deletingInProgress) {
        <div class="processing-note">
          <i class="pi pi-info-circle"></i>
          <span>{{ t('renameProcessingNote') }}</span>
        </div>
      }
    </div>

    <ng-template pTemplate="footer">
      <div class="dialog-actions">
        <p-button
          [label]="'common.cancel' | transloco"
          icon="pi pi-times"
          (onClick)="showDeleteDialog = false"
          [disabled]="deletingInProgress"
          severity="secondary"
          outlined></p-button>
        <p-button
          [label]="deletingInProgress ? t('deleting') : ('common.delete' | transloco)"
          [icon]="deletingInProgress ? 'pi pi-spin pi-spinner' : 'pi pi-trash'"
          [loading]="deletingInProgress"
          [disabled]="deletingInProgress"
          (onClick)="confirmDelete()"
          severity="danger"></p-button>
      </div>
    </ng-template>
  </p-dialog>
</div>
</ng-container>
