<div class="container-fluid">
  <!-- En-tête avec navigation -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <h4 class="mb-1">
            @if (user) {
              {{ getUserDisplayName() }}
            } @else {
              Profil Utilisateur
            }
          </h4>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item">
                <a href="javascript:void(0)" class="text-decoration-none">Profile Utilisateurs</a>
              </li>
            </ol>
          </nav>
        </div>
        
        <div class="d-flex gap-2">
          
          @if (user && !isEditing) {
            <button 
              class="btn btn-warning"
              (click)="openResetPasswordModal.emit()"
            >
              <ng-icon name="lucideKey" class="me-1"></ng-icon>
              Réinitialiser MDP
            </button>
            
            @if (user.enabled) {
              <button 
                class="btn btn-warning"
                (click)="disableUser()"
              >
                <ng-icon name="lucidePause" class="me-1"></ng-icon>
                Désactiver
              </button>
            } @else {
              <button 
                class="btn btn-success"
                (click)="enableUser()"
              >
                <ng-icon name="lucidePlay" class="me-1"></ng-icon>
                Activer
              </button>
            }
            
            <button 
              class="btn btn-primary"
              (click)="startEditing()"
            >
              <ng-icon name="lucideEdit" class="me-1"></ng-icon>
              Modifier
            </button>
          }
        </div>
      </div>
    </div>
  </div>

  <!-- Messages d'alerte -->
  @if (error) {
    <div class="alert alert-danger">
      <ng-icon name="lucideAlertCircle" class="me-2"></ng-icon>
      {{ error }}
    </div>
  }

  @if (success) {
    <div class="alert alert-success">
      <ng-icon name="lucideCheckCircle" class="me-2"></ng-icon>
      {{ success }}
    </div>
  }

  <div class="row">
    <!-- Loading State -->
    @if (loading) {
      <div class="col-12 text-center py-5">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Chargement...</span>
        </div>
        <p class="mt-2 text-muted">Chargement du profil...</p>
      </div>
    }

    <!-- User Profile -->
    @if (user && !loading) {
      <!-- Colonne de gauche - Informations de base -->
      <div class="col-xl-4 col-lg-5">
        <!-- Carte profil -->
        <div class="card">
          <div class="card-header bg-light">
            <h5 class="card-title mb-0">Profil Keycloak</h5>
          </div>
          <div class="card-body text-center">
            <!-- Avatar -->
            <div class="avatar-lg mx-auto mb-3">
              <div class="avatar-title bg-primary rounded-circle text-white fs-24">
                {{ getUserInitials() }}
              </div>
            </div>
            
            <h5>{{ getUserDisplayName() }}</h5>
            <p class="text-muted mb-2">@{{ user.username }}</p>
            
            <!-- Statut -->
            <span [class]="getStatusBadgeClass()" class="mb-3">
              {{ getStatusText() }}
            </span>

            <!-- Informations rapides -->
            <div class="mt-4 text-start">
              <div class="d-flex align-items-center mb-2">
                <ng-icon name="lucideMail" class="me-2 text-muted"></ng-icon>
                <small>{{ user.email }}</small>
              </div>
              <div class="d-flex align-items-center">
                <ng-icon name="lucideCalendar" class="me-2 text-muted"></ng-icon>
                <small>Créé le {{ formatTimestamp(user.createdTimestamp) }}</small>
              </div>
            </div>
          </div>
        </div>

        <!-- Carte rôles client -->
        <div class="card mt-3">
          <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Rôles Client</h5>
            @if (!isEditing) {
              <button 
                class="btn btn-outline-primary btn-sm"
                (click)="updateUserRoles()"
                [disabled]="updatingRoles"
              >
                @if (updatingRoles) {
                  <div class="spinner-border spinner-border-sm me-1" role="status">
                    <span class="visually-hidden">Chargement...</span>
                  </div>
                }
                Mettre à jour
              </button>
            }
          </div>
          <div class="card-body">
            <div class="row g-2">
              @for (role of availableRoles; track role) {
                <div class="col-6">
                  <div class="form-check">
                    <input 
                      class="form-check-input" 
                      type="checkbox" 
                      [id]="'role-' + role"
                      [checked]="isRoleSelected(role)"
                      (change)="toggleRole(role)"
                      [disabled]="isEditing"
                    >
                    <label class="form-check-label" [for]="'role-' + role">
                      <span class="badge" [ngClass]="getRoleBadgeClass(role)">
                        {{ role }}
                      </span>
                    </label>
                  </div>
                </div>
              }
            </div>
            
            <!-- Rôles actuels -->
            @if (user.clientRoles.length > 0) {
              <div class="mt-3">
                <h6>Rôles assignés :</h6>
                @for (role of user.clientRoles; track role) {
                  <span class="badge me-1 mb-1" [ngClass]="getRoleBadgeClass(role)">
                    {{ role }}
                  </span>
                }
              </div>
            }
          </div>
        </div>
      </div>

      <!-- Colonne de droite - Détails et édition -->
      <div class="col-xl-8 col-lg-7">
        <div class="card">
          <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
              @if (isEditing) {
                Modification du Profil
              } @else {
                Détails du Compte
              }
            </h5>
            
            @if (isEditing) {
              <div class="d-flex gap-2">
                <button 
                  type="button" 
                  class="btn btn-secondary btn-sm"
                  (click)="cancelEditing()"
                  [disabled]="saving"
                >
                  Annuler
                </button>
                <button 
                  type="button" 
                  class="btn btn-success btn-sm"
                  (click)="saveProfile()"
                  [disabled]="saving"
                >
                  @if (saving) {
                    <div class="spinner-border spinner-border-sm me-1" role="status">
                      <span class="visually-hidden">Chargement...</span>
                    </div>
                  }
                  Enregistrer
                </button>
              </div>
            }
          </div>

          <div class="card-body">
            <div class="row g-3">
              <!-- Prénom -->
              <div class="col-md-6">
                <label class="form-label">Prénom</label>
                @if (isEditing) {
                  <input 
                    type="text" 
                    class="form-control"
                    [(ngModel)]="editedUser.firstName"
                    placeholder="Entrez le prénom"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.firstName || 'Non défini' }}
                  </div>
                }
              </div>

              <!-- Nom -->
              <div class="col-md-6">
                <label class="form-label">Nom</label>
                @if (isEditing) {
                  <input 
                    type="text" 
                    class="form-control"
                    [(ngModel)]="editedUser.lastName"
                    placeholder="Entrez le nom"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.lastName || 'Non défini' }}
                  </div>
                }
              </div>

              <!-- Nom d'utilisateur -->
              <div class="col-md-6">
                <label class="form-label">Nom d'utilisateur</label>
                @if (isEditing) {
                  <input 
                    type="text" 
                    class="form-control"
                    [(ngModel)]="editedUser.username"
                    placeholder="Nom d'utilisateur"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.username }}
                  </div>
                }
              </div>

              <!-- Email -->
              <div class="col-md-6">
                <label class="form-label">Email</label>
                @if (isEditing) {
                  <input 
                    type="email" 
                    class="form-control"
                    [(ngModel)]="editedUser.email"
                    placeholder="email@exemple.com"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.email }}
                  </div>
                }
              </div>

              <!-- Statut activé -->
              @if (isEditing) {
                <div class="col-md-6">
                  <div class="form-check form-switch">
                    <input 
                      class="form-check-input" 
                      type="checkbox" 
                      id="enabledSwitch"
                      [(ngModel)]="editedUser.enabled"
                    >
                    <label class="form-check-label" for="enabledSwitch">
                      Compte activé
                    </label>
                  </div>
                </div>

                <!-- Email vérifié -->
                <div class="col-md-6">
                  <div class="form-check form-switch">
                    <input 
                      class="form-check-input" 
                      type="checkbox" 
                      id="emailVerifiedSwitch"
                      [(ngModel)]="editedUser.emailVerified"
                    >
                    <label class="form-check-label" for="emailVerifiedSwitch">
                      Email vérifié
                    </label>
                  </div>
                </div>
              }

              <!-- Informations système -->
              @if (!isEditing) {
                <div class="col-12">
                  <hr>
                  <h6>Informations Système</h6>
                  <div class="row">
                    <div class="col-md-6">
                      <label class="form-label">ID Utilisateur</label>
                      <div class="form-control-plaintext font-monospace small">
                        {{ user.id }}
                      </div>
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Date de création</label>
                      <div class="form-control-plaintext">
                        {{ formatTimestamp(user.createdTimestamp) }}
                      </div>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    }
  </div>
</div>