<div class="dashboard-finance-container">
  <!-- En-tête Dashboard Finance -->
  <div class="dashboard-header">
    <div class="header-content">
      <div class="title-section">
        <mat-icon class="dashboard-icon">account_balance</mat-icon>
        <div class="title-text">
          <h1>Dashboard Finance</h1>
          <p class="subtitle">Suivi des performances financières</p>
        </div>
      </div>
      
      <div class="header-actions">
        <button mat-icon-button [class.active]="autoRefresh" 
                (click)="toggleAutoRefresh()" 
                matTooltip="Actualisation automatique">
          <mat-icon>{{autoRefresh ? 'sync' : 'sync_disabled'}}</mat-icon>
        </button>
        
        <button mat-stroked-button (click)="refreshFinanceData()">
          <mat-icon>refresh</mat-icon>
          Actualiser
        </button>
        
        <button mat-stroked-button>
          <mat-icon>file_download</mat-icon>
          Exporter
        </button>
      </div>
    </div>
  </div>

  <!-- Contrôles Période -->
  <div class="period-controls">
    <div class="period-selector">
      <label>Période d'analyse:</label>
      <div class="period-buttons">
        <button mat-button 
                [class.active]="selectedPeriod === 'month'"
                (click)="changePeriod('month')">
          Mois
        </button>
        <button mat-button 
                [class.active]="selectedPeriod === 'quarter'"
                (click)="changePeriod('quarter')">
          Trimestre
        </button>
        <button mat-button 
                [class.active]="selectedPeriod === 'year'"
                (click)="changePeriod('year')">
          Année
        </button>
      </div>
    </div>
  </div>

  <!-- KPIs Finance -->
  <div class="kpis-section" *ngIf="showFinanceKPIs">
    <div class="section-header">
      <h2>Indicateurs Financiers</h2>
    </div>
    
    <div class="kpis-grid">
      <div class="kpi-card" 
           *ngFor="let kpi of financeKPIs; trackBy: trackByKpiId"
           [style.border-left-color]="kpi.color">
        <div class="kpi-header">
          <mat-icon class="kpi-icon" [style.color]="kpi.color">{{kpi.icon}}</mat-icon>
          <span class="kpi-title">{{kpi.title}}</span>
        </div>
        
        <div class="kpi-content">
          <div class="kpi-value">{{kpi.value}}</div>
          <div class="kpi-variation" [ngClass]="getVariationClass(kpi.trend)">
            <mat-icon>{{kpi.trend === 'up' ? 'arrow_upward' : 'arrow_downward'}}</mat-icon>
            {{kpi.variation}}%
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Section Graphiques -->
  <div class="charts-section" *ngIf="showTrendAnalysis">
    <div class="section-header">
      <h2>Analyse des Tendances</h2>
    </div>
    
    <div class="charts-grid">
      <div class="chart-card">
        <h3>Évolution du Chiffre d'Affaires</h3>
        <div class="chart-content">
          <div class="chart-mock">
            <div class="chart-bars">
              <div *ngFor="let data of chartData.revenue" class="chart-bar">
                <div class="bar" [style.height.%]="(data.value / 2500000) * 100"></div>
                <span class="bar-label">{{ data.period }}</span>
                <span class="bar-value">{{ (data.value / 1000000).toFixed(1) }}M€</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="chart-card">
        <h3>Répartition des Dépenses</h3>
        <div class="chart-content">
          <div class="pie-chart-mock">
            <div *ngFor="let expense of chartData.expenses" class="expense-item">
              <div class="expense-color" [style.background]="expense.color"></div>
              <span class="expense-label">{{ expense.category }}</span>
              <span class="expense-value">{{ expense.value }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Section Tableaux -->
  <div class="tables-section">
    <!-- Transactions Récentes -->
    <div class="table-card">
      <div class="table-header">
        <h3>Transactions Récentes</h3>
        <button mat-stroked-button>
          Voir tout
          <mat-icon>arrow_forward</mat-icon>
        </button>
      </div>
      
      <div class="table-container">
        <table class="finance-table">
          <thead>
            <tr>
              <th>Date</th>
              <th>Description</th>
              <th>Catégorie</th>
              <th>Type</th>
              <th>Montant</th>
              <th>Statut</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let transaction of recentTransactions; trackBy: trackByTransactionId">
              <td>{{ transaction.date }}</td>
              <td>{{ transaction.description }}</td>
              <td>{{ transaction.category }}</td>
              <td>
                <span class="transaction-type" [class]="transaction.type">
                  {{ transaction.type === 'income' ? 'Crédit' : 'Débit' }}
                </span>
              </td>
              <td class="amount" [class]="transaction.amount >= 0 ? 'positive' : 'negative'">
                {{ formatAmount(transaction.amount) }}
              </td>
              <td>
                <span class="status-badge" [class]="getStatusClass(transaction.status)">
                  {{ getStatusLabel(transaction.status) }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Budgets Projets -->
    <div class="table-card">
      <div class="table-header">
        <h3>Budgets Projets</h3>
        <button mat-stroked-button>
          Gérer
          <mat-icon>settings</mat-icon>
        </button>
      </div>
      
      <div class="table-container">
        <table class="finance-table">
          <thead>
            <tr>
              <th>Projet</th>
              <th>Budget Alloué</th>
              <th>Dépensé</th>
              <th>Reste</th>
              <th>Progression</th>
              <th>Statut</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let budget of projectBudgets; trackBy: trackByBudgetId">
              <td>
                <div class="project-info">
                  <strong>{{ budget.name }}</strong>
                  <small>{{ budget.code }}</small>
                </div>
              </td>
              <td>{{ formatAmount(budget.allocated) }}</td>
              <td>{{ formatAmount(budget.spent) }}</td>
              <td>{{ formatAmount(budget.remaining) }}</td>
              <td>
                <div class="progress-bar">
                  <div class="progress-fill" 
                       [style.width.%]="budget.progress"
                       [class]="budget.progress > 85 ? 'warning' : ''">
                  </div>
                  <span>{{ budget.progress }}%</span>
                </div>
              </td>
              <td>
                <span class="status-badge" [class]="getStatusClass(budget.status)">
                  {{ getStatusLabel(budget.status) }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Footer informatif -->
  <div class="dashboard-footer">
    <div class="footer-content">
      <div class="system-info">
        <div class="info-item">
          <mat-icon>schedule</mat-icon>
          <span>Dernière synchronisation: {{ getCurrentTime() | date:'dd/MM/yyyy HH:mm:ss' }}</span>
        </div>
        <div class="info-item">
          <mat-icon>security</mat-icon>
          <span>Données financières sécurisées</span>
        </div>
      </div>
    </div>
  </div>
</div>