<div class="container ui-simple-hero">
  <h1 class="ui-simple-hero__title">{{ "CALC.TITLE" | translate }}</h1>
  <p class="ui-simple-hero__subtitle">{{ "CALC.SUBTITLE" | translate }}</p>

  @if (error()) {
    <app-alert type="error">{{ errorKey() | translate }}</app-alert>
  }
</div>

@if (step() === "success") {
  <div class="container ui-simple-hero">
    <app-success-state
      context="calc"
      (action)="onNewQuote()"
    ></app-success-state>
  </div>
} @else {
  <div class="container content-grid">
    <!-- Left Column: Input -->
    <div class="col-input">
      <app-card>
        <div class="mode-selector">
          <div
            class="mode-option"
            [class.active]="mode() === 'easy'"
            [class.disabled]="cadSessionLocked()"
            (click)="switchMode('easy')"
          >
            {{ "CALC.MODE_EASY" | translate }}
          </div>
          <div
            class="mode-option"
            [class.active]="mode() === 'advanced'"
            [class.disabled]="cadSessionLocked()"
            (click)="switchMode('advanced')"
          >
            {{ "CALC.MODE_ADVANCED" | translate }}
          </div>
        </div>

        <app-upload-form
          #uploadForm
          [mode]="mode()"
          [lockedSettings]="cadSessionLocked()"
          [loading]="loading()"
          [uploadProgress]="uploadProgress()"
          (submitRequest)="onCalculate($event)"
          (itemQuantityChange)="onUploadItemQuantityChange($event)"
          (printSettingsChange)="onUploadPrintSettingsChange($event)"
          (itemSettingsDiffChange)="onItemSettingsDiffChange($event)"
        ></app-upload-form>
      </app-card>
    </div>

    <!-- Right Column: Result or Info -->
    <div class="col-result" #resultCol>
      @if (loading()) {
        <app-card class="loading-state">
          <div class="loader-content">
            <div class="spinner"></div>
            <h3 class="loading-title">
              {{ "CALC.ANALYZING_TITLE" | translate }}
            </h3>
            <p class="loading-text">{{ "CALC.ANALYZING_TEXT" | translate }}</p>
          </div>
        </app-card>
      } @else if (result()) {
        <app-quote-result
          [result]="result()!"
          [recalculationRequired]="requiresRecalculation()"
          [itemSettingsDiffByFileName]="itemSettingsDiffByFileName()"
          (consult)="onConsult()"
          (proceed)="onProceed()"
          (itemQuantityPreviewChange)="onQuoteItemQuantityPreviewChange($event)"
          (itemChange)="onItemChange($event)"
        ></app-quote-result>
      } @else if (isZeroQuoteError()) {
        <app-card class="zero-result-card">
          <h3>{{ "CALC.ZERO_RESULT_TITLE" | translate }}</h3>
          <p>{{ "CALC.ZERO_RESULT_HELP" | translate }}</p>
          <div class="zero-result-action">
            <app-button variant="outline" (click)="onConsult()">
              {{ "QUOTE.CONSULT" | translate }}
            </app-button>
          </div>
        </app-card>
      } @else {
        <app-card>
          <h3>{{ "CALC.BENEFITS_TITLE" | translate }}</h3>
          <ul class="benefits">
            <li>{{ "CALC.BENEFITS_1" | translate }}</li>
            <li>{{ "CALC.BENEFITS_2" | translate }}</li>
            <li>{{ "CALC.BENEFITS_3" | translate }}</li>
          </ul>
        </app-card>
      }
    </div>
  </div>
}
