<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">Select Directories</h2>
      <p class="panel-description">Choose one or more directories from your file system</p>
    </div>
  </div>

  <div class="picker-controls">
    <div class="current-path">
      <div class="path-label">
        <i class="pi pi-map-marker"></i>
        <span>Current Path:</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="Search folders..."
        />
        @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="Go up one level"
        tooltipPosition="bottom"
      />
    </div>

    @if (selectedFolders.length > 0) {
      <div class="selection-badge">
        <i class="pi pi-check-circle"></i>
        <span>{{ selectedFolders.length }} {{ selectedFolders.length === 1 ? 'folder' : 'folders' }} selected</span>
      </div>
    }
  </div>

  <div class="directories-container">
    @if (isLoading) {
      <div class="loading-state">
        <p-progressSpinner
          class="custom-spinner"
          strokeWidth="4"
          animationDuration="1s"
        />
        <p class="mt-3 text-secondary">Loading directories...</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) {
            No Matches Found
          } @else {
            Directory is Empty
          }
        </h3>
        <p class="empty-description">
          @if (searchQuery) {
            No folders match your search criteria.<br/>Try adjusting your search terms.
          } @else {
            This directory doesn't contain any subfolders.
          }
        </p>
      </div>
    } @else {
      <div class="directories-list">
        <div class="list-header">
          <span class="folder-count">
            <i class="pi pi-folder"></i>
            {{ filteredPaths.length }} {{ filteredPaths.length === 1 ? 'folder' : 'folders' }} available
          </span>
        </div>

        <div class="directories-grid">
          @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 }} folder{{ selectedFolders.length !== 1 ? 's' : '' }} will be selected
        </span>
      }
    </div>
    <div class="footer-actions">
      <p-button
        label="Cancel"
        severity="secondary"
        [outlined]="true"
        (click)="onCancel()"
      />
      <p-button
        label="Select Directories"
        icon="pi pi-check"
        severity="success"
        (click)="onSelect()"
        [disabled]="selectedFolders.length === 0"
      />
    </div>
  </div>
</div>
