<!-- my-profile.html -->
<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) {
              Mon Profil - {{ getUserDisplayName() }}
            } @else {
              Mon Profil
            }
          </h4>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item active">Mon Profil</li>
            </ol>
          </nav>
        </div>
        
        <div class="d-flex gap-2">
          @if (user && !isEditing) {
            <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 de votre 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">Mon Profil</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>Membre depuis {{ formatTimestamp(user.createdTimestamp) }}</small>
              </div>
              <div class="d-flex align-items-center mt-2">
                <ng-icon name="lucideShield" class="me-2 text-muted"></ng-icon>
                <small class="text-info">Vous pouvez modifier votre mot de passe ici</small>
              </div>
            </div>

            <!-- Bouton de sécurité -->
            <div class="mt-4">
              <button 
                class="btn btn-outline-warning btn-sm"
                (click)="openResetPasswordModal()"
                [disabled]="resettingPassword"
              >
                <ng-icon name="lucideKey" class="me-1"></ng-icon>
                Changer mon mot de passe
              </button>
            </div>
          </div>
        </div>

        <!-- Carte rôles -->
        <div class="card mt-3">
          <div class="card-header bg-light">
            <h5 class="card-title mb-0">Mes Rôles</h5>
          </div>
          <div class="card-body">
            <div class="d-flex flex-wrap gap-1">
              @for (role of user.clientRoles; track role) {
                <span class="badge" [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">
            <h5 class="card-title mb-0">
              @if (isEditing) {
                Modification du Profil
              } @else {
                Mes Informations
              }
            </h5>
          </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="Votre prénom"
                  >
                } @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="Votre nom"
                  >
                } @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">
                  {{ user.username }}
                </div>
                <small class="text-muted">Le nom d'utilisateur ne peut pas être modifié</small>
              </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="votre@email.com"
                  >
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.email }}
                  </div>
                }
              </div>

              <!-- Section Sécurité -->
              <div class="col-12">
                <hr>
                <h6>
                  <ng-icon name="lucideShield" class="me-2 text-warning"></ng-icon>
                  Sécurité du Compte
                </h6>
                <div class="alert alert-info">
                  <div class="d-flex justify-content-between align-items-center">
                    <div>
                      <strong>Mot de passe</strong>
                      <br>
                      <small class="text-muted">Vous pouvez changer votre mot de passe à tout moment</small>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Actions d'édition -->
              @if (isEditing) {
                <div class="col-12">
                  <div class="d-flex gap-2 justify-content-end mt-4">
                    <button 
                      type="button" 
                      class="btn btn-light"
                      (click)="cancelEditing()"
                      [disabled]="saving">
                      Annuler
                    </button>
                    <button 
                      type="button" 
                      class="btn btn-success"
                      (click)="saveProfile()"
                      [disabled]="saving">
                      @if (saving) {
                        <div class="spinner-border spinner-border-sm me-2" role="status">
                          <span class="visually-hidden">Chargement...</span>
                        </div>
                      }
                      Enregistrer
                    </button>
                  </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>

<!-- Modal de réinitialisation de mot de passe -->
<!-- Modal de réinitialisation de mot de passe -->
<ng-template #resetPasswordModal let-modal>
  <div class="modal-header">
    <h4 class="modal-title">
      <ng-icon name="lucideKey" class="me-2"></ng-icon>
      Réinitialiser votre mot de passe
    </h4>
    <button 
      type="button" 
      class="btn-close" 
      (click)="modal.dismiss()"
      [disabled]="resettingPassword"
    ></button>
  </div>
  
  <div class="modal-body">
    <!-- Message de succès -->
    @if (resetPasswordSuccess) {
      <div class="alert alert-success d-flex align-items-center">
        <ng-icon name="lucideCheckCircle" class="me-2"></ng-icon>
        <div>{{ resetPasswordSuccess }}</div>
      </div>
    }

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

    @if (!resetPasswordSuccess && user) {
      <div class="alert alert-info">
        <strong>Utilisateur :</strong> {{ user.username }}
        @if (user.firstName || user.lastName) {
          <br>
          <strong>Nom :</strong> {{ user.firstName }} {{ user.lastName }}
        }
      </div>

      <form (ngSubmit)="confirmResetPassword()" #resetForm="ngForm">
        <div class="mb-3">
          <label class="form-label">
            Nouveau mot de passe <span class="text-danger">*</span>
          </label>
          <input 
            type="password" 
            class="form-control" 
            placeholder="Entrez votre nouveau mot de passe"
            [(ngModel)]="newPassword"
            name="newPassword"
            required
            minlength="8"
            [disabled]="resettingPassword"
          >
          <div class="form-text">
            Le mot de passe doit contenir au moins 8 caractères.
          </div>
        </div>

        <div class="mb-3">
          <div class="form-check">
            <input 
              class="form-check-input" 
              type="checkbox" 
              id="temporaryPassword"
              [(ngModel)]="temporaryPassword"
              name="temporaryPassword"
              [disabled]="resettingPassword"
            >
            <label class="form-check-label" for="temporaryPassword">
              Mot de passe temporaire
            </label>
          </div>
          <div class="form-text">
            Vous devrez changer votre mot de passe à la prochaine connexion.
          </div>
        </div>
      </form>
    }
  </div>

  <div class="modal-footer">
    @if (resetPasswordSuccess) {
      <button 
        type="button" 
        class="btn btn-success"
        (click)="modal.close()"
      >
        <ng-icon name="lucideCheck" class="me-1"></ng-icon>
        Fermer
      </button>
    } @else {
      <button 
        type="button" 
        class="btn btn-light" 
        (click)="modal.dismiss()"
        [disabled]="resettingPassword"
      >
        Annuler
      </button>
      <button 
        type="button" 
        class="btn btn-primary"
        (click)="confirmResetPassword()"
        [disabled]="!newPassword || newPassword.length < 8 || resettingPassword"
      >
        @if (resettingPassword) {
          <div class="spinner-border spinner-border-sm me-2" role="status">
            <span class="visually-hidden">Chargement...</span>
          </div>
          Réinitialisation...
        } @else {
          <ng-icon name="lucideKey" class="me-1"></ng-icon>
          Réinitialiser le mot de passe
        }
      </button>
    }
  </div>
</ng-template>