<div class="lg-backdrop" *ngIf="open" (click)="close.emit()"></div>
<div class="lg-modal" *ngIf="open">
  <div class="lg-modal-card annual-card" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">
        <span class="icon-bg"><i class="bi bi-table"></i></span>
        <span>Detalhamento Completo - {{ selectedYear }}</span>
      </div>
      <div class="modal-actions">
        <select [ngModel]="selectedYear" (ngModelChange)="onYearChange($event)">
          <option *ngFor="let y of years" [value]="y">{{ y }}</option>
        </select>
        <button class="btn-icon" type="button" (click)="close.emit()" aria-label="Fechar modal">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>
    </div>

    <div class="modal-body">
      <div class="annual-table" *ngIf="data; else emptyState">
        <table>
          <thead>
            <tr>
              <th class="sticky-col col-1">Cliente</th>
              <th class="sticky-col col-2">Linha</th>
              <th class="sticky-col col-3">Item</th>
              <th class="sticky-col col-4 text-end">Total</th>
              <th class="sticky-col col-5">Parc.</th>
              <th *ngFor="let m of data.months" class="text-end">{{ m.label }}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="sticky-col col-1">{{ data.cliente || '-' }}</td>
              <td class="sticky-col col-2">{{ data.linha || '-' }}</td>
              <td class="sticky-col col-3">{{ data.item || '-' }}</td>
              <td class="sticky-col col-4 text-end">{{ data.total | currency:'BRL':'symbol':'1.2-2':'pt-BR' }}</td>
              <td class="sticky-col col-5">{{ data.parcelasLabel }}</td>
              <td *ngFor="let m of data.months" class="text-end">
                {{ m.value | currency:'BRL':'symbol':'1.2-2':'pt-BR' }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <ng-template #emptyState>
        <div class="empty-state">Sem dados para o ano selecionado.</div>
      </ng-template>
    </div>

    <div class="modal-footer">
      <button class="btn-primary" type="button" (click)="close.emit()">Fechar</button>
    </div>
  </div>
</div>
