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

<div class="page-container">
  <app-page-header title="BANK_RECONCILIATIONS.TITLE" subtitle="BANK_RECONCILIATIONS.SUBTITLE" (refresh)="retry()">
    <p-button [label]="'BANK_RECONCILIATIONS.NEW' | translate" icon="pi pi-plus" (onClick)="openNew()" />
  </app-page-header>

  <ng-template #bodyTpl let-item>
      <tr>
        <td class="clickable" (click)="openDetail(item)">{{ item.bank_account?.name || item.bank_account?.bank_name || '-' }}</td>
        <td>{{ item.statement_date }}</td>
        <td>{{ item.period_start }} ~ {{ item.period_end }}</td>
        <td>{{ item.opening_balance | number:'1.2-2' }}</td>
        <td>{{ item.closing_balance | number:'1.2-2' }}</td>
        <td><p-tag [value]="item.status" [severity]="getStatusSeverity(item.status)" /></td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-eye" [rounded]="true" [text]="true" severity="info" (onClick)="openDetail(item)" />
            @if (item.status === 'draft') {
              <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
            }
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table
    [data]="items()"
    [loading]="loading()"
    (retry)="retry()"
    [columns]="columns"
    [bodyTpl]="bodyTpl"
  >
  </app-data-table>
</div>

<!-- Create Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="'BANK_RECONCILIATIONS.NEW' | translate"
  [saving]="saving()"
  (save)="onCreate()"
  width="650px"
>
  <form [formGroup]="form" class="dialog-form">
    <div class="form-field">
      <label>{{ 'BANK_RECONCILIATIONS.BANK_ACCOUNT' | translate }} *</label>
      <p-select formControlName="bank_account_id" [options]="(bankAccounts$ | async) || []"
        optionLabel="bank_name" optionValue="id" [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'BANK_RECONCILIATIONS.STATEMENT_DATE' | translate }} *</label>
        <p-datePicker formControlName="statement_date" dateFormat="yy-mm-dd" appendTo="body" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'BANK_RECONCILIATIONS.PERIOD_START' | translate }} *</label>
        <p-datePicker formControlName="period_start" dateFormat="yy-mm-dd" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'BANK_RECONCILIATIONS.PERIOD_END' | translate }} *</label>
        <p-datePicker formControlName="period_end" dateFormat="yy-mm-dd" appendTo="body" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'BANK_RECONCILIATIONS.OPENING' | translate }} *</label>
        <p-inputNumber formControlName="opening_balance" [mode]="'decimal'" [minFractionDigits]="2" />
      </div>
      <div class="form-field">
        <label>{{ 'BANK_RECONCILIATIONS.CLOSING' | translate }} *</label>
        <p-inputNumber formControlName="closing_balance" [mode]="'decimal'" [minFractionDigits]="2" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'BANK_RECONCILIATIONS.NOTES' | translate }}</label>
      <textarea pTextarea formControlName="notes" rows="2"></textarea>
    </div>
  </form>
</app-form-dialog>

