<!-- Overlay backdrop -->
<div class="panel-overlay" *ngIf="visible" (click)="close()"></div>

<!-- Slide-over panel -->
<div class="report-detail-panel" [class.visible]="visible">

  <!-- Panel Header -->
  <div class="panel-header">
    <div class="panel-header-content">
      <div class="panel-pretitle">Rapport détaillé</div>
      <h3 class="panel-title">{{ reportTitle }}</h3>
    </div>
    <button class="panel-close-btn" (click)="close()">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
        stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
        <line x1="18" y1="6" x2="6" y2="18"/>
        <line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
  </div>

  <!-- Panel Body -->
  <div class="panel-body">

    <!-- Loading -->
    <div class="panel-loading" *ngIf="isLoading">
      <div class="loading-spinner"></div>
      <p>Chargement du rapport...</p>
    </div>

    <!-- Error -->
    <div class="panel-error" *ngIf="error && !isLoading">
      <div class="alert alert-danger">
        <strong>Erreur:</strong> {{ error }}
      </div>
      <button class="btn btn-outline-primary btn-sm" (click)="loadReport()">Réessayer</button>
    </div>

    <!-- Report Content -->
    <div class="report-content" *ngIf="reportDetail && !isLoading && !error">

      <!-- Summary Card -->
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Résumé</h4>
        </div>
        <div class="card-body">
          <div class="stats-row">
            <div class="stat-item">
              <div class="stat-label">Total</div>
              <div class="stat-value">{{ reportDetail.summary.total }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">Appariés</div>
              <div class="stat-value text-green">{{ reportDetail.summary.matched }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">Écarts</div>
              <div class="stat-value text-red">{{ reportDetail.summary.unmatched }}</div>
            </div>
          </div>
          <div class="progress progress-sm mt-3">
            <div class="progress-bar bg-green"
              [style.width.%]="reportDetail.summary.matched_percentage"></div>
          </div>
          <div class="text-center text-muted mt-2">
            {{ (reportDetail.summary.matched_percentage || 0).toFixed(2) }}% de correspondance
          </div>
          <div class="stats-row mt-3" *ngIf="reportDetail.summary.total_amount">
            <div class="stat-item">
              <div class="stat-label">Montant Total</div>
              <div class="stat-value-sm">{{ reportDetail.summary.total_amount | number:'1.0-0' }} XOF</div>
            </div>
            <div class="stat-item" *ngIf="reportDetail.summary.matched_amount">
              <div class="stat-label">Montant Apparié</div>
              <div class="stat-value-sm text-green">{{ reportDetail.summary.matched_amount | number:'1.0-0' }} XOF</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Alerts Card -->
      <div class="card" *ngIf="reportDetail.alerts && reportDetail.alerts.length > 0">
        <div class="card-header">
          <h4 class="card-title">Alertes ({{ reportDetail.alerts.length }})</h4>
        </div>
        <div class="list-group list-group-flush">
          <div class="list-group-item" *ngFor="let alert of reportDetail.alerts">
            <div class="alert-row">
              <span class="status-dot"
                [class.bg-red]="alert.severity === 'critical'"
                [class.bg-yellow]="alert.severity === 'warning'"
                [class.bg-green]="alert.severity === 'info'"
                [class.status-dot-animated]="alert.severity === 'critical'"></span>
              <div class="alert-content">
                <div>{{ alert.message }}</div>
                <small class="text-muted" *ngIf="alert.action_hint">{{ alert.action_hint }}</small>
              </div>
              <span class="badge" [ngClass]="getAlertBadgeClass(alert.severity)">
                {{ alert.severity }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Unmatched Items Table -->
      <div class="card" *ngIf="getDetailItems().length > 0">
        <div class="card-header">
          <h4 class="card-title">Éléments non appariés ({{ getDetailItems().length }})</h4>
        </div>
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th *ngFor="let col of getDetailColumns()">{{ formatColumnHeader(col) }}</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of getDetailItems() | slice:0:50">
                <td *ngFor="let col of getDetailColumns()">{{ formatCellValue(item[col]) }}</td>
              </tr>
            </tbody>
          </table>
          <div class="table-footer text-muted" *ngIf="getDetailItems().length > 50">
            Affichage limité à 50 éléments. Exportez pour voir la liste complète.
          </div>
        </div>
      </div>

      <!-- Account Breakdown -->
      <div class="card" *ngIf="getAccountBreakdowns().length > 0">
        <div class="card-header">
          <h4 class="card-title">Par Compte</h4>
        </div>
        <div class="list-group list-group-flush">
          <div class="list-group-item" *ngFor="let account of getAccountBreakdowns()">
            <div class="account-row">
              <strong>{{ account.account_name }}</strong>
              <span class="text-muted">{{ account.match_rate.toFixed(1) }}%</span>
            </div>
            <div class="progress progress-sm mt-1">
              <div class="progress-bar"
                [class.bg-green]="account.match_rate >= 95"
                [class.bg-yellow]="account.match_rate >= 85 && account.match_rate < 95"
                [class.bg-red]="account.match_rate < 85"
                [style.width.%]="account.match_rate"></div>
            </div>
            <div class="account-details mt-1">
              <span>{{ account.matched }}/{{ account.total }} appariés</span>
              <span class="text-red" *ngIf="account.unmatched > 0">{{ account.unmatched }} écarts</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Generated At -->
      <div class="text-center text-muted generated-info">
        Généré le {{ reportDetail.generated_at | date:'dd/MM/yyyy HH:mm' }}
      </div>
    </div>
  </div>

  <!-- Panel Footer -->
  <div class="panel-footer" *ngIf="reportDetail && !isLoading">
    <button class="btn btn-outline-secondary btn-sm" (click)="close()">Fermer</button>
    <div class="footer-actions">
      <button class="btn btn-outline-primary btn-sm" (click)="onExport('csv')">
        Export CSV
      </button>
      <button class="btn btn-primary btn-sm" (click)="onExport('excel')">
        Export Excel
      </button>
    </div>
  </div>
</div>
