<!-- 🚀 ROUTE STEPS COMPONENT SIMPLES - Cards Coloridos Estáticos -->
<div class="route-steps-container">
  
  <!-- 🎯 HEADER COMPACTO COM ESTATÍSTICAS -->
  <div class="route-header">
    <!-- 📍 LINHA 1: Título + Status + Estatísticas Principais -->
    <div class="header-top-row">
      <div class="route-title-section">
        <h2 class="route-title">
          <i class="fas fa-route"></i>
          {{ routeInfo?.routeNumber || 'RT-2024-001' }} - {{ routeInfo?.description || 'Teste de Rendering' }}
        </h2>
        <span class="status" style="color: #10b981;">
          <i class="fas fa-circle"></i>
          Teste Funcionando!
        </span>
      </div>
      
      <!-- 📊 ESTATÍSTICAS PRINCIPAIS (INLINE) -->
      <div class="primary-stats">
        <div class="stat-item">
          <span class="stat-value">{{ routeSteps.length }}</span>
          <span class="stat-label">Total de Etapas</span>
        </div>
        
        <div class="stat-item">
          <span class="stat-value">{{ getCompletedStepsCount() }}</span>
          <span class="stat-label">Completadas</span>
        </div>
        
        <div class="stat-item">
          <span class="stat-value">{{ getTotalEstimatedTime() }}min</span>
          <span class="stat-label">Tempo Estimado</span>
        </div>
      </div>
    </div>
    
    <!-- 🚛 LINHA 2: Motorista + Veículo + Progresso + Estatísticas do Mapa -->
    <div class="header-bottom-row" *ngIf="routeInfo">
      <!-- 👨‍💼 MOTORISTA + 🚛 VEÍCULO (COMPACTO) -->
      <div class="driver-vehicle-compact">
        <div class="driver-info">
          <div class="driver-avatar">
            <i class="fas fa-user"></i>
          </div>
          <div class="driver-details">
            <span class="driver-name">{{ routeInfo.driverName || 'Andre Correa da Conceicao' }}</span>
            <div class="driver-rating" *ngIf="routeInfo.driverRating">
              <i class="fas fa-star" [ngClass]="{'filled': routeInfo.driverRating >= 1}"></i>
              <i class="fas fa-star" [ngClass]="{'filled': routeInfo.driverRating >= 2}"></i>
              <i class="fas fa-star" [ngClass]="{'filled': routeInfo.driverRating >= 3}"></i>
              <i class="fas fa-star" [ngClass]="{'filled': routeInfo.driverRating >= 4}"></i>
              <i class="fas fa-star" [ngClass]="{'filled': routeInfo.driverRating >= 5}"></i>
              <span class="rating-value">{{ routeInfo.driverRating }}</span>
            </div>
          </div>
        </div>
        
        <div class="vehicle-info">
          <div class="vehicle-icon">
            <i class="fas fa-truck"></i>
          </div>
          <div class="vehicle-details">
            <span class="vehicle-plate">{{ routeInfo.vehiclePlate || 'STV7B22' }}</span>
            <span class="vehicle-type">{{ routeInfo.vehicleType || 'Tipo não definido' }}</span>
          </div>
        </div>
      </div>
      
      <!-- 📊 PROGRESSO (COMPACTO) -->
      <div class="progress-compact">
        <div class="progress-info">
          <span class="progress-title">Progresso da Rota</span>
          <span class="progress-text">{{ getCompletedStepsCount() }}/{{ routeSteps.length }} etapas concluídas</span>
        </div>
        <div class="progress-bar-container">
          <div class="progress-bar">
            <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
          </div>
          <span class="progress-percentage">{{ getProgressPercentage() }}%</span>
        </div>
      </div>
      
      <!-- 🗺️ ESTATÍSTICAS DO MAPA (HORIZONTAL) -->
      <div class="map-stats-compact">
        <div class="map-stat">
          <i class="fas fa-map-pin"></i>
          <span class="stat-value">{{ mapStats.totalStops }}</span>
          <span class="stat-label">Paradas</span>
        </div>
        
        <div class="map-stat">
          <i class="fas fa-route"></i>
          <span class="stat-value">{{ mapStats.totalDistance }}</span>
          <span class="stat-label">Distância</span>
        </div>
        
        <div class="map-stat">
          <i class="fas fa-clock"></i>
          <span class="stat-value">{{ mapStats.estimatedTime }}</span>
          <span class="stat-label">Tempo Est.</span>
        </div>
        
        <div class="map-stat online">
          <i class="fas fa-wifi"></i>
          <span class="stat-value">Online</span>
          <span class="stat-label">Status</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 📱 LAYOUT CARDS 80% / 20% -->
  <div class="content-layout">

    <!-- 🗺️ CARD DO MAPA (80%) -->
    <div class="main-card">
      <div class="card-header">
        <h3>
          <i class="fas fa-map-marked-alt"></i>
          Mapa da Rota
        </h3>
      </div>
      
      <div class="card-content">
        <!-- 🗺️ SEÇÃO DO MAPA --> 
        <div class="map-section">
          <app-route-map 
            [routeSteps]="routeSteps"
            [isOnline]="true"
            (stopSelected)="onStepSelected($event)"
            (mapReady)="onMapReady($event)"
            (mapStatsUpdated)="onMapStatsUpdated($event)">
          </app-route-map>
        </div>
      </div>
    </div>

    <!-- 📋 CARD LATERAL COM LISTA DE ETAPAS (20%) -->
    <div class="sidebar-card">
      <div class="card-header">
        <h3>
          <i class="fas fa-list-ol"></i>
          Etapas da Rota
        </h3>
      </div>
      
      <div class="card-content">
        <!-- 📋 LISTA DE ETAPAS -->
        <div class="steps-list">
          <!-- 🔄 LOADING STATE -->
          <div *ngIf="isLoading" class="loading-state">
            <div class="loading-spinner">
              <i class="fas fa-spinner fa-spin"></i>
            </div>
            <p>Carregando etapas da rota...</p>
          </div>

          <!-- ❌ ERROR STATE -->
          <div *ngIf="hasError" class="error-state">
            <div class="error-icon">
              <i class="fas fa-exclamation-triangle"></i>
            </div>
            <p>{{ errorMessage }}</p>
          </div>

          <!-- ✅ DADOS CARREGADOS - Lista Dinâmica -->
          <div *ngIf="!isLoading && !hasError && routeSteps.length > 0">
            <div 
              *ngFor="let step of routeSteps; trackBy: trackByStepId" 
              class="step-item"
              [ngClass]="getStepStatusClass(step.status)"
              (click)="onStepSelected(step)">
              
              <div class="step-number">
                <span>{{ step.sequence }}</span>
              </div>
              
              <div class="step-content">
                <div class="step-header">
                  <h4 class="step-title">
                    <i [class]="getStepIcon(step.type)"></i>
                    {{ getStepTitle(step.type) }} - {{ getStepLocationName(step) }}
                  </h4>
                  <div class="step-status">
                    <i [class]="getStatusIcon(step.status)" [style.color]="getStatusColor(step.status)"></i>
                    <span [style.color]="getStatusColor(step.status)">{{ getStatusLabel(step.status) }}</span>
                  </div>
                </div>
                
                <p class="step-description" *ngIf="step.notes">{{ step.notes }}</p>
                
                <div class="step-details">
                  <div class="step-address">
                    <i class="fas fa-map-marker-alt"></i>
                    {{ step.location.address }}
                  </div>
                  <div class="step-timing">
                    <i class="fas fa-clock"></i>
                    <span *ngIf="step.estimatedDuration">
                      Previsto: {{ step.estimatedDuration }}min
                    </span>
                    <span *ngIf="step.actualDuration">
                      | Real: {{ step.actualDuration }}min
                    </span>
                  </div>
                  <div class="step-packages" *ngIf="step.packages">
                    <i class="fas fa-box"></i>
                    {{ step.packages }} pacotes
                    <span *ngIf="step.weight"> ({{ step.weight }}kg)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 📭 ESTADO VAZIO -->
          <div *ngIf="!isLoading && !hasError && routeSteps.length === 0" class="empty-state">
            <div class="empty-icon">
              <i class="fas fa-route"></i>
            </div>
            <p>Nenhuma etapa encontrada para esta rota</p>
          </div>
        </div>

        <!-- Status Cards Adicionais -->
        <div class="status-cards">
          <div class="status-card success">
            <i class="fas fa-check"></i>
            <span>Funcionando!</span>
          </div>
          
          <div class="status-card info">
            <i class="fas fa-info"></i>
            <span>Layout 80/20</span>
          </div>
          
          <div class="status-card warning">
            <i class="fas fa-paint-brush"></i>
            <span>Cards Coloridos</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</div> 