<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Mi Perfil</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="profile-header ion-text-center">
    <ion-avatar class="profile-avatar" (click)="cambiarFotoPerfil()">
      <img [src]="profileImage || usuario?.profilePic || usuario?.profilePicUrl || 'https://avatar.iran.liara.run/public'" alt="Foto de perfil">
    </ion-avatar>
    <p class="tap-text">Toca para cambiar foto</p>
    <h2>{{ usuario?.name || 'Usuario' }}</h2>
    <p>{{ usuario?.email || 'usuario@ejemplo.com' }}</p>
  </div>
  
  <ion-list lines="full" class="ion-margin-top">
    <ion-item button (click)="mostrarEditarPerfil()">
      <ion-icon name="person-outline" slot="start" color="primary"></ion-icon>
      <ion-label>Editar Perfil</ion-label>
      <ion-icon name="chevron-forward" slot="end" color="medium"></ion-icon>
    </ion-item>
    
    <ion-item>
      <ion-icon name="notifications-outline" slot="start" color="primary"></ion-icon>
      <ion-label>Notificaciones</ion-label>
      <ion-toggle [(ngModel)]="notificationsEnabled" (ionChange)="toggleNotifications()"></ion-toggle>
    </ion-item>
    
    <ion-item-divider>
      <ion-label>Estadísticas</ion-label>
    </ion-item-divider>
    
    <ion-item>
      <ion-icon name="calendar-number-outline" slot="start" color="primary"></ion-icon>
      <ion-label>
        <h2>Clases Reservadas</h2>
        <p>{{ estadisticas.totalReservas }} reservas</p>
      </ion-label>
    </ion-item>
    
    <ion-item>
      <ion-icon name="fitness-outline" slot="start" color="primary"></ion-icon>
      <ion-label>
        <h2>Clases Completadas</h2>
        <p>{{ estadisticas.clasesCompletadas }} clases</p>
      </ion-label>
    </ion-item>
    
    <ion-item-divider>
      <ion-label>Cuenta</ion-label>
    </ion-item-divider>
    
    <ion-item button (click)="mostrarAyuda()">
      <ion-icon name="help-circle-outline" slot="start" color="primary"></ion-icon>
      <ion-label>Ayuda y Soporte</ion-label>
    </ion-item>
    
    <ion-item button (click)="confirmarCerrarSesion()">
      <ion-icon name="log-out-outline" slot="start" color="danger"></ion-icon>
      <ion-label color="danger">Cerrar Sesión</ion-label>
    </ion-item>
  </ion-list>

  <div class="app-info ion-text-center ion-margin-top">
    <p class="version">Versión 1.0.0</p>
    <p>© 2025 Gym Reservations App</p>
  </div>
</ion-content>