@if (profile(); as profile) {
  <section
    class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800"
  >
    <div class="container mx-auto px-4 py-6 md:py-12">
      <div class="max-w-7xl mx-auto">
        <!-- Header avec bannière -->
        <div class="relative rounded-2xl overflow-hidden shadow-xl mb-8 animate-fade-in">
          <div class="h-48 md:h-64 bg-cover bg-center bg-auth relative">
            <!-- Overlay -->
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>

            <!-- Navigation -->
            <div class="relative z-10 p-4 flex justify-between items-start">
              <!-- Bouton retour -->
              <button
                (click)="location.back()"
                class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-white/20 backdrop-blur-md rounded-full hover:bg-white/30 transition-all duration-300 hover:scale-110"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  class="w-6 h-6 text-white group-hover:-translate-x-1 transition-transform"
                >
                  <title>Retour</title>
                  <path
                    fill-rule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
                    clip-rule="evenodd"
                  />
                </svg>
              </button>

              <!-- Badge vérifié -->
              @if (profile.estVerifier) {
                <div
                  class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="w-5 h-5 md:w-6 md:h-6 text-purple-300"
                  >
                    <title>Profil vérifié</title>
                    <path
                      fill-rule="evenodd"
                      d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  <span class="text-white text-sm font-medium hidden md:inline">Vérifié</span>
                </div>
              }
            </div>
          </div>

          <!-- Avatar et info principale -->
          <div class="relative -mt-16 md:-mt-22 px-4 md:px-8 pb-6">
            <div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
              <!-- Avatar avec indicateur de visibilité -->
              @if (user(); as user) {
                <div class="relative group animate-slide-up">
                  <div
                    class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
                  >
                    <div class="w-full h-full rounded-full overflow-hidden bg-white">
                      <img
                        alt="{{ user.name }}"
                        class="object-cover w-full h-full"
                        src="{{ user.avatar }}"
                      />
                    </div>
                  </div>

                  <!-- Badge de visibilité sous l'avatar -->
                  <div class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-auto min-w-max">
                    @if (isProfileVisible()) {
                      <div
                        class="flex items-center gap-1.5 bg-green-500 text-white px-3 py-1.5 rounded-full shadow-lg text-xs md:text-sm font-medium animate-fade-in"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="w-3.5 h-3.5 md:w-4 md:h-4"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                          <path
                            fill-rule="evenodd"
                            d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                            clip-rule="evenodd"
                          />
                        </svg>
                        <span class="hidden sm:inline">Profil visible</span>
                        <span class="sm:hidden">Visible</span>
                      </div>
                    } @else {
                      <div
                        class="flex items-center gap-1.5 bg-orange-500 text-white px-3 py-1.5 rounded-full shadow-lg text-xs md:text-sm font-medium animate-fade-in"
                        [title]="'Champs manquants: ' + missingFields().join(', ')"
                      >
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="w-3.5 h-3.5 md:w-4 md:h-4"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fill-rule="evenodd"
                            d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
                            clip-rule="evenodd"
                          />
                          <path
                            d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
                          />
                        </svg>
                        <span class="hidden sm:inline">Profil non visible</span>
                        <span class="sm:hidden">Non visible</span>
                      </div>
                    }
                  </div>
                </div>
              }

              <!-- Nom et titre -->
              @if (user(); as user) {
                <div
                  class="flex-1 text-center md:text-left mb-4 mt-8 md:mt-4 md:mb-0 animate-slide-up animation-delay-100"
                >
                  <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
                    {{ user.name }}
                  </h1>

                  <p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
                    {{ profile.profession }}
                  </p>
                </div>
              }
            </div>

            <div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6 mt-4">
              <!-- Message d'information si profil non visible -->
              @if (!isProfileVisible()) {
                <div
                  class="mt-3 inline-flex items-center gap-2 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 text-orange-700 dark:text-orange-300 px-3 py-2 rounded-lg text-sm"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="w-4 h-4 flex-shrink-0"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  <span
                    >Complétez votre <i class="font-bold">{{ missingFields().join(', ') }}</i> pour
                    être visible</span
                  >
                </div>
              }
            </div>
          </div>
        </div>

        <!-- Contenu principal -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
          <!-- Sidebar - Informations -->
          <aside class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
            <!-- Card Apropos -->
            @if (profile.apropos) {
              <div
                class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
              >
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-6 w-6 text-indigo-500"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                      clip-rule="evenodd"
                    />
                  </svg>
                  À propos
                </h3>
                <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
                  {{ profile.apropos }}
                </p>
              </div>
            }

            <!-- Card Bio -->
            <div
              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
            >
              <h3
                class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5 text-indigo-500"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                    clip-rule="evenodd"
                  />
                </svg>
                Biographie
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                {{ profile.bio }}
              </p>
            </div>

            <!-- Card Secteur -->
            @if (profile.secteur) {
              <div
                class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
              >
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5 text-indigo-500"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
                    />
                  </svg>
                  Secteur
                </h3>
                <app-chips [sectorId]="profile.secteur" />
              </div>
            }

            <!-- Card Réseaux -->
            @if (profile.reseaux) {
              <div
                class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
              >
                <h3
                  class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5 text-indigo-500"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"
                    />
                    <path
                      d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
                    />
                  </svg>
                  Réseaux
                </h3>
                <app-reseaux [reseaux]="profile.reseaux" />
              </div>
            }
          </aside>

          <!-- Contenu principal avec onglets -->
          <main class="lg:col-span-3 animate-slide-up animation-delay-300">
            <!-- Navigation par onglets -->
            <ng-container *ngTemplateOutlet="menu_nav" />

            <!-- Contenu des onglets -->
            <ng-container *ngTemplateOutlet="menu_content" />
          </main>
        </div>
      </div>
    </div>
  </section>
}

