<p-toast />
<p-confirmDialog />

<div class="page-container">
  <div class="page-header">
    <div class="header-text">
      <h1>{{ 'AR_AP.TITLE' | translate }}</h1>
      <p>{{ 'AR_AP.SUBTITLE' | translate }}</p>
    </div>
    <div class="header-actions">
      <p-button icon="pi pi-refresh" [rounded]="true" [text]="true" severity="secondary" (onClick)="retry()" pTooltip="Refresh" />
    </div>
  </div>

  <p-tabs [value]="activeTab()" (valueChange)="onTabChange($event)">
    <p-tablist>
      <p-tab [value]="0">{{ 'AR_AP.AR_BALANCES' | translate }}</p-tab>
      <p-tab [value]="1">{{ 'AR_AP.AP_BALANCES' | translate }}</p-tab>
      <p-tab [value]="2">{{ 'AR_AP.STATEMENT' | translate }}</p-tab>
      <p-tab [value]="3">{{ 'AR_AP.NETTING' | translate }}</p-tab>
    </p-tablist>

    <p-tabpanels>
      <!-- AR Balances -->
      <p-tabpanel [value]="0">
        <div class="tab-content">
          @if (loadingAr()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else {
            <div class="table-card">
              <p-table [value]="arBalances()" [paginator]="true" [rows]="25" styleClass="p-datatable-sm">
                <ng-template #header>
                  <tr>
                    <th>{{ 'AR_AP.PARTNER' | translate }}</th>
                    <th>{{ 'AR_AP.BALANCE' | translate }}</th>
                  </tr>
                </ng-template>
                <ng-template #body let-item>
                  <tr>
                    <td>{{ item.partner_name || item.partner?.name || '-' }}</td>
                    <td>{{ (item.balance || item.total || 0) | number:'1.2-2' }}</td>
                  </tr>
                </ng-template>
                <ng-template #emptymessage>
                  <tr><td colspan="2" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                </ng-template>
              </p-table>
            </div>
          }
        </div>
      </p-tabpanel>

      <!-- AP Balances -->
      <p-tabpanel [value]="1">
        <div class="tab-content">
          @if (loadingAp()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else {
            <div class="table-card">
              <p-table [value]="apBalances()" [paginator]="true" [rows]="25" styleClass="p-datatable-sm">
                <ng-template #header>
                  <tr>
                    <th>{{ 'AR_AP.PARTNER' | translate }}</th>
                    <th>{{ 'AR_AP.BALANCE' | translate }}</th>
                  </tr>
                </ng-template>
                <ng-template #body let-item>
                  <tr>
                    <td>{{ item.partner_name || item.partner?.name || '-' }}</td>
                    <td>{{ (item.balance || item.total || 0) | number:'1.2-2' }}</td>
                  </tr>
                </ng-template>
                <ng-template #emptymessage>
                  <tr><td colspan="2" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                </ng-template>
              </p-table>
            </div>
          }
        </div>
      </p-tabpanel>

      <!-- Statement -->
      <p-tabpanel [value]="2">
        <div class="tab-content">
          <form [formGroup]="stmtForm" class="filter-form">
            <div class="form-row-inline">
              <div class="form-field">
                <label>{{ 'AR_AP.TYPE' | translate }}</label>
                <p-select formControlName="type" [options]="[{label: 'AR', value: 'ar'}, {label: 'AP', value: 'ap'}]" optionLabel="label" optionValue="value" />
              </div>
              <div class="form-field">
                <label>{{ 'AR_AP.PARTNER' | translate }} *</label>
                <p-select formControlName="partner_id" [options]="(partners$ | async) || []"
                  optionLabel="name" optionValue="id" [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
              </div>
              <div class="form-field">
                <label>{{ 'AR_AP.START_DATE' | translate }} *</label>
                <p-datePicker formControlName="start_date" dateFormat="yy-mm-dd" appendTo="body" />
              </div>
              <div class="form-field">
                <label>{{ 'AR_AP.END_DATE' | translate }} *</label>
                <p-datePicker formControlName="end_date" dateFormat="yy-mm-dd" appendTo="body" />
              </div>
              <p-button [label]="'AR_AP.GENERATE' | translate" icon="pi pi-file" (onClick)="onGenerateStatement()" [loading]="loadingStmt()" />
            </div>
          </form>

          @if (statement().length) {
            <div class="table-card">
              <p-table [value]="statement()" styleClass="p-datatable-sm">
                <ng-template #header>
                  <tr>
                    <th>{{ 'AR_AP.DATE' | translate }}</th>
                    <th>{{ 'AR_AP.DESCRIPTION' | translate }}</th>
                    <th>{{ 'AR_AP.DEBIT' | translate }}</th>
                    <th>{{ 'AR_AP.CREDIT' | translate }}</th>
                    <th>{{ 'AR_AP.BALANCE' | translate }}</th>
                  </tr>
                </ng-template>
                <ng-template #body let-item>
                  <tr>
                    <td>{{ item.date }}</td>
                    <td>{{ item.description }}</td>
                    <td>{{ (item.debit || 0) | number:'1.2-2' }}</td>
                    <td>{{ (item.credit || 0) | number:'1.2-2' }}</td>
                    <td>{{ (item.balance || 0) | number:'1.2-2' }}</td>
                  </tr>
                </ng-template>
              </p-table>
            </div>
          }
        </div>
      </p-tabpanel>

      <!-- Netting -->
      <p-tabpanel [value]="3">
        <div class="tab-content">
          <div class="netting-card">
            <h3>{{ 'AR_AP.NETTING_TITLE' | translate }}</h3>
            <p>{{ 'AR_AP.NETTING_DESC' | translate }}</p>
            <form [formGroup]="nettingForm" class="netting-form">
              <div class="form-field">
                <label>{{ 'AR_AP.PARTNER' | translate }} *</label>
                <p-select formControlName="partner_id" [options]="(partners$ | async) || []"
                  optionLabel="name" optionValue="id" [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
              </div>
              <div class="form-field">
                <label>{{ 'AR_AP.AMOUNT' | translate }} *</label>
                <p-inputNumber formControlName="amount" [mode]="'decimal'" [minFractionDigits]="2" />
              </div>
              <p-button [label]="'AR_AP.EXECUTE_NETTING' | translate" icon="pi pi-check" (onClick)="onNetting()" [loading]="saving()" />
            </form>
          </div>
        </div>
      </p-tabpanel>
    </p-tabpanels>
  </p-tabs>
</div>
