<!-- Bouton d'ouverture du modal -->
<button
  (click)="openFriendModal()"
  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
  type="button"
>
  Amis
</button>

<!-- Fond assombri -->
<div
  class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
  [ngClass]="{
    'opacity-0 pointer-events-none': !isFriendModalOpen,
    'opacity-100': isFriendModalOpen
  }"
  (click)="closeFriendModal()"
></div>

<!-- Modal principal -->
<div
  id="friends-modal"
  tabindex="-1"
  aria-hidden="true"
  [ngClass]="{
    'opacity-0 scale-50 pointer-events-none': !isFriendModalOpen,
    'opacity-100 scale-100': isFriendModalOpen
  }"
  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto"
>
  <div
    class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full my-8"
  >
    <!-- En-tête du modal -->
    <div
      class="flex items-center justify-between p-4 border-b dark:border-gray-700"
    >
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
        Liste d'amis
      </h3>
      <button
        (click)="closeFriendModal()"
        class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
      >
        ✕
      </button>
    </div>

    <!-- Barre de recherche -->
    <div class="p-4">
      <input
        type="text"
        id="search-friends"
        class="w-full p-2 border rounded-lg dark:bg-gray-700 dark:text-white"
        placeholder="Rechercher un ami..."
        [(ngModel)]="searchTerm"
        (ngModelChange)="onSearchTermChange($event)"
      />

      <div *ngIf="listUser" class="text-gray-500 text-sm">
        <div
          style="padding-top: 10px"
          *ngFor="let user of listUser"
          class="friend flex items-center justify-between space-x-3"
        >
          <div class="friend flex items-center space-x-3">
            <img
              class="w-10 h-10 rounded-full"
              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
              alt="Friend 2"
            />
            <span class="text-gray-900 dark:text-white">{{
              user.username
            }}</span>
          </div>
          <button
            (click)="addUser(user.uid)"
            class="p-2 bg-green-500 text-white rounded-full"
          >
            <svg
              class="w-6 h-6 text-gray-800 dark:text-white"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                fill-rule="evenodd"
                d="M9 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4H7Zm8-1a1 1 0 0 1 1-1h1v-1a1 1 0 1 1 2 0v1h1a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0v-1h-1a1 1 0 0 1-1-1Z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div class="p-4 space-y-3">
      <p class="dark:text-white">Amis</p>
      <div
        *ngIf="hasNoAcceptedFriends()"
        class="text-gray-500 dark:text-gray-300"
      >
        <p>
          <small><em>Aucun amis</em></small>
        </p>
      </div>
      <div *ngFor="let friend of listFriend">
        <div
          *ngIf="friend.status == 'accepted'"
          class="flex justify-between items-center w-full space-x-2"
        >
          <div class="friend flex items-center space-x-3">
            <img
              class="w-10 h-10 rounded-full"
              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
              alt="Friend 2"
            />
            <span class="text-gray-900 dark:text-white">{{
              friend.username
            }}</span>
          </div>
          <button
            (click)="deleteFriend(friend.id)"
            class="p-2 bg-red-500 text-white rounded-full"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-4 h-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6h16zM10 11v6m4-6v6"
              />
            </svg>
          </button>
        </div>
      </div>
      <div *ngIf="hasPendingApprovalFriend()">
        <p class="dark:text-white">Demandes</p>
        <hr class="border-gray-300 my-3" />
      </div>
      <div *ngFor="let friend of listFriend">
        <div
          *ngIf="friend.status == 'pending_approval'"
          class="flex justify-between items-center w-full"
        >
          <div class="friend flex items-center space-x-3">
            <img
              class="w-10 h-10 rounded-full"
              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
              alt="Friend 2"
            />
            <span class="text-gray-900 dark:text-white">{{
              friend.username
            }}</span>
          </div>
          <div class="flex space-x-2">
            <button
              (click)="onAcceptOrDeny(friend.id, 'accept')"
              class="p-2 bg-green-500 text-white rounded-full"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-4 h-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M5 13l4 4L19 7"
                ></path>
              </svg>
            </button>
            <button
              (click)="onAcceptOrDeny(friend.id, 'deny')"
              class="p-2 bg-red-500 text-white rounded-full"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-4 h-4"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M6 18L18 6M6 6l12 12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div *ngIf="hasPendingFriend()">
        <p class="dark:text-white">En attente</p>
        <hr class="border-gray-300 my-3" />
      </div>
      <div *ngFor="let friend of listFriend">
        <div
          *ngIf="friend.status == 'pending'"
          class="flex justify-between items-center w-full"
        >
          <div class="friend flex items-center space-x-3">
            <img
              class="w-10 h-10 rounded-full"
              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
              alt="Friend 2"
            />
            <span class="text-gray-900 dark:text-white">{{
              friend.username
            }}</span>
          </div>
          <svg
            class="w-6 h-6 text-gray-800 dark:text-white"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M18.5 4h-13m13 16h-13M8 20v-3.333a2 2 0 0 1 .4-1.2L10 12.6a1 1 0 0 0 0-1.2L8.4 8.533a2 2 0 0 1-.4-1.2V4h8v3.333a2 2 0 0 1-.4 1.2L13.957 11.4a1 1 0 0 0 0 1.2l1.643 2.867a2 2 0 0 1 .4 1.2V20H8Z"
            />
          </svg>
        </div>
      </div>

      <!-- Pied du modal -->
      <div class="flex justify-end p-4 border-t dark:border-gray-700">
        <button
          (click)="closeFriendModal()"
          class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
        >
          Fermer
        </button>
      </div>
    </div>
  </div>
</div>