<ng-template #menu_nav>
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 mb-6">
    <nav class="flex flex-wrap gap-2">
      <button
        class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
        [class.active-tab]="menu() === 'location'"
        (click)="menu.set('location')"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-5 h-5"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
          />
        </svg>
        <span class="hidden sm:inline">Localisation</span>
      </button>

      <button
        (click)="menu.set('settings')"
        [class.active-tab]="menu() === 'settings'"
        class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-5 h-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
          />
        </svg>
        <span class="hidden sm:inline">Paramètres</span>
      </button>

      <button
        (click)="menu.set('home')"
        [class.active-tab]="menu() === 'home'"
        class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
      >
        @if (missingFields()!.includes('nom')) {
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5 flex-shrink-0 text-orange-500"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
              clip-rule="evenodd"
            />
          </svg>
        } @else {
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
            />
          </svg>
        }
        <span class="hidden sm:inline">Mon profil</span>
      </button>

      <button
        (click)="menu.set('projects')"
        [class.active-tab]="menu() === 'projects'"
        class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-5 h-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
          />
        </svg>
        <span class="hidden sm:inline">Mes projets</span>
      </button>

      <button
        (click)="menu.set('update')"
        [class.active-tab]="menu() === 'update'"
        class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
      >
        @if (
          missingFields()!.includes("secteur d'activité") || missingFields()!.includes('profession')
        ) {
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5 flex-shrink-0 text-orange-500"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
              clip-rule="evenodd"
            />
          </svg>
        } @else {
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
              clip-rule="evenodd"
            />
          </svg>
        }
        <span class="hidden sm:inline">Mes informations</span>
      </button>

      <button
        (click)="menu.set('cv')"
        [class.active-tab]="menu() === 'cv'"
        class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-5 h-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
          />
        </svg>
        <span class="hidden sm:inline">Lecteur PDF</span>
      </button>
    </nav>
  </div>
</ng-template>

<ng-template #menu_content>
  <div class="tab-content">
    @switch (menu().toLowerCase()) {
      @case ('location') {
        <app-my-profile-map [profile]="profile()" />
      }
      @case ('settings') {
        <app-settings [profile]="profile()" />
      }
      @case ('home') {
        @if (!userLoading().isLoading) {
          <app-update-user [user]="user()" />
        } @else {
          <app-loading message="Chargement encours..." />
        }
      }
      @case ('projects') {
        <app-my-profile-project-list [projectIds]="profile().projets" [userId]="user().id" />
        <router-outlet />
      }
      @case ('update') {
        <app-my-profile-update-form [profile]="profile()" />
      }
      @case ('cv') {
        <app-pdf-viewer [profile]="profile()" />
      }
      @default {
        @if (!userLoading().isLoading) {
          <app-update-user [user]="user()" />
        } @else {
          <app-loading message="Chargement encours..." />
        }
      }
    }
  </div>
</ng-template>
