<div class="page-container my-courses-page">
  <div class="page-header">
    <h1 class="page-title">Mes Cours</h1>
    <button class="create-btn" (click)="createCourse()">
      <span nz-icon nzType="plus" nzTheme="outline"></span>
      Créer
    </button>
  </div>

  <div class="page-content">
    @if (loading()) {
      <div class="loading-list">
        @for (_ of [1, 2, 3]; track $index) {
          <div class="skeleton-card"></div>
        }
      </div>
    } @else {

      <!-- Courses created by user -->
      @if (createdCourses().length > 0) {
        <p class="section-label">Mes créations</p>
        <div class="enrollments-list">
          @for (course of createdCourses(); track course.id) {
            <div class="enrollment-card" (click)="editCourse(course)">
              <div class="enrollment-header">
                <div class="enrollment-info">
                  <h3 class="enrollment-title">{{ course.title }}</h3>
                  <p class="enrollment-date">{{ course.status === 'Published' ? 'Publié' : 'Brouillon' }} · {{ course.topicCount }} sujet{{ course.topicCount !== 1 ? 's' : '' }}</p>
                </div>
                <div class="card-actions">
                  <span class="status-dot" [class.published]="course.status === 'Published'"></span>
                  <button class="delete-course-btn" (click)="deleteCourse(course, $event)" aria-label="Supprimer">
                    <span nz-icon nzType="delete" nzTheme="outline"></span>
                  </button>
                </div>
              </div>
            </div>
          }
        </div>
      }

      <!-- Enrolled courses -->
      @if (enrollments().length > 0) {
        <p class="section-label">Mon apprentissage</p>
        <div class="enrollments-list">
          @for (enrollment of enrollments(); track enrollment.courseId) {
            <div class="enrollment-card" (click)="openCourse(enrollment)">
              <div class="enrollment-header">
                <div class="enrollment-info">
                  <h3 class="enrollment-title">{{ enrollment.courseTitle }}</h3>
                  <p class="enrollment-date">Inscrit le {{ enrollment.enrolledAt | date:'dd/MM/yyyy' }}</p>
                </div>
                <span nz-icon nzType="arrow-right" nzTheme="outline" class="chevron"></span>
              </div>

              @if (enrollment.progress) {
                <div class="progress-section">
                  <div class="progress-stats">
                    <span class="progress-label">
                      {{ enrollment.progress.completedTopics }}/{{ enrollment.progress.totalTopics }} sujets
                    </span>
                    <span class="progress-percent">{{ getProgressPercent(enrollment) }}%</span>
                  </div>
                  <div class="mc-progress-bar">
                    <div class="mc-progress-fill" [style.width.%]="getProgressPercent(enrollment)"></div>
                  </div>
                </div>
              }
            </div>
          }
        </div>
      }

      @if (createdCourses().length === 0 && enrollments().length === 0) {
        <div class="empty-state">
          <span nz-icon nzType="read" nzTheme="outline" class="empty-icon"></span>
          <p class="empty-text">Aucun cours pour l'instant</p>
          <p class="empty-hint">Créez votre premier cours ou explorez le catalogue</p>
        </div>
      }

    }
  </div>

  <app-bottom-nav />
</div>
