<div class="user-profile-panel">
  <div class="panel-header">
    <div class="panel-title">
      <h2>Profil Utilisateur</h2>
      <button class="close-btn" (click)="closeProfile()" mat-icon-button>
        <mat-icon>close</mat-icon>
      </button>
    </div>

    <div class="user-avatar-section">
      <div class="user-avatar">{{ generateAvatar(data?.fullname || data?.firstname || 'U') }}</div>
      <div class="user-basic-info">
        <h3>{{ data?.fullname || data?.firstname || 'Utilisateur' }}</h3>
        <div class="user-status">
          <div class="status-dot"></div>
          En ligne
        </div>
      </div>
    </div>
  </div>

  <div class="panel-content">
    <div class="info-section">
      <div class="section-title">
        <mat-icon class="section-icon">home</mat-icon>
        Informations personnelles
      </div>

      <div class="info-grid">
        <div class="info-item">
          <div class="info-label">Nom complet</div>
          <div class="info-value" [class.empty]="!data?.fullname">
            {{ data?.fullname || 'Non renseigné' }}
          </div>
        </div>

        <div class="info-item">
          <div class="info-label">Prénom</div>
          <div class="info-value" [class.empty]="!data?.firstname">
            {{ data?.firstname || 'Non renseigné' }}
          </div>
        </div>

        <div class="info-item">
          <div class="info-label">Nom</div>
          <div class="info-value" [class.empty]="!data?.lastname">
            {{ data?.lastname || 'Non renseigné' }}
          </div>
        </div>

        <div class="info-item">
          <div class="info-label">Téléphone</div>
          <div class="info-value" [class.empty]="!data?.phone">
            {{ data?.phone || 'Non renseigné' }}
          </div>
        </div>

        <div class="info-item">
          <div class="info-label">Email</div>
          <div class="info-value" [class.empty]="!data?.email">
            {{ data?.email || 'Non renseigné' }}
          </div>
        </div>
      </div>
    </div>

    <div class="divider"></div>

    <div class="info-section">
      <div class="section-title">
        <mat-icon class="section-icon">work</mat-icon>
        Professionnel
      </div>

      <div class="info-grid">
        <div class="info-item">
          <div class="info-label">Rôle</div>
          <div class="info-value" [class.empty]="!data?.role">
            {{ data?.role || 'Non renseigné' }}
          </div>
        </div>

        <div class="info-item">
          <div class="info-label">Fonction</div>
          <div class="info-value" [class.empty]="!data?.fonction">
            {{ data?.fonction || 'Non renseignée' }}
          </div>
        </div>

        <div class="info-item">
          <div class="info-label">Occupation</div>
          <div class="info-value" [class.empty]="!data?.occupation">
            {{ data?.occupation || 'Non renseignée' }}
          </div>
        </div>

        <div class="info-item" *ngIf="data?.uuid">
          <div class="info-label">UUID</div>
          <div class="info-value uuid-value">
            {{ data.uuid }}
          </div>
        </div>
      </div>
    </div>

    <div class="action-buttons">
      <button class="btn btn-primary" (click)="editProfile()">
        <mat-icon>edit</mat-icon>
        Modifier le profil
      </button>
      <button class="btn btn-secondary" (click)="openSettings()">
        <mat-icon>settings</mat-icon>
        Paramètres
      </button>
    </div>
  </div>
</div>
