<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)" (click)="back.emit()" class="text-decoration-none cursor-pointer">
                  Utilisateurs
                </a>
              </li>
              <li class="breadcrumb-item active" aria-current="page">
                @if (user) {
                  {{ getUserDisplayName() }}
                } @else {
                  Profil
                }
              </li>
            </ol>
          </nav>
        </div>
        
        <div class="d-flex gap-2">
          <!-- Bouton de réinitialisation de mot de passe -->
          @if (user && canEditUsers && !isEditing) {
            <button 
              class="btn btn-warning"
              (click)="resetPassword()"
            >
              <ng-icon name="lucideKey" class="me-1"></ng-icon>
              Réinitialiser MDP
            </button>
            
            <!-- Bouton activation/désactivation -->
            @if (user.enabled) {
              <button 
                class="btn btn-outline-warning"
                (click)="disableUser()"
              >
                <ng-icon name="lucidePause" class="me-1"></ng-icon>
                Désactiver
              </button>
            } @else {
              <button 
                class="btn btn-outline-success"
                (click)="enableUser()"
              >
                <ng-icon name="lucidePlay" class="me-1"></ng-icon>
                Activer
              </button>
            }
            
            <!-- Bouton modification -->
            <button 
              class="btn btn-primary"
              (click)="startEditing()"
            >
              <ng-icon name="lucideEdit" class="me-1"></ng-icon>
              Modifier
            </button>
          }
        </div>
      </div>
    </div>
  </div>

  <!-- Indicateur de permissions -->
  @if (currentUserRole && !canEditUsers) {
    <div class="row mb-3">
      <div class="col-12">
        <div class="alert alert-warning">
          <div class="d-flex align-items-center">
            <ng-icon name="lucideShield" class="me-2"></ng-icon>
            <div>
              <strong>Permissions limitées :</strong> Vous ne pouvez que consulter ce profil
            </div>
          </div>
        </div>
      </div>
    </div>
  }

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

  @if (success) {
    <div class="alert alert-success">
      <div class="d-flex align-items-center">
        <ng-icon name="lucideCheckCircle" class="me-2"></ng-icon>
        <div>{{ success }}</div>
      </div>
    </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 Utilisateur Hub</h5>
          </div>
          <div class="card-body text-center">
            <!-- Avatar -->
            <div class="avatar-lg mx-auto mb-3">
              <div class="avatar-title bg-primary bg-opacity-10 rounded-circle text-primary 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>
                @if (!user.emailVerified) {
                  <ng-icon name="lucideAlertTriangle" class="ms-1 text-warning" size="14" title="Email non vérifié"></ng-icon>
                }
              </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>
              @if (user.lastLogin) {
                <div class="d-flex align-items-center mt-2">
                  <ng-icon name="lucideLogIn" class="me-2 text-muted"></ng-icon>
                  <small>Dernière connexion : {{ formatTimestamp(user.lastLogin) }}</small>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- Carte rôle utilisateur -->
        <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ôle Utilisateur</h5>
            @if (canManageRoles && !isEditing) {
              <span class="badge bg-info">Modifiable</span>
            }
          </div>
          <div class="card-body">
            <!-- Rôle actuel -->
            <div class="text-center mb-3">
              <span class="badge d-flex align-items-center justify-content-center" [ngClass]="getRoleBadgeClass(user.role)">
                <ng-icon [name]="getRoleIcon(user.role)" class="me-2"></ng-icon>
                {{ getRoleLabel(user.role) }}
              </span>
              <small class="text-muted d-block mt-1">
                {{ getRoleDescription(user.role) }}
              </small>
            </div>

            <!-- Changement de rôle -->
            @if (canManageRoles && !isEditing) {
              <div class="mt-3">
                <label class="form-label fw-semibold">Changer le rôle</label>
                <select 
                  class="form-select" 
                  [value]="user.role"
                  (change)="updateUserRole($any($event.target).value)"
                  [disabled]="updatingRoles"
                >
                  <option value="" disabled>Sélectionnez un nouveau rôle</option>
                  @for (role of availableRoles; track role.value) {
                    <option 
                      [value]="role.value"
                      [disabled]="!canAssignRole(role.value) || role.value === user.role"
                    >
                      {{ role.label }}
                      @if (!canAssignRole(role.value)) {
                        (Non autorisé)
                      } @else if (role.value === user.role) {
                        (Actuel)
                      }
                    </option>
                  }
                </select>
                <div class="form-text">
                  @if (updatingRoles) {
                    <div class="spinner-border spinner-border-sm me-1" role="status">
                      <span class="visually-hidden">Mise à jour...</span>
                    </div>
                    Mise à jour en cours...
                  } @else {
                    Sélectionnez un nouveau rôle pour cet utilisateur
                  }
                </div>
              </div>
            } @else if (!canManageRoles) {
              <div class="alert alert-info mt-3">
                <small>
                  <ng-icon name="lucideShield" class="me-1"></ng-icon>
                  Vous n'avez pas la permission de modifier les rôles
                </small>
              </div>
            }
          </div>
        </div>

        <!-- Informations de création -->
        <div class="card mt-3">
          <div class="card-header bg-light">
            <h6 class="card-title mb-0">Informations de Création</h6>
          </div>
          <div class="card-body">
            <div class="row g-2 small">
              <div class="col-12">
                <strong>Créé par :</strong>
                <div class="text-muted">{{ user.createdByUsername || 'Système' }}</div>
              </div>
              <div class="col-12">
                <strong>Date de création :</strong>
                <div class="text-muted">{{ formatTimestamp(user.createdTimestamp) }}</div>
              </div>
              <div class="col-12">
                <strong>Type d'utilisateur :</strong>
                <div class="text-muted">
                  <span class="badge bg-secondary">{{ user.userType }}</span>
                </div>
              </div>
            </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) {
                <ng-icon name="lucideEdit" class="me-2"></ng-icon>
                Modification du Profil
              } @else {
                <ng-icon name="lucideUser" class="me-2"></ng-icon>
                Détails du Compte
              }
            </h5>
            
            @if (isEditing) {
              <div class="d-flex gap-2">
                <button 
                  type="button" 
                  class="btn btn-outline-secondary btn-sm"
                  (click)="cancelEditing()"
                  [disabled]="saving"
                >
                  <ng-icon name="lucideX" class="me-1"></ng-icon>
                  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>
                  }
                  <ng-icon name="lucideCheck" class="me-1"></ng-icon>
                  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"
                    [disabled]="saving"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.firstName || 'Non renseigné' }}
                  </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"
                    [disabled]="saving"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.lastName || 'Non renseigné' }}
                  </div>
                }
              </div>

              <!-- Nom d'utilisateur -->
              <div class="col-md-6">
                <label class="form-label">Nom d'utilisateur</label>
                <div class="form-control-plaintext font-monospace">
                  {{ user.username }}
                </div>
                <div class="form-text">
                  Le nom d'utilisateur ne peut pas être modifié
                </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"
                    [disabled]="saving"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.email }}
                    @if (!user.emailVerified) {
                      <span class="badge bg-warning ms-2">Non vérifié</span>
                    }
                  </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"
                      [disabled]="saving"
                    >
                    <label class="form-check-label" for="enabledSwitch">
                      Compte activé
                    </label>
                  </div>
                  <div class="form-text">
                    L'utilisateur peut se connecter si activé
                  </div>
                </div>
              } @else {
                <div class="col-md-6">
                  <label class="form-label">Statut du compte</label>
                  <div class="form-control-plaintext">
                    <span [class]="getStatusBadgeClass()">
                      {{ getStatusText() }}
                    </span>
                  </div>
                </div>
              }

              <!-- Informations système -->
              @if (!isEditing) {
                <div class="col-12">
                  <hr>
                  <h6 class="mb-3">
                    <ng-icon name="lucideSettings" class="me-2"></ng-icon>
                    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 text-truncate">
                        {{ 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 class="col-md-6">
                      <label class="form-label">Créé par</label>
                      <div class="form-control-plaintext">
                        {{ user.createdByUsername || 'Système' }}
                      </div>
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Type d'utilisateur</label>
                      <div class="form-control-plaintext">
                        <span class="badge bg-secondary">{{ user.userType }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- Actions supplémentaires -->
        @if (!isEditing && canEditUsers) {
          <div class="card mt-3">
            <div class="card-header bg-light">
              <h6 class="card-title mb-0">Actions de Gestion</h6>
            </div>
            <div class="card-body">
              <div class="row g-2">
                <div class="col-md-4">
                  <button 
                    class="btn btn-outline-warning w-100"
                    (click)="resetPassword()"
                  >
                    <ng-icon name="lucideKey" class="me-1"></ng-icon>
                    Réinitialiser MDP
                  </button>
                </div>
                <div class="col-md-4">
                  @if (user.enabled) {
                    <button 
                      class="btn btn-outline-secondary w-100"
                      (click)="disableUser()"
                    >
                      <ng-icon name="lucideUserX" class="me-1"></ng-icon>
                      Désactiver
                    </button>
                  } @else {
                    <button 
                      class="btn btn-outline-success w-100"
                      (click)="enableUser()"
                    >
                      <ng-icon name="lucideUserCheck" class="me-1"></ng-icon>
                      Activer
                    </button>
                  }
                </div>
                <div class="col-md-4">
                  <button 
                    class="btn btn-outline-primary w-100"
                    (click)="startEditing()"
                  >
                    <ng-icon name="lucideEdit" class="me-1"></ng-icon>
                    Modifier
                  </button>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>