<div class="directory-picker">
  <div class="picker-header">
    <div class="header-title">
      <i class="pi pi-folder-open text-2xl"></i>
      <h3 class="text-xl font-semibold m-0">Select Directories</h3>
    </div>
    <p class="text-sm text-secondary mt-2 mb-0">Choose one or more directories from your file system</p>
  </div>

  <div class="breadcrumb-container">
    <p-breadcrumb [model]="breadcrumbItems" [home]="home" class="breadcrumb-custom">
      <ng-template pTemplate="item" let-item>
        <a class="breadcrumb-item" (click)="item.command && item.command()">
          <i [class]="item.icon" *ngIf="item.icon"></i>
          <span>{{ item.label }}</span>
        </a>
      </ng-template>
    </p-breadcrumb>
  </div>

  <div class="search-bar">
    <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>

  <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>
    @if (selectedFolders.length > 0) {
      <div class="selected-count">
        <i class="pi pi-check-circle"></i>
        <span>{{ selectedFolders.length }} selected</span>
      </div>
    }
  </div>

  <div class="directory-list">
    @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">
        <i class="pi pi-folder-open empty-icon"></i>
        <p class="empty-text">
          @if (searchQuery) {
            No folders match your search
          } @else {
            This directory is empty
          }
        </p>
      </div>
    } @else {
      <div class="folder-grid">
        @for (folder of filteredPaths; track folder) {
          <div
            class="folder-item"
            [class.selected]="selectedProductName === folder"
            [class.checked]="isFolderSelected(folder)"
          >
            <div class="folder-checkbox">
              <p-checkbox
                [binary]="true"
                [(ngModel)]="selectedFoldersMap[folder]"
                (ngModelChange)="onCheckboxChange(folder, $event)"
                (click)="$event.stopPropagation()"
              />
            </div>
            <div class="folder-content" (click)="onRowClick(folder)">
              <div class="folder-icon-wrapper">
                <i class="pi pi-folder folder-icon"></i>
              </div>
              <div class="folder-info">
                <span class="folder-name">{{ getFolderName(folder) }}</span>
                <span class="folder-path">{{ folder }}</span>
              </div>
              <i class="pi pi-chevron-right navigate-icon"></i>
            </div>
          </div>
        }
      </div>
    }
  </div>

  <div class="picker-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' : '' }} selected
        </span>
      }
    </div>
    <div class="footer-actions">
      <p-button
        label="Cancel"
        icon="pi pi-times"
        severity="secondary"
        (click)="onCancel()"
      />
      <p-button
        label="Select Directories"
        icon="pi pi-check"
        severity="success"
        (click)="onSelect()"
        [disabled]="selectedFolders.length === 0"
      />
    </div>
  </div>
</div>
