<div class="tollparking-dashboard">
  <!-- Header -->
  <div class="dashboard-header">
    <h2 class="dashboard-title">
      <i class="fas fa-road"></i>
      Dashboard de Pedágio & Estacionamento
    </h2>
    <p class="dashboard-subtitle">
      Análise detalhada de gastos por veículo e evolução temporal
    </p>
  </div>

  <!-- Loading State -->
  <div class="loading-state" *ngIf="isLoading">
    <div class="loading-spinner">
      <i class="fas fa-spinner fa-spin"></i>
    </div>
    <p>Carregando dados do dashboard...</p>
  </div>

  <!-- Dashboard Content -->
  <div class="dashboard-content" *ngIf="!isLoading">
    
    <!-- KPIs Section -->
    <div class="kpis-section">
      <div class="section-header">
        <h3>
          <i class="fas fa-chart-bar"></i>
          Métricas Principais
        </h3>
      </div>
      
      <div class="kpis-grid">
        <div 
          class="kpi-card" 
          *ngFor="let kpi of kpis"
          [ngClass]="'kpi-' + kpi.color">
          
          <div class="kpi-icon">
            <i [class]="kpi.icon"></i>
          </div>
          
          <div class="kpi-content">
            <div class="kpi-value">{{ kpi.value }}</div>
            <div class="kpi-label">{{ kpi.label }}</div>
            <div class="kpi-description">{{ kpi.description }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Top Vehicles Section -->
    <div class="top-vehicles-section">
      <div class="section-header">
        <h3>
          <i class="fas fa-trophy"></i>
          Top 10 Veículos por Valor Total
        </h3>
        <span class="section-info">Ranking dos maiores gastos acumulados</span>
      </div>
      
      <div class="top-vehicles-chart" *ngIf="topVehicles.length > 0">
        <div 
          class="vehicle-bar" 
          *ngFor="let vehicle of topVehicles; let i = index">
          
          <div class="vehicle-info">
            <div class="vehicle-rank">#{{ i + 1 }}</div>
            <div class="vehicle-details">
              <div class="vehicle-plate">{{ vehicle.license_plate }}</div>
              <div class="vehicle-stats">
                {{ vehicle.count }} registros • Média: {{ formatCurrency(vehicle.avgValue) }}
              </div>
            </div>
          </div>
          
          <div class="vehicle-value">
            <div class="value-amount">{{ formatCurrency(vehicle.totalValue) }}</div>
            <div 
              class="value-bar"
              [style.width.%]="getBarWidth(vehicle.totalValue, topVehicles[0].totalValue)">
            </div>
          </div>
        </div>
      </div>

      <div class="empty-state" *ngIf="topVehicles.length === 0">
        <i class="fas fa-car"></i>
        <p>Nenhum dado de veículo encontrado</p>
      </div>
    </div>

    <!-- Monthly Evolution Section -->
    <div class="monthly-evolution-section">
      <div class="section-header">
        <h3>
          <i class="fas fa-chart-line"></i>
          Evolução dos Últimos 3 Meses
        </h3>
        <span class="section-info">Tendência de gastos e atividade</span>
      </div>
      
      <div class="monthly-chart" *ngIf="monthlyEvolution.length > 0">
        <div 
          class="month-bar" 
          *ngFor="let month of monthlyEvolution">
          
          <div class="month-header">
            <div class="month-name">{{ month.month }}</div>
            <div class="month-value">{{ formatCurrency(month.totalValue) }}</div>
          </div>
          
          <div class="month-metrics">
            <div class="metric">
              <span class="metric-label">Registros:</span>
              <span class="metric-value">{{ month.count }}</span>
            </div>
            <div class="metric">
              <span class="metric-label">Veículos:</span>
              <span class="metric-value">{{ month.uniqueVehicles }}</span>
            </div>
            <div class="metric">
              <span class="metric-label">Média:</span>
              <span class="metric-value">{{ formatCurrency(month.avgValue) }}</span>
            </div>
          </div>
          
          <div 
            class="month-progress"
            [style.width.%]="getBarWidth(month.totalValue, monthlyEvolution[0].totalValue || 1)">
          </div>
        </div>
      </div>

      <div class="empty-state" *ngIf="monthlyEvolution.length === 0">
        <i class="fas fa-chart-line"></i>
        <p>Dados insuficientes para análise temporal</p>
      </div>
    </div>

    <!-- Type Distribution Section -->
    <div class="type-distribution-section">
      <div class="section-header">
        <h3>
          <i class="fas fa-chart-pie"></i>
          Distribuição por Tipo
        </h3>
        <span class="section-info">Breakdown por categoria de gasto</span>
      </div>
      
      <div class="type-chart" *ngIf="typeDistribution.length > 0">
        <div 
          class="type-item" 
          *ngFor="let type of typeDistribution">
          
          <div class="type-info">
            <div 
              class="type-color"
              [style.background-color]="getTypeColor(type.type)">
            </div>
            <div class="type-details">
              <div class="type-label">{{ type.label }}</div>
              <div class="type-stats">
                {{ type.count }} registros ({{ formatPercentage(type.percentage) }})
              </div>
            </div>
          </div>
          
          <div class="type-value">
            <div class="value-amount">{{ formatCurrency(type.totalValue) }}</div>
            <div 
              class="type-bar"
              [style.width.%]="getBarWidth(type.totalValue, typeDistribution[0].totalValue || 1)"
              [style.background-color]="getTypeColor(type.type)">
            </div>
          </div>
        </div>
      </div>

      <div class="empty-state" *ngIf="typeDistribution.length === 0">
        <i class="fas fa-chart-pie"></i>
        <p>Nenhuma distribuição por tipo encontrada</p>
      </div>
    </div>

    <!-- Summary Section -->
    <div class="summary-section">
      <div class="section-header">
        <h3>
          <i class="fas fa-info-circle"></i>
          Resumo Executivo
        </h3>
      </div>
      
      <div class="summary-cards">
        <div class="summary-card">
          <div class="summary-title">Total de Registros</div>
          <div class="summary-value">{{ totalItems.toLocaleString('pt-BR') }}</div>
          <div class="summary-description">Registros processados no sistema</div>
        </div>
        
        <div class="summary-card" *ngIf="topVehicles.length > 0">
          <div class="summary-title">Veículo Destaque</div>
          <div class="summary-value">{{ topVehicles[0].license_plate }}</div>
          <div class="summary-description">
            {{ formatCurrency(topVehicles[0].totalValue) }} em {{ topVehicles[0].count }} registros
          </div>
        </div>
        
        <div class="summary-card" *ngIf="typeDistribution.length > 0">
          <div class="summary-title">Tipo Predominante</div>
          <div class="summary-value">{{ typeDistribution[0].label }}</div>
          <div class="summary-description">
            {{ formatPercentage(typeDistribution[0].percentage) }} do total
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- Empty State -->
  <div class="empty-dashboard" *ngIf="!isLoading && entities.length === 0">
    <div class="empty-icon">
      <i class="fas fa-chart-bar"></i>
    </div>
    <h3>Dashboard Vazio</h3>
    <p>Não há dados de pedágio e estacionamento para exibir.</p>
    <p>Importe ou adicione registros para visualizar as métricas.</p>
  </div>
</div>
