<p-toast />

<div class="settings-page">
  <app-page-header title="SETTINGS.TITLE" subtitle="SETTINGS.SUBTITLE" (refresh)="retry()">
    <span class="p-input-icon-start" style="display: inline-flex; align-items: center;">
      <i class="pi pi-search" style="position: absolute; z-index: 1; padding-inline-start: 0.5rem; color: #94a3b8;"></i>
      <input pInputText [(ngModel)]="searchQuery" [placeholder]="'COMMON.SEARCH' | translate"
             style="padding-inline-start: 2rem; width: 220px; font-size: 0.82rem;" />
    </span>
  </app-page-header>

  @if (loading$ | async) {
    <div class="loading-state">
      <p-progressSpinner strokeWidth="3" />
      <p>{{ 'COMMON.LOADING' | translate }}</p>
    </div>
  } @else if (error$ | async; as error) {
    <div class="error-state">
      <i class="pi pi-exclamation-triangle"></i>
      <p>{{ error }}</p>
      <p-button [label]="'COMMON.RETRY' | translate" icon="pi pi-refresh" (onClick)="retry()" severity="secondary" />
    </div>
  } @else {
    <p-tabs [value]="activeTab" (valueChange)="onTabChange($event)">
      <p-tablist>
        @for (mod of moduleTabs; track mod.value) {
          <p-tab [value]="mod.value">
            <i [class]="mod.icon" class="tab-icon"></i>
            {{ mod.label }}
          </p-tab>
        }
      </p-tablist>

      <p-tabpanels>
        <!-- Accounting tab -->
        <p-tabpanel value="accounting">
          <!-- General Settings -->
          <div class="mod-group">
            <div class="mod-group-header">
              <i class="pi pi-cog"></i>
              <h3>{{ 'SETTINGS.GENERAL' | translate }}</h3>
            </div>
            <div class="mod-group-body">
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.SHOW_FEEDBACK_BUTTON' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.SHOW_FEEDBACK_BUTTON_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="showFeedbackButton()" (ngModelChange)="toggleFeedbackButton()" />
                </div>
              </div>
            </div>
          </div>
          <!-- Auto-Approve Settings -->
          <div class="mod-group">
            <div class="mod-group-header">
              <i class="pi pi-check-circle"></i>
              <h3>{{ 'SETTINGS.AUTO_APPROVE' | translate }}</h3>
            </div>
            <div class="mod-group-body">
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.EXPENSE_AUTO_APPROVE' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.EXPENSE_AUTO_APPROVE_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="expenseAutoApprove()" (ngModelChange)="toggleAutoApprove('expense')" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.REVENUE_AUTO_APPROVE' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.REVENUE_AUTO_APPROVE_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="revenueAutoApprove()" (ngModelChange)="toggleAutoApprove('revenue')" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.PAYMENT_VOUCHER_AUTO_APPROVE' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.PAYMENT_VOUCHER_AUTO_APPROVE_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="paymentVoucherAutoApprove()" (ngModelChange)="toggleAutoApprove('payment_voucher')" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.RECEIPT_VOUCHER_AUTO_APPROVE' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.RECEIPT_VOUCHER_AUTO_APPROVE_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="receiptVoucherAutoApprove()" (ngModelChange)="toggleAutoApprove('receipt_voucher')" />
                </div>
              </div>
            </div>
          </div>
          <!-- Default Accounts -->
          <div class="mod-group">
            <div class="mod-group-header">
              <i class="pi pi-book"></i>
              <h3>{{ 'SETTINGS.DEFAULT_ACCOUNTS' | translate }}</h3>
            </div>
            <div class="mod-group-body">
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.DEFAULT_CASH_ACCOUNT' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.DEFAULT_CASH_ACCOUNT_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-select [ngModel]="defaultCashAccount()" (ngModelChange)="defaultCashAccount.set($event); saveDefaultAccount('accounting.default_cash_account', $event)"
                    [options]="cashBankAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code" [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate" [style]="{'width':'100%'}" appendTo="body" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.DEFAULT_BANK_ACCOUNT' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.DEFAULT_BANK_ACCOUNT_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-select [ngModel]="defaultBankAccount()" (ngModelChange)="defaultBankAccount.set($event); saveDefaultAccount('accounting.default_bank_account', $event)"
                    [options]="cashBankAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code" [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate" [style]="{'width':'100%'}" appendTo="body" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.DEFAULT_CHECK_ACCOUNT' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.DEFAULT_CHECK_ACCOUNT_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-select [ngModel]="defaultCheckAccount()" (ngModelChange)="defaultCheckAccount.set($event); saveDefaultAccount('accounting.default_check_account', $event)"
                    [options]="cashBankAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code" [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate" [style]="{'width':'100%'}" appendTo="body" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.DEFAULT_CLIENT_ACCOUNT' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.DEFAULT_CLIENT_ACCOUNT_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-select [ngModel]="defaultClientAccount()" (ngModelChange)="defaultClientAccount.set($event); saveDefaultAccount('accounting.default_client_account', $event)"
                    [options]="assetHeaderAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,name_ar,code" [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate" [style]="{'width':'100%'}" appendTo="body">
                    <ng-template #selectedItem let-acc>
                      <span>{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                    <ng-template #item let-acc>
                      <span style="padding-inline-start: {{(acc.level - 1) * 12}}px">{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                  </p-select>
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.DEFAULT_SUPPLIER_ACCOUNT' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.DEFAULT_SUPPLIER_ACCOUNT_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-select [ngModel]="defaultSupplierAccount()" (ngModelChange)="defaultSupplierAccount.set($event); saveDefaultAccount('accounting.default_supplier_account', $event)"
                    [options]="liabilityHeaderAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,name_ar,code" [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate" [style]="{'width':'100%'}" appendTo="body">
                    <ng-template #selectedItem let-acc>
                      <span>{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                    <ng-template #item let-acc>
                      <span style="padding-inline-start: {{(acc.level - 1) * 12}}px">{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                  </p-select>
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.DEFAULT_EXPENSE_ACCOUNT' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.DEFAULT_EXPENSE_ACCOUNT_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-select [ngModel]="defaultExpenseAccount()" (ngModelChange)="defaultExpenseAccount.set($event); saveDefaultAccount('accounting.default_expense_account', $event)"
                    [options]="expenseAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,name_ar,code" [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate" [style]="{'width':'100%'}" appendTo="body">
                    <ng-template #selectedItem let-acc>
                      <span>{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                    <ng-template #item let-acc>
                      <span style="padding-inline-start: {{(acc.level - 1) * 12}}px">{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                  </p-select>
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.DEFAULT_REVENUE_ACCOUNT' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.DEFAULT_REVENUE_ACCOUNT_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-select [ngModel]="defaultRevenueAccount()" (ngModelChange)="defaultRevenueAccount.set($event); saveDefaultAccount('accounting.default_revenue_account', $event)"
                    [options]="revenueAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,name_ar,code" [showClear]="true"
                    [placeholder]="'COMMON.SELECT' | translate" [style]="{'width':'100%'}" appendTo="body">
                    <ng-template #selectedItem let-acc>
                      <span>{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                    <ng-template #item let-acc>
                      <span style="padding-inline-start: {{(acc.level - 1) * 12}}px">{{ acc.code }} - {{ acc.name }}</span>
                    </ng-template>
                  </p-select>
                </div>
              </div>
            </div>
          </div>
          <!-- Backend-defined accounting settings -->
          @if (getModuleSettings('accounting').length > 0) {
            <div class="mod-group">
              <div class="mod-group-header">
                <i class="pi pi-sliders-h"></i>
                <h3>{{ 'SETTINGS.OTHER_SETTINGS' | translate }}</h3>
              </div>
              <div class="mod-group-body">
                @for (setting of getModuleSettings('accounting'); track setting.id) {
                  <div class="mod-row">
                    <div class="mod-row-info">
                      <span class="mod-row-label">{{ getLabel(setting) }}</span>
                      <span class="mod-row-desc">{{ setting.setting_key }}</span>
                    </div>
                    <div class="mod-row-control">
                      @if (editingKey() === setting.setting_key) {
                        <div class="mod-row-edit">
                          @if (setting.value_type === 'boolean') {
                            <p-toggleSwitch [(ngModel)]="editValue" />
                          } @else if (setting.value_type === 'integer' || setting.value_type === 'decimal') {
                            <p-inputNumber [(ngModel)]="editValue" [style]="{'width': '100%'}" />
                          } @else if (setting.value_type === 'enum' && setting.allowed_values) {
                            <p-select [(ngModel)]="editValue" [options]="setting.allowed_values" [style]="{'width': '100%'}" />
                          } @else {
                            <input pInputText [(ngModel)]="editValue" style="width: 100%" />
                          }
                          <p-button icon="pi pi-check" [rounded]="true" [text]="true" severity="success" size="small" (onClick)="saveEdit(setting)" [loading]="saving()" />
                          <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="secondary" size="small" (onClick)="cancelEdit()" />
                        </div>
                      } @else {
                        <div class="mod-row-display" (click)="startEdit(setting)">
                          @if (setting.value_type === 'boolean') {
                            <p-tag [value]="setting.current_value ? ('COMMON.YES' | translate) : ('COMMON.NO' | translate)"
                                   [severity]="setting.current_value ? 'success' : 'secondary'" [rounded]="true" />
                          } @else {
                            <span>{{ setting.current_value ?? '—' }}</span>
                          }
                          <i class="pi pi-pencil edit-icon"></i>
                        </div>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        </p-tabpanel>

        <!-- Sales tab -->
        <p-tabpanel value="sales">
          @if (salesSettingsLoading()) {
            <div class="loading-state" style="padding: 2rem; text-align: center;">
              <p-progressSpinner strokeWidth="3" />
            </div>
          } @else {
            <!-- Module Accent Color -->
            <div class="mod-group">
              <div class="mod-group-header">
                <i class="pi pi-palette"></i>
                <h3>{{ 'SETTINGS.MODULE_ACCENT_COLOR' | translate }}</h3>
              </div>
              <div class="mod-group-body">
                <div class="mod-row">
                  <div class="mod-row-info">
                    <span class="mod-row-label">{{ 'SETTINGS.SALES_ACCENT_COLOR' | translate }}</span>
                    <span class="mod-row-desc">{{ 'SETTINGS.SALES_ACCENT_COLOR_DESC' | translate }}</span>
                  </div>
                  <div class="mod-row-control">
                    <div class="color-picker-row">
                      <input type="color" [value]="moduleColorService.salesColor()"
                        (change)="onSalesColorChange($any($event.target).value)"
                        class="color-input" />
                      <span class="color-hex">{{ moduleColorService.salesColor() }}</span>
                      @if (moduleColorService.salesColor() !== '#1a237e') {
                        <p-button icon="pi pi-undo" [rounded]="true" [text]="true" severity="secondary" size="small"
                          [pTooltip]="'COMMON.RESET' | translate" (onClick)="resetSalesColor()" />
                      }
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Perpetual Inventory Toggle -->
            <div class="mod-group">
              <div class="mod-group-header">
                <i class="pi pi-box"></i>
                <h3>{{ 'SETTINGS.PERPETUAL_INVENTORY' | translate }}</h3>
              </div>
              <div class="mod-group-body">
                <div class="mod-row">
                  <div class="mod-row-info">
                    <span class="mod-row-label">{{ 'SETTINGS.PERPETUAL_INVENTORY' | translate }}</span>
                    <span class="mod-row-desc">{{ 'SETTINGS.PERPETUAL_INVENTORY_DESC' | translate }}</span>
                  </div>
                  <div class="mod-row-control">
                    <p-toggleSwitch [ngModel]="perpetualInventory()" (ngModelChange)="togglePerpetualInventory()" />
                  </div>
                </div>
              </div>
            </div>
            <div class="mod-save-bar">
              <p-button [label]="'COMMON.SAVE' | translate" icon="pi pi-check"
                (onClick)="saveSalesSettings()" [loading]="salesSettingsSaving()" />
            </div>
            @for (group of salesGroups; track group.key) {
              @if (getSalesGroupSettings(group.key).length > 0) {
                <div class="mod-group">
                  <div class="mod-group-header">
                    <i [class]="group.icon"></i>
                    <h3>{{ group.label | translate }}</h3>
                  </div>
                  <div class="mod-group-body">
                    @for (setting of getSalesGroupSettings(group.key); track setting.key) {
                      <div class="mod-row">
                        <div class="mod-row-info">
                          <span class="mod-row-label">{{ setting.label }}</span>
                          @if (setting.description) {
                            <span class="mod-row-desc">{{ setting.description }}</span>
                          }
                        </div>
                        <div class="mod-row-control">
                          @switch (setting.value_type) {
                            @case ('boolean') {
                              <p-toggleSwitch [ngModel]="salesEditValues()[setting.key]"
                                (ngModelChange)="updateSalesValue(setting.key, $event)" />
                            }
                            @case ('integer') {
                              @if (isSalesAccountSetting(setting.key)) {
                                <p-select [ngModel]="salesEditValues()[setting.key]"
                                  (ngModelChange)="updateSalesValue(setting.key, $event)"
                                  [options]="accounts()" optionLabel="name" optionValue="id"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name,code" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body">
                                  <ng-template #item let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                  <ng-template #selectedItem let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                </p-select>
                              } @else if (isSalesWarehouseSetting(setting.key)) {
                                <p-select [ngModel]="salesEditValues()[setting.key]"
                                  (ngModelChange)="updateSalesValue(setting.key, $event)"
                                  [options]="warehouses()" optionLabel="name" optionValue="id"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body" />
                              } @else if (isSalesTaxSetting(setting.key)) {
                                <p-select [ngModel]="salesEditValues()[setting.key]"
                                  (ngModelChange)="updateSalesValue(setting.key, $event)"
                                  [options]="taxRates()" optionLabel="name" optionValue="id"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body">
                                  <ng-template #item let-tax>
                                    <span>{{ tax.name }} ({{ tax.rate }}%)</span>
                                  </ng-template>
                                  <ng-template #selectedItem let-tax>
                                    <span>{{ tax.name }} ({{ tax.rate }}%)</span>
                                  </ng-template>
                                </p-select>
                              } @else {
                                <p-inputNumber [ngModel]="salesEditValues()[setting.key]"
                                  (ngModelChange)="updateSalesValue(setting.key, $event)"
                                  [style]="{'width': '100%'}" />
                              }
                            }
                            @case ('decimal') {
                              <p-inputNumber [ngModel]="salesEditValues()[setting.key]"
                                (ngModelChange)="updateSalesValue(setting.key, $event)"
                                [minFractionDigits]="2" [style]="{'width': '100%'}" />
                            }
                            @case ('enum') {
                              <p-select [ngModel]="salesEditValues()[setting.key]"
                                (ngModelChange)="updateSalesValue(setting.key, $event)"
                                [options]="getSalesEnumOptions(setting)"
                                optionLabel="label" optionValue="value"
                                [style]="{'width': '100%'}" />
                            }
                            @case ('json') {
                              <textarea pTextarea [ngModel]="salesEditValues()[setting.key]"
                                (ngModelChange)="updateSalesValue(setting.key, $event)"
                                style="width: 100%; font-family: monospace; font-size: 0.75rem;" [rows]="4"
                                placeholder="JSON" [autoResize]="true"></textarea>
                            }
                            @default {
                              @if (isSalesAccountSetting(setting.key)) {
                                <p-select [ngModel]="salesEditValues()[setting.key]"
                                  (ngModelChange)="updateSalesValue(setting.key, $event)"
                                  [options]="accounts()" optionLabel="name" optionValue="code"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name,code" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body">
                                  <ng-template #item let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                  <ng-template #selectedItem let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                </p-select>
                              } @else {
                                <input pInputText [ngModel]="salesEditValues()[setting.key]"
                                  (ngModelChange)="updateSalesValue(setting.key, $event)"
                                  style="width: 100%" />
                              }
                            }
                          }
                        </div>
                      </div>
                    }
                  </div>
                </div>
              }
            }
          }
        </p-tabpanel>

        <!-- Inventory tab -->
        <p-tabpanel value="inventory">
          <!-- Auto-Approve Settings -->
          <div class="mod-group">
            <div class="mod-group-header">
              <i class="pi pi-check-circle"></i>
              <h3>{{ 'SETTINGS.AUTO_APPROVE' | translate }}</h3>
            </div>
            <div class="mod-group-body">
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.COUNT_AUTO_APPROVE' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.COUNT_AUTO_APPROVE_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="countAutoApprove()" (ngModelChange)="toggleInventorySetting('count')" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.RECEIPT_AUTO_APPROVE' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.RECEIPT_AUTO_APPROVE_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="receiptAutoApprove()" (ngModelChange)="toggleInventorySetting('receipt')" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.ISSUE_AUTO_APPROVE' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.ISSUE_AUTO_APPROVE_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="issueAutoApprove()" (ngModelChange)="toggleInventorySetting('issue')" />
                </div>
              </div>
            </div>
          </div>
          <!-- Backend-defined inventory settings -->
          @if (getModuleSettings('inventory').length > 0) {
            <div class="mod-group">
              <div class="mod-group-header">
                <i class="pi pi-sliders-h"></i>
                <h3>{{ 'SETTINGS.OTHER_SETTINGS' | translate }}</h3>
              </div>
              <div class="mod-group-body">
                @for (setting of getModuleSettings('inventory'); track setting.id) {
                  <div class="mod-row">
                    <div class="mod-row-info">
                      <span class="mod-row-label">{{ getLabel(setting) }}</span>
                      <span class="mod-row-desc">{{ setting.setting_key }}</span>
                    </div>
                    <div class="mod-row-control">
                      @if (editingKey() === setting.setting_key) {
                        <div class="mod-row-edit">
                          @if (setting.value_type === 'boolean') {
                            <p-toggleSwitch [(ngModel)]="editValue" />
                          } @else if (setting.value_type === 'integer' || setting.value_type === 'decimal') {
                            <p-inputNumber [(ngModel)]="editValue" [style]="{'width': '100%'}" />
                          } @else if (setting.value_type === 'enum' && setting.allowed_values) {
                            <p-select [(ngModel)]="editValue" [options]="setting.allowed_values" [style]="{'width': '100%'}" />
                          } @else {
                            <input pInputText [(ngModel)]="editValue" style="width: 100%" />
                          }
                          <p-button icon="pi pi-check" [rounded]="true" [text]="true" severity="success" size="small" (onClick)="saveEdit(setting)" [loading]="saving()" />
                          <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="secondary" size="small" (onClick)="cancelEdit()" />
                        </div>
                      } @else {
                        <div class="mod-row-display" (click)="startEdit(setting)">
                          @if (setting.value_type === 'boolean') {
                            <p-tag [value]="setting.current_value ? ('COMMON.YES' | translate) : ('COMMON.NO' | translate)"
                                   [severity]="setting.current_value ? 'success' : 'secondary'" [rounded]="true" />
                          } @else {
                            <span>{{ setting.current_value ?? '—' }}</span>
                          }
                          <i class="pi pi-pencil edit-icon"></i>
                        </div>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        </p-tabpanel>

        <!-- Products tab -->
        <p-tabpanel value="products">
          <div class="mod-group">
            <div class="mod-group-header">
              <i class="pi pi-eye"></i>
              <h3>{{ 'SETTINGS.PRODUCT_DISPLAY' | translate }}</h3>
            </div>
            <div class="mod-group-body">
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.SHOW_CATEGORY_IN_NAME' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.SHOW_CATEGORY_IN_NAME_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-toggleSwitch [ngModel]="showCategoryInName()" (ngModelChange)="toggleShowCategoryInName()" />
                </div>
              </div>
              <div class="mod-row">
                <div class="mod-row-info">
                  <span class="mod-row-label">{{ 'SETTINGS.MIN_SEARCH_CHARS' | translate }}</span>
                  <span class="mod-row-desc">{{ 'SETTINGS.MIN_SEARCH_CHARS_DESC' | translate }}</span>
                </div>
                <div class="mod-row-control">
                  <p-inputNumber [ngModel]="minSearchChars()" (ngModelChange)="saveMinSearchChars($event)"
                    [min]="1" [max]="10" [showButtons]="true" [style]="{'width':'120px'}" />
                </div>
              </div>
            </div>
          </div>
          <!-- Backend-defined product settings -->
          @if (getModuleSettings('products').length > 0) {
            <div class="mod-group">
              <div class="mod-group-header">
                <i class="pi pi-sliders-h"></i>
                <h3>{{ 'SETTINGS.OTHER_SETTINGS' | translate }}</h3>
              </div>
              <div class="mod-group-body">
                @for (setting of getModuleSettings('products'); track setting.id) {
                  <div class="mod-row">
                    <div class="mod-row-info">
                      <span class="mod-row-label">{{ getLabel(setting) }}</span>
                      <span class="mod-row-desc">{{ setting.setting_key }}</span>
                    </div>
                    <div class="mod-row-control">
                      @if (editingKey() === setting.setting_key) {
                        <div class="mod-row-edit">
                          @if (setting.value_type === 'boolean') {
                            <p-toggleSwitch [(ngModel)]="editValue" />
                          } @else if (setting.value_type === 'integer' || setting.value_type === 'decimal') {
                            <p-inputNumber [(ngModel)]="editValue" [style]="{'width': '100%'}" />
                          } @else if (setting.value_type === 'enum' && setting.allowed_values) {
                            <p-select [(ngModel)]="editValue" [options]="setting.allowed_values" [style]="{'width': '100%'}" />
                          } @else {
                            <input pInputText [(ngModel)]="editValue" style="width: 100%" />
                          }
                          <p-button icon="pi pi-check" [rounded]="true" [text]="true" severity="success" size="small" (onClick)="saveEdit(setting)" [loading]="saving()" />
                          <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="secondary" size="small" (onClick)="cancelEdit()" />
                        </div>
                      } @else {
                        <div class="mod-row-display" (click)="startEdit(setting)">
                          @if (setting.value_type === 'boolean') {
                            <p-tag [value]="setting.current_value ? ('COMMON.YES' | translate) : ('COMMON.NO' | translate)"
                                   [severity]="setting.current_value ? 'success' : 'secondary'" [rounded]="true" />
                          } @else {
                            <span>{{ setting.current_value ?? '—' }}</span>
                          }
                          <i class="pi pi-pencil edit-icon"></i>
                        </div>
                      }
                    </div>
                  </div>
                }
              </div>
            </div>
          }
        </p-tabpanel>

        <!-- Purchases tab -->
        <p-tabpanel value="purchases">
          @if (purchasesSettingsLoading()) {
            <div class="loading-state" style="padding: 2rem; text-align: center;">
              <p-progressSpinner strokeWidth="3" />
            </div>
          } @else {
            <!-- Module Accent Color -->
            <div class="mod-group">
              <div class="mod-group-header">
                <i class="pi pi-palette"></i>
                <h3>{{ 'SETTINGS.MODULE_ACCENT_COLOR' | translate }}</h3>
              </div>
              <div class="mod-group-body">
                <div class="mod-row">
                  <div class="mod-row-info">
                    <span class="mod-row-label">{{ 'SETTINGS.PURCHASES_ACCENT_COLOR' | translate }}</span>
                    <span class="mod-row-desc">{{ 'SETTINGS.PURCHASES_ACCENT_COLOR_DESC' | translate }}</span>
                  </div>
                  <div class="mod-row-control">
                    <div class="color-picker-row">
                      <input type="color" [value]="moduleColorService.purchasesColor()"
                        (change)="onPurchasesColorChange($any($event.target).value)"
                        class="color-input" />
                      <span class="color-hex">{{ moduleColorService.purchasesColor() }}</span>
                      @if (moduleColorService.purchasesColor() !== '#1a237e') {
                        <p-button icon="pi pi-undo" [rounded]="true" [text]="true" severity="secondary" size="small"
                          [pTooltip]="'COMMON.RESET' | translate" (onClick)="resetPurchasesColor()" />
                      }
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mod-save-bar">
              <p-button [label]="'COMMON.SAVE' | translate" icon="pi pi-check"
                (onClick)="savePurchasesSettings()" [loading]="purchasesSettingsSaving()" />
            </div>
            @for (group of purchasesGroups; track group.key) {
              @if (getPurchasesGroupSettings(group.key).length > 0) {
                <div class="mod-group">
                  <div class="mod-group-header">
                    <i [class]="group.icon"></i>
                    <h3>{{ group.label | translate }}</h3>
                  </div>
                  <div class="mod-group-body">
                    @for (setting of getPurchasesGroupSettings(group.key); track setting.key) {
                      <div class="mod-row">
                        <div class="mod-row-info">
                          <span class="mod-row-label">{{ setting.label }}</span>
                          @if (setting.description) {
                            <span class="mod-row-desc">{{ setting.description }}</span>
                          }
                        </div>
                        <div class="mod-row-control">
                          @switch (setting.value_type) {
                            @case ('boolean') {
                              <p-toggleSwitch [ngModel]="purchasesEditValues()[setting.key]"
                                (ngModelChange)="updatePurchasesValue(setting.key, $event)" />
                            }
                            @case ('integer') {
                              @if (isPurchasesAccountSetting(setting.key)) {
                                <p-select [ngModel]="purchasesEditValues()[setting.key]"
                                  (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                  [options]="accounts()" optionLabel="name" optionValue="id"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name,code" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body">
                                  <ng-template #item let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                  <ng-template #selectedItem let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                </p-select>
                              } @else if (isPurchasesWarehouseSetting(setting.key)) {
                                <p-select [ngModel]="purchasesEditValues()[setting.key]"
                                  (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                  [options]="warehouses()" optionLabel="name" optionValue="id"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body" />
                              } @else if (isPurchasesTaxSetting(setting.key)) {
                                <p-select [ngModel]="purchasesEditValues()[setting.key]"
                                  (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                  [options]="taxRates()" optionLabel="name" optionValue="id"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body">
                                  <ng-template #item let-tax>
                                    <span>{{ tax.name }} ({{ tax.rate }}%)</span>
                                  </ng-template>
                                  <ng-template #selectedItem let-tax>
                                    <span>{{ tax.name }} ({{ tax.rate }}%)</span>
                                  </ng-template>
                                </p-select>
                              } @else {
                                <p-inputNumber [ngModel]="purchasesEditValues()[setting.key]"
                                  (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                  [style]="{'width': '100%'}" />
                              }
                            }
                            @case ('decimal') {
                              <p-inputNumber [ngModel]="purchasesEditValues()[setting.key]"
                                (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                [minFractionDigits]="2" [style]="{'width': '100%'}" />
                            }
                            @case ('enum') {
                              <p-select [ngModel]="purchasesEditValues()[setting.key]"
                                (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                [options]="getPurchasesEnumOptions(setting)"
                                optionLabel="label" optionValue="value"
                                [style]="{'width': '100%'}" />
                            }
                            @case ('json') {
                              <textarea pTextarea [ngModel]="purchasesEditValues()[setting.key]"
                                (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                style="width: 100%; font-family: monospace; font-size: 0.75rem;" [rows]="4"
                                placeholder="JSON" [autoResize]="true"></textarea>
                            }
                            @default {
                              @if (isPurchasesAccountSetting(setting.key)) {
                                <p-select [ngModel]="purchasesEditValues()[setting.key]"
                                  (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                  [options]="accounts()" optionLabel="name" optionValue="code"
                                  [placeholder]="'COMMON.SELECT' | translate"
                                  [filter]="true" filterBy="name,code" [showClear]="true"
                                  [style]="{'width': '100%'}" appendTo="body">
                                  <ng-template #item let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                  <ng-template #selectedItem let-acc>
                                    <span>{{ acc.code }} - {{ acc.name }}</span>
                                  </ng-template>
                                </p-select>
                              } @else {
                                <input pInputText [ngModel]="purchasesEditValues()[setting.key]"
                                  (ngModelChange)="updatePurchasesValue(setting.key, $event)"
                                  style="width: 100%" />
                              }
                            }
                          }
                        </div>
                      </div>
                    }
                  </div>
                </div>
              }
            }
          }
        </p-tabpanel>
      </p-tabpanels>
    </p-tabs>
  }
</div>
