<div class="mobile-kanban-container">
  <!-- Header avec recherche et filtres -->
  <div class="kanban-header" [class.compact]="compactMode">
    <!-- Barre de recherche -->
    <div class="search-container" *ngIf="showSearch">
      <mat-form-field appearance="outline" class="search-field">
        <mat-label>Rechercher...</mat-label>
        <input 
          matInput 
          [(ngModel)]="searchTerm"
          (input)="onSearchChange($event.target.value)"
          (focus)="onSearchFocus()"
          (blur)="onSearchBlur()"
          placeholder="Rechercher un projet">
        <mat-icon matSuffix *ngIf="!searchTerm">search</mat-icon>
        <button 
          mat-icon-button 
          matSuffix 
          *ngIf="searchTerm"
          (click)="clearSearch()"
          aria-label="Effacer la recherche">
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>
    </div>

    <!-- Filtres rapides -->
    <div class="filters-container" *ngIf="showFilters">
      <div class="filter-chips">
        <mat-chip-list>
          <mat-chip 
            *ngFor="let filter of ['Urgent', 'En retard', 'Assigné à moi']"
            [selected]="activeFilters[filter.toLowerCase()]"
            (click)="toggleFilter(filter.toLowerCase(), true)"
            class="filter-chip">
            {{ filter }}
          </mat-chip>
        </mat-chip-list>
        
        <button 
          mat-icon-button 
          *ngIf="hasActiveFilters()"
          (click)="clearFilters()"
          class="clear-filters-btn"
          aria-label="Effacer les filtres">
          <mat-icon>clear_all</mat-icon>
        </button>
      </div>
    </div>
  </div>

  <!-- Loading indicator -->
  <div class="loading-container" *ngIf="loading">
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    <div class="loading-text">Chargement des projets...</div>
  </div>

  <!-- Kanban Board -->
  <div class="kanban-board" *ngIf="!loading" cdkDropListGroup>
    <div class="kanban-columns-container">
      <div 
        class="kanban-column"
        *ngFor="let column of columns; trackBy: trackByColumnId"
        [class.selected]="selectedColumn === column.id"
        [style.--column-color]="column.color">
        
        <!-- En-tête de colonne -->
        <div 
          class="column-header"
          (click)="onColumnHeaderClick(column)">
          <div class="column-title">
            <mat-icon *ngIf="column.icon" class="column-icon">{{ column.icon }}</mat-icon>
            <span class="column-name">{{ column.title }}</span>
          </div>
          <div class="column-count">
            <span class="count-badge">{{ getColumnItemCount(column) }}</span>
          </div>
        </div>

        <!-- Liste des items -->
        <div 
          class="column-items"
          cdkDropList
          [id]="column.id"
          [cdkDropListData]="column.items"
          (cdkDropListDropped)="onDrop($event)"
          [cdkDropListDisabled]="!enableDragDrop">
          
          <!-- Item vide placeholder -->
          <div class="empty-column" *ngIf="column.items.length === 0">
            <mat-icon class="empty-icon">{{ column.icon || 'inbox' }}</mat-icon>
            <span class="empty-text">Aucun élément</span>
          </div>

          <!-- Items -->
          <div 
            class="kanban-item"
            *ngFor="let item of column.items; trackBy: trackByItemId"
            cdkDrag
            [cdkDragDisabled]="!enableDragDrop"
            (click)="onItemClick(item)"
            [class]="getItemPriorityClass(item)">
            
            <!-- Drag handle -->
            <div class="drag-handle" cdkDragHandle *ngIf="enableDragDrop">
              <mat-icon>drag_indicator</mat-icon>
            </div>

            <!-- Item content -->
            <div class="item-content">
              <!-- Header -->
              <div class="item-header">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-actions">
                  <mat-icon 
                    class="priority-icon"
                    *ngIf="item.priority === 'high'"
                    [style.color]="'#EF4444'">
                    priority_high
                  </mat-icon>
                  <mat-icon 
                    class="status-icon"
                    [style.color]="column.color">
                    {{ getItemStatusIcon(item) }}
                  </mat-icon>
                </div>
              </div>

              <!-- Subtitle -->
              <div class="item-subtitle" *ngIf="item.subtitle">
                {{ item.subtitle }}
              </div>

              <!-- Description -->
              <div class="item-description" *ngIf="item.description">
                {{ item.description }}
              </div>

              <!-- Tags -->
              <div class="item-tags" *ngIf="item.tags && item.tags.length > 0">
                <mat-chip-list>
                  <mat-chip 
                    *ngFor="let tag of item.tags.slice(0, 3)"
                    class="item-tag">
                    {{ tag }}
                  </mat-chip>
                  <mat-chip 
                    *ngIf="item.tags.length > 3"
                    class="item-tag more-tags">
                    +{{ item.tags.length - 3 }}
                  </mat-chip>
                </mat-chip-list>
              </div>

              <!-- Footer -->
              <div class="item-footer">
                <div class="item-meta">
                  <span class="assignee" *ngIf="item.assignee">
                    <mat-icon class="assignee-icon">person</mat-icon>
                    {{ item.assignee }}
                  </span>
                  <span class="due-date" *ngIf="item.dueDate">
                    <mat-icon class="date-icon">schedule</mat-icon>
                    {{ item.dueDate | date:'dd/MM' }}
                  </span>
                </div>
                <div class="item-actions">
                  <button 
                    mat-icon-button 
                    class="item-action-btn"
                    (click)="$event.stopPropagation(); onItemClick(item)"
                    aria-label="Voir les détails">
                    <mat-icon>more_vert</mat-icon>
                  </button>
                </div>
              </div>
            </div>

            <!-- Drag preview -->
            <div class="drag-preview" *cdkDragPreview>
              <div class="preview-content">
                <div class="preview-title">{{ item.title }}</div>
                <div class="preview-subtitle" *ngIf="item.subtitle">{{ item.subtitle }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Empty state -->
  <div class="empty-state" *ngIf="!loading && columns.every(col => col.items.length === 0)">
    <div class="empty-state-content">
      <mat-icon class="empty-state-icon">view_kanban</mat-icon>
      <h3 class="empty-state-title">Aucun projet trouvé</h3>
      <p class="empty-state-description">
        Commencez par créer votre premier projet ou ajustez vos filtres de recherche.
      </p>
    </div>
  </div>
</div> 