<!-- 📊 Gráfico de Despesas Moderno -->
<div class="expense-chart" [class.dark-mode]="isDarkMode" [style.height]="config.height || '460px'">
  
  <!-- 🎯 Header do Gráfico -->
  <div class="chart-header"> 
    <div class="header-top">
      <h3 class="chart-title">
        <i class="fas fa-chart-pie"></i>
        {{ config.title }}
      </h3>
      <div class="chart-summary">
        <span class="total-value">{{ formatCurrency(totalValue) }}</span>
        <span class="total-count" *ngIf="config.showCounts">{{ formatCount(totalCount) }}</span>
      </div>
    </div>
    
    <!-- ✨ NOVA SEÇÃO: Comparação Mensal (abaixo do título) -->
    <div class="chart-comparison" *ngIf="comparison">
      <div class="comparison-info">
        <div class="previous-month-info">
          <span class="period-label">Mês Anterior:</span>
          <span class="period-value">{{ formatCurrency(comparison.previousTotal) }}</span>
          <span class="period-count">({{ comparison.previousCount }} registros)</span>
        </div>
        
        <div class="comparison-trend" [ngClass]="getTrendClass(comparison.trend)">
          <i [class]="getTrendIcon(comparison.trend)"></i>
          <span class="trend-percentage">{{ comparison.percentageChange.toFixed(1) }}%</span>
          <span class="trend-label">{{ getTrendLabel(comparison.trend) }}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 🏢 Filtro de Empresa -->
  <div class="company-filter" *ngIf="config.showCompanyFilter && companyOptions.length > 1">
    <label for="company-select">Filtrar por empresa:</label>
    <select 
      id="company-select" 
      [(ngModel)]="selectedCompany" 
      (ngModelChange)="onCompanyFilterChange($event)"
      class="company-select">
      <option *ngFor="let option of companyOptions" [value]="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>



  <!-- 📈 Área do Gráfico -->
  <div class="chart-content" *ngIf="chartData.length > 0">
    
    <!-- 🎨 Gráfico de Barras Horizontal -->
    <div class="chart-bars">
      <div 
        class="chart-item" 
        *ngFor="let item of chartData; let i = index"
        [class.animated]="config.animated"
        [style.animation-delay]="config.animated ? (i * 0.1) + 's' : '0s'">
        
        <!-- 📊 Barra Visual -->
        <div class="bar-container">
          <div class="bar-info">
            <div class="bar-header">
              <div class="bar-label">
                <i [class]="item.icon" [style.color]="item.color"></i>
                <span class="label-text">{{ item.label }}</span>
              </div>
              <div class="bar-values">
                <span class="value-amount">{{ formatCurrency(item.value) }}</span>
                <span class="value-percentage" *ngIf="config.showPercentages">
                  ({{ formatPercentage(item.percentage) }})
                </span>
              </div>
            </div>
            
            <!-- 🎯 Barra de Progresso -->
            <div class="progress-bar">
              <div 
                class="progress-fill"
                [style.width.%]="item.barHeight"
                [style.background-color]="item.color"
                [style.animation-duration]="config.animated ? '1.5s' : '0s'">
              </div>
            </div>
            


            <!-- 🏢 Indicadores das Empresas (Top 3) -->
            <div class="company-indicators" *ngIf="getTopCompaniesForType(item.type).length > 0">
              <div class="company-indicator" 
                   *ngFor="let company of getTopCompaniesForType(item.type); let i = index">
                <div class="company-dot" [style.background-color]="getCompanyColor(company.name, i)"></div>
                <span class="company-name">{{ company.name }}</span>
                <span class="company-value">{{ formatCurrency(company.value) }}</span>
                <span class="company-percentage">({{ formatPercentage((company.value / item.value) * 100) }})</span>
              </div>
            </div>

            <!-- 🏢 Mensagem quando não há dados de empresa -->
            <div class="no-company-data" *ngIf="getTopCompaniesForType(item.type).length === 0">
              <span class="no-company-message">
                <i class="fas fa-info-circle"></i>
                Dados de empresa não disponíveis
              </span>
            </div>

            <!-- 📝 Informações Adicionais -->
            <div class="bar-details" *ngIf="config.showCounts">
              <span class="detail-count">{{ formatCount(item.count) }}</span>
              <span class="detail-average">
                Média: {{ formatCurrency(item.count > 0 ? item.value / item.count : 0) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 🎨 Gráfico de Pizza (Donut) -->
    <div class="donut-chart">
      <div class="donut-container">
        <div 
          class="donut-visual"
          [style.background]="getDonutGradient()">
        </div>
        
        <!-- 📊 Centro do Donut -->
        <div class="donut-center">
          <div class="center-value">{{ formatCurrency(totalValue) }}</div>
          <div class="center-label">Total Geral</div>
        </div>
      </div>

      <!-- 🏷️ Legenda -->
      <div class="chart-legend">
        <div 
          class="legend-item" 
          *ngFor="let item of chartData"
          [style.animation-delay]="config.animated ? '0.5s' : '0s'"
          [class.animated]="config.animated">
          <div class="legend-color" [style.background-color]="item.color"></div>
          <div class="legend-info">
            <span class="legend-label">{{ item.label }}</span>
            <span class="legend-value">{{ formatCurrency(item.value) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 🏢 Seção de Agrupamento por Empresa -->
  <div class="company-section"  *ngIf="config.groupByCompany">
    <p>Debug: groupByCompany={{ config.groupByCompany }}, companyData.length={{ companyData.length }}</p>
    <p>Config completa: {{ config | json }}</p>
    <div class="section-header">
      <h4>
        <i class="fas fa-building"></i>
        Despesas por Empresa
      </h4>
      <span class="section-subtitle">Breakdown detalhado por empresa</span>
    </div>

    <div class="company-list">
      <div 
        class="company-item" 
        *ngFor="let company of companyData; let i = index"
        [class.highlighted]="selectedCompany === company.companyName"
        [class.animated]="config.animated"
        [style.animation-delay]="config.animated ? (i * 0.1) + 's' : '0s'">
        
        <!-- 🏢 Header da Empresa -->
        <div class="company-header" (click)="onCompanyFilterChange(company.companyName)">
          <div class="company-info">
            <h5 class="company-name">
              <i class="fas fa-building"></i>
              {{ company.companyName }}
            </h5>
            <div class="company-totals">
              <span class="company-value">{{ formatCurrency(company.totalValue) }}</span>
              <span class="company-count" *ngIf="config.showCounts">
                ({{ formatCount(company.totalCount) }})
              </span>
            </div>
          </div>
          <div class="company-percentage">
            {{ formatPercentage((company.totalValue / totalValue) * 100) }}
          </div>
        </div>

        <!-- 📊 Breakdown por Tipo -->
        <div class="company-breakdown" *ngIf="selectedCompany === 'all' || selectedCompany === company.companyName">
          <div 
            class="breakdown-item" 
            *ngFor="let expense of company.expenses"
            [style.border-left-color]="typeConfig[expense.type].color">
            
            <div class="breakdown-info">
              <div class="breakdown-label">
                <i [class]="typeConfig[expense.type].icon" 
                   [style.color]="typeConfig[expense.type].color"></i>
                <span>{{ typeConfig[expense.type].label }}</span>
              </div>
              <div class="breakdown-values">
                <span class="breakdown-value">{{ formatCurrency(expense.value) }}</span>
                <span class="breakdown-count" *ngIf="config.showCounts">
                  ({{ formatCount(expense.count) }})
                </span>
              </div>
            </div>
            
            <!-- Mini barra de progresso -->
            <div class="mini-progress">
              <div 
                class="mini-progress-fill"
                [style.width.%]="(expense.value / company.totalValue) * 100"
                [style.background-color]="typeConfig[expense.type].color">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 🚫 Estado Vazio -->
  <div class="empty-state" *ngIf="chartData.length === 0">
    <div class="empty-icon">
      <i class="fas fa-chart-pie"></i>
    </div>
    <h4>Nenhuma despesa encontrada</h4>
    <p>Não há dados de pedágios, estacionamentos ou assinaturas para exibir no período selecionado.</p>
  </div>

</div>
