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

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

  <ng-template #bodyTpl let-fy>
      <tr>
        <td>{{ fy.name_ar || fy.name }}</td>
        <td>{{ fy.start_date }}</td>
        <td>{{ fy.end_date }}</td>
        <td>
          <p-button
            [label]="'FISCAL_YEARS.VIEW_PERIODS' | translate"
            [rounded]="true"
            [text]="true"
            severity="info"
            icon="pi pi-calendar"
            size="small"
            (onClick)="viewPeriods(fy)"
          />
        </td>
        <td>
          <p-tag
            [value]="fy.status || 'open'"
            [severity]="fy.status === 'closed' ? 'success' : 'info'"
          />
        </td>
        <td>
          <div class="action-buttons">
            <p-button
              icon="pi pi-pencil"
              [rounded]="true"
              [text]="true"
              severity="info"
              (onClick)="editFiscalYear(fy)"
            />
            <p-button
              icon="pi pi-trash"
              [rounded]="true"
              [text]="true"
              severity="danger"
              (onClick)="deleteFiscalYear(fy)"
            />
          </div>
        </td>
      </tr>
    </ng-template>
  <app-data-table
    [data]="(fiscalYears$ | async) || []"
    [loading]="!!(loading$ | async)"
    [error]="(error$ | async) ?? null"
    [rows]="10"
    (retry)="retry()"
    [columns]="columns"
    [bodyTpl]="bodyTpl"
  >
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editingFiscalYear() ? ('FISCAL_YEARS.EDIT_FISCAL_YEAR' | translate) : ('FISCAL_YEARS.NEW_FISCAL_YEAR' | translate)"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
  width="500px"
>
  <form [formGroup]="fiscalYearForm" class="dialog-form">
    <div class="form-field">
      <label>{{ 'FISCAL_YEARS.NAME' | translate }} *</label>
      <input pInputText formControlName="name_ar" [placeholder]="'FISCAL_YEARS.NAME_PLACEHOLDER' | translate" />
      @if (fiscalYearForm.get('name_ar')?.touched && fiscalYearForm.get('name_ar')?.hasError('required')) {
        <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
      }
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'FISCAL_YEARS.START_DATE' | translate }} *</label>
        <p-datepicker formControlName="start_date" dateFormat="yy-mm-dd" [showIcon]="true" appendTo="body" />
        @if (fiscalYearForm.get('start_date')?.touched && fiscalYearForm.get('start_date')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'FISCAL_YEARS.END_DATE' | translate }} *</label>
        <p-datepicker formControlName="end_date" dateFormat="yy-mm-dd" [showIcon]="true" appendTo="body" />
        @if (fiscalYearForm.get('end_date')?.touched && fiscalYearForm.get('end_date')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'COMMON.STATUS' | translate }}</label>
      <p-select formControlName="status" [options]="statusOptions" optionLabel="label" optionValue="value" />
    </div>
  </form>
</app-form-dialog>

<!-- Periods View Dialog -->
<p-dialog
  [header]="'FISCAL_YEARS.PERIODS' | translate"
  [(visible)]="periodsDialogVisible"
  [modal]="true"
  [style]="{ width: '700px' }"
  [closable]="true"
>
  @if (loadingPeriods()) {
    <div class="flex justify-center py-6">
      <p-progressSpinner strokeWidth="3" />
    </div>
  } @else if (viewingPeriods()?.periods?.length) {
    <p-table [value]="viewingPeriods()!.periods!" styleClass="p-datatable-sm">
      <ng-template #header>
        <tr>
          <th>#</th>
          <th>{{ 'FISCAL_YEARS.PERIOD_NAME' | translate }}</th>
          <th>{{ 'FISCAL_YEARS.START_DATE' | translate }}</th>
          <th>{{ 'FISCAL_YEARS.END_DATE' | translate }}</th>
          <th>{{ 'COMMON.STATUS' | translate }}</th>
          <th></th>
        </tr>
      </ng-template>
      <ng-template #body let-period>
        <tr>
          <td>{{ period.period_number }}</td>
          <td>
            {{ period.name }}
            @if (period.is_closing) {
              <p-tag value="Closing" severity="warn" styleClass="ms-1" />
            }
          </td>
          <td>{{ period.start_date }}</td>
          <td>{{ period.end_date }}</td>
          <td>
            <p-tag
              [value]="period.status || 'open'"
              [severity]="period.status === 'closed' ? 'success' : 'info'"
            />
          </td>
          <td>
            @if (period.status !== 'closed') {
              <p-button
                icon="pi pi-lock"
                [rounded]="true"
                [text]="true"
                severity="warn"
                size="small"
                [pTooltip]="'FISCAL_YEARS.CLOSE_PERIOD' | translate"
                (onClick)="closePeriod(period)"
              />
            }
          </td>
        </tr>
      </ng-template>
    </p-table>
  } @else {
    <div class="text-center py-6 text-text-muted">
      {{ 'FISCAL_YEARS.NO_PERIODS' | translate }}
    </div>
  }
</p-dialog>
