<div class="page-container editor-page">
  @if (loading()) {
    <div class="loading-screen">
      <span nz-icon nzType="loading" nzTheme="outline" class="loading-spin"></span>
    </div>
  } @else {

    <!-- COURSE FORM MODE -->
    @if (mode() === 'course') {
      <div class="editor-header">
        <div class="header-row">
          <button class="back-btn" (click)="goBack()">
            <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
          </button>
          <h1 class="page-title">
            {{ isEditMode() ? 'Modifier le cours' : 'Nouveau cours' }}
          </h1>
          <div></div>
        </div>
      </div>

      <div class="editor-content">
        <!-- Course info form -->
        <div class="section-card">
          <h2 class="section-label">Informations</h2>

          <div class="field-group">
            <label class="field-label">Titre du cours</label>
            <input
              type="text"
              class="mc-input"
              placeholder="Ex: Introduction à Angular"
              [ngModel]="courseTitle()"
              (ngModelChange)="courseTitle.set($event)"
            />
          </div>

          <div class="field-group">
            <label class="field-label">Description</label>
            <textarea
              class="mc-input mc-textarea"
              placeholder="Décrivez votre cours..."
              rows="4"
              [ngModel]="courseDescription()"
              (ngModelChange)="courseDescription.set($event)"
            ></textarea>
          </div>

          <button class="mc-btn-primary" (click)="saveCourse()" [disabled]="saving()">
            @if (saving()) { Enregistrement... } @else {
              {{ isEditMode() ? 'Enregistrer les modifications' : 'Créer le cours' }}
            }
          </button>
        </div>

        <!-- Topics (edit mode only) -->
        @if (isEditMode() && course()) {
          <div class="section-card">
            <div class="section-header">
              <h2 class="section-label">Sujets ({{ course()!.topics.length }})</h2>
              <button class="add-btn" (click)="openAddTopic()">
                <span nz-icon nzType="plus" nzTheme="outline"></span>
                Ajouter
              </button>
            </div>

            @if (course()!.topics.length === 0) {
              <p class="empty-hint">Aucun sujet. Commencez par en ajouter un.</p>
            } @else {
              @for (topic of course()!.topics; track topic.id) {
                <div class="topic-item">
                  <div class="topic-item-header">
                    <div class="topic-position">{{ topic.position }}</div>
                    <div class="topic-item-info">
                      <p class="topic-item-title">{{ topic.title }}</p>
                      <span class="topic-item-resources">{{ topic.resources.length }} ressource(s)</span>
                    </div>
                    <div class="topic-item-actions">
                      <button class="icon-action" (click)="openLinkResource(topic, $event)" title="Lier une ressource">
                        <span nz-icon nzType="link" nzTheme="outline"></span>
                      </button>
                      <button class="icon-action" (click)="openEditTopic(topic, $event)" title="Modifier">
                        <span nz-icon nzType="edit" nzTheme="outline"></span>
                      </button>
                      <button class="icon-action danger" (click)="deleteTopic(topic, $event)" title="Supprimer">
                        <span nz-icon nzType="delete" nzTheme="outline"></span>
                      </button>
                    </div>
                  </div>

                  <!-- Resources of topic -->
                  @if (topic.resources.length > 0) {
                    <div class="topic-resources">
                      @for (resource of topic.resources; track resource.id) {
                        <div class="resource-chip">
                          <span nz-icon [nzType]="getResourceIcon(resource.type)" nzTheme="outline"></span>
                          <span class="chip-title">{{ resource.title }}</span>
                          <button class="chip-remove" (click)="unlinkResource(topic, resource, $event)">
                            <span nz-icon nzType="close" nzTheme="outline"></span>
                          </button>
                        </div>
                      }
                    </div>
                  }
                </div>
              }
            }
          </div>

          <!-- Add resource to catalog -->
          <div class="section-card">
            <div class="section-header">
              <h2 class="section-label">Ressources ({{ allResources().length }})</h2>
              <button class="add-btn" (click)="openAddResource()">
                <span nz-icon nzType="plus" nzTheme="outline"></span>
                Nouvelle
              </button>
            </div>
            @if (allResources().length === 0) {
              <p class="empty-hint">Créez des ressources pour les lier aux sujets.</p>
            } @else {
              @for (resource of allResources(); track resource.id) {
                <div class="topic-item">
                  <div class="topic-item-header">
                    <div class="resource-icon-sm">
                      <span nz-icon [nzType]="getResourceIcon(resource.type)" nzTheme="outline"></span>
                    </div>
                    <div class="topic-item-info">
                      <p class="topic-item-title">{{ resource.title }}</p>
                      <span class="topic-item-resources">{{ resource.type }}</span>
                    </div>
                  </div>
                </div>
              }
            }
          </div>

          <!-- Publish / Delete -->
          <div class="section-card danger-zone">
            @if (course()!.status === 'Draft') {
              <button class="publish-btn" (click)="publishCourse()" [disabled]="publishing()">
                @if (publishing()) { Publication... } @else { Publier le cours }
              </button>
            } @else {
              <div class="status-badge published">Cours publié</div>
            }
            <button class="delete-btn" (click)="deleteCourse()">
              <span nz-icon nzType="delete" nzTheme="outline"></span>
              Supprimer le cours
            </button>
          </div>
        }
      </div>
    }

    <!-- TOPIC FORM MODE -->
    @if (mode() === 'topic') {
      <div class="editor-header">
        <div class="header-row">
          <button class="back-btn" (click)="cancelMode()">
            <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
          </button>
          <h1 class="page-title">
            {{ editingTopicId() ? 'Modifier le sujet' : 'Nouveau sujet' }}
          </h1>
          <div></div>
        </div>
      </div>

      <div class="editor-content">
        <div class="section-card">
          <div class="field-group">
            <label class="field-label">Titre du sujet</label>
            <input
              type="text"
              class="mc-input"
              placeholder="Ex: Introduction aux composants"
              [ngModel]="topicTitle()"
              (ngModelChange)="topicTitle.set($event)"
            />
          </div>

          <div class="field-group">
            <label class="field-label">Description (optionnel)</label>
            <textarea
              class="mc-input mc-textarea"
              placeholder="Description du sujet..."
              rows="3"
              [ngModel]="topicDescription()"
              (ngModelChange)="topicDescription.set($event)"
            ></textarea>
          </div>

          <button class="mc-btn-primary" (click)="saveTopic()" [disabled]="saving()">
            @if (saving()) { Enregistrement... } @else {
              {{ editingTopicId() ? 'Mettre à jour' : 'Ajouter le sujet' }}
            }
          </button>
        </div>
      </div>
    }

    <!-- RESOURCE FORM MODE -->
    @if (mode() === 'resource') {
      <div class="editor-header">
        <div class="header-row">
          <button class="back-btn" (click)="cancelMode()">
            <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
          </button>
          <h1 class="page-title">Nouvelle ressource</h1>
          <div></div>
        </div>
      </div>

      <div class="editor-content">
        <div class="section-card">
          <div class="field-group">
            <label class="field-label">Type</label>
            <div class="type-pills">
              @for (type of resourceTypes; track type) {
                <button
                  class="type-pill"
                  [class.active]="resourceType() === type"
                  (click)="resourceType.set(type)"
                >
                  <span nz-icon [nzType]="getResourceIcon(type)" nzTheme="outline"></span>
                  {{ type }}
                </button>
              }
            </div>
          </div>

          <div class="field-group">
            <label class="field-label">Titre</label>
            <input
              type="text"
              class="mc-input"
              placeholder="Ex: Documentation Angular"
              [ngModel]="resourceTitle()"
              (ngModelChange)="resourceTitle.set($event)"
            />
          </div>

          <div class="field-group">
            <label class="field-label">
              @if (resourceType() === 'Text') { Contenu (texte/markdown) }
              @else if (resourceType() === 'File') { Chemin ou URL du fichier }
              @else { URL }
            </label>
            @if (resourceType() === 'Text') {
              <textarea
                class="mc-input mc-textarea"
                placeholder="Rédigez le contenu..."
                rows="6"
                [ngModel]="resourceContent()"
                (ngModelChange)="resourceContent.set($event)"
              ></textarea>
            } @else {
              <input
                type="url"
                class="mc-input"
                placeholder="https://..."
                [ngModel]="resourceContent()"
                (ngModelChange)="resourceContent.set($event)"
              />
            }
          </div>

          <button class="mc-btn-primary" (click)="saveResource()" [disabled]="saving()">
            @if (saving()) { Enregistrement... } @else { Créer la ressource }
          </button>
        </div>
      </div>
    }

    <!-- LINK RESOURCE MODE -->
    @if (mode() === 'link-resource') {
      <div class="editor-header">
        <div class="header-row">
          <button class="back-btn" (click)="cancelMode()">
            <span nz-icon nzType="arrow-left" nzTheme="outline"></span>
          </button>
          <h1 class="page-title">Lier une ressource</h1>
          <div></div>
        </div>
        <p class="mode-subtitle">Sujet : <strong>{{ selectedTopic()?.title }}</strong></p>
      </div>

      <div class="editor-content">
        @if (allResources().length === 0) {
          <div class="section-card">
            <p class="empty-hint">Aucune ressource disponible. Créez-en une d'abord.</p>
          </div>
        } @else {
          <div class="resources-picker">
            @for (resource of allResources(); track resource.id) {
              <div
                class="picker-item"
                [class.linked]="isResourceLinked(resource)"
                (click)="!isResourceLinked(resource) && linkResource(resource)"
              >
                <div class="resource-icon-sm">
                  <span nz-icon [nzType]="getResourceIcon(resource.type)" nzTheme="outline"></span>
                </div>
                <div class="picker-info">
                  <p class="picker-title">{{ resource.title }}</p>
                  <span class="picker-type">{{ resource.type }}</span>
                </div>
                @if (isResourceLinked(resource)) {
                  <span nz-icon nzType="check-circle" nzTheme="outline" class="linked-icon"></span>
                }
              </div>
            }
          </div>
        }
      </div>
    }

  }
</div>
