<p-toast />

<div class="reports-page">
  <div class="page-header">
    <div class="header-text">
      <h1>{{ 'REPORTS.TITLE' | translate }}</h1>
      <p>{{ 'REPORTS.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>

  <div class="reports-card">
    <p-tabs [value]="activeTab()" (valueChange)="onTabChange($event)">
      <p-tablist>
        <p-tab [value]="0">{{ 'REPORTS.BALANCE_SHEET' | translate }}</p-tab>
        <p-tab [value]="1">{{ 'REPORTS.INCOME_STATEMENT' | translate }}</p-tab>
        <p-tab [value]="2">{{ 'REPORTS.CASH_FLOW' | translate }}</p-tab>
        <p-tab [value]="3">{{ 'REPORTS.AGING' | translate }}</p-tab>
        <p-tab [value]="4">{{ 'REPORTS.PARTNER_STATEMENT' | translate }}</p-tab>
        <p-tab [value]="5">{{ 'REPORTS.COST_CENTER_REPORT' | translate }}</p-tab>
        <p-tab [value]="6">{{ 'REPORTS.BUDGET_VS_ACTUAL' | translate }}</p-tab>
        <p-tab [value]="7">{{ 'REPORTS.EXPENSE_REPORT' | translate }}</p-tab>
        <p-tab [value]="8">{{ 'REPORTS.REVENUE_REPORT' | translate }}</p-tab>
        <p-tab [value]="9">{{ 'REPORTS.PROFIT_ANALYSIS' | translate }}</p-tab>
        <p-tab [value]="10">{{ 'REPORTS.TAX_REPORT' | translate }}</p-tab>
        <p-tab [value]="11">{{ 'REPORTS.VOUCHER_REPORT' | translate }}</p-tab>
      </p-tablist>

      <p-tabpanels>
        <!-- ═══ Balance Sheet ═══ -->
        <p-tabpanel [value]="0">
          <div class="report-filters">
            <div class="filter-field">
              <label>{{ 'REPORTS.AS_OF_DATE' | translate }}</label>
              <p-datepicker [(ngModel)]="bsDate" dateFormat="yy-mm-dd" [showIcon]="true" />
            </div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-bar" (onClick)="loadBalanceSheet()" [loading]="loading()" />
          </div>
          @if (balanceSheet(); as bs) {
            <div class="report-content">
              <h3 class="report-title">{{ 'REPORTS.BALANCE_SHEET' | translate }} - {{ bs.as_of_date }}</h3>
              <div class="report-section">
                <h4 class="section-title assets">{{ 'ACCOUNTS.CLASS_ASSETS' | translate }}</h4>
                <table class="report-table">
                  @for (row of bs.assets; track row.account_id) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ row.balance | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'REPORTS.TOTAL_ASSETS' | translate }}</strong></td><td class="amount"><strong>{{ bs.total_assets | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
              <div class="report-section">
                <h4 class="section-title liabilities">{{ 'ACCOUNTS.CLASS_LIABILITIES' | translate }}</h4>
                <table class="report-table">
                  @for (row of bs.liabilities; track row.account_id) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ row.balance | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'REPORTS.TOTAL_LIABILITIES' | translate }}</strong></td><td class="amount"><strong>{{ bs.total_liabilities | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
              <div class="report-section">
                <h4 class="section-title equity">{{ 'ACCOUNTS.CLASS_EQUITY' | translate }}</h4>
                <table class="report-table">
                  @for (row of bs.equity; track row.account_id) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ row.balance | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'REPORTS.TOTAL_EQUITY' | translate }}</strong></td><td class="amount"><strong>{{ bs.total_equity | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
            </div>
          } @else if (!loading()) {
            <div class="empty-report"><i class="pi pi-chart-bar"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Income Statement ═══ -->
        <p-tabpanel [value]="1">
          <div class="report-filters">
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="isStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="isEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-bar" (onClick)="loadIncomeStatement()" [loading]="loading()" />
          </div>
          @if (incomeStatement(); as is) {
            <div class="report-content">
              <h3 class="report-title">{{ 'REPORTS.INCOME_STATEMENT' | translate }} ({{ is.period?.start_date || is.start_date }} - {{ is.period?.end_date || is.end_date }})</h3>
              <div class="report-section">
                <h4 class="section-title revenue">{{ 'ACCOUNTS.CLASS_REVENUE' | translate }}</h4>
                <table class="report-table">
                  @for (row of is.revenues; track row.account_id) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ row.balance | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'REPORTS.TOTAL_REVENUE' | translate }}</strong></td><td class="amount"><strong>{{ is.total_revenue | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
              <div class="report-section">
                <h4 class="section-title expenses">{{ 'ACCOUNTS.CLASS_EXPENSES' | translate }}</h4>
                <table class="report-table">
                  @for (row of is.expenses; track row.account_id) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ row.balance | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'REPORTS.TOTAL_EXPENSES' | translate }}</strong></td><td class="amount"><strong>{{ is.total_expenses | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
              <div class="net-income-section" [class.positive]="is.net_income >= 0" [class.negative]="is.net_income < 0">
                <span>{{ 'REPORTS.NET_INCOME' | translate }}</span><strong>{{ is.net_income | number:'1.2-2' }}</strong>
              </div>
            </div>
          } @else if (!loading()) {
            <div class="empty-report"><i class="pi pi-chart-line"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Cash Flow ═══ -->
        <p-tabpanel [value]="2">
          <div class="report-filters">
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="cfStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="cfEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-bar" (onClick)="loadCashFlow()" [loading]="loading()" />
          </div>
          @if (cashFlow(); as cf) {
            <div class="report-content">
              <h3 class="report-title">{{ 'REPORTS.CASH_FLOW' | translate }} ({{ cf.period?.start_date || cf.start_date }} - {{ cf.period?.end_date || cf.end_date }})</h3>
              <!-- Operating Activities -->
              <div class="report-section">
                <h4 class="section-title revenue">{{ 'REPORTS.OPERATING' | translate }}</h4>
                <table class="report-table">
                  @for (row of cf.operating_activities?.items || cf.operating || []; track row.account_id || row.code) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ (row.amount ?? row.balance) | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'COMMON.TOTAL' | translate }}</strong></td><td class="amount"><strong>{{ (cf.operating_activities?.total ?? cf.total_operating ?? 0) | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
              <!-- Investing Activities -->
              <div class="report-section">
                <h4 class="section-title assets">{{ 'REPORTS.INVESTING' | translate }}</h4>
                <table class="report-table">
                  @for (row of cf.investing_activities?.items || cf.investing || []; track row.account_id || row.code) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ (row.amount ?? row.balance) | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'COMMON.TOTAL' | translate }}</strong></td><td class="amount"><strong>{{ (cf.investing_activities?.total ?? cf.total_investing ?? 0) | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
              <!-- Financing Activities -->
              <div class="report-section">
                <h4 class="section-title liabilities">{{ 'REPORTS.FINANCING' | translate }}</h4>
                <table class="report-table">
                  @for (row of cf.financing_activities?.items || cf.financing || []; track row.account_id || row.code) {
                    <tr>
                      <td class="account-code">{{ row.code || row.account_code }}</td>
                      <td class="account-name">{{ row.name_ar || row.name || row.account_name }}</td>
                      <td class="amount">{{ (row.amount ?? row.balance) | number:'1.2-2' }}</td>
                    </tr>
                  }
                  <tr class="total-row"><td colspan="2"><strong>{{ 'COMMON.TOTAL' | translate }}</strong></td><td class="amount"><strong>{{ (cf.financing_activities?.total ?? cf.total_financing ?? 0) | number:'1.2-2' }}</strong></td></tr>
                </table>
              </div>
              <div class="net-income-section" [class.positive]="(cf.net_cash_change ?? cf.net_cash_flow ?? 0) >= 0" [class.negative]="(cf.net_cash_change ?? cf.net_cash_flow ?? 0) < 0">
                <span>{{ 'REPORTS.NET_CASH_FLOW' | translate }}</span><strong>{{ (cf.net_cash_change ?? cf.net_cash_flow ?? 0) | number:'1.2-2' }}</strong>
              </div>
              @if (cf.opening_cash != null) {
                <div class="cash-summary">
                  <div class="cash-item"><span>{{ 'REPORTS.OPENING_CASH' | translate }}</span><strong>{{ cf.opening_cash | number:'1.2-2' }}</strong></div>
                  <div class="cash-item"><span>{{ 'REPORTS.CLOSING_CASH' | translate }}</span><strong>{{ cf.closing_cash | number:'1.2-2' }}</strong></div>
                </div>
              }
            </div>
          } @else if (!loading()) {
            <div class="empty-report"><i class="pi pi-chart-pie"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Aging Report ═══ -->
        <p-tabpanel [value]="3">
          <div class="report-filters">
            <div class="filter-field">
              <label>{{ 'REPORTS.AS_OF_DATE' | translate }}</label>
              <p-datepicker [(ngModel)]="agingDate" dateFormat="yy-mm-dd" [showIcon]="true" />
            </div>
            <div class="filter-field">
              <label>{{ 'REPORTS.TYPE' | translate }}</label>
              <p-select [(ngModel)]="agingType" [options]="agingTypeOptions" optionLabel="label" optionValue="value" />
            </div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-clock" (onClick)="loadAging()" [loading]="loadingAging()" />
          </div>
          @if (loadingAging()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (agingData()) {
            <!-- Summary cards -->
            @if (agingData().summary) {
              <div class="aging-summary">
                <div class="aging-card"><span>{{ 'REPORTS.CURRENT' | translate }}</span><strong>{{ agingData().summary.current | number:'1.2-2' }}</strong></div>
                <div class="aging-card"><span>1-30</span><strong>{{ agingData().summary.bucket_30 | number:'1.2-2' }}</strong></div>
                <div class="aging-card"><span>31-60</span><strong>{{ agingData().summary.bucket_60 | number:'1.2-2' }}</strong></div>
                <div class="aging-card"><span>61-90</span><strong>{{ agingData().summary.bucket_90 | number:'1.2-2' }}</strong></div>
                <div class="aging-card"><span>90+</span><strong>{{ agingData().summary.bucket_120_plus | number:'1.2-2' }}</strong></div>
                <div class="aging-card total"><span>{{ 'COMMON.TOTAL' | translate }}</span><strong>{{ agingData().summary.total | number:'1.2-2' }}</strong></div>
              </div>
            }
            <div class="table-card">
              <p-table [value]="agingData().partners || []" styleClass="p-datatable-sm" [paginator]="true" [rows]="25">
                <ng-template #header>
                  <tr>
                    <th>{{ 'AR_AP.PARTNER' | translate }}</th>
                    <th>{{ 'REPORTS.CURRENT' | translate }}</th>
                    <th>1-30</th>
                    <th>31-60</th>
                    <th>61-90</th>
                    <th>90+</th>
                    <th>{{ 'COMMON.TOTAL' | translate }}</th>
                  </tr>
                </ng-template>
                <ng-template #body let-row>
                  <tr>
                    <td>{{ row.partner_name || row.name || '-' }}</td>
                    <td class="amount">{{ (row.current || 0) | number:'1.2-2' }}</td>
                    <td class="amount">{{ (row.bucket_30 || row.days_1_30 || 0) | number:'1.2-2' }}</td>
                    <td class="amount">{{ (row.bucket_60 || row.days_31_60 || 0) | number:'1.2-2' }}</td>
                    <td class="amount">{{ (row.bucket_90 || row.days_61_90 || 0) | number:'1.2-2' }}</td>
                    <td class="amount">{{ (row.bucket_120_plus || row.days_over_90 || 0) | number:'1.2-2' }}</td>
                    <td class="amount"><strong>{{ (row.total || 0) | number:'1.2-2' }}</strong></td>
                  </tr>
                </ng-template>
                <ng-template #emptymessage>
                  <tr><td colspan="7" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                </ng-template>
              </p-table>
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-clock"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Partner Statement ═══ -->
        <p-tabpanel [value]="4">
          <div class="report-filters">
            <div class="filter-field">
              <label>{{ 'AR_AP.PARTNER' | translate }} *</label>
              <p-select [(ngModel)]="psPartnerId" [options]="(partners$ | async) || []" optionLabel="name" optionValue="id"
                [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
            </div>
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="psStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="psEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-users" (onClick)="loadPartnerStatement()" [loading]="loadingPS()" />
          </div>
          @if (loadingPS()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (partnerStatement(); as ps) {
            <div class="report-content">
              @if (ps.partner) {
                <h3 class="report-title">{{ ps.partner.name }} ({{ ps.partner.code }})</h3>
              }
              @if (ps.opening_balance != null) {
                <div class="opening-balance-bar"><span>{{ 'REPORTS.OPENING_BALANCE' | translate }}</span><strong>{{ ps.opening_balance | number:'1.2-2' }}</strong></div>
              }
              <div class="table-card">
                <p-table [value]="ps.transactions || ps.entries || ps.lines || []" styleClass="p-datatable-sm" [paginator]="true" [rows]="25">
                  <ng-template #header>
                    <tr>
                      <th>{{ 'AR_AP.DATE' | translate }}</th>
                      <th>{{ 'JOURNAL_ENTRIES.ENTRY_NUMBER' | 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-row>
                    <tr>
                      <td class="mono">{{ row.date }}</td>
                      <td class="mono">
                        @if (row.entry_number) {
                          <a class="entry-link" (click)="goToJournalEntries()" [pTooltip]="'JOURNAL_ENTRIES.VIEW' | translate" tooltipPosition="top">{{ row.entry_number }}</a>
                        } @else { - }
                      </td>
                      <td>{{ row.description_ar || row.description || '-' }}</td>
                      <td class="amount">{{ (row.debit || 0) | number:'1.2-2' }}</td>
                      <td class="amount">{{ (row.credit || 0) | number:'1.2-2' }}</td>
                      <td class="amount"><strong>{{ (row.balance || 0) | 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>
              @if (ps.closing_balance != null) {
                <div class="net-income-section" [class.positive]="ps.closing_balance >= 0" [class.negative]="ps.closing_balance < 0">
                  <span>{{ 'REPORTS.CLOSING_BALANCE' | translate }}</span><strong>{{ ps.closing_balance | number:'1.2-2' }}</strong>
                </div>
              }
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-users"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Cost Center Report ═══ -->
        <p-tabpanel [value]="5">
          <div class="report-filters">
            <div class="filter-field">
              <label>{{ 'REPORTS.COST_CENTER' | translate }} *</label>
              <p-select [(ngModel)]="ccCostCenterId" [options]="(costCenters$ | async) || []" optionLabel="name" optionValue="id"
                [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
            </div>
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="ccStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="ccEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-sitemap" (onClick)="loadCostCenterReport()" [loading]="loadingCC()" />
          </div>
          @if (loadingCC()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (costCenterReport(); as cc) {
            <div class="report-content">
              <!-- Summary -->
              <div class="profit-summary" style="margin-bottom:1rem">
                <div class="profit-card"><span>{{ 'AR_AP.DEBIT' | translate }}</span><strong>{{ (cc.total_debit || 0) | number:'1.2-2' }}</strong></div>
                <div class="profit-card"><span>{{ 'AR_AP.CREDIT' | translate }}</span><strong>{{ (cc.total_credit || 0) | number:'1.2-2' }}</strong></div>
                <div class="profit-card" [class.positive]="(cc.net || 0) >= 0" [class.negative]="(cc.net || 0) < 0"><span>{{ 'REPORTS.NET' | translate }}</span><strong>{{ (cc.net || 0) | number:'1.2-2' }}</strong></div>
              </div>
              <div class="table-card">
                <p-table [value]="cc.transactions || cc.accounts || cc.entries || []" styleClass="p-datatable-sm" [paginator]="true" [rows]="25">
                  <ng-template #header>
                    <tr>
                      <th>{{ 'AR_AP.DATE' | translate }}</th>
                      <th>{{ 'JOURNAL_ENTRIES.ENTRY_NUMBER' | translate }}</th>
                      <th>{{ 'ACCOUNTS.NAME' | translate }}</th>
                      <th>{{ 'LEDGER.DEBIT' | translate }}</th>
                      <th>{{ 'LEDGER.CREDIT' | translate }}</th>
                    </tr>
                  </ng-template>
                  <ng-template #body let-row>
                    <tr>
                      <td class="mono">{{ row.date || '-' }}</td>
                      <td class="mono">
                        @if (row.entry_number) {
                          <a class="entry-link" (click)="goToJournalEntries()" [pTooltip]="'JOURNAL_ENTRIES.VIEW' | translate" tooltipPosition="top">{{ row.entry_number }}</a>
                        } @else { - }
                      </td>
                      <td>{{ row.account_name_ar || row.account_name || row.name || '-' }}</td>
                      <td class="amount">{{ (row.debit || 0) | number:'1.2-2' }}</td>
                      <td class="amount">{{ (row.credit || 0) | number:'1.2-2' }}</td>
                    </tr>
                  </ng-template>
                  <ng-template #emptymessage>
                    <tr><td colspan="5" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                  </ng-template>
                </p-table>
              </div>
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-sitemap"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Budget vs Actual ═══ -->
        <p-tabpanel [value]="6">
          <div class="report-filters">
            <div class="filter-field">
              <label>{{ 'REPORTS.BUDGET' | translate }} *</label>
              <p-select [(ngModel)]="bvaBudgetId" [options]="(budgets$ | async) || []" optionLabel="name" optionValue="id"
                [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
            </div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-bar" (onClick)="loadBudgetVsActual()" [loading]="loadingBVA()" />
          </div>
          @if (loadingBVA()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (budgetVsActual()) {
            <div class="table-card">
              <p-table [value]="budgetVsActual().lines || budgetVsActual().accounts || budgetVsActual()" styleClass="p-datatable-sm" [paginator]="true" [rows]="25">
                <ng-template #header>
                  <tr>
                    <th>{{ 'ACCOUNTS.CODE' | translate }}</th>
                    <th>{{ 'ACCOUNTS.NAME' | translate }}</th>
                    <th>{{ 'REPORTS.BUDGETED' | translate }}</th>
                    <th>{{ 'REPORTS.ACTUAL' | translate }}</th>
                    <th>{{ 'REPORTS.VARIANCE' | translate }}</th>
                    <th>{{ 'REPORTS.VARIANCE_PCT' | translate }}</th>
                  </tr>
                </ng-template>
                <ng-template #body let-row>
                  <tr>
                    <td class="mono">{{ row.account_code || row.code || '-' }}</td>
                    <td>{{ row.account_name_ar || row.account_name || row.name || '-' }}</td>
                    <td class="amount">{{ (row.budgeted || row.budget_amount || 0) | number:'1.2-2' }}</td>
                    <td class="amount">{{ (row.actual || row.actual_amount || 0) | number:'1.2-2' }}</td>
                    <td class="amount" [class.positive-var]="(row.variance || 0) >= 0" [class.negative-var]="(row.variance || 0) < 0">
                      {{ (row.variance || 0) | number:'1.2-2' }}
                    </td>
                    <td class="amount">{{ (row.variance_percentage || row.variance_pct || 0) | number:'1.1-1' }}%</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>
          } @else {
            <div class="empty-report"><i class="pi pi-chart-bar"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Expense Report ═══ -->
        <p-tabpanel [value]="7">
          <div class="report-filters">
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="expStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="expEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-bar" (onClick)="loadExpenseReport()" [loading]="loadingExp()" />
          </div>
          @if (loadingExp()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (expenseReport(); as er) {
            <div class="report-content">
              <div class="net-income-section negative" style="margin-bottom:1rem"><span>{{ 'REPORTS.TOTAL_EXPENSES' | translate }}</span><strong>{{ (er.grand_total || er.total || 0) | number:'1.2-2' }}</strong></div>
              <div class="table-card">
                <p-table [value]="er.by_category || er.items || er.expenses || []" styleClass="p-datatable-sm">
                  <ng-template #header>
                    <tr>
                      <th>{{ 'EXPENSES.CATEGORY' | translate }}</th>
                      <th>{{ 'COMMON.COUNT' | translate }}</th>
                      <th>{{ 'EXPENSES.AMOUNT' | translate }}</th>
                      <th>%</th>
                    </tr>
                  </ng-template>
                  <ng-template #body let-row>
                    <tr>
                      <td>{{ row.category_name || row.name || '-' }}</td>
                      <td class="mono">{{ row.count || '-' }}</td>
                      <td class="amount">{{ (row.total || row.amount || 0) | number:'1.2-2' }}</td>
                      <td class="amount">{{ (row.percentage || 0) | number:'1.1-1' }}%</td>
                    </tr>
                  </ng-template>
                  <ng-template #emptymessage>
                    <tr><td colspan="4" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                  </ng-template>
                </p-table>
              </div>
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-minus-circle"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Revenue Report ═══ -->
        <p-tabpanel [value]="8">
          <div class="report-filters">
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="revStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="revEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-bar" (onClick)="loadRevenueReport()" [loading]="loadingRev()" />
          </div>
          @if (loadingRev()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (revenueReport(); as rr) {
            <div class="report-content">
              <div class="net-income-section positive" style="margin-bottom:1rem"><span>{{ 'REPORTS.TOTAL_REVENUE' | translate }}</span><strong>{{ (rr.grand_total || rr.total || 0) | number:'1.2-2' }}</strong></div>
              <div class="table-card">
                <p-table [value]="rr.by_category || rr.items || rr.revenues || []" styleClass="p-datatable-sm">
                  <ng-template #header>
                    <tr>
                      <th>{{ 'REVENUES.CATEGORY' | translate }}</th>
                      <th>{{ 'COMMON.COUNT' | translate }}</th>
                      <th>{{ 'REVENUES.AMOUNT' | translate }}</th>
                      <th>%</th>
                    </tr>
                  </ng-template>
                  <ng-template #body let-row>
                    <tr>
                      <td>{{ row.category_name || row.name || '-' }}</td>
                      <td class="mono">{{ row.count || '-' }}</td>
                      <td class="amount">{{ (row.total || row.amount || 0) | number:'1.2-2' }}</td>
                      <td class="amount">{{ (row.percentage || 0) | number:'1.1-1' }}%</td>
                    </tr>
                  </ng-template>
                  <ng-template #emptymessage>
                    <tr><td colspan="4" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                  </ng-template>
                </p-table>
              </div>
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-plus-circle"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Profit Analysis ═══ -->
        <p-tabpanel [value]="9">
          <div class="report-filters">
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="profitStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="profitEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-chart-line" (onClick)="loadProfitAnalysis()" [loading]="loadingProfit()" />
          </div>
          @if (loadingProfit()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (profitAnalysis(); as pa) {
            <div class="report-content">
              <h3 class="report-title">{{ 'REPORTS.PROFIT_ANALYSIS' | translate }}</h3>
              <div class="profit-summary">
                <div class="profit-card positive"><span>{{ 'REPORTS.TOTAL_REVENUE' | translate }}</span><strong>{{ (pa.summary?.total_revenue || pa.total_revenues || pa.total_revenue || 0) | number:'1.2-2' }}</strong></div>
                <div class="profit-card negative"><span>{{ 'REPORTS.TOTAL_EXPENSES' | translate }}</span><strong>{{ (pa.summary?.total_expenses || pa.total_expenses || 0) | number:'1.2-2' }}</strong></div>
                <div class="profit-card" [class.positive]="(pa.summary?.net_profit || pa.net_profit || 0) >= 0" [class.negative]="(pa.summary?.net_profit || pa.net_profit || 0) < 0">
                  <span>{{ 'REPORTS.NET_PROFIT' | translate }}</span><strong>{{ (pa.summary?.net_profit || pa.net_profit || pa.net_income || 0) | number:'1.2-2' }}</strong>
                </div>
                @if (pa.summary?.profit_margin_percentage != null) {
                  <div class="profit-card"><span>{{ 'REPORTS.PROFIT_MARGIN' | translate }}</span><strong>{{ pa.summary.profit_margin_percentage | number:'1.1-1' }}%</strong></div>
                }
              </div>
              <!-- Period breakdown -->
              @if (pa.breakdown?.length) {
                <div class="table-card" style="margin-top:1rem">
                  <p-table [value]="pa.breakdown" styleClass="p-datatable-sm">
                    <ng-template #header>
                      <tr>
                        <th>{{ 'REPORTS.PERIOD' | translate }}</th>
                        <th>{{ 'REPORTS.TOTAL_REVENUE' | translate }}</th>
                        <th>{{ 'REPORTS.TOTAL_EXPENSES' | translate }}</th>
                        <th>{{ 'REPORTS.NET_PROFIT' | translate }}</th>
                        <th>{{ 'REPORTS.PROFIT_MARGIN' | translate }}</th>
                      </tr>
                    </ng-template>
                    <ng-template #body let-row>
                      <tr>
                        <td class="mono">{{ row.period }}</td>
                        <td class="amount">{{ (row.revenue || 0) | number:'1.2-2' }}</td>
                        <td class="amount">{{ (row.expenses || 0) | number:'1.2-2' }}</td>
                        <td class="amount" [class.positive-var]="(row.net_profit || 0) >= 0" [class.negative-var]="(row.net_profit || 0) < 0">{{ (row.net_profit || 0) | number:'1.2-2' }}</td>
                        <td class="amount">{{ (row.margin || 0) | number:'1.1-1' }}%</td>
                      </tr>
                    </ng-template>
                  </p-table>
                </div>
              }
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-chart-line"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Tax Report ═══ -->
        <p-tabpanel [value]="10">
          <div class="report-filters">
            <div class="filter-field">
              <label>{{ 'REPORTS.TYPE' | translate }}</label>
              <p-select [(ngModel)]="taxView" [options]="[{label: ('REPORTS.TAX_SUMMARY' | translate), value: 'summary'}, {label: ('REPORTS.TAX_DETAILS' | translate), value: 'details'}]" optionLabel="label" optionValue="value" />
            </div>
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="taxStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="taxEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-percentage" (onClick)="loadTaxReport()" [loading]="loadingTax()" />
          </div>
          @if (loadingTax()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (taxView === 'summary' && taxSummary(); as ts) {
            <div class="report-content">
              <!-- Tax totals -->
              <div class="profit-summary" style="margin-bottom:1rem">
                <div class="profit-card"><span>{{ 'REPORTS.TAX_COLLECTED' | translate }}</span><strong>{{ (ts.tax_collected || 0) | number:'1.2-2' }}</strong></div>
                <div class="profit-card"><span>{{ 'REPORTS.TAX_PAID' | translate }}</span><strong>{{ (ts.tax_paid || 0) | number:'1.2-2' }}</strong></div>
                <div class="profit-card" [class.positive]="(ts.net_tax_due || 0) >= 0" [class.negative]="(ts.net_tax_due || 0) < 0">
                  <span>{{ 'REPORTS.NET_TAX_DUE' | translate }}</span><strong>{{ (ts.net_tax_due || 0) | number:'1.2-2' }}</strong>
                </div>
              </div>
              <div class="table-card">
                <p-table [value]="ts.by_tax_rate || ts.items || ts.taxes || []" styleClass="p-datatable-sm">
                  <ng-template #header>
                    <tr>
                      <th>{{ 'TAX_RATES.NAME' | translate }}</th>
                      <th>{{ 'TAX_RATES.RATE' | translate }}</th>
                      <th>{{ 'REPORTS.TAX_COLLECTED' | translate }}</th>
                      <th>{{ 'REPORTS.TAX_PAID' | translate }}</th>
                      <th>{{ 'REPORTS.NET' | translate }}</th>
                    </tr>
                  </ng-template>
                  <ng-template #body let-row>
                    <tr>
                      <td>{{ row.name || row.tax_name || '-' }}</td>
                      <td>{{ (row.rate || 0) }}%</td>
                      <td class="amount">{{ (row.collected || 0) | number:'1.2-2' }}</td>
                      <td class="amount">{{ (row.paid || 0) | number:'1.2-2' }}</td>
                      <td class="amount" [class.positive-var]="(row.net || 0) >= 0" [class.negative-var]="(row.net || 0) < 0">{{ (row.net || 0) | number:'1.2-2' }}</td>
                    </tr>
                  </ng-template>
                  <ng-template #emptymessage>
                    <tr><td colspan="5" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                  </ng-template>
                </p-table>
              </div>
            </div>
          } @else if (taxView === 'details' && taxDetails(); as td) {
            <div class="table-card">
              <p-table [value]="td" styleClass="p-datatable-sm" [paginator]="true" [rows]="25">
                <ng-template #header>
                  <tr>
                    <th>{{ 'EXPENSES.DATE' | translate }}</th>
                    <th>{{ 'REPORTS.TYPE' | translate }}</th>
                    <th>#</th>
                    <th>{{ 'EXPENSES.CATEGORY' | translate }}</th>
                    <th>{{ 'REPORTS.TAXABLE_AMOUNT' | translate }}</th>
                    <th>{{ 'TAX_RATES.NAME' | translate }}</th>
                    <th>{{ 'REPORTS.TAX_AMOUNT' | translate }}</th>
                    <th>{{ 'COMMON.TOTAL' | translate }}</th>
                  </tr>
                </ng-template>
                <ng-template #body let-row>
                  <tr>
                    <td class="mono">{{ row.date }}</td>
                    <td>{{ row.type || '-' }}</td>
                    <td class="mono">{{ row.document_number || '-' }}</td>
                    <td>{{ row.category || '-' }}</td>
                    <td class="amount">{{ (row.amount || 0) | number:'1.2-2' }}</td>
                    <td>{{ row.tax_rate }} ({{ row.tax_rate_value }}%)</td>
                    <td class="amount">{{ (row.tax_amount || 0) | number:'1.2-2' }}</td>
                    <td class="amount"><strong>{{ (row.total_amount || 0) | number:'1.2-2' }}</strong></td>
                  </tr>
                </ng-template>
                <ng-template #emptymessage>
                  <tr><td colspan="8" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
                </ng-template>
              </p-table>
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-percentage"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>

        <!-- ═══ Voucher Report ═══ -->
        <p-tabpanel [value]="11">
          <div class="report-filters">
            <div class="filter-field">
              <label>{{ 'REPORTS.TYPE' | translate }}</label>
              <p-select [(ngModel)]="vrType" [options]="[{label: ('VOUCHERS.RECEIPT_VOUCHER' | translate), value: 'receipts'}, {label: ('VOUCHERS.PAYMENT_VOUCHER' | translate), value: 'payments'}, {label: ('REPORTS.CASH_FLOW' | translate), value: 'cash-flow'}]" optionLabel="label" optionValue="value" />
            </div>
            <div class="filter-field"><label>{{ 'REPORTS.START_DATE' | translate }}</label><p-datepicker [(ngModel)]="vrStartDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <div class="filter-field"><label>{{ 'REPORTS.END_DATE' | translate }}</label><p-datepicker [(ngModel)]="vrEndDate" dateFormat="yy-mm-dd" [showIcon]="true" /></div>
            <p-button [label]="'REPORTS.GENERATE' | translate" icon="pi pi-file-check" (onClick)="loadVoucherReport()" [loading]="loadingVR()" />
          </div>
          @if (loadingVR()) {
            <div class="loading-state"><p-progressSpinner strokeWidth="3" /></div>
          } @else if (voucherReport(); as vr) {
            <div class="report-content">
              <!-- Summary for receipts/payments -->
              @if (vrType !== 'cash-flow') {
                <div class="profit-summary" style="margin-bottom:1rem">
                  <div class="profit-card"><span>{{ 'COMMON.COUNT' | translate }}</span><strong>{{ vr.vouchers_count || 0 }}</strong></div>
                  <div class="profit-card" [class.positive]="vrType === 'receipts'" [class.negative]="vrType === 'payments'"><span>{{ 'COMMON.TOTAL' | translate }}</span><strong>{{ (vr.total_amount || 0) | number:'1.2-2' }}</strong></div>
                </div>
                <!-- By payment method -->
                @if (vr.by_payment_method?.length) {
                  <div class="table-card" style="margin-bottom:1rem">
                    <p-table [value]="vr.by_payment_method" styleClass="p-datatable-sm">
                      <ng-template #header><tr><th>{{ 'VOUCHERS.PAYMENT_METHOD' | translate }}</th><th>{{ 'COMMON.COUNT' | translate }}</th><th>{{ 'COMMON.TOTAL' | translate }}</th></tr></ng-template>
                      <ng-template #body let-row><tr><td>{{ row.payment_method_label || row.payment_method }}</td><td class="mono">{{ row.count }}</td><td class="amount">{{ row.total | number:'1.2-2' }}</td></tr></ng-template>
                    </p-table>
                  </div>
                }
                <!-- Voucher list -->
                <div class="table-card">
                  <p-table [value]="vr.vouchers || []" styleClass="p-datatable-sm" [paginator]="true" [rows]="25">
                    <ng-template #header>
                      <tr>
                        <th>{{ 'VOUCHERS.NUMBER' | translate }}</th>
                        <th>{{ 'VOUCHERS.DATE' | translate }}</th>
                        <th>{{ 'VOUCHERS.PARTNER' | translate }}</th>
                        <th>{{ 'VOUCHERS.AMOUNT' | translate }}</th>
                        <th>{{ 'VOUCHERS.PAYMENT_METHOD' | translate }}</th>
                        <th>{{ 'COMMON.STATUS' | translate }}</th>
                      </tr>
                    </ng-template>
                    <ng-template #body let-row>
                      <tr>
                        <td class="mono">{{ row.voucher_number || '-' }}</td>
                        <td class="mono">{{ row.date }}</td>
                        <td>{{ row.partner_name || '-' }}</td>
                        <td class="amount">{{ (row.total_amount || 0) | number:'1.2-2' }}</td>
                        <td>{{ row.payment_method_label || row.payment_method || '-' }}</td>
                        <td>{{ row.status || '-' }}</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>
              } @else {
                <!-- Voucher Cash Flow summary -->
                <div class="profit-summary" style="margin-bottom:1rem">
                  <div class="profit-card positive"><span>{{ 'REPORTS.TOTAL_RECEIVED' | translate }}</span><strong>{{ (vr.total_received || 0) | number:'1.2-2' }}</strong></div>
                  <div class="profit-card negative"><span>{{ 'REPORTS.TOTAL_PAID' | translate }}</span><strong>{{ (vr.total_paid || 0) | number:'1.2-2' }}</strong></div>
                  <div class="profit-card" [class.positive]="(vr.net_cash_flow || 0) >= 0" [class.negative]="(vr.net_cash_flow || 0) < 0">
                    <span>{{ 'REPORTS.NET_CASH_FLOW' | translate }}</span><strong>{{ (vr.net_cash_flow || 0) | number:'1.2-2' }}</strong>
                  </div>
                </div>
                @if (vr.periods?.length) {
                  <div class="table-card">
                    <p-table [value]="vr.periods" styleClass="p-datatable-sm">
                      <ng-template #header><tr><th>{{ 'REPORTS.PERIOD' | translate }}</th><th>{{ 'REPORTS.TOTAL_RECEIVED' | translate }}</th><th>{{ 'REPORTS.TOTAL_PAID' | translate }}</th><th>{{ 'REPORTS.NET' | translate }}</th></tr></ng-template>
                      <ng-template #body let-row>
                        <tr>
                          <td class="mono">{{ row.period }}</td>
                          <td class="amount">{{ (row.received || 0) | number:'1.2-2' }}</td>
                          <td class="amount">{{ (row.paid || 0) | number:'1.2-2' }}</td>
                          <td class="amount" [class.positive-var]="(row.net || 0) >= 0" [class.negative-var]="(row.net || 0) < 0">{{ (row.net || 0) | number:'1.2-2' }}</td>
                        </tr>
                      </ng-template>
                    </p-table>
                  </div>
                }
              }
            </div>
          } @else {
            <div class="empty-report"><i class="pi pi-file-check"></i><p>{{ 'REPORTS.SELECT_PARAMS' | translate }}</p></div>
          }
        </p-tabpanel>
      </p-tabpanels>
    </p-tabs>
  </div>
</div>
