<!-- 🚀 Dashboard PraFrota Enterprise -->
<div class="dashboard" [class.loading]="isLoading">

  <!-- ✨ Header com loading -->
  <div class="dashboard-header" *ngIf="false">
    <div class="header-content">
      <div class="header-text">
        <h1 class="dashboard-title">
          <i class="fas fa-tachometer-alt"></i>
          Dashboard PraFrota
        </h1>
        <p class="dashboard-subtitle">
          Tempo real • Última atualização: {{ lastUpdate }}
        </p>
      </div>
      <div class="header-actions">
        <button class="refresh-btn" (click)="refreshData()">
          <i class="fas fa-sync-alt"></i>
          Atualizar
        </button>
      </div>
    </div>
  </div>

  <!-- 🔄 Loading State -->
  <div class="dashboard-loading" *ngIf="isLoading">
    <div class="loading-content">
      <div class="loading-spinner">
        <div class="spinner-ring"></div>
        <div class="spinner-ring"></div>
        <div class="spinner-ring"></div>
      </div>
      <h3>Carregando Dashboard...</h3>
      <p>Buscando dados em tempo real</p>
      <div class="loading-dots">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>

  <!-- 📊 KPIs Grid -->
  <div class="kpis-grid" *ngIf="!isLoading">
    <div 
      class="kpi-card" 
      *ngFor="let kpi of kpis" 
      [ngClass]="getKpiColorClass(kpi.color)">
      
      <div class="kpi-header">
        <div class="kpi-icon-title">
          <div class="kpi-icon">
            <i [class]="kpi.icon"></i>
          </div>
          <div class="kpi-label">{{ kpi.label }}</div>
        </div>
        <div class="kpi-change" [ngClass]="getTrendClass(kpi.trend)">
          <i class="fas" 
             [class.fa-arrow-up]="kpi.trend === 'up'"
             [class.fa-arrow-down]="kpi.trend === 'down'"
             [class.fa-minus]="kpi.trend === 'stable'"></i>
          {{ kpi.change }}
        </div>
      </div>
      
      <div class="kpi-content">
        <div class="kpi-value">{{ kpi.value }}</div>
        
        <!-- ✨ NOVA SEÇÃO: Informações adicionais -->
        <div class="kpi-subtitle" *ngIf="kpi.subtitle">
          {{ kpi.subtitle }}
        </div>
        
        <!-- ✨ NOVA SEÇÃO: Métricas avançadas -->
        <!-- <div class="kpi-details" *ngIf="kpi.percentage || kpi.efficiency">
          <div class="detail-row">
            <span class="detail-item" *ngIf="kpi.percentage">
              📊 {{ kpi.percentage }} do valor total
            </span>
            <span class="detail-separator" *ngIf="kpi.percentage && kpi.efficiency"> • </span>
            <span class="detail-item" *ngIf="kpi.efficiency">
              Eficiência: {{ kpi.efficiency }}
            </span>
          </div>
        </div> -->
        
        <!-- ✨ NOVA SEÇÃO: Valor total da frota -->
        <!-- <div class="kpi-total" *ngIf="kpi.totalFleetValue">
          💰 Frota total: {{ kpi.totalFleetValue }}
        </div> -->
      </div>
    </div>
  </div>

  <!-- 📊 Cards de Despesas - estacionamento - combustível - Layout Flexível -->
  <div class="expense-section" *ngIf="!isLoading">
    <app-expense-cards-grid 
      [cards]="expenseCards"
      [maxCards]="3"
      [loading]="isLoading">
    </app-expense-cards-grid>
  </div>

    

    <!-- 🏢 Seção de Empresas - Design Elegante -->
    <div class="company-breakdown-section" *ngIf="false">
       <!-- *ngIf="companyBreakdown.length > 0" -->
      <div class="section-header">
        <div class="header-content">
          <h3>
            <i class="fas fa-building"></i>
            Despesas por Empresa
          </h3>
          <span class="section-subtitle">Breakdown detalhado por empresa</span>
        </div>
        <div class="header-stats">
          <span class="total-companies">{{ companyBreakdown.length }} empresas</span>
        </div>
      </div>

      <div class="company-grid">
        <div 
          class="company-card" 
          *ngFor="let company of companyBreakdown; let i = index"
          [style.animation-delay]="(i * 0.1) + 's'">
          
          <!-- Header da Empresa -->
          <div class="company-header">
            <div class="company-avatar">
              <i class="fas fa-building"></i>
            </div>
            <div class="company-info">
              <h4 class="company-name">{{ company.name }}</h4>
              <div class="company-stats">
                <span class="company-value">{{ formatCurrency(company.totalValue) }}</span>
                <span class="company-percentage">{{ formatPercentage((company.totalValue / getTotalValue()) * 100) }}</span>
              </div>
            </div>
            <div class="company-badge">
              <span class="record-count">{{ company.totalCount }}</span>
              <span class="record-label">registros</span>
            </div>
          </div>

          <!-- Breakdown Elegante -->
          <div class="company-breakdown">
            <div class="breakdown-grid">
              <div 
                class="breakdown-item" 
                *ngFor="let expense of company.expenses; let j = index"
                [style.animation-delay]="((i * 0.1) + (j * 0.05)) + 's'">
                
                <div class="breakdown-header">
                  <div class="type-indicator" [style.background-color]="getTypeColor(expense.type)">
                    <i [class]="getTypeIcon(expense.type)"></i>
                  </div>
                  <div class="breakdown-info">
                    <span class="type-name">{{ getTypeLabel(expense.type) }}</span>
                    <span class="type-count">{{ expense.count }} registros</span>
                  </div>
                </div>
                
                <div class="breakdown-value">
                  <span class="value-amount">{{ formatCurrency(expense.value) }}</span>
                  <span class="value-percentage">{{ formatPercentage((expense.value / company.totalValue) * 100) }}</span>
                </div>
                
                <!-- Barra de progresso elegante -->
                <div class="progress-container">
                  <div 
                    class="progress-bar"
                    [style.width.%]="(expense.value / company.totalValue) * 100"
                    [style.background]="getTypeGradient(expense.type)">
                    <div class="progress-glow"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>

  <div class="charts-grid" *ngIf="false">
    <div class="section-header">
      <h2>
        <i class="fas fa-truck"></i>
        Eficiência da Frota
      </h2>
      <span class="chart-period">Mês atual</span>
      <!-- <a href="/app/vehicles" class="view-all-btn">
        Ver Todos
        <i class="fas fa-arrow-right"></i>
      </a> -->
    </div>  
  </div>

  <!-- 📈 Charts e Resumo Grid -->
  <div class="charts-grid" *ngIf="false">
    
    <!-- 📊 Gráfico de Eficiência -->
    <div class="chart-card efficiency-chart">
      <div class="chart-header">
        <h3>
          <i class="fas fa-chart-line"></i>
          Eficiência da Frota
        </h3>
        <span class="chart-period">Últimos 7 meses</span>
      </div>
      <div class="chart-content">
        <div class="chart-placeholder">
          <div class="chart-bars">
            <div 
              class="chart-bar" 
              *ngFor="let value of efficiencyChart.values; let i = index"
              [style.height.%]="value"
              [title]="efficiencyChart.labels[i] + ': ' + value + '%'">
              <span class="bar-value">{{ value }}%</span>
            </div>
          </div>
          <div class="chart-labels">
            <span *ngFor="let label of efficiencyChart.labels">{{ label }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 💰 Gráfico de Economia -->
    <div class="chart-card economy-chart">
      <div class="chart-header">
        <h3>
          <i class="fas fa-piggy-bank"></i>
          Economia Mensal
        </h3>
        <span class="chart-period">Em milhares (R$)</span>
      </div>
      <div class="chart-content">
        <div class="chart-placeholder">
          <div class="chart-bars economy">
            <div 
              class="chart-bar" 
              *ngFor="let value of economyChart.values; let i = index"
              [style.height.%]="(value / 20) * 100"
              [title]="economyChart.labels[i] + ': R$ ' + value + 'K'">
              <span class="bar-value">{{ value }}K</span>
            </div>
          </div>
          <div class="chart-labels">
            <span *ngFor="let label of economyChart.labels">{{ label }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 📋 Resumo Executivo -->
    <div class="summary-card">
      <div class="summary-header">
        <h3>
          <i class="fas fa-clipboard-list"></i>
          Resumo Executivo
        </h3>
        <span class="status-online">
          <i class="fas fa-circle"></i>
          Online
        </span>
      </div>
      <div class="summary-content">
        <div class="summary-item">
          <div class="summary-icon success">
            <i class="fas fa-check-circle"></i>
          </div>
          <div class="summary-text">
            <strong>Sistema Operacional</strong>
            <span>Todos os serviços funcionando</span>
          </div>
        </div>
        
        <div class="summary-item">
          <div class="summary-icon warning">
            <i class="fas fa-exclamation-triangle"></i>
          </div>
          <div class="summary-text">
            <strong>3 Alertas Pendentes</strong>
            <span>Manutenções programadas</span>
          </div>
        </div>
        
        <div class="summary-item">
          <div class="summary-icon info">
            <i class="fas fa-info-circle"></i>
          </div>
          <div class="summary-text">
            <strong>Próxima Sincronização</strong>
            <span>{{ getNextSyncTime() }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 🚛 Tabela de Veículos Recentes -->
  <div class="vehicles-section" *ngIf="false">
    <div class="section-header">
      <h2>
        <i class="fas fa-truck"></i>
        Veículos Recentes - em desenvolvimento
      </h2>
      <a href="/app/vehicles" class="view-all-btn">
        Ver Todos
        <i class="fas fa-arrow-right"></i>
      </a>
    </div>
    
    <div class="vehicles-table">
      <app-data-table
        [data]="recentVehicles"
        [config]="vehiclesTableConfig"
        [loading]="false"
        [serverSidePagination]="false"
        (actionClick)="onVehicleAction($event)">
      </app-data-table>
    </div>
  </div>

  <!-- 🛣️ Dashboard de Performance de Rotas - Seção Inferior -->
<div class="routes-performance-section" *ngIf="!isLoading">
    <!-- <div class="section-header">
      <h2>
        <i class="fas fa-route"></i>
        Performance de Rotas
      </h2>
      <span class="section-subtitle">Monitoramento em tempo real</span>
    </div> -->
    
    <!-- Cards de Performance de Rotas -->
    <div class="performance-cards-grid">
      <!-- Card de Volumes Transportados -->
      <div class="volumes-card-container">
        <app-volumes-transported-card [data]="volumeData"></app-volumes-transported-card>
      </div>

      <!-- Card de Tipo de Frota -->
      <div class="fleet-type-card-container">
        <app-fleet-type-card [data]="fleetTypeData"></app-fleet-type-card>
      </div>
    </div>
 </div>


  <div class="routes-performance-section" *ngIf="false">
    <!-- <div class="section-header"> -->
      <!-- <h2>
        <i class="fas fa-route"></i>
        Performance de Rotas
      </h2> -->
      <!-- <span class="section-subtitle">Monitoramento em tempo real</span> -->
    <!-- </div> -->
    
    <div class="routes-dashboard-container">
      <app-routes-performance-dashboard
        [compactMode]="false"
        [showFilters]="true"
        [autoRefresh]="true"
        [refreshInterval]="30000">
      </app-routes-performance-dashboard>
    </div>
  </div>

</div> 