<div class="tabler-dashboard" data-dashboard-type="reporting">

  <!-- Loading State -->
  <div class="loading-overlay" *ngIf="isLoading">
    <div class="loading-content">
      <div class="loading-spinner"></div>
      <p>Chargement des rapports...</p>
    </div>
  </div>

  <!-- Dashboard Content -->
  <div class="dashboard-content" *ngIf="!isLoading">

    <!-- Page Header -->
    <div class="page-header">
      <div class="container-xl">
        <div class="row align-items-center">
          <div class="col">
            <div class="page-pretitle">Analyse de cohérence</div>
            <h2 class="page-title">Rapports d'activités</h2>
          </div>
          <div class="col-auto ms-auto d-print-none">
            <div class="btn-list">
              <!-- <span class="d-none d-sm-inline">
                <a href="#" class="btn" (click)="$event.preventDefault()">
                  Nouveau rapport 2
                </a>
              </span> -->
              <a href="#" class="btn btn-primary d-none d-sm-inline-block" (click)="$event.preventDefault(); refresh()">
                <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" />
                  <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" />
                  <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" />
                </svg>
                Actualiser
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Page Body -->
    <div class="page-body">
      <div class="container-xl">

        <!-- Error Alert -->
        <div class="row" *ngIf="error">
          <div class="col-12">
            <div class="alert alert-danger" role="alert">
              <div class="d-flex align-items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon me-2" 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" />
                  <circle cx="12" cy="12" r="9" />
                  <line x1="12" y1="8" x2="12" y2="12" />
                  <line x1="12" y1="16" x2="12.01" y2="16" />
                </svg>
                <div>
                  <h4 class="alert-title">Erreur de chargement</h4>
                  <div class="text-muted">{{ error }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Filters -->
        <div class="filters-bar mb-3">
          <div class="d-flex align-items-end gap-2">
            <div>
              <label class="form-label form-label-sm">Date de début</label>
              <input type="date" class="form-control form-control-sm" [(ngModel)]="filters.date_from">
            </div>
            <div>
              <label class="form-label form-label-sm">Date de fin</label>
              <input type="date" class="form-control form-control-sm" [(ngModel)]="filters.date_to">
            </div>
            <div>
              <button class="btn btn-primary btn-sm" (click)="applyFilters()">
                <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" />
                  <circle cx="10" cy="10" r="7" />
                  <line x1="21" y1="21" x2="15" y2="15" />
                </svg>
                Générer
              </button>
            </div>
          </div>
        </div>

        <!-- Stats Cards Row -->
        <div class="row row-deck row-cards" *ngIf="dashboard">
          <div class="col-sm-6 col-lg-3" *ngFor="let badge of statsBadges; trackBy: trackByBadge">
            <div class="card">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="subheader">{{ badge.title }}</div>
                  <div class="ms-auto lh-1">
                    <div class="dropdown">
                      <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        {{ dashboard.period.date_from | slice:5 }} - {{ dashboard.period.date_to | slice:5 }}
                      </a>
                    </div>
                  </div>
                </div>
                <div class="d-flex align-items-baseline">
                  <div class="h1 mb-0 me-2">{{ badge.value }}</div>
                  <div class="me-auto">
                    <span class="text-green d-inline-flex align-items-center lh-1" *ngIf="badge.trend === 'up'">
                      {{ badge.variation }}
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" 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" />
                        <polyline points="3,17 9,11 13,15 21,7" />
                        <polyline points="14,7 21,7 21,14" />
                      </svg>
                    </span>
                    <span class="text-red d-inline-flex align-items-center lh-1" *ngIf="badge.trend === 'down'">
                      {{ badge.variation }}
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" 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" />
                        <polyline points="3,7 9,13 13,9 21,17" />
                        <polyline points="21,10 21,17 14,17" />
                      </svg>
                    </span>
                    <span class="text-muted d-inline-flex align-items-center lh-1" *ngIf="badge.trend === 'stable'">
                      {{ badge.variation }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Dashboard Content -->
        <div class="row row-deck row-cards" *ngIf="dashboard">

          <!-- Score de Santé Global -->
          <div class="col-md-4">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Santé Globale</h3>
              </div>
              <div class="card-body text-center">
                <div class="health-gauge">
                  <svg viewBox="0 0 120 120" class="gauge-svg">
                    <circle cx="60" cy="60" r="50" fill="none" stroke="#e9ecef" stroke-width="10" />
                    <circle cx="60" cy="60" r="50" fill="none"
                      [attr.stroke]="getHealthColor(dashboard.global_health.status)" stroke-width="10"
                      stroke-linecap="round"
                      [attr.stroke-dasharray]="getGaugeDashArray(dashboard.global_health.score)"
                      stroke-dashoffset="0"
                      transform="rotate(-90 60 60)" />
                  </svg>
                  <div class="gauge-value"
                    [style.color]="getHealthColor(dashboard.global_health.status)">
                    {{ (dashboard.global_health.score || 0).toFixed(1) }}%
                  </div>
                </div>
                <div class="mt-3">
                  <span class="badge badge-lg"
                    [class.bg-green]="dashboard.global_health.status === 'good'"
                    [class.bg-yellow]="dashboard.global_health.status === 'warning'"
                    [class.bg-red]="dashboard.global_health.status === 'critical'">
                    {{ dashboard.global_health.status === 'good' ? 'Excellent' :
                       dashboard.global_health.status === 'warning' ? 'Attention' : 'Critique' }}
                  </span>
                </div>
                <div class="text-muted mt-2">
                  Période: {{ dashboard.period.date_from }} au {{ dashboard.period.date_to }}
                </div>
              </div>
            </div>
          </div>

          <!-- Alertes -->
          <div class="col-md-8">
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">
                  Alertes ({{ dashboard.alerts?.length || 0 }})
                </h3>
              </div>
              <div class="card-body" *ngIf="!dashboard.alerts || dashboard.alerts.length === 0">
                <div class="empty-state">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg text-green" width="40" height="40"
                    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" />
                    <circle cx="12" cy="12" r="9" />
                    <path d="M9 12l2 2l4 -4" />
                  </svg>
                  <p class="text-muted mt-2">Aucune alerte</p>
                </div>
              </div>
              <div class="list-group list-group-flush"
                *ngIf="dashboard.alerts && dashboard.alerts.length > 0">
                <div class="list-group-item" *ngFor="let alert of dashboard.alerts">
                  <div class="d-flex align-items-center justify-content-between">
                    <span class="text-truncate">{{ getReportTitleByName(alert.report) }}</span>
                    <span class="badge ms-2"
                      [class.bg-red]="(alert.percentage || 0) < 50"
                      [class.bg-yellow]="(alert.percentage || 0) >= 50 && (alert.percentage || 0) < 90"
                      [class.bg-green]="(alert.percentage || 0) >= 90">
                      {{ (alert.percentage || 0).toFixed(1) }}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Cartes des 6 Rapports -->
          <div class="col-sm-6 col-lg-4" *ngFor="let report of reports">
            <div class="card report-card">
              <div class="card-status-top"
                [style.background-color]="getHealthColor(report.health_status)"></div>
              <div class="card-header">
                <h3 class="card-title">{{ getReportTitle(report) }}</h3>
                <div class="card-actions">
                  <span class="badge"
                    [class.bg-green]="report.health_status === 'good'"
                    [class.bg-yellow]="report.health_status === 'warning'"
                    [class.bg-red]="report.health_status === 'critical'">
                    {{ report.health_status === 'good' ? 'Bon' : report.health_status === 'warning' ? 'Attention' : 'Critique' }}
                  </span>
                </div>
              </div>
              <div class="card-body">
                <div class="d-flex align-items-baseline mb-2">
                  <div class="h1 mb-0 me-2">{{ (report.matched_percentage || 0).toFixed(1) }}%</div>
                  <div class="text-muted">correspondance</div>
                </div>

                <div class="progress progress-sm mb-3">
                  <div class="progress-bar"
                    [class.bg-green]="report.health_status === 'good'"
                    [class.bg-yellow]="report.health_status === 'warning'"
                    [class.bg-red]="report.health_status === 'critical'"
                    [style.width.%]="report.matched_percentage || 0"></div>
                </div>

                <div class="row text-center">
                  <div class="col">
                    <div class="text-muted">Total</div>
                    <div class="h4 mb-0">{{ getReportTotal(report) }}</div>
                  </div>
                  <div class="col">
                    <div class="text-muted">Appariés</div>
                    <div class="h4 mb-0 text-green">{{ report.matched || 0 }}</div>
                  </div>
                  <div class="col">
                    <div class="text-muted">Écarts</div>
                    <div class="h4 mb-0 text-red">{{ report.unmatched || 0 }}</div>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <div class="d-flex gap-2">
                  <!-- CTA 1: Refresh Links -->
                  <button class="btn btn-outline-warning btn-sm"
                    *ngIf="canRefreshLinks(report.report_type)"
                    [disabled]="isCardRefreshing(report.report_type)"
                    (click)="refreshLinks(report.report_type)"
                    matTooltip="Recalculer les liens">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                      [class.spinning]="isCardRefreshing(report.report_type)"
                      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"/>
                      <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"/>
                      <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/>
                    </svg>
                    <span *ngIf="!isCardRefreshing(report.report_type)">Refresh</span>
                    <span *ngIf="isCardRefreshing(report.report_type)">En cours...</span>
                  </button>

                  <!-- CTA 2: View Details -->
                  <a href="#" class="btn btn-outline-primary btn-sm flex-fill"
                    (click)="$event.preventDefault(); viewReportDetails(report.report_type)">
                    <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" />
                      <circle cx="12" cy="12" r="2" />
                      <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" />
                    </svg>
                    Détails
                  </a>

                  <!-- CTA 3: Export -->
                  <button class="btn btn-outline-secondary btn-sm flex-fill"
                    [matMenuTriggerFor]="exportMenu"
                    [disabled]="isCardExporting(report.report_type)">
                    <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" />
                      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
                      <polyline points="7 11 12 16 17 11" />
                      <line x1="12" y1="4" x2="12" y2="16" />
                    </svg>
                    <span *ngIf="!isCardExporting(report.report_type)">Exporter</span>
                    <span *ngIf="isCardExporting(report.report_type)">Export...</span>
                  </button>
                  <mat-menu #exportMenu="matMenu">
                    <button mat-menu-item (click)="exportReport(report.report_type, 'csv')">
                      CSV
                    </button>
                    <button mat-menu-item (click)="exportReport(report.report_type, 'excel')">
                      Excel
                    </button>
                  </mat-menu>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- Footer Info -->
        <div class="row" *ngIf="dashboard">
          <div class="col-12">
            <div class="card">
              <div class="card-body py-3">
                <div class="d-flex align-items-center text-muted">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" 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" />
                    <circle cx="12" cy="12" r="9" />
                    <line x1="12" y1="8" x2="12.01" y2="8" />
                    <polyline points="11 12 12 12 12 16 13 16" />
                  </svg>
                  <span>
                    <strong>Période:</strong> {{ dashboard.period.date_from }} au {{ dashboard.period.date_to }}
                    &nbsp;•&nbsp;
                    <strong>Généré le:</strong> {{ dashboard.generated_at | date:'dd/MM/yyyy HH:mm' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- Report Detail Side Panel -->
  <app-report-detail-panel
    [visible]="detailPanelVisible"
    [reportType]="selectedReportType"
    [reportTitle]="selectedReportTitle"
    [filters]="filters"
    (visibleChange)="closeDetailPanel()"
    (exportRequested)="onPanelExportRequested($event)">
  </app-report-detail-panel>
</div>
