<div class="file-mover-container">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-folder-open header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">Move & Organize Files</h2>
      <p class="panel-description">{{ books.length }} book{{ books.length !== 1 ? 's' : '' }} selected</p>
    </div>
    <p-button
      icon="pi pi-times"
      [rounded]="true"
      [text]="true"
      severity="secondary"
      (click)="ref.close()"
      class="close-button">
    </p-button>
  </div>

  <div class="dialog-content">
    <!-- Compact Info Banner -->
    <section class="info-banner">
      <div class="banner-main">
        <div class="banner-icon">
          <i class="pi pi-info-circle"></i>
        </div>
        <div class="banner-content">
          <span class="banner-text">
            Preview and organize <strong>{{ filePreviews.length }} file{{ filePreviews.length !== 1 ? 's' : '' }}</strong>.
            Files will be renamed based on metadata and naming patterns.
          </span>
          <span class="banner-warning">
            <i class="pi pi-exclamation-triangle"></i>
            Requires good metadata quality.
          </span>
        </div>
        <button type="button" class="banner-toggle" (click)="toggleInfoCollapsed()">
          <span>{{ infoCollapsed ? 'Learn more' : 'Hide' }}</span>
          <i [class]="infoCollapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></i>
        </button>
      </div>

      @if (!infoCollapsed) {
        <div class="banner-details">
          <div class="detail-item">
            <i class="pi pi-check-circle"></i>
            <span>Your files will be automatically renamed, organized, and can be moved between libraries based on your preferences. Check the preview below to see how your files will look.</span>
          </div>
          <div class="detail-item">
            <i class="pi pi-cog"></i>
            <span>Want to change how files are named? Go to <strong>Settings → File Naming Pattern</strong>. Each library can have its own naming pattern!</span>
          </div>
          <div class="detail-item warning">
            <i class="pi pi-exclamation-triangle"></i>
            <span>This will actually move and rename files on your computer across different library folders. Make sure you're happy with the preview first!</span>
          </div>
          <div class="detail-item danger">
            <i class="pi pi-shield"></i>
            <span>This feature relies entirely on your books' metadata. If your metadata is missing or inconsistent, the resulting file names will be incorrect. Only recommended for well-curated libraries.</span>
          </div>
        </div>
      }
    </section>

    <!-- Naming Patterns Section -->
    <section class="patterns-section">
      <button type="button" class="patterns-toggle" (click)="togglePatternsCollapsed()">
        <div class="toggle-content">
          <i class="pi pi-code"></i>
          <span>Naming Rules</span>
          <span class="patterns-count">{{ libraryPatterns.length }}</span>
        </div>
        <i [class]="patternsCollapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'"></i>
      </button>

      @if (!patternsCollapsed) {
        <div class="patterns-list">
          @for (pattern of libraryPatterns; track pattern.libraryId) {
            <div class="pattern-card">
              <div class="pattern-header">
                <span class="pattern-library">{{ pattern.libraryName }}</span>
                <span class="pattern-badge">{{ pattern.bookCount }} book{{ pattern.bookCount > 1 ? 's' : '' }}</span>
              </div>
              <code class="pattern-code">{{ pattern.pattern || 'No pattern configured' }}</code>
              <span class="pattern-source">{{ pattern.source }}</span>
            </div>
          }
        </div>
      }
    </section>

    <!-- Bulk Select Section -->
    <section class="bulk-section">
      <div class="bulk-header">
        <i class="pi pi-list"></i>
        <span>Bulk Assignment</span>
      </div>
      <div class="bulk-controls">
        <label class="bulk-label">Set all files to:</label>
        <p-select
          [options]="availableLibraries"
          [(ngModel)]="defaultTargetLibraryId"
          optionLabel="name"
          optionValue="id"
          placeholder="Select library"
          (onChange)="onDefaultLibraryChange()"
          class="select-library"
          size="small"
          appendTo="body"
        ></p-select>
        @if (defaultAvailableLibraryPaths.length > 0) {
          <p-select
            [options]="defaultAvailableLibraryPaths"
            [(ngModel)]="defaultTargetLibraryPathId"
            optionLabel="path"
            optionValue="id"
            placeholder="Select path"
            (onChange)="onDefaultLibraryPathChange()"
            class="select-path"
            size="small"
            appendTo="body"
          ></p-select>
        }
      </div>
    </section>

    <!-- Table Section -->
    <section class="table-section">
      <div class="table-header">
        <i class="pi pi-table"></i>
        <span>File Preview</span>
      </div>
      <div class="table-container">
        <p-table
          [value]="filePreviews"
          [scrollable]="true"
          scrollHeight="flex"
          [virtualScroll]="true"
          [virtualScrollItemSize]="46"
          [rows]="50"
        >
          <ng-template pTemplate="header">
            <tr>
              <th style="width: 50px;"></th>
              <th style="width: 60px;">ID</th>
              <th>Current Path</th>
              <th style="width: 160px;">Target Library</th>
              <th style="width: 160px;">Library Path</th>
              <th style="width: 40px;"></th>
              <th>New Path</th>
            </tr>
          </ng-template>
          <ng-template pTemplate="body" let-preview>
            <tr [class.row-moved]="preview.isMoved">
              <td class="status-cell">
                @if (preview.isMoved) {
                  <i class="pi pi-check-circle status-success"></i>
                } @else {
                  <i class="pi pi-clock status-pending"></i>
                }
              </td>
              <td class="id-cell">{{ preview.bookId }}</td>
              <td>
                <div class="path-cell">
                  <span class="path-library">{{ preview.currentLibraryName }}/</span>
                  <span class="path-value">{{ preview.relativeOriginalPath }}</span>
                </div>
              </td>
              <td>
                <p-select
                  [options]="availableLibraries"
                  [(ngModel)]="preview.targetLibraryId"
                  optionLabel="name"
                  optionValue="id"
                  placeholder="Select"
                  (onChange)="onLibraryChange(preview)"
                  [disabled]="preview.isMoved"
                  class="select-full-width"
                  appendTo="body"
                  size="small"
                ></p-select>
              </td>
              <td>
                @if (preview.availableLibraryPaths.length > 0) {
                  <p-select
                    [options]="preview.availableLibraryPaths"
                    [(ngModel)]="preview.targetLibraryPathId"
                    optionLabel="path"
                    optionValue="id"
                    placeholder="Select"
                    (onChange)="onLibraryPathChange(preview)"
                    [disabled]="preview.isMoved"
                    class="select-full-width"
                    appendTo="body"
                    size="small"
                  ></p-select>
                } @else {
                  <span class="no-paths">No paths</span>
                }
              </td>
              <td class="arrow-cell">
                <i class="pi pi-arrow-right"></i>
              </td>
              <td>
                <div class="path-cell">
                  <span class="path-library">{{ preview.targetLibraryName }}/</span>
                  <span class="path-value">{{ preview.relativeNewPath }}</span>
                </div>
              </td>
            </tr>
          </ng-template>
        </p-table>
      </div>
    </section>
  </div>

  <div class="dialog-footer">
    @if (movedFileCount > 0) {
      <div class="success-indicator">
        <i class="pi pi-check-circle"></i>
        <span>{{ movedFileCount }} file{{ movedFileCount > 1 ? 's' : '' }} successfully moved</span>
      </div>
    }
    <div class="footer-actions">
      @if (movedFileCount === 0) {
        <p-button
          label="Cancel"
          icon="pi pi-times"
          severity="secondary"
          [outlined]="true"
          (click)="cancel()"
        ></p-button>
        <p-button
          [label]="loading ? 'Moving...' : 'Move Files'"
          [icon]="loading ? 'pi pi-spin pi-spinner' : 'pi pi-check'"
          severity="success"
          (click)="saveChanges()"
          [disabled]="loading || filePreviews.length === 0"
        ></p-button>
      } @else {
        <p-button
          label="Close"
          icon="pi pi-check"
          severity="primary"
          (click)="cancel()"
        ></p-button>
      }
    </div>
  </div>
</div>
