<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="section">
    @if (selectedFile()) {
      <div class="viewer-wrapper">
        @if (!canPreviewSelectedFile()) {
          <div class="step-warning">
            <p>{{ "CALC.STEP_WARNING" | translate }}</p>
          </div>
        } @else {
          <app-stl-viewer
            [file]="getSelectedPreviewFile()"
            [color]="getSelectedFileColor()"
          >
          </app-stl-viewer>
        }
      </div>
    }

    @if (items().length === 0) {
      <app-dropzone
        [label]="'CALC.UPLOAD_LABEL'"
        [subtext]="'CALC.UPLOAD_SUB'"
        [accept]="acceptedFormats"
        [multiple]="true"
        (filesDropped)="onFilesDropped($event)"
      >
      </app-dropzone>
    }

    @if (items().length > 0) {
      <div class="items-grid">
        @for (item of items(); track item.file.name; let i = $index) {
          <div
            class="file-card"
            [class.active]="item.file === selectedFile()"
            (click)="selectFile(item.file)"
          >
            <div class="card-header">
              <span class="file-name" [title]="item.file.name">{{
                item.file.name
              }}</span>
            </div>

            <div class="card-body">
              <div class="card-controls">
                <div class="qty-group">
                  <label>{{ "CALC.QTY_SHORT" | translate }}</label>
                  <input
                    type="number"
                    min="1"
                    [value]="item.quantity"
                    (input)="updateItemQuantity(i, $event)"
                    class="qty-input"
                    (click)="$event.stopPropagation()"
                  />
                </div>

                <div class="color-group">
                  <label>{{ "CALC.COLOR_LABEL" | translate }}</label>
                  <app-color-selector
                    [selectedColor]="item.color"
                    [selectedVariantId]="item.filamentVariantId ?? null"
                    [variants]="getVariantsForMaterial(item.material)"
                    (colorSelected)="updateItemColor(i, $event)"
                  >
                  </app-color-selector>
                </div>
              </div>

              <button
                type="button"
                class="btn-remove"
                (click)="removeItem(i); $event.stopPropagation()"
                [attr.title]="'CALC.REMOVE_FILE' | translate"
              >
                X
              </button>
            </div>
          </div>
        }
      </div>

      <div class="add-more-container">
        <input
          #additionalInput
          type="file"
          [accept]="acceptedFormats"
          multiple
          hidden
          (change)="onAdditionalFilesSelected($event)"
        />

        <button
          type="button"
          class="btn-add-more"
          (click)="additionalInput.click()"
        >
          + {{ "CALC.ADD_FILES" | translate }}
        </button>
      </div>

      <p class="upload-privacy-note">
        {{ "LEGAL.CONSENT.UPLOAD_NOTICE_PREFIX" | translate }}
        <a href="/privacy" target="_blank" rel="noopener">{{
          "LEGAL.CONSENT.UPLOAD_NOTICE_LINK" | translate
        }}</a
        >.
      </p>

      @if (mode() === "easy") {
        <div class="easy-global-controls">
          <label class="easy-global-field">
            <span>{{ "CALC.MATERIAL" | translate }}</span>
            <select formControlName="material">
              @for (mat of materials(); track mat.value) {
                <option [value]="mat.value">{{ mat.label }}</option>
              }
            </select>
          </label>

          <label class="easy-global-field">
            <span>{{ "CALC.QUALITY" | translate }}</span>
            <select formControlName="quality">
              @for (quality of qualities(); track quality.value) {
                <option [value]="quality.value">{{ quality.label }}</option>
              }
            </select>
          </label>
        </div>
      } @else {
        <div class="sync-settings">
          <label class="sync-settings-toggle">
            <input
              type="checkbox"
              [checked]="sameSettingsForAll()"
              [disabled]="lockedSettings()"
              (change)="onSameSettingsToggle($any($event.target).checked)"
            />
            <span class="sync-settings-copy">
              <span class="sync-settings-title">
                Stesse impostazioni per tutti i file
              </span>
              <span class="sync-settings-subtitle">Colore escluso</span>
            </span>
          </label>
        </div>

        @if (sameSettingsForAll()) {
          <div class="item-settings-panel">
            <h4 class="item-settings-title">Impostazioni globali</h4>

            <div class="item-settings-grid">
              <label>
                {{ "CALC.MATERIAL" | translate }}
                <select formControlName="material">
                  @for (mat of materials(); track mat.value) {
                    <option [value]="mat.value">{{ mat.label }}</option>
                  }
                </select>
              </label>

              <label>
                {{ "CALC.NOZZLE" | translate }}
                <select formControlName="nozzleDiameter">
                  @for (n of nozzleDiameters(); track n.value) {
                    <option [value]="n.value">{{ n.label }}</option>
                  }
                </select>
              </label>
            </div>

            <div class="item-settings-grid">
              <label>
                {{ "CALC.PATTERN" | translate }}
                <select formControlName="infillPattern">
                  @for (p of infillPatterns(); track p.value) {
                    <option [value]="p.value">{{ p.label }}</option>
                  }
                </select>
              </label>

              <label>
                {{ "CALC.LAYER_HEIGHT" | translate }}
                <select formControlName="layerHeight">
                  @for (l of layerHeights(); track l.value) {
                    <option [value]="l.value">{{ l.label }}</option>
                  }
                </select>
              </label>
            </div>

            <div class="item-settings-grid">
              <label>
                {{ "CALC.INFILL" | translate }}
                <input
                  type="number"
                  min="0"
                  max="100"
                  formControlName="infillDensity"
                />
              </label>

              <label class="item-settings-checkbox">
                <input type="checkbox" formControlName="supportEnabled" />
                <span>{{ "CALC.SUPPORT" | translate }}</span>
              </label>
            </div>
          </div>
        } @else {
          @if (getSelectedItem(); as selectedItem) {
            <div class="item-settings-panel">
              <h4 class="item-settings-title">
                Impostazioni file: {{ selectedItem.file.name }}
              </h4>

              <div class="item-settings-grid">
                <label>
                  {{ "CALC.MATERIAL" | translate }}
                  <select formControlName="material">
                    @for (mat of materials(); track mat.value) {
                      <option [value]="mat.value">{{ mat.label }}</option>
                    }
                  </select>
                </label>

                <label>
                  {{ "CALC.NOZZLE" | translate }}
                  <select formControlName="nozzleDiameter">
                    @for (n of nozzleDiameters(); track n.value) {
                      <option [value]="n.value">{{ n.label }}</option>
                    }
                  </select>
                </label>
              </div>

              <div class="item-settings-grid">
                <label>
                  {{ "CALC.PATTERN" | translate }}
                  <select formControlName="infillPattern">
                    @for (p of infillPatterns(); track p.value) {
                      <option [value]="p.value">{{ p.label }}</option>
                    }
                  </select>
                </label>

                <label>
                  {{ "CALC.LAYER_HEIGHT" | translate }}
                  <select formControlName="layerHeight">
                    @for (
                      l of getLayerHeightOptionsForNozzle(
                        form.get("nozzleDiameter")?.value
                      );
                      track l.value
                    ) {
                      <option [value]="l.value">{{ l.label }}</option>
                    }
                  </select>
                </label>
              </div>

              <div class="item-settings-grid">
                <label>
                  {{ "CALC.INFILL" | translate }}
                  <input
                    type="number"
                    min="0"
                    max="100"
                    formControlName="infillDensity"
                  />
                </label>

                <label class="item-settings-checkbox">
                  <input type="checkbox" formControlName="supportEnabled" />
                  <span>{{ "CALC.SUPPORT" | translate }}</span>
                </label>
              </div>
            </div>
          }
        }
      }
    }

    @if (items().length === 0 && form.get("itemsTouched")?.value) {
      <div class="error-msg">{{ "CALC.ERR_FILE_REQUIRED" | translate }}</div>
    }
  </div>

  <app-input
    formControlName="notes"
    [label]="'CALC.NOTES' | translate"
    [placeholder]="'CALC.NOTES_PLACEHOLDER' | translate"
  ></app-input>

  <div class="actions">
    @if (loading() && uploadProgress() < 100) {
      <div class="progress-container">
        <div class="progress-bar">
          <div class="progress-fill" [style.width.%]="uploadProgress()"></div>
        </div>
      </div>
    }

    <app-button
      type="submit"
      [disabled]="items().length === 0 || loading()"
      [fullWidth]="true"
    >
      {{
        loading()
          ? uploadProgress() < 100
            ? ("CALC.UPLOADING" | translate)
            : ("CALC.PROCESSING" | translate)
          : ("CALC.CALCULATE" | translate)
      }}
    </app-button>
  </div>
</form>
