@if (loading().action === ActionType.UPDATE && loading().isLoading && onSubmitted()) {
  <app-loading message="Mise à jour de l'image de couverture..." />
} @else {
  <ng-container *ngTemplateOutlet="content" />
}

<ng-template #content>
  <div class="space-y-6 max-w-md mx-auto">
    <!-- Titre -->
    <h3 class="font-ubuntu font-bold text-xl uppercase dark:text-white text-center sm:text-start">
      Aperçu du projet
    </h3>

    <!-- Prévisualisation de l'image -->
    <div class="flex flex-col items-center space-y-4">
      <div class="relative">
        <div
          class="w-40 h-40 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-lg"
        >
          <img
            [alt]="project()?.nom || 'nouveau-projet'"
            class="object-cover object-center h-full w-full"
            [src]="currentImageUrl"
            loading="lazy"
          />
        </div>

        <!-- Bouton de suppression si preview existe -->
        @if (imagePreviewUrl !== null) {
          <button
            type="button"
            (click)="fileManagerService.removeFile()"
            class="absolute -top-2 -right-2 p-2 bg-red-600 hover:bg-red-700 rounded-full text-white transition-colors shadow-lg"
            aria-label="Supprimer l'image"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="w-4 h-4"
            >
              <path
                fill-rule="evenodd"
                d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        }
      </div>

      <!-- Informations sur le fichier sélectionné -->
      @if (file(); as file) {
        <div class="text-center space-y-1">
          <p class="text-sm text-gray-700 dark:text-gray-300 font-medium break-all max-w-[250px]">
            {{ file.name }}
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400">
            {{ fileManagerService.formatFileSize(file.size) }}
          </p>
        </div>
      }
    </div>

    <!-- Message d'erreur -->
    @if (fileError()) {
      <div
        class="flex items-start space-x-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5"
        >
          <path
            fill-rule="evenodd"
            d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
            clip-rule="evenodd"
          />
        </svg>
        <p class="text-sm text-red-800 dark:text-red-200">{{ fileError() }}</p>
      </div>
    }

    <!-- Bouton de sélection -->
    <label
      for="uploadFile1"
      class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2 bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-lg cursor-pointer transition-colors w-full"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-white" viewBox="0 0 32 32">
        <path
          d="M23.75 11.044a7.99 7.99 0 0 0-15.5-.009A8 8 0 0 0 9 27h3a1 1 0 0 0 0-2H9a6 6 0 0 1-.035-12 1.038 1.038 0 0 0 1.1-.854 5.991 5.991 0 0 1 11.862 0A1.08 1.08 0 0 0 23 13a6 6 0 0 1 0 12h-3a1 1 0 0 0 0 2h3a8 8 0 0 0 .75-15.956z"
        />
        <path
          d="M20.293 19.707a1 1 0 0 0 1.414-1.414l-5-5a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 1.414 1.414L15 16.414V29a1 1 0 0 0 2 0V16.414z"
        />
      </svg>
      <span class="text-sm font-medium">
        {{ file() !== null ? "Changer l'image" : 'Sélectionner une image' }}
      </span>
      <input
        type="file"
        id="uploadFile1"
        class="hidden"
        accept="image/jpeg,image/png,image/webp"
        (change)="fileManagerService.onPictureChange($event)"
      />
    </label>

    <!-- Information sur les formats acceptés -->
    <p class="text-xs text-gray-500 dark:text-gray-400 text-center">
      Formats acceptés : JPEG, PNG, WebP | Taille maximale : 5 Mo
    </p>

    <!-- Bouton de soumission -->
    @if (file() !== null && !fileError()) {
      <button
        type="button"
        (click)="onSubmit()"
        [disabled]="!canSubmit"
        class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
      >
        Mettre à jour l'image du projet
      </button>
    }
  </div>
</ng-template>
