<div class="table-card">
  <div class="table-head">
    <div class="table-head-left">
      <h3>Carteira de Parcelamentos</h3>
      <small>Visualizacao paginada com filtros e acoes por registro</small>
    </div>

    <div class="segmented" role="tablist" aria-label="Segmentos de parcelamentos">
      <button
        type="button"
        class="segment-btn"
        *ngFor="let s of segments"
        [class.active]="segment === s.key"
        (click)="segmentChange.emit(s.key)">
        {{ s.label }}
        <span class="count">{{ segmentCounts[s.key] || 0 }}</span>
      </button>
    </div>
  </div>

  <div class="table-state loading" *ngIf="loading">
    <div class="state-icon"><i class="bi bi-hourglass-split"></i></div>
    <div class="state-copy">
      <strong>Carregando parcelamentos...</strong>
      <span>Aguarde enquanto os dados sao atualizados.</span>
    </div>
    <div class="skeleton-group">
      <div class="skeleton-row" *ngFor="let _ of skeletonRows">
        <span class="skeleton-line"></span>
        <span class="skeleton-line"></span>
        <span class="skeleton-line"></span>
      </div>
    </div>
  </div>

  <div class="table-state error" *ngIf="!loading && errorMessage">
    <div class="state-icon"><i class="bi bi-exclamation-triangle"></i></div>
    <div class="state-copy">
      <strong>Falha ao carregar dados</strong>
      <span>{{ errorMessage }}</span>
    </div>
  </div>

  <div class="table-state empty" *ngIf="!loading && !errorMessage && items.length === 0">
    <div class="state-icon"><i class="bi bi-inbox"></i></div>
    <div class="state-copy">
      <strong>Nenhum parcelamento encontrado</strong>
      <span>Altere os filtros para tentar novamente.</span>
    </div>
  </div>

  <div class="parcelamentos-table-wrap" *ngIf="!loading && !errorMessage && items.length">
    <table class="table-modern">
      <thead>
        <tr>
          <th class="col-ano nowrap">Ano ref.</th>
          <th class="col-linha nowrap">Linha</th>
          <th class="col-cliente">Cliente</th>
          <th class="col-status nowrap">Status</th>
          <th class="col-parcela nowrap">Parcela atual</th>
          <th class="col-valor text-end nowrap">Valor cheio</th>
          <th class="col-valor text-end nowrap">Desconto</th>
          <th class="col-valor text-end nowrap">Valor c/ desconto</th>
          <th class="col-acoes text-center nowrap">Acoes</th>
        </tr>
      </thead>

      <tbody>
        <tr class="table-row" *ngFor="let row of items; trackBy: trackById">
          <td class="text-muted fw-bold col-ano nowrap">{{ row.anoRef ?? '-' }}</td>
          <td class="text-blue fw-black col-linha nowrap">{{ row.linha || '-' }}</td>
          <td class="col-cliente">{{ row.cliente || '-' }}</td>
          <td class="col-status nowrap">
            <span class="status-pill" [class]="'status-pill status-' + row.status">
              {{ row.statusLabel }}
            </span>
          </td>
          <td class="col-parcela nowrap">{{ row.progressLabel || '-' }}</td>
          <td class="col-valor text-end money-strong nowrap">
            {{ row.valorCheioNumber === null || row.valorCheioNumber === undefined
              ? '-' : (row.valorCheioNumber | currency:'BRL':'symbol':'1.2-2':'pt-BR') }}
          </td>
          <td class="col-valor text-end text-danger nowrap">
            {{ row.descontoNumber === null || row.descontoNumber === undefined
              ? '-' : (row.descontoNumber | currency:'BRL':'symbol':'1.2-2':'pt-BR') }}
          </td>
          <td class="col-valor text-end money-strong nowrap">
            {{ row.valorComDescontoNumber === null || row.valorComDescontoNumber === undefined
              ? '-' : (row.valorComDescontoNumber | currency:'BRL':'symbol':'1.2-2':'pt-BR') }}
          </td>
          <td class="col-acoes text-center nowrap">
            <div class="action-group">
              <button
                class="btn-icon"
                type="button"
                title="Detalhes"
                aria-label="Detalhes"
                (click)="detail.emit(row)">
                <i class="bi bi-eye"></i>
              </button>

              <button
                class="btn-icon ghost"
                type="button"
                title="Editar"
                aria-label="Editar"
                (click)="edit.emit(row)">
                <i class="bi bi-pencil"></i>
              </button>

              <button
                class="btn-icon danger"
                type="button"
                title="Excluir"
                aria-label="Excluir"
                *ngIf="isSysAdmin"
                (click)="remove.emit(row)">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="table-footer">
    <div class="page-info">
      Mostrando {{ pageStart }}-{{ pageEnd }} de {{ total }}
    </div>

    <div class="pagination" role="navigation" aria-label="Paginacao da tabela">
      <button class="btn-ghost icon-only" type="button" (click)="pageChange.emit(page - 1)" [disabled]="page <= 1">
        <i class="bi bi-chevron-left"></i>
      </button>

      <button
        class="btn-page"
        type="button"
        *ngFor="let p of pageNumbers"
        [class.active]="p === page"
        (click)="pageChange.emit(p)">
        {{ p }}
      </button>

      <button class="btn-ghost icon-only" type="button" (click)="pageChange.emit(page + 1)" [disabled]="page >= (pageNumbers[pageNumbers.length - 1] || page)">
        <i class="bi bi-chevron-right"></i>
      </button>
    </div>

    <div class="page-size">
      <span>Itens por pag</span>
      <select
        class="select-glass"
        [ngModel]="pageSize"
        (ngModelChange)="pageSizeChange.emit($event)">
        <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
      </select>
    </div>
  </div>
</div>
