<div class="page-container course-viewer-page">
  @if (loading()) {
    <div class="loading-screen">
      <span nz-icon nzType="loading" nzTheme="outline" class="loading-spin"></span>
    </div>
  } @else if (course()) {
    <!-- Header -->
    <div class="viewer-header">
      <div class="header-row">
        <button class="back-btn" (click)="goBack()">
          <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
        </button>
        @if (isOwnCourse()) {
          <button class="edit-btn" (click)="editCourse()">
            <span nz-icon nzType="edit" nzTheme="outline"></span>
            Modifier
          </button>
        }
      </div>

      <div class="course-hero">
        <span class="community-badge">COMMUNAUTÉ</span>
        <h1 class="course-title">{{ course()!.title }}</h1>
        <p class="course-description">{{ course()!.description }}</p>
        <div class="course-meta">
          <span nz-icon nzType="user" nzTheme="outline"></span>
          <span>{{ course()!.creatorName }}</span>
          <span class="meta-dot">·</span>
          <span>{{ course()!.topicCount }} sujet{{ course()!.topicCount !== 1 ? 's' : '' }}</span>
        </div>
      </div>

      <!-- Progress (if enrolled) -->
      @if (isEnrolled()) {
        <div class="progress-card">
          <div class="progress-row">
            <span class="progress-label">Progression</span>
            <span class="progress-value">{{ progressPercent() }}%</span>
          </div>
          <div class="mc-progress-bar">
            <div class="mc-progress-fill" [style.width.%]="progressPercent()"></div>
          </div>
          @if (progress()) {
            <p class="progress-detail">
              {{ progress()!.completedTopics }}/{{ progress()!.totalTopics }} sujets ·
              {{ progress()!.completedResources }}/{{ progress()!.totalResources }} ressources
            </p>
          }
        </div>
      }

      <!-- Enroll button -->
      @if (!isEnrolled() && !isOwnCourse()) {
        <button class="enroll-btn" (click)="enroll()" [disabled]="enrolling()">
          @if (enrolling()) {
            <span nz-icon nzType="loading" nzTheme="outline"></span> Inscription...
          } @else {
            Commencer ce cours &rarr;
          }
        </button>
      }

      <!-- Restart button -->
      @if (isEnrolled() && progressPercent() > 0) {
        <button class="restart-btn" (click)="restartCourse()">
          <span nz-icon nzType="reload" nzTheme="outline"></span>
          Recommencer depuis le début
        </button>
      }
    </div>

    <!-- Topics -->
    <div class="topics-section">
      <h2 class="section-title">Contenu du cours</h2>

      @if (course()!.topics.length === 0) {
        <div class="empty-topics">
          <p>Ce cours ne contient pas encore de sujets.</p>
        </div>
      } @else {
        @for (topic of course()!.topics; track topic.id) {
          <div class="topic-card" [class.topic-done]="isTopicDone(topic.id)">
            <!-- Topic header -->
            <div class="topic-header" (click)="toggleTopic(topic.id)">
              <div class="topic-position" [class.done]="isTopicDone(topic.id)">
                @if (isTopicDone(topic.id)) {
                  <span nz-icon nzType="check" nzTheme="outline"></span>
                } @else {
                  {{ topic.position }}
                }
              </div>
              <div class="topic-info">
                <h3 class="topic-title">{{ topic.title }}</h3>
                @if (topic.description) {
                  <p class="topic-desc">{{ topic.description }}</p>
                }
                <span class="resource-count">
                  {{ topic.resources.length }} ressource{{ topic.resources.length !== 1 ? 's' : '' }}
                </span>
              </div>
              <div class="topic-actions">
                @if (isEnrolled() && !isTopicDone(topic.id)) {
                  <button class="mark-done-btn" (click)="markTopicDone(topic, $event)" title="Marquer comme terminé">
                    Terminer
                  </button>
                }
                <span
                  nz-icon
                  [nzType]="isTopicExpanded(topic.id) ? 'up' : 'down'"
                  nzTheme="outline"
                  class="expand-icon"
                ></span>
              </div>
            </div>

            <!-- Resources -->
            @if (isTopicExpanded(topic.id) && topic.resources.length > 0) {
              <div class="resources-list">
                @for (resource of topic.resources; track resource.id) {
                  <div
                    class="resource-item"
                    [class.resource-done]="isResourceDone(resource.id)"
                    [class.resource-clickable]="resource.type !== 'Text' || true"
                    (click)="openResource(resource, $event)"
                  >
                    <div class="resource-icon" [class.done]="isResourceDone(resource.id)">
                      @if (isResourceDone(resource.id)) {
                        <span nz-icon nzType="check-circle" nzTheme="fill"></span>
                      } @else {
                        <span nz-icon [nzType]="getResourceIcon(resource.type)" nzTheme="outline"></span>
                      }
                    </div>
                    <div class="resource-info">
                      <p class="resource-title">{{ resource.title }}</p>
                      <span class="resource-type">
                        {{ resource.type === 'Url' ? 'Lien' : resource.type === 'Video' ? 'Vidéo' : resource.type === 'Text' ? 'Texte' : 'Fichier' }}
                        @if (resource.type !== 'Text') {
                          · <span class="resource-open">Ouvrir →</span>
                        }
                      </span>
                    </div>
                    @if (resource.type === 'Text') {
                      <span nz-icon [nzType]="isResourceExpanded(resource.id) ? 'up' : 'down'" nzTheme="outline" class="expand-icon"></span>
                    }
                  </div>
                  <!-- Text content inline -->
                  @if (resource.type === 'Text' && isResourceExpanded(resource.id)) {
                    <div class="resource-text-content">
                      {{ resource.content }}
                      @if (isEnrolled() && !isResourceDone(resource.id)) {
                        <button class="mark-read-btn" (click)="markResourceDone(resource); $event.stopPropagation()">
                          <span nz-icon nzType="check" nzTheme="outline"></span>
                          Marquer comme lu
                        </button>
                      }
                    </div>
                  }
                }
              </div>
            }
          </div>
        }
      }
    </div>
  }
</div>