<!-- Detail/Work Dialog -->
<p-dialog [header]="'BANK_RECONCILIATIONS.DETAIL' | translate" [(visible)]="detailVisible" [modal]="true" [style]="{ width: '900px' }">
  @if (detailItem()) {
    <div class="detail-header">
      <div class="detail-info">
        <span><strong>{{ 'BANK_RECONCILIATIONS.BANK_ACCOUNT' | translate }}:</strong> {{ detailItem()!.bank_account?.bank_name || '-' }}</span>
        <span><strong>{{ 'BANK_RECONCILIATIONS.PERIOD' | translate }}:</strong> {{ detailItem()!.period_start }} ~ {{ detailItem()!.period_end }}</span>
        <span><strong>{{ 'COMMON.STATUS' | translate }}:</strong> <p-tag [value]="detailItem()!.status" [severity]="getStatusSeverity(detailItem()!.status)" /></span>
      </div>
      <div class="detail-actions">
        @if (detailItem()!.status === 'draft' || detailItem()!.status === 'in_progress') {
          <p-button [label]="'COMMON.IMPORT' | translate" icon="pi pi-upload" severity="secondary" [outlined]="true" size="small" (onClick)="openImport()" />
          <p-button [label]="'BANK_RECONCILIATIONS.AUTO_MATCH' | translate" icon="pi pi-bolt" severity="info" size="small" (onClick)="onAutoMatch()" [loading]="saving()" />
          <p-button [label]="'BANK_RECONCILIATIONS.COMPLETE' | translate" icon="pi pi-check" severity="success" size="small" (onClick)="onComplete()" />
        }
        @if (detailItem()!.status === 'completed') {
          <p-button [label]="'BANK_RECONCILIATIONS.APPROVE' | translate" icon="pi pi-check-circle" severity="success" size="small" (onClick)="onApprove()" />
        }
      </div>
    </div>

    <h4 class="section-title">{{ 'BANK_RECONCILIATIONS.STATEMENTS' | translate }}</h4>
    @if (detailItem()!.statements?.length) {
      <div class="stmt-table">
        <table>
          <thead>
            <tr>
              <th>{{ 'BANK_RECONCILIATIONS.DATE' | translate }}</th>
              <th>{{ 'BANK_RECONCILIATIONS.DESCRIPTION' | translate }}</th>
              <th>{{ 'BANK_RECONCILIATIONS.REFERENCE' | translate }}</th>
              <th>{{ 'BANK_RECONCILIATIONS.DEBIT' | translate }}</th>
              <th>{{ 'BANK_RECONCILIATIONS.CREDIT' | translate }}</th>
              <th>{{ 'BANK_RECONCILIATIONS.BALANCE' | translate }}</th>
              <th>{{ 'BANK_RECONCILIATIONS.MATCHED' | translate }}</th>
            </tr>
          </thead>
          <tbody>
            @for (s of detailItem()!.statements; track $index) {
              <tr [class.matched]="s.matched">
                <td>{{ s.date }}</td>
                <td>{{ s.description }}</td>
                <td>{{ s.reference }}</td>
                <td>{{ s.debit | number:'1.2-2' }}</td>
                <td>{{ s.credit | number:'1.2-2' }}</td>
                <td>{{ s.balance | number:'1.2-2' }}</td>
                <td><p-tag [value]="s.matched ? 'Yes' : 'No'" [severity]="s.matched ? 'success' : 'warn'" /></td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    } @else {
      <p class="no-data">{{ 'BANK_RECONCILIATIONS.NO_STATEMENTS' | translate }}</p>
    }
  }
</p-dialog>

<!-- Import Statements Dialog -->
<p-dialog [header]="'BANK_RECONCILIATIONS.IMPORT_STATEMENTS' | translate" [(visible)]="importVisible" [modal]="true" [style]="{ width: '850px' }">
  <form [formGroup]="importForm" class="dialog-form">
    <div class="lines-table">
      <table>
        <thead>
          <tr>
            <th>{{ 'BANK_RECONCILIATIONS.DATE' | translate }} *</th>
            <th>{{ 'BANK_RECONCILIATIONS.DESCRIPTION' | translate }} *</th>
            <th>{{ 'BANK_RECONCILIATIONS.REFERENCE' | translate }}</th>
            <th>{{ 'BANK_RECONCILIATIONS.DEBIT' | translate }}</th>
            <th>{{ 'BANK_RECONCILIATIONS.CREDIT' | translate }}</th>
            <th>{{ 'BANK_RECONCILIATIONS.BALANCE' | translate }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody formArrayName="lines">
          @for (line of importLines.controls; track line; let i = $index) {
            <tr [formGroupName]="$index">
              <td><input pInputText formControlName="date" placeholder="YYYY-MM-DD" /></td>
              <td><input pInputText formControlName="description" /></td>
              <td><input pInputText formControlName="reference" /></td>
              <td><p-inputNumber formControlName="debit" [mode]="'decimal'" [minFractionDigits]="2" /></td>
              <td><p-inputNumber formControlName="credit" [mode]="'decimal'" [minFractionDigits]="2" /></td>
              <td><p-inputNumber formControlName="balance" [mode]="'decimal'" [minFractionDigits]="2" /></td>
              <td>
                @if (importLines.length > 1) {
                  <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger" size="small" (onClick)="removeImportLine(i)" />
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
    <p-button label="Add Line" icon="pi pi-plus" severity="secondary" [outlined]="true" size="small" (onClick)="addImportLine()" />
  </form>
  <ng-template #footer>
    <p-button [label]="'COMMON.CANCEL' | translate" icon="pi pi-times" severity="secondary" (onClick)="importVisible.set(false)" />
    <p-button [label]="'COMMON.IMPORT' | translate" icon="pi pi-upload" (onClick)="onImport()" [loading]="saving()" />
  </ng-template>
</p-dialog>
