<p-toast />

<div class="setup-wizard">
  <!-- Header -->
  <div class="wizard-header">
    <div class="wizard-logo">
      <img src="assets/moon-crescent.svg" alt="Moon" width="36" height="36" />
      <span class="wizard-title">{{ 'SETUP.TITLE' | translate }}</span>
    </div>
    <span class="wizard-subtitle">{{ 'SETUP.SUBTITLE' | translate }}</span>
  </div>

  <!-- Step Indicator -->
  <div class="step-indicator">
    @for (step of steps; track step.key; let i = $index) {
      <div
        class="step-item"
        [class.active]="i === currentStep()"
        [class.done]="i < currentStep()"
        [class.clickable]="i <= currentStep()"
        (click)="goToStep(i)"
      >
        <div class="step-circle">
          @if (i < currentStep()) {
            <i class="pi pi-check"></i>
          } @else {
            <i [class]="step.icon"></i>
          }
        </div>
        <span class="step-label">{{ step.key | translate }}</span>
      </div>
      @if (i < steps.length - 1) {
        <div class="step-line" [class.done]="i < currentStep()"></div>
      }
    }
  </div>

  <!-- Step Content -->
  <div class="step-content">

    <!-- ═══ STEP 0: Company ═══ -->
    @if (currentStep() === 0) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-building"></i>
          <div>
            <h2>{{ 'SETUP.COMPANY_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.COMPANY_DESC' | translate }}</p>
          </div>
        </div>

        @if (companyLoading()) {
          <div class="loading-state"><i class="pi pi-spin pi-spinner" style="font-size: 2rem;"></i></div>
        } @else {
          <form [formGroup]="companyForm" class="wizard-form">
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.COMPANY_NAME_AR' | translate }} *</label>
                <input pInputText formControlName="name_ar" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.COMPANY_NAME_EN' | translate }} *</label>
                <input pInputText formControlName="name_en" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.PHONE' | translate }}</label>
                <input pInputText formControlName="phone" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.EMAIL' | translate }}</label>
                <input pInputText formControlName="email" type="email" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field full">
                <label>{{ 'SETUP.ADDRESS' | translate }}</label>
                <input pInputText formControlName="address" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.TAX_NUMBER' | translate }}</label>
                <input pInputText formControlName="tax_number" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.TIMEZONE' | translate }}</label>
                <p-select formControlName="timezone" [options]="[
                  {label: 'Asia/Riyadh (GMT+3)', value: 'Asia/Riyadh'},
                  {label: 'Africa/Cairo (GMT+2)', value: 'Africa/Cairo'},
                  {label: 'Asia/Dubai (GMT+4)', value: 'Asia/Dubai'},
                  {label: 'Asia/Kuwait (GMT+3)', value: 'Asia/Kuwait'},
                  {label: 'Europe/London (GMT+0)', value: 'Europe/London'},
                  {label: 'America/New_York (GMT-5)', value: 'America/New_York'}
                ]" optionLabel="label" optionValue="value" [style]="{ width: '100%' }" appendTo="body" />
              </div>
            </div>
          </form>
        }

        <div class="step-actions">
          <span></span>
          <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
            (onClick)="saveCompany()" [loading]="companySaving()" [disabled]="companyForm.invalid" />
        </div>
      </div>
    }

    <!-- ═══ STEP 1: Currency ═══ -->
    @if (currentStep() === 1) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-dollar"></i>
          <div>
            <h2>{{ 'SETUP.CURRENCY_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.CURRENCY_DESC' | translate }}</p>
          </div>
        </div>

        <div class="currency-grid">
          @for (curr of quickCurrencies; track curr.code) {
            <div class="currency-card" [class.selected]="selectedCurrency()?.code === curr.code"
              (click)="selectCurrency(curr)">
              <span class="currency-symbol">{{ curr.symbol }}</span>
              <span class="currency-code">{{ curr.code }}</span>
              <span class="currency-name">{{ curr.name_ar }}</span>
              @if (selectedCurrency()?.code === curr.code) {
                <i class="pi pi-check-circle selected-check"></i>
              }
            </div>
          }
        </div>

        <div class="step-actions">
          <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
            (onClick)="prevStep()" />
          <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
            (onClick)="saveCurrency()" [loading]="currencySaving()" [disabled]="!selectedCurrency()" />
        </div>
      </div>
    }

    <!-- ═══ STEP 2: Fiscal Year ═══ -->
    @if (currentStep() === 2) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-calendar"></i>
          <div>
            <h2>{{ 'SETUP.FISCAL_YEAR_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.FISCAL_YEAR_DESC' | translate }}</p>
          </div>
        </div>

        @if (existingFiscalYear(); as fy) {
          <div class="existing-info">
            <i class="pi pi-check-circle"></i>
            <div>
              <strong>{{ 'SETUP.FY_EXISTS' | translate }}</strong>
              <span>{{ fy.name }} ({{ fy.start_date }} — {{ fy.end_date }})</span>
            </div>
          </div>
        } @else {
          <form [formGroup]="fiscalYearForm" class="wizard-form">
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.FY_NAME' | translate }} *</label>
                <input pInputText formControlName="name" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.FY_NAME_AR' | translate }} *</label>
                <input pInputText formControlName="name_ar" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.FY_START' | translate }} *</label>
                <p-datepicker formControlName="start_date" dateFormat="yy-mm-dd" [showIcon]="true" [style]="{ width: '100%' }" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.FY_END' | translate }} *</label>
                <p-datepicker formControlName="end_date" dateFormat="yy-mm-dd" [showIcon]="true" [style]="{ width: '100%' }" />
              </div>
            </div>
          </form>
        }

        <div class="step-actions">
          <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
            (onClick)="prevStep()" />
          <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
            (onClick)="saveFiscalYear()" [loading]="fiscalYearSaving()" />
        </div>
      </div>
    }

    <!-- ═══ STEP 3: Chart of Accounts ═══ -->
    @if (currentStep() === 3) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-sitemap"></i>
          <div>
            <h2>{{ 'SETUP.COA_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.COA_DESC' | translate }}</p>
          </div>
        </div>

        @if (coaImported() && !coaImporting()) {
          <div class="existing-info">
            <i class="pi pi-check-circle"></i>
            <div>
              <strong>{{ 'SETUP.COA_EXISTS' | translate }}</strong>
              <span>{{ existingAccountsCount() }} {{ 'SETUP.ACCOUNTS' | translate }}</span>
            </div>
          </div>
          <div class="step-actions">
            <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
              (onClick)="prevStep()" />
            <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
              (onClick)="skipCOA()" />
          </div>
        } @else if (coaImporting()) {
          <div class="import-progress">
            <p-progressBar [value]="coaProgress()" [showValue]="true" />
            <span class="progress-label">{{ coaProgressLabel() }}</span>
          </div>
        } @else {
          <div class="template-grid">
            @for (tpl of templates; track tpl.id) {
              <div class="template-card" [class.selected]="selectedTemplate()?.id === tpl.id"
                (click)="selectTemplate(tpl)">
                <div class="template-icon"><i [class]="tpl.icon"></i></div>
                <div class="template-info">
                  <h3>{{ tpl.name_ar }}</h3>
                  <p>{{ tpl.description_ar }}</p>
                  <span class="template-count">{{ countTemplateAccounts(tpl) }} {{ 'SETUP.ACCOUNTS' | translate }}</span>
                </div>
                @if (selectedTemplate()?.id === tpl.id) {
                  <i class="pi pi-check-circle selected-check"></i>
                }
              </div>
            }
          </div>

          <div class="step-actions">
            <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
              (onClick)="prevStep()" />
            <div class="step-actions-end">
              <p-button [label]="'SETUP.SKIP' | translate" severity="secondary" [text]="true"
                (onClick)="skipCOA()" />
              <p-button [label]="'SETUP.IMPORT_COA' | translate" icon="pi pi-download" iconPos="right"
                (onClick)="importCOA()" [disabled]="!selectedTemplate()" />
            </div>
          </div>
        }
      </div>
    }

    <!-- ═══ STEP 4: Default Accounts ═══ -->
    @if (currentStep() === 4) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-cog"></i>
          <div>
            <h2>{{ 'SETUP.DEFAULTS_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.DEFAULTS_DESC' | translate }}</p>
          </div>
        </div>

        @if (defaultsLoading()) {
          <div class="loading-state"><i class="pi pi-spin pi-spinner" style="font-size: 2rem;"></i></div>
        } @else {
          <div class="defaults-grid">
            <div class="default-field">
              <label><i class="pi pi-wallet"></i> {{ 'SETUP.DEFAULT_CASH' | translate }}</label>
              <p-select [ngModel]="defaultCash()" (ngModelChange)="defaultCash.set($event)"
                [options]="detailAccounts()" [optionLabel]="'name'" optionValue="id"
                [filter]="true" filterBy="name,name_ar,name_en,code"
                [placeholder]="'SETUP.SELECT_ACCOUNT' | translate"
                [style]="{ width: '100%' }" appendTo="body" [showClear]="true">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
              </p-select>
            </div>

            <div class="default-field">
              <label><i class="pi pi-building-columns"></i> {{ 'SETUP.DEFAULT_BANK' | translate }}</label>
              <p-select [ngModel]="defaultBank()" (ngModelChange)="defaultBank.set($event)"
                [options]="detailAccounts()" [optionLabel]="'name'" optionValue="id"
                [filter]="true" filterBy="name,name_ar,name_en,code"
                [placeholder]="'SETUP.SELECT_ACCOUNT' | translate"
                [style]="{ width: '100%' }" appendTo="body" [showClear]="true">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
              </p-select>
            </div>

            <div class="default-field">
              <label><i class="pi pi-users"></i> {{ 'SETUP.DEFAULT_RECEIVABLE' | translate }}</label>
              <p-select [ngModel]="defaultReceivable()" (ngModelChange)="defaultReceivable.set($event)"
                [options]="detailAccounts()" [optionLabel]="'name'" optionValue="id"
                [filter]="true" filterBy="name,name_ar,name_en,code"
                [placeholder]="'SETUP.SELECT_ACCOUNT' | translate"
                [style]="{ width: '100%' }" appendTo="body" [showClear]="true">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
              </p-select>
            </div>

            <div class="default-field">
              <label><i class="pi pi-truck"></i> {{ 'SETUP.DEFAULT_PAYABLE' | translate }}</label>
              <p-select [ngModel]="defaultPayable()" (ngModelChange)="defaultPayable.set($event)"
                [options]="detailAccounts()" [optionLabel]="'name'" optionValue="id"
                [filter]="true" filterBy="name,name_ar,name_en,code"
                [placeholder]="'SETUP.SELECT_ACCOUNT' | translate"
                [style]="{ width: '100%' }" appendTo="body" [showClear]="true">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
              </p-select>
            </div>

            <div class="default-field">
              <label><i class="pi pi-minus-circle"></i> {{ 'SETUP.DEFAULT_EXPENSE' | translate }}</label>
              <p-select [ngModel]="defaultExpense()" (ngModelChange)="defaultExpense.set($event)"
                [options]="detailAccounts()" [optionLabel]="'name'" optionValue="id"
                [filter]="true" filterBy="name,name_ar,name_en,code"
                [placeholder]="'SETUP.SELECT_ACCOUNT' | translate"
                [style]="{ width: '100%' }" appendTo="body" [showClear]="true">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
              </p-select>
            </div>

            <div class="default-field">
              <label><i class="pi pi-plus-circle"></i> {{ 'SETUP.DEFAULT_REVENUE' | translate }}</label>
              <p-select [ngModel]="defaultRevenue()" (ngModelChange)="defaultRevenue.set($event)"
                [options]="detailAccounts()" [optionLabel]="'name'" optionValue="id"
                [filter]="true" filterBy="name,name_ar,name_en,code"
                [placeholder]="'SETUP.SELECT_ACCOUNT' | translate"
                [style]="{ width: '100%' }" appendTo="body" [showClear]="true">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
              </p-select>
            </div>

            <div class="default-field">
              <label><i class="pi pi-file-check"></i> {{ 'SETUP.DEFAULT_CHECK' | translate }}</label>
              <p-select [ngModel]="defaultCheckAccount()" (ngModelChange)="defaultCheckAccount.set($event)"
                [options]="detailAccounts()" [optionLabel]="'name'" optionValue="id"
                [filter]="true" filterBy="name,name_ar,name_en,code"
                [placeholder]="'SETUP.SELECT_ACCOUNT' | translate"
                [style]="{ width: '100%' }" appendTo="body" [showClear]="true">
                <ng-template #item let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
                <ng-template #selectedItem let-a><span>{{ a.code }} - {{ a.name_ar || a.name }}</span></ng-template>
              </p-select>
            </div>
          </div>
        }

        <div class="step-actions">
          <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
            (onClick)="prevStep()" />
          <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
            (onClick)="saveDefaults()" [loading]="defaultsSaving()" />
        </div>
      </div>
    }

    <!-- ═══ STEP 5: Warehouse ═══ -->
    @if (currentStep() === 5) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-warehouse"></i>
          <div>
            <h2>{{ 'SETUP.WAREHOUSE_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.WAREHOUSE_DESC' | translate }}</p>
          </div>
        </div>

        @if (existingWarehouses().length > 0) {
          <div class="existing-info">
            <i class="pi pi-check-circle"></i>
            <div>
              <strong>{{ 'SETUP.WAREHOUSE_EXISTS' | translate }}</strong>
              <span>{{ existingWarehouses().length }}</span>
            </div>
          </div>
          <div class="existing-list">
            @for (w of existingWarehouses(); track w.id) {
              <div class="existing-item">
                <i class="pi pi-warehouse"></i>
                <span>{{ w.name || w.name_ar }}</span>
              </div>
            }
          </div>
        }

        <div class="wizard-form-section">
          <h3 class="form-section-title">{{ 'SETUP.ADD_WAREHOUSE' | translate }}</h3>
          <form [formGroup]="warehouseForm" class="wizard-form">
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.WAREHOUSE_NAME' | translate }} *</label>
                <input pInputText formControlName="name" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.WAREHOUSE_NAME_AR' | translate }}</label>
                <input pInputText formControlName="name_ar" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.WAREHOUSE_NAME_EN' | translate }}</label>
                <input pInputText formControlName="name_en" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.WAREHOUSE_ADDRESS' | translate }}</label>
                <input pInputText formControlName="address" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <p-button [label]="'SETUP.ADD_WAREHOUSE' | translate" icon="pi pi-plus"
                  severity="secondary" [outlined]="true"
                  (onClick)="saveWarehouse()" [loading]="warehouseSaving()"
                  [disabled]="warehouseForm.invalid" />
              </div>
            </div>
          </form>
        </div>

        <div class="step-actions">
          <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
            (onClick)="prevStep()" />
          <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
            (onClick)="nextStep()" [disabled]="existingWarehouses().length === 0" />
        </div>
      </div>
    }

    <!-- ═══ STEP 6: Treasury (Petty Cash) ═══ -->
    @if (currentStep() === 6) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-wallet"></i>
          <div>
            <h2>{{ 'SETUP.TREASURY_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.TREASURY_DESC' | translate }}</p>
          </div>
        </div>

        @if (existingPettyCash().length > 0) {
          <div class="existing-info">
            <i class="pi pi-check-circle"></i>
            <div>
              <strong>{{ 'SETUP.TREASURY_EXISTS' | translate }}</strong>
              <span>{{ existingPettyCash().length }}</span>
            </div>
          </div>
          <div class="existing-list">
            @for (pc of existingPettyCash(); track pc.id) {
              <div class="existing-item">
                <i class="pi pi-wallet"></i>
                <span>{{ pc.name || pc.name_ar }}</span>
              </div>
            }
          </div>
        }

        <div class="wizard-form-section">
          <h3 class="form-section-title">{{ 'SETUP.ADD_TREASURY' | translate }}</h3>
          <form [formGroup]="pettyCashForm" class="wizard-form">
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.TREASURY_NAME' | translate }} *</label>
                <input pInputText formControlName="name" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.TREASURY_NAME_AR' | translate }}</label>
                <input pInputText formControlName="name_ar" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.TREASURY_NAME_EN' | translate }}</label>
                <input pInputText formControlName="name_en" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.TREASURY_MAX_AMOUNT' | translate }} *</label>
                <input pInputText formControlName="max_amount" type="number" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <p-button [label]="'SETUP.ADD_TREASURY' | translate" icon="pi pi-plus"
                  severity="secondary" [outlined]="true"
                  (onClick)="savePettyCash()" [loading]="pettyCashSaving()"
                  [disabled]="pettyCashForm.invalid" />
              </div>
            </div>
          </form>
        </div>

        <div class="step-actions">
          <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
            (onClick)="prevStep()" />
          <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
            (onClick)="nextStep()" [disabled]="existingPettyCash().length === 0" />
        </div>
      </div>
    }

    <!-- ═══ STEP 7: Bank Account ═══ -->
    @if (currentStep() === 7) {
      <div class="step-panel">
        <div class="step-panel-header">
          <i class="pi pi-building-columns"></i>
          <div>
            <h2>{{ 'SETUP.BANK_TITLE' | translate }}</h2>
            <p>{{ 'SETUP.BANK_DESC' | translate }}</p>
          </div>
        </div>

        @if (existingBankAccounts().length > 0) {
          <div class="existing-info">
            <i class="pi pi-check-circle"></i>
            <div>
              <strong>{{ 'SETUP.BANK_EXISTS' | translate }}</strong>
              <span>{{ existingBankAccounts().length }}</span>
            </div>
          </div>
          <div class="existing-list">
            @for (ba of existingBankAccounts(); track ba.id) {
              <div class="existing-item">
                <i class="pi pi-building-columns"></i>
                <span>{{ ba.bank_name || ba.bank_name_ar }} — {{ ba.account_number }}</span>
              </div>
            }
          </div>
        }

        <div class="wizard-form-section">
          <h3 class="form-section-title">{{ 'SETUP.ADD_BANK' | translate }}</h3>
          <form [formGroup]="bankAccountForm" class="wizard-form">
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.BANK_NAME' | translate }} *</label>
                <input pInputText formControlName="bank_name" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.BANK_NAME_AR' | translate }}</label>
                <input pInputText formControlName="bank_name_ar" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.BANK_NAME_EN' | translate }}</label>
                <input pInputText formControlName="bank_name_en" />
              </div>
              <div class="form-field">
                <label>{{ 'SETUP.BANK_ACCOUNT_NUMBER' | translate }} *</label>
                <input pInputText formControlName="account_number" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <label>{{ 'SETUP.BANK_IBAN' | translate }}</label>
                <input pInputText formControlName="iban" />
              </div>
              <div class="form-field"></div>
            </div>
            <div class="form-row">
              <div class="form-field">
                <p-button [label]="'SETUP.ADD_BANK' | translate" icon="pi pi-plus"
                  severity="secondary" [outlined]="true"
                  (onClick)="saveBankAccount()" [loading]="bankAccountSaving()"
                  [disabled]="bankAccountForm.invalid" />
              </div>
            </div>
          </form>
        </div>

        <div class="step-actions">
          <p-button [label]="'SETUP.PREV' | translate" icon="pi pi-arrow-right" severity="secondary" [outlined]="true"
            (onClick)="prevStep()" />
          <div class="step-actions-end">
            @if (existingBankAccounts().length === 0) {
              <p-button [label]="'SETUP.SKIP' | translate" severity="secondary" [text]="true"
                (onClick)="nextStep()" />
            }
            <p-button [label]="'SETUP.NEXT' | translate" icon="pi pi-arrow-left" iconPos="right"
              (onClick)="nextStep()" [disabled]="false" />
          </div>
        </div>
      </div>
    }

    <!-- ═══ STEP 8: Finish ═══ -->
    @if (currentStep() === 8) {
      <div class="step-panel finish-panel">
        <div class="finish-icon">
          <i class="pi pi-check-circle"></i>
        </div>
        <h2>{{ 'SETUP.FINISH_TITLE' | translate }}</h2>
        <p>{{ 'SETUP.FINISH_DESC' | translate }}</p>

        <div class="summary-grid">
          @if (summary().company?.name_ar) {
            <div class="summary-item">
              <i class="pi pi-building"></i>
              <span class="summary-label">{{ 'SETUP.STEP_COMPANY' | translate }}</span>
              <span class="summary-value">{{ summary().company.name_ar }}</span>
            </div>
          }
          @if (summary().currency) {
            <div class="summary-item">
              <i class="pi pi-dollar"></i>
              <span class="summary-label">{{ 'SETUP.STEP_CURRENCY' | translate }}</span>
              <span class="summary-value">{{ summary().currency!.code }} ({{ summary().currency!.symbol }})</span>
            </div>
          }
          @if (summary().fiscalYear) {
            <div class="summary-item">
              <i class="pi pi-calendar"></i>
              <span class="summary-label">{{ 'SETUP.STEP_FISCAL_YEAR' | translate }}</span>
              <span class="summary-value">{{ summary().fiscalYear.name || summary().fiscalYear.name_ar }}</span>
            </div>
          }
          @if (summary().accountsCount > 0) {
            <div class="summary-item">
              <i class="pi pi-sitemap"></i>
              <span class="summary-label">{{ 'SETUP.STEP_COA' | translate }}</span>
              <span class="summary-value">{{ summary().accountsCount }} {{ 'SETUP.ACCOUNTS' | translate }}</span>
            </div>
          }
          @if (summary().warehouses.length > 0) {
            <div class="summary-item">
              <i class="pi pi-warehouse"></i>
              <span class="summary-label">{{ 'SETUP.STEP_WAREHOUSE' | translate }}</span>
              <span class="summary-value">{{ summary().warehouses.length }}</span>
            </div>
          }
          @if (summary().pettyCash.length > 0) {
            <div class="summary-item">
              <i class="pi pi-wallet"></i>
              <span class="summary-label">{{ 'SETUP.STEP_TREASURY' | translate }}</span>
              <span class="summary-value">{{ summary().pettyCash.length }}</span>
            </div>
          }
          @if (summary().bankAccounts.length > 0) {
            <div class="summary-item">
              <i class="pi pi-building-columns"></i>
              <span class="summary-label">{{ 'SETUP.STEP_BANK' | translate }}</span>
              <span class="summary-value">{{ summary().bankAccounts.length }}</span>
            </div>
          }
        </div>

        <p-button [label]="'SETUP.GO_DASHBOARD' | translate" icon="pi pi-home" size="large"
          (onClick)="goToDashboard()" styleClass="finish-btn" />
      </div>
    }

  </div>
</div>
