<!-- 🎯 Routes Performance Dashboard - Futuristic Design -->
<div class="routes-performance-dashboard" [class.compact-mode]="compactMode">
  
  <!-- ⏳ Loading State -->
  <div *ngIf="showLoadingState" class="loading-container">
    <div class="loading-grid">
      <div class="loading-card" *ngFor="let item of [1,2,3,4,5,6]">
        <div class="loading-shimmer"></div>
        <div class="loading-content">
          <div class="loading-icon"></div>
          <div class="loading-text"></div>
          <div class="loading-value"></div>
        </div>
      </div>
    </div>
    <div class="loading-message">
      <div class="loading-spinner"></div>
      <span>Carregando métricas de performance...</span>
    </div>
  </div>

  <!-- ❌ Error State -->
  <div *ngIf="showErrorState" class="error-container">
    <div class="error-content">
      <i class="fas fa-exclamation-triangle error-icon"></i>
      <h3>Erro ao carregar dashboard</h3>
      <p>{{ error }}</p>
      <button class="retry-button" (click)="refreshData()">
        <i class="fas fa-redo"></i>
        Tentar novamente
      </button>
    </div>
  </div>

  <!-- 📊 Dashboard Content -->
  <div *ngIf="hasData" class="dashboard-content">
    
    <!-- 🎛️ Header Controls -->
    <div class="dashboard-header" *ngIf="showFilters">
      <div class="header-info">
        <h2 class="dashboard-title">
          <i class="fas fa-route"></i>
          Performance de Rotas
        </h2>
        <div class="last-updated" *ngIf="lastUpdated">
          <i class="fas fa-clock"></i>
          <span>Atualizado {{ getRelativeTime(lastUpdated) }}</span>
        </div>
      </div>
      
      <div class="header-controls">
        <!-- Time Period Selector -->
        <div class="period-selector">
          <button 
            *ngFor="let period of timePeriods"
            class="period-button"
            [class.active]="selectedPeriod?.id === period.id"
            (click)="onPeriodChange(period)">
            {{ period.name }}
          </button>
        </div>
        
        <!-- Refresh Button -->
        <button class="refresh-button" (click)="refreshData()" [disabled]="isLoading">
          <i class="fas fa-sync-alt" [class.spinning]="isLoading"></i>
        </button>
      </div>
    </div>

    <!-- 📈 Metrics Grid -->
    <div class="metrics-grid">
      
      <!-- 🛣️ Route Status Card -->
      <div class="metric-card route-status-card" 
           (mouseenter)="onCardHover($event, 'route-status')"
           (mouseleave)="onCardLeave($event, 'route-status')">
        <div class="card-header">
          <div class="card-icon route-icon">
            <i class="fas fa-route"></i>
          </div>
          <div class="card-title">
            <h3>Status das Rotas</h3>
            <span class="card-subtitle">{{ totalRoutes }} rotas totais</span>
          </div>
          <div class="card-trend" *ngIf="routeStatus">
            <span class="trend-value" [style.color]="getTrendColor('up')">
              <i [class]="getTrendIcon('up')"></i>
              +{{ routeStatus.monthlyTrend }}%
            </span>
          </div>
        </div>
        
        <div class="card-content">
          <div class="status-grid" *ngIf="routeStatus">
            <div class="status-item" 
                 *ngFor="let status of [routeStatus.active, routeStatus.completed, routeStatus.pending, routeStatus.delayed]"
                 [style.--status-color]="status.color">
              <div class="status-icon">
                <i [class]="status.icon"></i>
              </div>
              <div class="status-info">
                <div class="status-name">{{ status.name }}</div>
                <div class="status-count">{{ formatNumber(status.count) }}</div>
                <div class="status-percentage">{{ formatNumber(status.percentage, 'percentage') }}</div>
              </div>
              <div class="status-trend">
                <i [class]="getTrendIcon(status.trend)" [style.color]="getTrendColor(status.trend)"></i>
                <span [style.color]="getTrendColor(status.trend)">{{ status.trendValue }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 🚛 Vehicle Performance Card -->
      <div class="metric-card vehicle-card"
           (mouseenter)="onCardHover($event, 'vehicles')"
           (mouseleave)="onCardLeave($event, 'vehicles')">
        <div class="card-header">
          <div class="card-icon vehicle-icon">
            <i class="fas fa-truck"></i>
          </div>
          <div class="card-title">
            <h3>Performance de Veículos</h3>
            <span class="card-subtitle">{{ totalVehicles }} veículos ativos</span>
          </div>
        </div>
        
        <div class="card-content">
          <div class="vehicle-stats" *ngIf="vehicleMetrics">
            <div class="stat-item">
              <span class="stat-label">Idade Média</span>
              <span class="stat-value">{{ vehicleMetrics.averageAge }} anos</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">Top Performer</span>
              <span class="stat-value">
                <i [class]="vehicleMetrics.topPerformer.icon"></i>
                {{ vehicleMetrics.topPerformer.type }}
              </span>
            </div>
          </div>
          
          <div class="vehicle-types">
            <div class="vehicle-type" 
                 *ngFor="let vehicle of vehicleMetrics?.profiles"
                 [style.--vehicle-color]="vehicle.color">
              <div class="type-icon">
                <i [class]="vehicle.icon"></i>
              </div>
              <div class="type-info">
                <div class="type-name">{{ vehicle.type | titlecase }}</div>
                <div class="type-count">{{ formatNumber(vehicle.count) }}</div>
                <div class="type-performance">{{ vehicle.performanceScore }}% eficiência</div>
              </div>
              <div class="type-bar">
                <div class="bar-fill" [style.width.%]="vehicle.percentage"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 👨‍💼 Driver Metrics Card -->
      <div class="metric-card driver-card"
           (mouseenter)="onCardHover($event, 'drivers')"
           (mouseleave)="onCardLeave($event, 'drivers')">
        <div class="card-header">
          <div class="card-icon driver-icon">
            <i class="fas fa-users"></i>
          </div>
          <div class="card-title">
            <h3>Motoristas</h3>
            <span class="card-subtitle">{{ totalDrivers }} motoristas cadastrados</span>
          </div>
        </div>
        
        <div class="card-content">
          <div class="driver-stats" *ngIf="driverMetrics">
            <div class="stat-row">
              <div class="stat-item">
                <span class="stat-label">Ativos</span>
                <span class="stat-value highlight">{{ formatNumber(driverMetrics.activeDrivers) }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">Idade Média</span>
                <span class="stat-value">{{ driverMetrics.averageAge }} anos</span>
              </div>
            </div>
            
            <div class="gender-distribution">
              <div class="gender-item" 
                   *ngFor="let profile of driverMetrics.profiles"
                   [style.--gender-color]="profile.color">
                <div class="gender-icon">
                  <i class="fas" [class.fa-mars]="profile.gender === 'male'" [class.fa-venus]="profile.gender === 'female'"></i>
                </div>
                <div class="gender-info">
                  <div class="gender-label">{{ profile.gender === 'male' ? 'Masculino' : 'Feminino' }}</div>
                  <div class="gender-count">{{ formatNumber(profile.count) }}</div>
                  <div class="gender-percentage">{{ formatNumber(profile.percentage, 'percentage') }}</div>
                </div>
                <div class="performance-score">
                  <div class="score-circle">
                    <span>{{ profile.performanceScore }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 🚚 Transport Modal Card -->
      <div class="metric-card modal-card"
           (mouseenter)="onCardHover($event, 'modal')"
           (mouseleave)="onCardLeave($event, 'modal')">
        <div class="card-header">
          <div class="card-icon modal-icon">
            <i class="fas fa-exchange-alt"></i>
          </div>
          <div class="card-title">
            <h3>Modal de Transporte</h3>
            <span class="card-subtitle">Distribuição por tipo</span>
          </div>
        </div>
        
        <div class="card-content">
          <div class="modal-stats" *ngIf="transportModal">
            <div class="modal-highlights">
              <div class="highlight-item">
                <span class="highlight-label">Mais Usado</span>
                <div class="highlight-value">
                  <i [class]="transportModal.mostUsed.icon"></i>
                  {{ transportModal.mostUsed.name }}
                </div>
              </div>
              <div class="highlight-item">
                <span class="highlight-label">Mais Eficiente</span>
                <div class="highlight-value">
                  <i [class]="transportModal.mostEfficient.icon"></i>
                  {{ transportModal.mostEfficient.name }}
                </div>
              </div>
            </div>
            
            <div class="modal-types">
              <div class="modal-type" 
                   *ngFor="let modal of transportModal.modals"
                   [style.--modal-color]="modal.color">
                <div class="modal-type-header">
                  <div class="modal-type-icon">
                    <i [class]="modal.icon"></i>
                  </div>
                  <div class="modal-type-info">
                    <div class="modal-type-name">{{ modal.name }}</div>
                    <div class="modal-type-count">{{ formatNumber(modal.count) }} rotas</div>
                  </div>
                  <div class="modal-type-percentage">{{ formatNumber(modal.percentage, 'percentage') }}</div>
                </div>
                <div class="modal-metrics">
                  <div class="metric">
                    <span class="metric-label">Eficiência</span>
                    <span class="metric-value">{{ modal.efficiency }}%</span>
                  </div>
                  <div class="metric">
                    <span class="metric-label">Custo/km</span>
                    <span class="metric-value">{{ formatNumber(modal.cost, 'currency') }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 💰 Operational Costs Card -->
      <div class="metric-card costs-card"
           (mouseenter)="onCardHover($event, 'costs')"
           (mouseleave)="onCardLeave($event, 'costs')">
        <div class="card-header">
          <div class="card-icon costs-icon">
            <i class="fas fa-chart-line"></i>
          </div>
          <div class="card-title">
            <h3>Custos Operacionais</h3>
            <span class="card-subtitle">{{ formatNumber(totalCost, 'currency') }} total</span>
          </div>
        </div>
        
        <div class="card-content">
          <div class="costs-overview" *ngIf="operationalMetrics">
            <div class="overview-stats">
              <div class="overview-item">
                <span class="overview-label">Duração Média</span>
                <span class="overview-value">{{ operationalMetrics.averageDuration }}h</span>
              </div>
              <div class="overview-item">
                <span class="overview-label">Distância Total</span>
                <span class="overview-value">{{ formatNumber(operationalMetrics.totalDistance) }}km</span>
              </div>
              <div class="overview-item">
                <span class="overview-label">Custo/km</span>
                <span class="overview-value">{{ formatNumber(operationalMetrics.costPerKm, 'currency') }}</span>
              </div>
            </div>
            
            <div class="costs-breakdown">
              <div class="cost-item" 
                   *ngFor="let cost of operationalMetrics.costs"
                   [style.--cost-color]="cost.color">
                <div class="cost-header">
                  <div class="cost-icon">
                    <i [class]="cost.icon"></i>
                  </div>
                  <div class="cost-info">
                    <div class="cost-name">{{ cost.name }}</div>
                    <div class="cost-amount">{{ formatNumber(cost.amount, 'currency') }}</div>
                  </div>
                  <div class="cost-trend">
                    <i [class]="getTrendIcon(cost.trend)" [style.color]="getTrendColor(cost.trend)"></i>
                    <span [style.color]="getTrendColor(cost.trend)">{{ cost.trendValue }}%</span>
                  </div>
                </div>
                <div class="cost-bar">
                  <div class="bar-fill" [style.width.%]="cost.percentage"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 📦 Volume Metrics Card -->
      <div class="metric-card volume-card"
           (mouseenter)="onCardHover($event, 'volume')"
           (mouseleave)="onCardLeave($event, 'volume')">
        <div class="card-header">
          <div class="card-icon volume-icon">
            <i class="fas fa-boxes"></i>
          </div>
          <div class="card-title">
            <h3>Volumes Transportados</h3>
            <span class="card-subtitle">{{ formatNumber(totalVolumes) }} volumes totais</span>
          </div>
          <div class="card-trend" *ngIf="volumeMetrics">
            <span class="trend-value" [style.color]="getTrendColor(volumeMetrics.trend)">
              <i [class]="getTrendIcon(volumeMetrics.trend)"></i>
              {{ volumeMetrics.trendValue }}%
            </span>
          </div>
        </div>
        
        <div class="card-content">
          <div class="volume-stats" *ngIf="volumeMetrics">
            <div class="volume-overview">
              <div class="overview-metric">
                <span class="metric-label">Média por Veículo</span>
                <span class="metric-value highlight">{{ volumeMetrics.averageVolumePerVehicle }}</span>
              </div>
              <div class="overview-metric">
                <span class="metric-label">Eficiência</span>
                <span class="metric-value">{{ volumeMetrics.volumeEfficiency }}%</span>
              </div>
            </div>
            
            <div class="volume-distribution">
              <div class="distribution-item" 
                   *ngFor="let item of [
                     {key: 'completed', label: 'Concluídos', value: volumeMetrics.volumesByStatus.completed, color: '#00FF88'},
                     {key: 'active', label: 'Ativos', value: volumeMetrics.volumesByStatus.active, color: '#00D4FF'},
                     {key: 'pending', label: 'Pendentes', value: volumeMetrics.volumesByStatus.pending, color: '#FF6B35'},
                     {key: 'delayed', label: 'Atrasados', value: volumeMetrics.volumesByStatus.delayed, color: '#FF0055'}
                   ]"
                   [style.--distribution-color]="item.color">
                <div class="distribution-label">{{ item.label }}</div>
                <div class="distribution-value">{{ formatNumber(item.value) }}</div>
                <div class="distribution-bar">
                  <div class="bar-fill" [style.width.%]="(item.value / totalVolumes) * 100"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
