<p-toast />

<div class="sales-settings-page">
  <app-page-header title="SALES.SETTINGS" subtitle="SALES.TITLE" (refresh)="retry()">
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="saveSettings()"
      [loading]="saving()"
    />
  </app-page-header>

  @if (loading()) {
    <div class="loading-wrap">
      <p-progressSpinner strokeWidth="3" animationDuration="1s" />
    </div>
  } @else {
    @for (group of groups; track group.key) {
      @if (getGroupSettings(group.key).length > 0) {
        <div class="settings-group">
          <div class="group-header">
            <i [class]="group.icon"></i>
            <h3>{{ group.label | translate }}</h3>
          </div>
          <div class="group-body">
            @for (setting of getGroupSettings(group.key); track setting.key) {
              <div class="setting-row">
                <div class="setting-info">
                  <span class="setting-label">{{ setting.label }}</span>
                  @if (setting.description) {
                    <span class="setting-desc">{{ setting.description }}</span>
                  }
                </div>
                <div class="setting-control">
                  @switch (setting.value_type) {
                    @case ('boolean') {
                      <p-toggleSwitch
                        [ngModel]="editValues()[setting.key]"
                        (ngModelChange)="updateValue(setting.key, $event)"
                      />
                    }
                    @case ('integer') {
                      @if (isAccountSetting(setting.key)) {
                        <p-select
                          [ngModel]="editValues()[setting.key]"
                          (ngModelChange)="updateValue(setting.key, $event)"
                          [options]="(accounts$ | async) || []"
                          optionLabel="name"
                          optionValue="id"
                          [placeholder]="'COMMON.SELECT' | translate"
                          [filter]="true"
                          [showClear]="true"
                          styleClass="setting-select"
                        >
                          <ng-template let-acc pTemplate="item">
                            <span>{{ acc.code }} - {{ acc.name }}</span>
                          </ng-template>
                          <ng-template let-acc pTemplate="selectedItem">
                            <span>{{ acc.code }} - {{ acc.name }}</span>
                          </ng-template>
                        </p-select>
                      } @else {
                        <p-inputNumber
                          [ngModel]="editValues()[setting.key]"
                          (ngModelChange)="updateValue(setting.key, $event)"
                          styleClass="setting-input"
                        />
                      }
                    }
                    @case ('decimal') {
                      <p-inputNumber
                        [ngModel]="editValues()[setting.key]"
                        (ngModelChange)="updateValue(setting.key, $event)"
                        [minFractionDigits]="2"
                        styleClass="setting-input"
                      />
                    }
                    @case ('enum') {
                      <p-select
                        [ngModel]="editValues()[setting.key]"
                        (ngModelChange)="updateValue(setting.key, $event)"
                        [options]="getEnumOptions(setting)"
                        optionLabel="label"
                        optionValue="value"
                        styleClass="setting-select"
                      />
                    }
                    @case ('json') {
                      <input
                        pInputText
                        [ngModel]="editValues()[setting.key]"
                        (ngModelChange)="updateValue(setting.key, $event)"
                        class="setting-input"
                        placeholder="JSON"
                      />
                    }
                    @default {
                      <input
                        pInputText
                        [ngModel]="editValues()[setting.key]"
                        (ngModelChange)="updateValue(setting.key, $event)"
                        class="setting-input"
                      />
                    }
                  }
                </div>
              </div>
            }
          </div>
        </div>
      }
    }
  }
</div>
