<p-toast />

<div class="page-container">
  <div class="page-header">
    <div class="header-text">
      <h1>{{ 'LEDGER.TITLE' | translate }}</h1>
      <p>{{ 'LEDGER.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">{{ 'LEDGER.JOURNAL_ENTRIES' | translate }}</p-tab>
      <p-tab [value]="1">{{ 'LEDGER.ACCOUNT_LEDGER' | translate }}</p-tab>
      <p-tab [value]="2">{{ 'LEDGER.TRIAL_BALANCE' | translate }}</p-tab>
      <p-tab [value]="3">{{ 'LEDGER.ACCOUNT_BALANCES' | translate }}</p-tab>
    </p-tablist>

    <p-tabpanels>
      <!-- Tab 0: Journal Entries Search -->
      <p-tabpanel [value]="0">
        <div class="filter-card">
          <div class="filter-row">
            <div class="filter-field">
              <label>{{ 'LEDGER.ACCOUNT' | translate }}</label>
              <p-select [(ngModel)]="selectedAccountId" [options]="detailAccounts()" optionLabel="name_ar" optionValue="id"
                        [filter]="true" filterBy="name_ar,name_en,code" [showClear]="true"
                        [placeholder]="'LEDGER.ALL_ACCOUNTS' | translate" [style]="{ width: '100%' }" appendTo="body">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar }}</span></ng-template>
              </p-select>
            </div>
            <div class="filter-field">
              <label>{{ 'LEDGER.DATE_FROM' | translate }}</label>
              <p-datepicker [(ngModel)]="dateFrom" dateFormat="yy-mm-dd" [showIcon]="true" [showClear]="true" />
            </div>
            <div class="filter-field">
              <label>{{ 'LEDGER.DATE_TO' | translate }}</label>
              <p-datepicker [(ngModel)]="dateTo" dateFormat="yy-mm-dd" [showIcon]="true" [showClear]="true" />
            </div>
            <div class="filter-field">
              <label>{{ 'COMMON.STATUS' | translate }}</label>
              <p-select [(ngModel)]="statusFilter" [options]="statusOptions" optionLabel="label" optionValue="value" [style]="{ width: '100%' }" />
            </div>
            <div class="filter-actions">
              <p-button [label]="'LEDGER.SEARCH' | translate" icon="pi pi-search" (onClick)="search()" [loading]="loading()" />
              <p-button [label]="'LEDGER.CLEAR' | translate" icon="pi pi-times" severity="secondary" [outlined]="true" (onClick)="clear()" />
            </div>
          </div>
        </div>

        @if (loading()) {
          <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
        } @else if (entries().length > 0) {
          <div class="table-card">
            <p-table [value]="entries()" [paginator]="true" [rows]="25" styleClass="p-datatable-sm">
              <ng-template #header>
                <tr>
                  <th>{{ 'LEDGER.ENTRY_NUMBER' | translate }}</th>
                  <th>{{ 'LEDGER.DATE' | translate }}</th>
                  <th>{{ 'LEDGER.REFERENCE' | translate }}</th>
                  <th>{{ 'LEDGER.DESCRIPTION' | translate }}</th>
                  <th>{{ 'LEDGER.DEBIT' | translate }}</th>
                  <th>{{ 'LEDGER.CREDIT' | translate }}</th>
                  <th>{{ 'COMMON.STATUS' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template #body let-entry>
                <tr>
                  <td class="mono">
                    <a class="entry-link" (click)="goToJournalEntries()" [pTooltip]="'JOURNAL_ENTRIES.VIEW' | translate" tooltipPosition="top">
                      {{ entry.number || entry.entry_number }}
                    </a>
                  </td>
                  <td>{{ entry.date }}</td>
                  <td>{{ entry.reference || '-' }}</td>
                  <td>{{ entry.description }}</td>
                  <td class="amount">{{ entry.total_debit | number:'1.2-2' }}</td>
                  <td class="amount">{{ entry.total_credit | number:'1.2-2' }}</td>
                  <td><p-tag [value]="entry.status" [severity]="getStatusSeverity(entry.status)" /></td>
                </tr>
              </ng-template>
            </p-table>
            <div class="totals-bar">
              <span>{{ 'COMMON.TOTAL' | translate }}:</span>
              <span class="total-amount">{{ 'LEDGER.DEBIT' | translate }}: <strong>{{ totalDebit | number:'1.2-2' }}</strong></span>
              <span class="total-amount">{{ 'LEDGER.CREDIT' | translate }}: <strong>{{ totalCredit | number:'1.2-2' }}</strong></span>
            </div>
          </div>
        } @else {
          <div class="empty-state"><i class="pi pi-search"></i><p>{{ 'LEDGER.EMPTY_MESSAGE' | translate }}</p></div>
        }
      </p-tabpanel>

      <!-- Tab 1: Account Ledger -->
      <p-tabpanel [value]="1">
        <div class="filter-card">
          <div class="filter-row">
            <div class="filter-field">
              <label>{{ 'LEDGER.ACCOUNT' | translate }} *</label>
              <p-select [(ngModel)]="alAccountId" [options]="detailAccounts()" optionLabel="name_ar" optionValue="id"
                        [filter]="true" filterBy="name_ar,name_en,code" [placeholder]="'COMMON.SELECT' | translate" [style]="{ width: '100%' }" appendTo="body">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar }}</span></ng-template>
              </p-select>
            </div>
            <div class="filter-field">
              <label>{{ 'LEDGER.DATE_FROM' | translate }}</label>
              <p-datepicker [(ngModel)]="alDateFrom" dateFormat="yy-mm-dd" [showIcon]="true" [showClear]="true" />
            </div>
            <div class="filter-field">
              <label>{{ 'LEDGER.DATE_TO' | translate }}</label>
              <p-datepicker [(ngModel)]="alDateTo" dateFormat="yy-mm-dd" [showIcon]="true" [showClear]="true" />
            </div>
            <div class="filter-actions">
              <p-button [label]="'LEDGER.SEARCH' | translate" icon="pi pi-search" (onClick)="loadAccountLedger()" [loading]="loadingAL()" />
            </div>
          </div>
        </div>

        @if (loadingAL()) {
          <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
        } @else if (accountLedgerLines().length > 0) {
          <div class="table-card">
            <p-table [value]="accountLedgerLines()" styleClass="p-datatable-sm" [paginator]="true" [rows]="25">
              <ng-template #header>
                <tr>
                  <th>{{ 'LEDGER.DATE' | translate }}</th>
                  <th>{{ 'LEDGER.ENTRY_NUMBER' | translate }}</th>
                  <th>{{ 'LEDGER.DESCRIPTION' | translate }}</th>
                  <th>{{ 'LEDGER.DEBIT' | translate }}</th>
                  <th>{{ 'LEDGER.CREDIT' | translate }}</th>
                  <th>{{ 'LEDGER.BALANCE' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template #body let-row>
                <tr>
                  <td>{{ row.date }}</td>
                  <td class="mono">
                    <a class="entry-link" (click)="goToJournalEntries()" [pTooltip]="'JOURNAL_ENTRIES.VIEW' | translate" tooltipPosition="top">
                      {{ row.entry_number }}
                    </a>
                  </td>
                  <td>{{ row.entry_description || row.description || '-' }}</td>
                  <td class="amount">{{ (+row.debit) | number:'1.2-2' }}</td>
                  <td class="amount">{{ (+row.credit) | number:'1.2-2' }}</td>
                  <td class="amount"><strong>{{ row.running_balance | number:'1.2-2' }}</strong></td>
                </tr>
              </ng-template>
              <ng-template #emptymessage>
                <tr><td colspan="6" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
              </ng-template>
            </p-table>
            <div class="totals-bar">
              <span>{{ 'COMMON.TOTAL' | translate }}:</span>
              <span class="total-amount">{{ 'LEDGER.DEBIT' | translate }}: <strong>{{ alTotalDebit | number:'1.2-2' }}</strong></span>
              <span class="total-amount">{{ 'LEDGER.CREDIT' | translate }}: <strong>{{ alTotalCredit | number:'1.2-2' }}</strong></span>
              <span class="total-amount">{{ 'LEDGER.BALANCE' | translate }}: <strong>{{ alBalance | number:'1.2-2' }}</strong></span>
            </div>
          </div>
        } @else if (alSearched()) {
          <div class="empty-state"><i class="pi pi-inbox"></i><p>{{ 'COMMON.NO_DATA' | translate }}</p></div>
        } @else {
          <div class="empty-state"><i class="pi pi-book"></i><p>{{ 'LEDGER.SELECT_ACCOUNT' | translate }}</p></div>
        }
      </p-tabpanel>

      <!-- Tab 2: Trial Balance -->
      <p-tabpanel [value]="2">
        <div class="filter-card">
          <div class="filter-row">
            <div class="filter-field">
              <label>{{ 'REPORTS.AS_OF_DATE' | translate }}</label>
              <p-datepicker [(ngModel)]="tbDate" dateFormat="yy-mm-dd" [showIcon]="true" [showClear]="true" />
            </div>
            <div class="filter-actions">
              <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-bar" (onClick)="loadTrialBalance()" [loading]="loadingTB()" />
            </div>
          </div>
        </div>

        @if (loadingTB()) {
          <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
        } @else if (trialBalanceRows().length > 0) {
          <div class="table-card">
            <p-table [value]="trialBalanceRows()" styleClass="p-datatable-sm" [paginator]="true" [rows]="50">
              <ng-template #header>
                <tr>
                  <th>{{ 'ACCOUNTS.CODE' | translate }}</th>
                  <th>{{ 'ACCOUNTS.NAME' | translate }}</th>
                  <th>{{ 'LEDGER.DEBIT' | translate }}</th>
                  <th>{{ 'LEDGER.CREDIT' | translate }}</th>
                  <th>{{ 'LEDGER.BALANCE' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template #body let-row>
                <tr>
                  <td class="mono">{{ row.account_code }}</td>
                  <td>{{ row.account_name }}</td>
                  <td class="amount">{{ row.total_debit | number:'1.2-2' }}</td>
                  <td class="amount">{{ row.total_credit | number:'1.2-2' }}</td>
                  <td class="amount"><strong>{{ row.balance | number:'1.2-2' }}</strong></td>
                </tr>
              </ng-template>
            </p-table>
            <div class="totals-bar">
              <span>{{ 'COMMON.TOTAL' | translate }}:</span>
              <span class="total-amount">{{ 'LEDGER.DEBIT' | translate }}: <strong>{{ tbTotalDebit | number:'1.2-2' }}</strong></span>
              <span class="total-amount">{{ 'LEDGER.CREDIT' | translate }}: <strong>{{ tbTotalCredit | number:'1.2-2' }}</strong></span>
            </div>
          </div>
        } @else if (tbSearched()) {
          <div class="empty-state"><i class="pi pi-inbox"></i><p>{{ 'COMMON.NO_DATA' | translate }}</p></div>
        } @else {
          <div class="empty-state"><i class="pi pi-chart-bar"></i><p>{{ 'LEDGER.SELECT_PARAMS_TB' | translate }}</p></div>
        }
      </p-tabpanel>

      <!-- Tab 3: Account Balances -->
      <p-tabpanel [value]="3">
        <div class="filter-card">
          <div class="filter-row">
            <div class="filter-field">
              <label>{{ 'REPORTS.AS_OF_DATE' | translate }}</label>
              <p-datepicker [(ngModel)]="balDate" dateFormat="yy-mm-dd" [showIcon]="true" [showClear]="true" />
            </div>
            <div class="filter-actions">
              <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-list" (onClick)="loadBalances()" [loading]="loadingBal()" />
            </div>
          </div>
        </div>

        @if (loadingBal()) {
          <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
        } @else if (balanceRows().length > 0) {
          <div class="table-card">
            <p-table [value]="balanceRows()" styleClass="p-datatable-sm" [paginator]="true" [rows]="50">
              <ng-template #header>
                <tr>
                  <th>{{ 'ACCOUNTS.CODE' | translate }}</th>
                  <th>{{ 'ACCOUNTS.NAME' | translate }}</th>
                  <th>{{ 'LEDGER.DEBIT' | translate }}</th>
                  <th>{{ 'LEDGER.CREDIT' | translate }}</th>
                  <th>{{ 'LEDGER.BALANCE' | translate }}</th>
                </tr>
              </ng-template>
              <ng-template #body let-row>
                <tr>
                  <td class="mono">{{ row.account_code }}</td>
                  <td>{{ row.account_name }}</td>
                  <td class="amount">{{ row.total_debit | number:'1.2-2' }}</td>
                  <td class="amount">{{ row.total_credit | number:'1.2-2' }}</td>
                  <td class="amount"><strong>{{ row.balance | number:'1.2-2' }}</strong></td>
                </tr>
              </ng-template>
            </p-table>
          </div>
        } @else if (balSearched()) {
          <div class="empty-state"><i class="pi pi-inbox"></i><p>{{ 'COMMON.NO_DATA' | translate }}</p></div>
        } @else {
          <div class="empty-state"><i class="pi pi-list"></i><p>{{ 'LEDGER.SELECT_PARAMS_BAL' | translate }}</p></div>
        }
      </p-tabpanel>
    </p-tabpanels>
  </p-tabs>
</div>
