<div class="dashboard-general-container">
  <!-- En-tête Dashboard Général -->
  <div class="dashboard-header">
    <div class="header-content">
      <div class="title-section">
        <mat-icon class="dashboard-icon">dashboard</mat-icon>
        <div class="title-text">
          <h1>Dashboard Général</h1>
          <p class="subtitle">Vue d'ensemble de l'activité</p>
        </div>
      </div>
      
      <div class="header-actions">
        <button mat-icon-button [class.active]="autoRefresh" 
                (click)="toggleAutoRefresh()" 
                matTooltip="Actualisation automatique">
          <mat-icon>{{autoRefresh ? 'sync' : 'sync_disabled'}}</mat-icon>
        </button>
        
        <button mat-stroked-button (click)="refreshGeneralData()">
          <mat-icon>refresh</mat-icon>
          Actualiser
        </button>
      </div>
    </div>
  </div>

  <!-- Contrôles Vue -->
  <div class="view-controls" *ngIf="showGeneralKPIs">
    <div class="view-toggle">
      <button mat-button 
              [class.active]="selectedView === 'summary'"
              (click)="changeView('summary')">
        <mat-icon>summarize</mat-icon>
        Résumé
      </button>
      <button mat-button 
              [class.active]="selectedView === 'detailed'"
              (click)="changeView('detailed')">
        <mat-icon>list</mat-icon>
        Détaillé
      </button>
    </div>
  </div>

  <!-- KPIs Généraux -->
  <div class="kpis-section" *ngIf="showGeneralKPIs">
    <div class="section-header">
      <h2>Indicateurs Clés</h2>
      <button mat-icon-button (click)="toggleGeneralKPIs()">
        <mat-icon>{{showGeneralKPIs ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
    </div>
    
    <div class="kpis-grid">
      <div class="kpi-card" 
           *ngFor="let kpi of generalKPIs; trackBy: trackByKpiId"
           [style.border-left-color]="kpi.color">
        <div class="kpi-header">
          <mat-icon class="kpi-icon" [style.color]="kpi.color">{{kpi.icon}}</mat-icon>
          <span class="kpi-title">{{kpi.title}}</span>
        </div>
        
        <div class="kpi-content">
          <div class="kpi-value">{{kpi.value}}</div>
          <div class="kpi-variation" [ngClass]="getVariationClass(kpi.trend)">
            <mat-icon>{{kpi.trend === 'up' ? 'arrow_upward' : 'arrow_downward'}}</mat-icon>
            {{kpi.variation}}%
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Aperçu Projets -->
  <div class="projects-overview" *ngIf="showProjectOverview">
    <div class="section-header">
      <h2>Aperçu Projets</h2>
      <button mat-icon-button (click)="toggleProjectOverview()">
        <mat-icon>{{showProjectOverview ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
    </div>
    
    <div class="projects-summary">
      <div class="project-stats">
        <div class="stat-item">
          <mat-icon>folder_open</mat-icon>
          <span class="stat-label">En cours</span>
          <span class="stat-value">15</span>
        </div>
        <div class="stat-item">
          <mat-icon>schedule</mat-icon>
          <span class="stat-label">En attente</span>
          <span class="stat-value">6</span>
        </div>
        <div class="stat-item">
          <mat-icon>check_circle</mat-icon>
          <span class="stat-label">Terminés</span>
          <span class="stat-value">3</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Activité Récente -->
  <div class="recent-activity">
    <div class="section-header">
      <h2>Activité Récente</h2>
      <button mat-stroked-button routerLink="/admin/projects">
        Voir tout
        <mat-icon>arrow_forward</mat-icon>
      </button>
    </div>
    
    <div class="activity-list">
      <div class="activity-item" 
           *ngFor="let activity of recentActivities; trackBy: trackByActivityId">
        <div class="activity-icon">
          <mat-icon [style.color]="activity.color">{{activity.icon}}</mat-icon>
        </div>
        
        <div class="activity-content">
          <div class="activity-title">{{activity.title}}</div>
          <div class="activity-description">{{activity.description}}</div>
          <div class="activity-timestamp">{{formatTimestamp(activity.timestamp)}}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Graphiques & Analytics (Vue Détaillée) -->
  <div class="analytics-section" *ngIf="selectedView === 'detailed'">
    <div class="section-header">
      <h2>Analytics</h2>
    </div>
    
    <div class="charts-grid">
      <div class="chart-card">
        <h3>Évolution Projets</h3>
        <div class="chart-placeholder">
          <mat-icon>insert_chart</mat-icon>
          <p>Graphique à intégrer</p>
        </div>
      </div>
      
      <div class="chart-card">
        <h3>Répartition Équipe</h3>
        <div class="chart-placeholder">
          <mat-icon>pie_chart</mat-icon>
          <p>Graphique à intégrer</p>
        </div>
      </div>
    </div>
  </div>
</div>