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

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

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.name }}</td>
        <td>{{ item.fiscal_year?.name || item.fiscal_year?.name_en || '-' }}</td>
        <td>{{ item.budget_type_label }}</td>
        <td>{{ item.lines?.length || 0 }}</td>
        <td>
          <p-tag [value]="'BUDGETS.STATUS_' + item.status.toUpperCase() | translate"
                 [severity]="getStatusSeverity(item.status)" />
        </td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-eye" [rounded]="true" [text]="true" severity="info" (onClick)="view(item)" />
            @if (item.status === 'draft') {
              <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
              <p-button icon="pi pi-check" [rounded]="true" [text]="true" severity="success"
                        (onClick)="approve(item)" [pTooltip]="'BUDGETS.APPROVE' | translate" />
              <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
            }
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table
    [data]="(budgets$ | async) || []"
    [loading]="!!(loading$ | async)"
    [error]="(error$ | async) ?? null"
    [columns]="columns"
    (retry)="retry()"
    [bodyTpl]="bodyTpl"
  >
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editing() ? ('BUDGETS.EDIT' | translate) : ('BUDGETS.NEW' | translate)"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
  width="750px"
>
  <form [formGroup]="form" class="budget-form">
    <div class="form-grid">
      <div class="form-field">
        <label>{{ 'BUDGETS.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'BUDGETS.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
      <div class="form-field">
        <label>{{ 'BUDGETS.FISCAL_YEAR' | translate }} *</label>
        <p-select formControlName="fiscal_year_id" [options]="(fiscalYears$ | async) || []" optionLabel="name" optionValue="id"
                  [placeholder]="'COMMON.SELECT' | translate" [style]="{ width: '100%' }" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'BUDGETS.TYPE' | translate }}</label>
        <p-select formControlName="budget_type" [options]="budgetTypeOptions" optionLabel="label" optionValue="value"
                  [style]="{ width: '100%' }" />
      </div>
      <div class="form-field full-width">
        <label>{{ 'BUDGETS.NOTES' | translate }}</label>
        <input pInputText formControlName="notes" />
      </div>
    </div>

    <div class="lines-section">
      <div class="lines-header">
        <h3>{{ 'BUDGETS.BUDGET_LINES' | translate }}</h3>
        <p-button icon="pi pi-plus" [label]="'BUDGETS.ADD_LINE' | translate" severity="secondary" [outlined]="true" size="small" (onClick)="addLine()" />
      </div>
      <table class="lines-table" formArrayName="lines">
        <thead>
          <tr>
            <th>{{ 'BUDGETS.ACCOUNT' | translate }}</th>
            <th>{{ 'BUDGETS.ANNUAL_AMOUNT' | translate }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @for (line of lines.controls; track line; let i = $index) {
            <tr [formGroupName]="i">
              <td>
                <p-select formControlName="account_id" [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>
              </td>
              <td>
                <p-inputNumber formControlName="annual_amount" [min]="0" mode="decimal" [minFractionDigits]="2" [style]="{ width: '100%' }" />
              </td>
              <td>
                <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger" (onClick)="removeLine(i)" size="small" [disabled]="lines.length <= 1" />
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  </form>
</app-form-dialog>

<!-- View Dialog -->
<p-dialog [header]="'BUDGETS.VIEW' | translate" [(visible)]="viewDialogVisible" [modal]="true" [style]="{ width: '700px' }" [closable]="true">
  @if (viewing(); as budget) {
    <div class="view-info">
      <div class="info-row">
        <div class="info-item"><label>{{ 'BUDGETS.NAME' | translate }}</label><span>{{ budget.name }}</span></div>
        <div class="info-item"><label>{{ 'BUDGETS.FISCAL_YEAR' | translate }}</label><span>{{ budget.fiscal_year?.name || '-' }}</span></div>
        <div class="info-item"><label>{{ 'BUDGETS.TYPE' | translate }}</label><span>{{ budget.budget_type_label }}</span></div>
        <div class="info-item"><label>{{ 'COMMON.STATUS' | translate }}</label>
          <p-tag [value]="'BUDGETS.STATUS_' + budget.status.toUpperCase() | translate" [severity]="getStatusSeverity(budget.status)" />
        </div>
      </div>
    </div>
    <p-table [value]="budget.lines" styleClass="p-datatable-sm">
      <ng-template #header>
        <tr>
          <th>{{ 'BUDGETS.ACCOUNT' | translate }}</th>
          <th>{{ 'BUDGETS.ANNUAL_AMOUNT' | translate }}</th>
        </tr>
      </ng-template>
      <ng-template #body let-line>
        <tr>
          <td>
            @if (line.account) { <span class="mono">{{ line.account.code }}</span> - {{ line.account.name_ar || line.account.name }} }
            @else { {{ line.account_id }} }
          </td>
          <td class="amount">{{ line.annual_amount | number:'1.2-2' }}</td>
        </tr>
      </ng-template>
    </p-table>
  }
  <ng-template #footer>
    <p-button [label]="'COMMON.CLOSE' | translate" icon="pi pi-times" severity="secondary" (onClick)="viewDialogVisible.set(false)" />
  </ng-template>
</p-dialog>
