<ng-container *transloco="let t; prefix: 'shared.directoryPicker'">
<div class="directory-picker">
  <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">{{ t('title') }}</h2>
      <p class="panel-description">{{ t('description') }}</p>
    </div>
  </div>

  <div class="picker-controls">
    <div class="current-path">
      <div class="path-label">
        <i class="pi pi-map-marker"></i>
        <span>{{ t('currentPath') }}</span>
      </div>
      <div class="path-value">
        {{ selectedProductName || '/' }}
      </div>
    </div>

    <div class="controls-row">
      <p-iconfield class="search-input-wrapper">
        <p-inputicon class="pi pi-search"/>
        <input
          fluid
          type="text"
          pInputText
          [(ngModel)]="searchQuery"
          (input)="onSearch()"
          [placeholder]="t('searchPlaceholder')"
        />
        @if (searchQuery) {
          <i class="pi pi-times clear-icon" (click)="searchQuery = ''; onSearch()"></i>
        }
      </p-iconfield>
      <p-button
        icon="pi pi-arrow-up"
        (click)="goUp()"
        [disabled]="selectedProductName === '/' || selectedProductName === ''"
        [pTooltip]="t('goUpTooltip')"
        tooltipPosition="bottom"
      />
    </div>

    <div class="selection-actions">
      <p-button
        [label]="t('selectAllBtn')"
        icon="pi pi-check-square"
        severity="secondary"
        [outlined]="true"
        size="small"
        (click)="selectAll()"
        [disabled]="filteredPaths.length === 0"
        [pTooltip]="t('selectAllTooltip')"
        tooltipPosition="bottom"
      />
      <p-button
        [label]="t('deselectAllBtn')"
        icon="pi pi-times-circle"
        severity="secondary"
        [outlined]="true"
        size="small"
        (click)="deselectAll()"
        [disabled]="selectedFolders.length === 0"
        [pTooltip]="t('deselectAllTooltip')"
        tooltipPosition="bottom"
      />
      <p-button
        [label]="t('selectCurrentBtn')"
        icon="pi pi-folder"
        severity="info"
        [outlined]="true"
        size="small"
        (click)="selectCurrent()"
        [disabled]="!selectedProductName || selectedProductName === '/'"
        [pTooltip]="t('selectCurrentTooltip')"
        tooltipPosition="bottom"
      />
    </div>

    @if (selectedFolders.length > 0) {
      <div class="selection-badge">
        <i class="pi pi-check-circle"></i>
        <span>{{ selectedFolders.length === 1 ? t('foldersSelected', { count: selectedFolders.length }) : t('foldersSelectedPlural', { count: selectedFolders.length }) }}</span>
      </div>
    }
  </div>

  <div class="directories-container">
    @if (isLoading) {
      <div class="loading-state">
        <p-progressSpinner
          class="custom-spinner"
          strokeWidth="4"
          animationDuration="1s"
        />
        <p class="loading-text">{{ t('loadingDirectories') }}</p>
      </div>
    } @else if (filteredPaths.length === 0) {
      <div class="empty-state">
        <div class="empty-icon-wrapper">
          <i class="pi pi-folder-open empty-icon"></i>
        </div>
        <h3 class="empty-title">
          @if (searchQuery) {
            {{ t('noMatchesFound') }}
          } @else {
            {{ t('directoryEmpty') }}
          }
        </h3>
        <p class="empty-description">
          @if (searchQuery) {
            <span [innerHTML]="t('noMatchesDescription')"></span>
          } @else {
            {{ t('emptyDescription') }}
          }
        </p>
      </div>
    } @else {
      <div class="directories-list">
        <div class="list-header">
          <span class="folder-count">
            <i class="pi pi-folder"></i>
            {{ filteredPaths.length === 1 ? t('folderAvailable', { count: filteredPaths.length }) : t('foldersAvailable', { count: filteredPaths.length }) }}
          </span>
        </div>

        <div class="directories-grid" [class.fade-in]="!isLoading && filteredPaths.length > 0">
          @for (folder of filteredPaths; track folder) {
            <div
              class="directory-item"
              [class.selected]="isFolderSelected(folder)"
            >
              <div class="directory-checkbox">
                <p-checkbox
                  [inputId]="'folder-' + folder"
                  [binary]="true"
                  [(ngModel)]="selectedFoldersMap[folder]"
                  (ngModelChange)="onCheckboxChange(folder, $event)"
                  (click)="$event.stopPropagation()"
                />
              </div>
              <label [for]="'folder-' + folder" class="directory-label" (click)="onRowClick(folder)">
                <div class="directory-icon-wrapper">
                  <i class="pi pi-folder directory-icon"></i>
                </div>
                <div class="directory-info">
                  <span class="directory-name">{{ getFolderName(folder) }}</span>
                  <span class="directory-path">{{ folder }}</span>
                </div>
                <i class="pi pi-chevron-right navigate-icon"></i>
              </label>
            </div>
          }
        </div>
      </div>
    }
  </div>

  <div class="dialog-footer">
    <div class="footer-info">
      @if (selectedFolders.length > 0) {
        <span class="selection-info">
          <i class="pi pi-info-circle"></i>
          {{ selectedFolders.length === 1 ? t('folderWillBeSelected', { count: selectedFolders.length }) : t('foldersWillBeSelected', { count: selectedFolders.length }) }}
        </span>
      }
    </div>
    <div class="footer-actions">
      <p-button
        [label]="'common.cancel' | transloco"
        severity="secondary"
        [outlined]="true"
        (click)="onCancel()"
      />
      <p-button
        [label]="t('selectDirectoriesBtn')"
        icon="pi pi-check"
        severity="success"
        (click)="onSelect()"
        [disabled]="selectedFolders.length === 0"
      />
    </div>
  </div>
</div>
</ng-container>
