<ng-container *transloco="let t; prefix: 'book.duplicateMerger'">
<div class="duplicate-merger-container">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-copy header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">{{ t('title') }}</h2>
      <p class="panel-description">{{ t('description') }}</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="closeDialog()"
      class="close-button">
    </p-button>
  </div>

  <div class="dialog-content">
    <!-- Preset Mode Selector -->
    <div class="preset-section">
      <p-selectButton
        [options]="presetOptions"
        [(ngModel)]="presetMode"
        (onChange)="onPresetChange()"
        optionLabel="label"
        optionValue="value"
        [disabled]="isScanning || isMerging">
      </p-selectButton>
    </div>

    <!-- Advanced Toggles -->
    <div class="advanced-section">
      <button class="advanced-toggle" (click)="showAdvanced = !showAdvanced">
        <i class="pi" [class.pi-chevron-right]="!showAdvanced" [class.pi-chevron-down]="showAdvanced"></i>
        {{ t('advanced') }}
      </button>

      @if (showAdvanced) {
        <div class="signal-checkboxes">
          <div class="signal-checkbox">
            <p-checkbox [(ngModel)]="matchByIsbn" [binary]="true" inputId="isbn" (onChange)="onSignalToggle()" [disabled]="isScanning || isMerging"></p-checkbox>
            <label for="isbn">{{ t('signalIsbn') }}</label>
          </div>
          <div class="signal-checkbox">
            <p-checkbox [(ngModel)]="matchByExternalId" [binary]="true" inputId="externalId" (onChange)="onSignalToggle()" [disabled]="isScanning || isMerging"></p-checkbox>
            <label for="externalId">{{ t('signalExternalId') }}</label>
          </div>
          <div class="signal-checkbox">
            <p-checkbox [(ngModel)]="matchByTitleAuthor" [binary]="true" inputId="titleAuthor" (onChange)="onSignalToggle()" [disabled]="isScanning || isMerging"></p-checkbox>
            <label for="titleAuthor">{{ t('signalTitleAuthor') }}</label>
          </div>
          <div class="signal-checkbox">
            <p-checkbox [(ngModel)]="matchByDirectory" [binary]="true" inputId="directory" (onChange)="onSignalToggle()" [disabled]="isScanning || isMerging"></p-checkbox>
            <label for="directory">{{ t('signalDirectory') }}</label>
          </div>
          <div class="signal-checkbox">
            <p-checkbox [(ngModel)]="matchByFilename" [binary]="true" inputId="filename" (onChange)="onSignalToggle()" [disabled]="isScanning || isMerging"></p-checkbox>
            <label for="filename">{{ t('signalFilename') }}</label>
          </div>
        </div>
      }
    </div>

    <!-- Action Bar -->
    <div class="action-bar">
      <div class="action-bar-left">
        <p-button
          [label]="t('scan')"
          icon="pi pi-search"
          (click)="scan()"
          [disabled]="!canScan"
          [loading]="isScanning">
        </p-button>
      </div>
      <div class="action-bar-right">
        <div class="delete-option">
          <p-checkbox
            [(ngModel)]="moveFiles"
            [binary]="true"
            inputId="moveFiles"
            [disabled]="isMerging">
          </p-checkbox>
          <label for="moveFiles">{{ 'book.fileAttacher.moveFilesLabel' | transloco }}</label>
        </div>
        @if (activeGroups.length > 0) {
          <p-button
            [label]="t('mergeAll', { count: activeGroups.length })"
            icon="pi pi-check-circle"
            severity="success"
            (click)="mergeAll()"
            [disabled]="isMerging"
            [loading]="isMerging">
          </p-button>
        }
      </div>
    </div>

    <!-- Merge Progress -->
    @if (isMerging) {
      <p-progressBar [value]="mergeTotal > 0 ? (mergeProgress / mergeTotal) * 100 : 0" [showValue]="false"></p-progressBar>
    }

    <!-- Help Text -->
    @if (hasScanned && activeGroups.length > 0) {
      <div class="help-text">
        <i class="pi pi-info-circle"></i>
        <span>{{ t('helpText') }}</span>
      </div>
    }

    <!-- Results Area -->
    <div class="results-area">
      @if (isScanning) {
        <div class="empty-state">
          <i class="pi pi-spin pi-spinner"></i>
          <p>{{ t('scanning') }}</p>
        </div>
      } @else if (!hasScanned) {
        <div class="empty-state">
          <i class="pi pi-search"></i>
          <p>{{ t('scanPrompt') }}</p>
        </div>
      } @else if (activeGroups.length === 0 && groups.length === 0) {
        <div class="empty-state">
          <i class="pi pi-check-circle"></i>
          <p>{{ t('noDuplicates') }}</p>
        </div>
      } @else if (activeGroups.length === 0 && groups.length > 0) {
        <div class="empty-state">
          <i class="pi pi-check-circle"></i>
          <p>{{ t('allMerged') }}</p>
        </div>
      } @else {
        <div class="groups-list">
          @for (group of pagedGroups; track group.suggestedTargetBookId) {
            <div class="duplicate-group">
              <div class="group-header">
                <span class="group-label">{{ t('groupLabel', { index: pageFirst + $index + 1 }) }}</span>
                <p-tag [value]="getMatchReasonLabel(group.matchReason)" [severity]="getMatchReasonSeverity(group.matchReason)"></p-tag>
                @if (hasSameFormatConflict(group)) {
                  <p-tag [value]="t('sameFormatWarning')" severity="warn" icon="pi pi-exclamation-triangle"></p-tag>
                }
                <div class="group-actions">
                  <p-button
                    [label]="t('merge')"
                    icon="pi pi-check"
                    size="small"
                    severity="success"
                    (click)="mergeGroup(group)"
                    [disabled]="isMerging">
                  </p-button>
                  @if (getDeleteSelectedCount(group) > 0) {
                    <p-button
                      [label]="t('deleteSelected', { count: getDeleteSelectedCount(group) })"
                      icon="pi pi-trash"
                      size="small"
                      severity="danger"
                      [outlined]="true"
                      (click)="deleteGroup(group)"
                      [disabled]="isMerging">
                    </p-button>
                  }
                  <p-button
                    [label]="t('dismiss')"
                    icon="pi pi-times"
                    size="small"
                    severity="secondary"
                    [outlined]="true"
                    (click)="dismissGroup(group)"
                    [disabled]="isMerging">
                  </p-button>
                </div>
              </div>
              <div class="group-books">
                @for (book of group.books; track book.id) {
                  <div class="book-row" [class.selected-target]="book.id === group.selectedTargetBookId" [class.marked-for-deletion]="group.selectedForDeletion.has(book.id)">
                    @if (book.id !== group.selectedTargetBookId) {
                      <p-checkbox
                        [binary]="true"
                        [ngModel]="group.selectedForDeletion.has(book.id)"
                        (onChange)="toggleDeleteSelection(group, book.id)"
                        [disabled]="isMerging"
                        class="delete-checkbox">
                      </p-checkbox>
                    }
                    <img class="book-cover"
                         [src]="urlHelper.getThumbnailUrl(book.id, book.metadata?.coverUpdatedOn)"
                         [alt]="book.metadata?.title || ''"
                         loading="lazy"/>
                    <div class="book-info">
                      <div class="book-title">{{ book.metadata?.title || ('book.fileAttacher.unknownTitle' | transloco) }}</div>
                      @if (book.metadata?.authors?.length) {
                        <div class="book-authors">{{ book.metadata?.authors?.join(', ') }}</div>
                      }
                      <div class="book-formats">
                        @for (format of getBookFormats(book); track format) {
                          <span class="format-badge">{{ format }}</span>
                        }
                        @if (getFileCount(book) > 1) {
                          <span class="file-count">{{ t('fileCount', { count: getFileCount(book) }) }}</span>
                        }
                        @if (book.primaryFile?.fileSizeKb) {
                          <span class="file-detail">{{ formatFileSize(book.primaryFile?.fileSizeKb) }}</span>
                        }
                      </div>
                      @if (book.primaryFile?.fileName) {
                        <div class="book-file-path" [title]="getBookFilePath(book)">
                          <i class="pi pi-file"></i>
                          {{ getBookFilePath(book) }}
                        </div>
                      }
                    </div>
                    <div class="book-select">
                      <p-radioButton
                        [name]="'target-' + group.suggestedTargetBookId"
                        [value]="book.id"
                        [(ngModel)]="group.selectedTargetBookId"
                        (onClick)="onTargetChange(group)"
                        [disabled]="isMerging">
                      </p-radioButton>
                      @if (book.id === group.selectedTargetBookId) {
                        <span class="target-label">{{ t('target') }}</span>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        </div>

        @if (activeGroups.length > pageSize) {
          <p-paginator
            [rows]="pageSize"
            [totalRecords]="activeGroups.length"
            [first]="pageFirst"
            (onPageChange)="onPageChange($event)"
            [rowsPerPageOptions]="[10, 20, 50]">
          </p-paginator>
        }
      }
    </div>
  </div>
</div>
</ng-container>
