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

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

  <ng-template #bodyTpl let-seq>
    <tr>
      <td>
        <div>
          <span class="fw-600">{{ seq.name_ar }}</span>
          @if (seq.name_en) {
            <br><span class="text-secondary">{{ seq.name_en }}</span>
          }
        </div>
      </td>
      <td><p-tag [value]="seq.module" severity="info" /></td>
      <td>{{ seq.entity }}</td>
      <td class="mono">{{ seq.prefix || '—' }}</td>
      <td class="mono">{{ seq.digits }}</td>
      <td>{{ seq.reset_frequency_label || seq.reset_frequency }}</td>
      <td>
        <p-tag
          [value]="seq.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)"
          [severity]="seq.is_active ? 'success' : 'danger'"
        />
      </td>
      <td>
        <div class="action-buttons">
          <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="editSequence(seq)" />
          <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="deleteSequence(seq)" />
        </div>
      </td>
    </tr>
  </ng-template>
  <app-data-table [data]="(sequences$ | async) || []" [loading]="!!(loading$ | async)" [error]="(error$ | async) ?? null" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editingSequence() ? ('SEQUENCES.EDIT_SEQUENCE' | translate) : ('SEQUENCES.NEW_SEQUENCE' | translate)"
  [saving]="!!(saving$ | async)"
  [width]="'600px'"
  (save)="onSave()"
>
  <form [formGroup]="sequenceForm" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'SEQUENCES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
        @if (sequenceForm.get('name_ar')?.touched && sequenceForm.get('name_ar')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'SEQUENCES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'SEQUENCES.MODULE' | translate }} *</label>
        <p-select formControlName="module" [options]="moduleOptions" optionLabel="label" optionValue="value" />
      </div>
      <div class="form-field">
        <label>{{ 'SEQUENCES.ENTITY' | translate }} *</label>
        <p-select formControlName="entity" [options]="entityOptions" optionLabel="label" optionValue="value" [editable]="true" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'SEQUENCES.PREFIX' | translate }}</label>
        <input pInputText formControlName="prefix" />
      </div>
      <div class="form-field">
        <label>{{ 'SEQUENCES.SUFFIX' | translate }}</label>
        <input pInputText formControlName="suffix" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'SEQUENCES.DIGITS' | translate }} *</label>
      <p-inputNumber formControlName="digits" [min]="1" [max]="10" [showButtons]="true" />
    </div>
    <div class="form-field">
      <label>{{ 'SEQUENCES.RESET' | translate }} *</label>
      <p-select formControlName="reset_frequency" [options]="resetFrequencyOptions" optionLabel="label" optionValue="value" />
    </div>
    <div class="switches-row">
      <div class="switch-field">
        <p-toggleSwitch formControlName="include_year" />
        <label>{{ 'SEQUENCES.INCLUDE_YEAR' | translate }}</label>
      </div>
      <div class="switch-field">
        <p-toggleSwitch formControlName="include_month" />
        <label>{{ 'SEQUENCES.INCLUDE_MONTH' | translate }}</label>
      </div>
      <div class="switch-field">
        <p-toggleSwitch formControlName="per_branch" />
        <label>{{ 'SEQUENCES.PER_BRANCH' | translate }}</label>
      </div>
      <div class="switch-field">
        <p-toggleSwitch formControlName="is_active" />
        <label>{{ 'COMMON.ACTIVE' | translate }}</label>
      </div>
    </div>
    <div class="preview-box">
      <label>{{ 'SEQUENCES.PREVIEW' | translate }}</label>
      <span class="preview-value">{{ getPreview() }}</span>
    </div>
  </form>
</app-form-dialog>
