<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 {
              Mon Profil
            }
          </h4>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
              <li class="breadcrumb-item">
                <a href="javascript:void(0)" (click)="goBack()" class="text-decoration-none cursor-pointer">
                  Tableau de bord
                </a>
              </li>
              <li class="breadcrumb-item active" aria-current="page">
                Mon Profil
              </li>
            </ol>
          </nav>
        </div>
        
        <div class="d-flex gap-2">
          <!-- Bouton de réinitialisation de mot de passe -->
          @if (user && !isEditing) {
            <button 
              class="btn btn-warning"
              (click)="openMyProfileResetModal()"
            >
              <ng-icon name="lucideKey" class="me-1"></ng-icon>
              Changer MDP
            </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>

  <!-- 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 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 bg-opacity-10 rounded-circle text-primary fs-24">
                {{ getUserInitials() }}
              </div>
            </div>
            
            <h5>{{ getUserDisplayName() }}</h5>
            <p class="text-muted mb-2">@{{ user.username }}</p>
            
            <!-- Type d'utilisateur -->
            <span class="badge bg-secondary mb-2">
              {{ getUserTypeDisplay() }}
            </span>

            <!-- Statut -->
            <span [class]="getStatusBadgeClass()" class="mb-3 d-block">
              {{ 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>Membre depuis {{ getCreationDate() }}</small>
              </div>
              @if (isMerchantUser()) {
                <div class="d-flex align-items-center mt-2">
                  <ng-icon name="lucideBuilding" class="me-2 text-muted"></ng-icon>
                  <small>Partner ID: {{ getMerchantPartnerId() }}</small>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- Carte rôle utilisateur -->
        <div class="card mt-3">
          <div class="card-header bg-light">
            <h5 class="card-title mb-0">
              Mon Rôle
            </h5>
          </div>
          <div class="card-body">
            <!-- Rôle actuel -->
            <div class="text-center mb-3">
              @if (getUserRole()) {
                <div class="d-flex flex-wrap gap-1 justify-content-center mb-2">
                  <span class="badge d-flex align-items-center" [ngClass]="getRoleBadgeClass()">
                    <ng-icon [name]="getRoleIcon(user.role)" class="me-1" size="12"></ng-icon>
                    {{ getRoleLabel() }}
                  </span>
                </div>
                
                <!-- Description du rôle -->
                <small class="text-muted d-block">
                  {{ getRoleDescription() }}
                </small>
              } @else {
                <span class="badge bg-secondary">Aucun rôle</span>
              }
            </div>

            <!-- Information rôle non modifiable -->
            <div class="alert alert-info mt-3">
              <small>
                <ng-icon name="lucideInfo" class="me-1"></ng-icon>
                Votre rôle ne peut pas être modifié depuis cette page
              </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 du Compte</h6>
          </div>
          <div class="card-body">
            <div class="row g-2 small">
              <div class="col-12">
                <strong>ID Utilisateur :</strong>
                <div class="text-muted font-monospace small">{{ user.id }}</div>
              </div>
              <div class="col-12">
                <strong>Date de création :</strong>
                <div class="text-muted">{{ getCreationDate() }}</div>
              </div>
              <div class="col-12">
                <strong>Type de compte :</strong>
                <div class="text-muted">
                  <span class="badge bg-secondary">{{ getUserTypeDisplay() }}</span>
                </div>
              </div>
              @if (isMerchantUser()) {
                <div class="col-12">
                  <strong>Merchant Partner ID :</strong>
                  <div class="text-muted font-monospace small">
                    {{ getMerchantPartnerId() }}
                  </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 de Mon Profil
              } @else {
                <ng-icon name="lucideUser" class="me-2"></ng-icon>
                Mes Informations
              }
            </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 || !isFormValid()"
                >
                  @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 <span class="text-danger">*</span></label>
                @if (isEditing) {
                  <input 
                    type="text" 
                    class="form-control"
                    [(ngModel)]="editedUser.firstName"
                    placeholder="Votre prénom"
                    [disabled]="saving"
                    required
                  >
                  @if (!editedUser.firstName?.trim()) {
                    <div class="form-text text-danger">
                      Le prénom est obligatoire
                    </div>
                  }
                } @else {
                  <div class="form-control-plaintext">
                    {{ user.firstName || 'Non renseigné' }}
                  </div>
                }
              </div>

              <!-- Nom -->
              <div class="col-md-6">
                <label class="form-label">Nom <span class="text-danger">*</span></label>
                @if (isEditing) {
                  <input 
                    type="text" 
                    class="form-control"
                    [(ngModel)]="editedUser.lastName"
                    placeholder="Votre nom"
                    [disabled]="saving"
                    required
                  >
                  @if (!editedUser.lastName?.trim()) {
                    <div class="form-text text-danger">
                      Le nom est obligatoire
                    </div>
                  }
                } @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">
                  Votre identifiant de connexion 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="votre.email@exemple.com"
                    [disabled]="saving"
                    required
                  >
                } @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 du compte -->
              <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 class="form-text">
                  @if (!user.enabled) {
                    Votre compte est actuellement désactivé
                  } @else if (!user.emailVerified) {
                    Votre email n'est pas encore vérifié
                  } @else {
                    Votre compte est actif
                  }
                </div>
              </div>

              <!-- Rôle -->
              <div class="col-md-6">
                <label class="form-label">Rôle</label>
                <div class="form-control-plaintext">
                  <div class="d-flex flex-wrap gap-1">
                    <span class="badge d-flex align-items-center" [ngClass]="getRoleBadgeClass()">
                      <ng-icon [name]="getRoleIcon(user.role)" class="me-1" size="12"></ng-icon>
                      {{ getRoleLabel() }}
                    </span>
                  </div>
                </div>
                <div class="form-text">
                  {{ getRoleDescription() }}
                </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">
                        {{ getCreationDate() }}
                      </div>
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Type de compte</label>
                      <div class="form-control-plaintext">
                        <span class="badge bg-secondary">{{ getUserTypeDisplay() }}</span>
                      </div>
                    </div>
                    @if (isMerchantUser()) {
                      <div class="col-md-6">
                        <label class="form-label">Merchant Partner ID</label>
                        <div class="form-control-plaintext font-monospace small">
                          {{ getMerchantPartnerId() }}
                        </div>
                      </div>
                    }
                  </div>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- Actions personnelles -->
        @if (!isEditing) {
          <div class="card mt-3">
            <div class="card-header bg-light">
              <h6 class="card-title mb-0">Actions Personnelles</h6>
            </div>
            <div class="card-body">
              <div class="row g-2">
                <div class="col-md-6">
                  <button 
                    class="btn btn-outline-warning w-100"
                    (click)="openMyProfileResetModal()"
                  >
                    <ng-icon name="lucideKey" class="me-1"></ng-icon>
                    Changer le mot de passe
                  </button>
                </div>
                <div class="col-md-6">
                  <button 
                    class="btn btn-outline-primary w-100"
                    (click)="startEditing()"
                  >
                    <ng-icon name="lucideEdit" class="me-1"></ng-icon>
                    Modifier mon profil
                  </button>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>


<!-- Modal de réinitialisation de mot de passe personnel - MyProfile -->
<ng-template #myProfileResetPasswordModal let-modal>
  <div class="modal-header bg-primary text-white">
    <h4 class="modal-title">
      <ng-icon name="lucideKeyRound" class="me-2"></ng-icon>
      Réinitialiser mon mot de passe
    </h4>
    <button 
      type="button" 
      class="btn-close btn-close-white" 
      (click)="closeMyProfileResetModal()"
      [disabled]="resettingMyPassword"
      aria-label="Fermer"
    ></button>
  </div>
  
  <div class="modal-body">
    <!-- Informations personnelles -->
    <div class="card border-primary mb-4">
      <div class="card-body">
        <div class="d-flex align-items-center">
          <div class="avatar-lg bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-4">
            <span class="text-primary fw-bold fs-4">{{ getMyInitials() }}</span>
          </div>
          <div>
            <h5 class="card-title mb-1">{{ user?.firstName }} {{ user?.lastName }}</h5>
            <p class="card-text text-muted mb-1">
              <ng-icon name="lucideUser" class="me-1"></ng-icon>
              {{ user?.username }}
            </p>
            <p class="card-text text-muted mb-0">
              <ng-icon name="lucideMail" class="me-1"></ng-icon>
              {{ user?.email }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Message de succès -->
    @if (myProfileResetSuccess) {
      <div class="alert alert-success d-flex align-items-center">
        <ng-icon name="lucideCheckCircle" class="me-2"></ng-icon>
        <div>
          <strong>Succès !</strong> {{ myProfileResetSuccess }}
        </div>
      </div>
    }

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

    <!-- Formulaire de réinitialisation -->
    @if (!myProfileResetSuccess) {
      <form (ngSubmit)="confirmMyProfileResetPassword()" #myProfileResetForm="ngForm">
        
        <!-- Mot de passe actuel (pour sécurité) -->
        <div class="mb-3">
          <label class="form-label">
            Mot de passe actuel <span class="text-danger">*</span>
          </label>
          <div class="input-group">
            <input 
              [type]="showCurrentPassword ? 'text' : 'password'"
              class="form-control" 
              placeholder="Entrez votre mot de passe actuel"
              [(ngModel)]="myProfileCurrentPassword"
              name="currentPassword"
              required
              [disabled]="resettingMyPassword"
              #currentPasswordInput="ngModel"
            >
            <button 
              type="button" 
              class="btn btn-outline-secondary"
              (click)="showCurrentPassword = !showCurrentPassword"
              [disabled]="resettingMyPassword"
            >
              <ng-icon [name]="showCurrentPassword ? 'lucideEyeOff' : 'lucideEye'"></ng-icon>
            </button>
          </div>
          @if (currentPasswordInput.invalid && currentPasswordInput.touched) {
            <div class="text-danger small">
              Votre mot de passe actuel est requis
            </div>
          }
        </div>

        <!-- Nouveau mot de passe -->
        <div class="mb-3">
          <label class="form-label">
            Nouveau mot de passe <span class="text-danger">*</span>
          </label>
          <div class="input-group">
            <input 
              [type]="showNewMyPassword ? 'text' : 'password'"
              class="form-control" 
              placeholder="Entrez votre nouveau mot de passe"
              [(ngModel)]="myProfileNewPassword"
              name="newPassword"
              required
              minlength="8"
              pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
              [disabled]="resettingMyPassword"
              #newMyPasswordInput="ngModel"
            >
            <button 
              type="button" 
              class="btn btn-outline-secondary"
              (click)="showNewMyPassword = !showNewMyPassword"
              [disabled]="resettingMyPassword"
            >
              <ng-icon [name]="showNewMyPassword ? 'lucideEyeOff' : 'lucideEye'"></ng-icon>
            </button>
          </div>
          <div class="form-text">
            <ul class="small mb-0 ps-3">
              <li [class.text-success]="hasMinLength()">Au moins 8 caractères</li>
              <li [class.text-success]="hasLowerCase()">Une lettre minuscule</li>
              <li [class.text-success]="hasUpperCase()">Une lettre majuscule</li>
              <li [class.text-success]="hasNumber()">Un chiffre</li>
              <li [class.text-success]="hasSpecialChar()">Un caractère spécial (@$!%*?&)</li>
            </ul>
          </div>
          @if (newMyPasswordInput.invalid && newMyPasswordInput.touched) {
            <div class="text-danger small">
              @if (newMyPasswordInput.errors?.['required']) {
                Le nouveau mot de passe est requis
              }
              @if (newMyPasswordInput.errors?.['minlength']) {
                Le mot de passe doit contenir au moins 8 caractères
              }
              @if (newMyPasswordInput.errors?.['pattern']) {
                Le mot de passe ne respecte pas les critères de sécurité
              }
            </div>
          }
        </div>

        <!-- Confirmation du nouveau mot de passe -->
        <div class="mb-3">
          <label class="form-label">
            Confirmer le nouveau mot de passe <span class="text-danger">*</span>
          </label>
          <div class="input-group">
            <input 
              [type]="showConfirmMyPassword ? 'text' : 'password'"
              class="form-control" 
              placeholder="Confirmez votre nouveau mot de passe"
              [(ngModel)]="myProfileConfirmPassword"
              name="confirmPassword"
              required
              [disabled]="resettingMyPassword"
              #confirmMyPasswordInput="ngModel"
            >
            <button 
              type="button" 
              class="btn btn-outline-secondary"
              (click)="showConfirmMyPassword = !showConfirmMyPassword"
              [disabled]="resettingMyPassword"
            >
              <ng-icon [name]="showConfirmMyPassword ? 'lucideEyeOff' : 'lucideEye'"></ng-icon>
            </button>
          </div>
          @if (confirmMyPasswordInput.invalid && confirmMyPasswordInput.touched) {
            <div class="text-danger small">
              La confirmation du mot de passe est requise
            </div>
          }
          @if (myProfileNewPassword && myProfileConfirmPassword && myProfileNewPassword !== myProfileConfirmPassword) {
            <div class="text-danger small">
              Les mots de passe ne correspondent pas
            </div>
          }
        </div>

        <!-- Indicateur de force du mot de passe -->
        @if (myProfileNewPassword) {
          <div class="mb-3">
            <label class="form-label small">Force du mot de passe</label>
            <div class="progress mb-1" style="height: 6px;">
              <div 
                class="progress-bar" 
                [ngClass]="getPasswordStrengthClass(myProfileNewPassword)"
                [style.width.%]="getPasswordStrength(myProfileNewPassword)"
              ></div>
            </div>
            <div class="small text-muted text-center">
              {{ getPasswordStrengthText(myProfileNewPassword) }}
            </div>
          </div>
        }
      </form>
    }
  </div>

  <div class="modal-footer">
    @if (myProfileResetSuccess) {
      <button 
        type="button" 
        class="btn btn-success"
        (click)="closeMyProfileResetModal()"
      >
        <ng-icon name="lucideCheck" class="me-1"></ng-icon>
        Terminer
      </button>
    } @else {
      <button 
        type="button" 
        class="btn btn-light" 
        (click)="closeMyProfileResetModal()"
        [disabled]="resettingMyPassword"
      >
        <ng-icon name="lucideX" class="me-1"></ng-icon>
        Annuler
      </button>
      <button 
        type="button" 
        class="btn btn-primary"
        (click)="confirmMyProfileResetPassword()"
        [disabled]="!isMyProfileResetFormValid() || resettingMyPassword"
      >
        @if (resettingMyPassword) {
          <div class="spinner-border spinner-border-sm me-2" role="status">
            <span class="visually-hidden">Chargement...</span>
          </div>
          Réinitialisation...
        } @else {
          <ng-icon name="lucideKeyRound" class="me-1"></ng-icon>
          Changer mon mot de passe
        }
      </button>
    }
  </div>
</ng-template>