<div class="form-group" [formGroup]="form" [ngSwitch]="field.controlType || field.type">

  <!-- Mode Read-Only -->
  <ng-container *ngIf="isReadOnly()">
    <div class="readonly-field">
      <label class="readonly-label">{{ getLabel() }}</label>
      <!-- Référence cliquable -->
      <div *ngIf="isReferenceWithId(); else plainReadonly"
           class="readonly-value reference-link"
           (click)="onReferenceClick()"
           title="Cliquer pour voir le détail">
        <mat-icon class="reference-icon">open_in_new</mat-icon>
        {{ getReadOnlyValue() }}
      </div>
      <ng-template #plainReadonly>
        <div class="readonly-value">{{ getReadOnlyValue() }}</div>
      </ng-template>
    </div>
  </ng-container>

  <!-- Mode éditable (normal) -->
  <ng-container *ngIf="!isReadOnly()">

  <!-- ========== TYPES HARMONIZED-CREATE-VIEW (existants) ========== -->

  <!-- Text inputs -->
  <ng-template [ngSwitchCase]="'text'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        [formControlName]="getControlName()"
        [type]="field?.valueType || 'text'"
        [name]="getControlName()"
        [placeholder]="getLabel()"
        [id]="getControlName()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
        [minlength]="field?.validators?.minlength"
        [maxlength]="field?.validators?.maxlength"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">
      {{ getErrorMessage() }}
    </mat-error>
  </ng-template>

  <!-- Number inputs -->
  <ng-template [ngSwitchCase]="'number'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        [formControlName]="getControlName()"
        type="number"
        [name]="getControlName()"
        [id]="getControlName()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">
      {{ getErrorMessage() }}
    </mat-error>
  </ng-template>

  <!-- Select inputs -->
  <ng-template [ngSwitchCase]="'select'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <mat-select
        [formControlName]="getControlName()"
        [id]="getControlName()"
        [required]="isRequired()"
      >
        <mat-option
          *ngFor="let option of field?.options"
          [value]="option?.value"
        >
          {{ option.optionName || option.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">
      {{ getErrorMessage() }}
    </mat-error>
  </ng-template>

  <!-- Multiselect inputs -->
  <ng-template [ngSwitchCase]="'multiselect'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <mat-select
        [formControlName]="getControlName()"
        [id]="getControlName()"
        [required]="isRequired()"
        multiple
      >
        <mat-option
          *ngFor="let option of field?.options"
          [value]="option?.value"
        >
          {{ option.optionName || option.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </ng-template>

  <!-- Radio inputs -->
  <ng-template [ngSwitchCase]="'radio'">
    <div *ngFor="let option of field?.options" class="form-group row">
      <input
        [formControlName]="getControlName()"
        type="radio"
        [name]="getControlName()"
        [value]="option.value"
        [required]="isRequired()"
      />
      <label [for]="getControlName()">{{ option?.optionName }}</label>
    </div>
  </ng-template>

  <!-- ========== TYPES PROJECTS.COMPONENT (nouveaux) ========== -->

  <!-- String -->
  <ng-template [ngSwitchCase]="'string'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="text"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Date -->
  <ng-template [ngSwitchCase]="'date'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="date"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- DateTime -->
  <ng-template [ngSwitchCase]="'datetime'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="datetime-local"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Currency -->
  <ng-template [ngSwitchCase]="'currency'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="number"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
        step="0.01"
      />
      <span matSuffix>€</span>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Double -->
  <ng-template [ngSwitchCase]="'double'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="number"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
        step="0.01"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Float -->
  <ng-template [ngSwitchCase]="'float'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="number"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
        step="0.01"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Integer -->
  <ng-template [ngSwitchCase]="'integer'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="number"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Picklist -->
  <ng-template [ngSwitchCase]="'picklist'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <mat-select
        [formControlName]="getControlName()"
        [required]="isRequired()"
      >
        <mat-option *ngFor="let option of field?.options" [value]="option.value">
          {{ option.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Reference (autocomplétion) -->
  <ng-template [ngSwitchCase]="'reference'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        [placeholder]="getLabel()"
        [matAutocomplete]="auto"
        [formControlName]="getControlName()"
        [required]="isRequired()"
        (input)="onAutocompleteInput($any($event.target).value)"
        (focus)="onAutocompleteFocused($event)"
      />
      <mat-icon matSuffix class="search-icon">search</mat-icon>
      <mat-spinner matSuffix diameter="20" *ngIf="isLoadingAutocomplete" class="loading-spinner"></mat-spinner>
    </mat-form-field>

    <mat-autocomplete
      #auto="matAutocomplete"
      (optionSelected)="onAutocompleteSelected($event)"
      [displayWith]="displayFn || defaultDisplayFn">
      <mat-option *ngFor="let item of autocompleteData" [value]="item" class="autocomplete-option">
        <div class="option-content">
          <mat-icon class="option-icon">business</mat-icon>
          <div class="option-details">
            <div class="option-name" [innerHTML]="item.name"></div>
          </div>
        </div>
      </mat-option>
      <mat-option disabled *ngIf="!isLoadingAutocomplete && autocompleteData?.length === 0" class="no-results-option">
        <div class="no-results">
          <mat-icon>search_off</mat-icon>
          <span>Aucun résultat trouvé</span>
        </div>
      </mat-option>
    </mat-autocomplete>

    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- ========== TYPES ADDITIONNELS ========== -->

  <!-- Checkbox -->
  <ng-template [ngSwitchCase]="'checkbox'">
    <div class="checkbox-wrapper">
      <mat-checkbox
        [formControlName]="getControlName()"
        [required]="isRequired()"
        color="primary"
      >
        {{ getLabel() }}
      </mat-checkbox>
      <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
    </div>
  </ng-template>

  <!-- Boolean (équivalent checkbox pour projects.component) -->
  <ng-template [ngSwitchCase]="'boolean'">
    <div class="checkbox-wrapper">
      <mat-checkbox
        [formControlName]="getControlName()"
        [required]="isRequired()"
        color="primary"
      >
        {{ getLabel() }}
      </mat-checkbox>
      <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
    </div>
  </ng-template>

  <!-- File Upload -->
  <ng-template [ngSwitchCase]="'file'">
    <div class="file-upload-wrapper">
      <mat-form-field class="example-full-width">
        <mat-label>{{ getLabel() }}</mat-label>
        <input
          matInput
          [value]="getCurrentValue()"
          [placeholder]="getLabel()"
          readonly
          [required]="isRequired()"
        />
        <button mat-icon-button matSuffix type="button" (click)="fileInput.click()">
          <mat-icon>attach_file</mat-icon>
        </button>
      </mat-form-field>

      <input
        #fileInput
        type="file"
        hidden
        [accept]="getAcceptedTypes()"
        (change)="onFileSelected($event)"
      />

      <div class="file-info" *ngIf="getCurrentValue()">
        <mat-icon class="file-icon">description</mat-icon>
        <span class="file-name">{{ getCurrentValue() }}</span>
      </div>

      <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
    </div>
  </ng-template>

  <!-- Email -->
  <ng-template [ngSwitchCase]="'email'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="email"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
      <mat-icon matSuffix>email</mat-icon>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Tel/Phone -->
  <ng-template [ngSwitchCase]="'tel'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="tel"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
      <mat-icon matSuffix>phone</mat-icon>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- URL -->
  <ng-template [ngSwitchCase]="'url'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="url"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
      <mat-icon matSuffix>link</mat-icon>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Password -->
  <ng-template [ngSwitchCase]="'password'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="password"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [required]="isRequired()"
      />
      <mat-icon matSuffix>lock</mat-icon>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- ========== TYPES TEMPORELS ADDITIONNELS ========== -->

  <!-- Time -->
  <ng-template [ngSwitchCase]="'time'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="time"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
      <mat-icon matSuffix>schedule</mat-icon>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Month -->
  <ng-template [ngSwitchCase]="'month'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="month"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
      <mat-icon matSuffix>calendar_month</mat-icon>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- Week -->
  <ng-template [ngSwitchCase]="'week'">
    <mat-form-field class="example-full-width">
      <mat-label>{{ getLabel() }}</mat-label>
      <input
        matInput
        type="week"
        [formControlName]="getControlName()"
        [placeholder]="getLabel()"
        [value]="getCurrentValue()"
        [required]="isRequired()"
      />
      <mat-icon matSuffix>date_range</mat-icon>
    </mat-form-field>
    <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
  </ng-template>

  <!-- ========== TYPES RANGE & COLOR ========== -->

  <!-- Color -->
  <ng-template [ngSwitchCase]="'color'">
    <div class="color-picker-wrapper">
      <mat-form-field class="example-full-width">
        <mat-label>{{ getLabel() }}</mat-label>
        <input
          matInput
          [value]="getCurrentValue() || '#000000'"
          [placeholder]="getLabel()"
          readonly
          [required]="isRequired()"
        />
        <button mat-icon-button matSuffix type="button" (click)="colorInput.click()">
          <mat-icon [style.color]="getCurrentValue() || '#000000'">palette</mat-icon>
        </button>
      </mat-form-field>

      <input
        #colorInput
        type="color"
        hidden
        [formControlName]="getControlName()"
        [value]="getCurrentValue() || '#000000'"
      />

      <div class="color-preview" *ngIf="getCurrentValue()">
        <div class="color-swatch" [style.background-color]="getCurrentValue()"></div>
        <span class="color-value">{{ getCurrentValue() }}</span>
      </div>

      <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
    </div>
  </ng-template>

  <!-- Range (Slider) -->
  <ng-template [ngSwitchCase]="'range'">
    <div class="range-wrapper">
      <label class="range-label">{{ getLabel() }}</label>
      <div class="range-container">
        <input
          type="range"
          class="range-input"
          [formControlName]="getControlName()"
          [min]="field?.min || 0"
          [max]="field?.max || 100"
          [step]="field?.step || 1"
          [required]="isRequired()"
        />
        <span class="range-value">{{ getControl()?.value || field?.min || 0 }}</span>
      </div>
      <div class="range-minmax">
        <span>{{ field?.min || 0 }}</span>
        <span>{{ field?.max || 100 }}</span>
      </div>
      <mat-error *ngIf="(hasError() && submitted) || hasError()">{{ getErrorMessage() }}</mat-error>
    </div>
  </ng-template>

  </ng-container>
  <!-- Fin mode éditable -->

</div>

