<ng-container *transloco="let t; prefix: 'libraryCreator.creator'">
  <div class="library-creator">
    <header class="dialog-header">
      <div class="header-content">
        <div class="header-icon">
          <i class="pi pi-book"></i>
        </div>
        <div class="header-text">
          <h1>{{ mode === 'edit' ? t('titleEdit') : t('titleNew') }}</h1>
          <p>{{ t('subtitle') }}</p>
        </div>
      </div>
      <p-button
        icon="pi pi-times"
        [text]="true"
        [rounded]="true"
        severity="secondary"
        (onClick)="closeDialog()"
      />
    </header>

    <div class="dialog-body">
      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-info-circle"></i>
          <span>{{ t('libraryDetails') }}</span>
        </div>

        <div class="form-row two-col">
          <div class="form-field">
            <label>
              {{ t('nameLabel') }} <span class="required">*</span>
            </label>
            <div class="input-container">
              <input
                pInputText
                [(ngModel)]="chosenLibraryName"
                [placeholder]="t('namePlaceholder')"
                class="input-full"
              />
              @if (chosenLibraryName.trim()) {
                <i class="pi pi-check-circle field-status success"></i>
              }
            </div>
          </div>

          <div class="form-field">
            <label>
              {{ t('iconLabel') }}
            </label>
            @if (!selectedIcon) {
              <button class="icon-picker-trigger" (click)="openIconPicker()" type="button">
                <i class="pi pi-plus"></i>
                <span>{{ t('chooseIcon') }}</span>
              </button>
            } @else {
              <div class="icon-selected">
                <div class="icon-preview">
                  <app-icon-display [icon]="selectedIcon" size="16px" />
                </div>
                <span class="icon-value">
                  @if (selectedIcon.type === 'PRIME_NG') {
                    {{ selectedIcon.value }}
                  } @else {
                    {{ t('customSvg') }}
                  }
                </span>
                <button class="icon-clear" (click)="clearSelectedIcon()" type="button">
                  <i class="pi pi-times"></i>
                </button>
              </div>
            }
          </div>
        </div>
      </section>

      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-folder-open"></i>
          <span>{{ t('bookFolders') }}</span>
          <span class="section-badge">{{ folders.length }}</span>
        </div>

        <div class="folders-zone">
          <div class="folder-structure-hint">
            <i class="pi pi-exclamation-triangle"></i>
            <span [innerHTML]="t('folderStructureHint')"></span>
          </div>

          <button class="add-folder-trigger" (click)="openDirectoryPicker()" type="button">
            <i class="pi pi-plus-circle"></i>
            <span>{{ t('addFolder') }}</span>
          </button>

          @if (folders.length > 0) {
            <div class="folders-list">
              @for (folder of folders; track folder; let i = $index) {
                <div class="folder-item">
                  <div class="folder-info">
                    <i class="pi pi-folder"></i>
                    <span class="folder-path" [pTooltip]="folder" tooltipPosition="top">
                      {{ folder }}
                    </span>
                  </div>
                  <button class="folder-remove" (click)="removeFolder(i)" type="button">
                    <i class="pi pi-times"></i>
                  </button>
                </div>
              }
            </div>
          }
        </div>
      </section>

      <section class="form-section">
        <div class="section-header">
          <i class="pi pi-cog"></i>
          <span>{{ t('options') }}</span>
        </div>

        <div class="options-list">
          <div class="option-row">
            <div class="option-label">
              <span>{{ t('watchFolders') }}</span>
              <i
                class="pi pi-question-circle info-icon"
                [pTooltip]="t('watchFoldersTooltip')"
                tooltipPosition="top"
              ></i>
            </div>
            <p-toggleswitch [(ngModel)]="watch" />
          </div>

          <div class="option-row">
            <div class="option-label">
              <span>{{ t('metadataSource') }}</span>
              <i
                class="pi pi-question-circle info-icon"
                [pTooltip]="t('metadataSourceTooltip')"
                tooltipPosition="top"
              ></i>
            </div>
            <p-select
              [(ngModel)]="metadataSource"
              [options]="metadataSourceOptions"
              optionLabel="label"
              optionValue="value"
              [placeholder]="t('metadataSourcePlaceholder')"
              class="metadata-source-select"
              appendTo="body"
            />
          </div>

          <div class="option-row">
            <div class="option-label">
              <span>{{ t('organizationMode') }}</span>
              <i
                class="pi pi-question-circle info-icon"
                [pTooltip]="organizationMode === 'AUTO_DETECT' ? t('organizationModeLockedTooltip') : t('organizationModeTooltip')"
                tooltipPosition="top"
              ></i>
            </div>
            <p-select
              [(ngModel)]="organizationMode"
              [options]="organizationModeOptions"
              optionLabel="label"
              optionValue="value"
              [disabled]="organizationMode === 'AUTO_DETECT'"
              class="metadata-source-select"
              appendTo="body"
            />
          </div>

          <div class="option-divider"></div>

          <div class="option-row option-row-stacked">
            <div class="option-label">
              <span>{{ t('formatPriority') }}</span>
              <i
                class="pi pi-question-circle info-icon"
                [pTooltip]="t('formatPriorityTooltip')"
                tooltipPosition="top"
              ></i>
            </div>
            <div
              class="format-chips"
              cdkDropList
              cdkDropListOrientation="mixed"
              [cdkDropListData]="formatPriority"
              (cdkDropListDropped)="onFormatPriorityDrop($event)"
            >
              @for (format of formatPriority; track format.type; let i = $index) {
                <div class="format-chip" cdkDrag>
                  <span class="chip-rank">{{ i + 1 }}</span>
                  <span class="chip-label">{{ format.type }}</span>
                  <i class="pi pi-arrows-alt drag-indicator" cdkDragHandle></i>
                </div>
              }
            </div>
          </div>

          <div class="option-row">
            <div class="option-label">
              <span>{{ t('allowedFormats') }}</span>
              <i
                class="pi pi-question-circle info-icon"
                [pTooltip]="t('allowedFormatsTooltip')"
                tooltipPosition="top"
              ></i>
            </div>
            <div class="allow-all-toggle">
              <p-checkbox
                [(ngModel)]="allowAllFormats"
                [binary]="true"
                inputId="allowAll"
                (onChange)="onAllowAllFormatsChange()"
              />
              <label for="allowAll" class="allow-all-label">{{ t('allowAll') }}</label>
            </div>
          </div>

          @if (!allowAllFormats) {
            <div class="format-checkboxes">
              @for (format of allBookFormats; track format.type) {
                <div class="format-checkbox-item" [class.has-warning]="getFormatWarning(format.type)">
                  <p-checkbox
                    [ngModel]="isFormatSelected(format.type)"
                    [binary]="true"
                    [inputId]="'format-' + format.type"
                    (onChange)="onFormatCheckboxChange(format.type, $event.checked)"
                  />
                  <label [for]="'format-' + format.type" class="format-checkbox-label">
                    {{ format.label }}
                  </label>
                  @if (getFormatWarning(format.type); as warning) {
                    <i
                      class="pi pi-exclamation-triangle warning-icon"
                      [pTooltip]="warning"
                      tooltipPosition="top"
                    ></i>
                  }
                </div>
              }
            </div>
            @if (hasAnyFormatWarning()) {
              <div class="format-warning-message">
                <i class="pi pi-info-circle"></i>
                <span>{{ t('deselectedFormatsWarning') }}</span>
              </div>
            }
          }
        </div>
      </section>
    </div>

    <footer class="dialog-footer">
      <div class="validation-status">
        @if (!isLibraryDetailsValid() || !isDirectorySelectionValid()) {
          <div class="status-message warning">
            <i class="pi pi-exclamation-circle"></i>
            <span>
              @if (!chosenLibraryName.trim()) {
                {{ t('validation.enterName') }}
              } @else if (!selectedIcon) {
                {{ t('validation.selectIcon') }}
              } @else {
                {{ t('validation.addFolder') }}
              }
            </span>
          </div>
        } @else {
          <div class="status-message ready">
            <i class="pi pi-check-circle"></i>
            <span>{{ mode === 'edit' ? t('validation.readyUpdate') : t('validation.readyCreate') }}</span>
          </div>
        }
      </div>
      <div class="footer-actions">
        <p-button
          [label]="'common.cancel' | transloco"
          severity="secondary"
          [outlined]="true"
          (onClick)="closeDialog()"
        />
        <p-button
          [label]="mode === 'edit' ? t('buttonUpdate') : t('buttonCreate')"
          [icon]="mode === 'edit' ? 'pi pi-save' : 'pi pi-check'"
          severity="primary"
          [disabled]="!isLibraryDetailsValid() || !isDirectorySelectionValid()"
          (onClick)="createOrUpdateLibrary()"
        />
      </div>
    </footer>
  </div>
</ng-container>
