<div class="import-page">

  <div class="page-header">
    <button type="button" class="btn-back" (click)="cancel()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      {{ 'campaignImport.back' | translate }}
    </button>
    <h1>{{ 'campaignImport.title' | translate }}</h1>
    <p class="subtitle">{{ 'campaignImport.subtitle' | translate }}</p>
  </div>

  <!-- Étape 1 : upload (masqué une fois en revue) -->
  @if (!reviewing) {
    <section class="upload-area">
      <input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
      <button type="button" class="btn-primary big" [disabled]="importing" (click)="pdfInput.click()">
        <lucide-icon [img]="Upload" [size]="16"></lucide-icon>
        {{ (importing ? 'campaignImport.importing' : 'campaignImport.choosePdf') | translate }}
      </button>
      <!-- Progression live -->
      @if (importing) {
        <div class="import-progress">
          <p class="import-phase">{{ importPhase }}</p>
          @if (importProgress) {
            <div class="progress-bar">
              <div class="progress-fill"
                [style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
              </div>
            </div>
          }
          @if (importStatus) {
            <p class="import-status" role="status">{{ importStatus }}</p>
          }
          @if (importCounts) {
            <p class="import-counts">
              {{ 'campaignImport.foundSoFar' | translate:{ arcs: importCounts.arcs, chapters: importCounts.chapters, scenes: importCounts.scenes, npcs: importCounts.npcs } }}
            </p>
          }
        </div>
      }
      @if (importError) {
        <p class="import-error">{{ importError }}</p>
      }
    </section>
  }

  <!-- Étape 2 : revue de l'arbre éditable -->
  @if (reviewing) {
    <section class="review-area">
      <div class="review-header">
        <p class="review-summary">
          <span [innerHTML]="'campaignImport.summaryToCreate' | translate:{ arcs: arcCount, chapters: chapterCount, scenes: sceneCount }"></span>@if (npcs.length > 0) {<span [innerHTML]="'campaignImport.summaryNpcs' | translate:{ npcs: npcCount }"></span>}<span [innerHTML]="'campaignImport.summaryHint' | translate"></span>
        </p>
      </div>
      <div class="tree">
        <!-- Arc -->
        @for (arc of tree; track arc; let ai = $index) {
          <div class="arc-card">
            <div class="node-head arc-head" [class.existing-node]="arc.existing">
              <button type="button" class="btn-collapse" (click)="toggleArc(arc)">
                <lucide-icon [img]="arc.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
              </button>
              <lucide-icon [img]="Swords" [size]="16" class="node-icon"></lucide-icon>
              <input type="text" class="node-name" [(ngModel)]="arc.name" [name]="'arc-' + ai"
                [readonly]="arc.existing" [placeholder]="'campaignImport.arcNamePlaceholder' | translate" />
              @if (arc.existing) {
                <span class="badge-existing">{{ 'campaignImport.alreadyPresent' | translate }}</span>
              }
              @if (!arc.existing) {
                <button type="button" class="btn-remove" (click)="removeArc(ai)" [title]="'campaignImport.removeArc' | translate">
                  <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
                </button>
              }
            </div>
            @if (!arc.collapsed) {
              <div class="node-body">
                @if (!arc.existing) {
                  <div class="arc-type-toggle">
                    <span class="toggle-label">{{ 'campaignImport.typeLabel' | translate }}</span>
                    <button type="button" class="type-btn" [class.active]="arc.type === 'LINEAR'"
                    (click)="setArcType(arc, 'LINEAR')">{{ 'campaignImport.typeLinear' | translate }}</button>
                    <button type="button" class="type-btn" [class.active]="arc.type === 'HUB'"
                    (click)="setArcType(arc, 'HUB')">{{ 'campaignImport.typeHub' | translate }}</button>
                  </div>
                }
                @if (!arc.existing) {
                  <textarea class="node-desc" [(ngModel)]="arc.description" [name]="'arc-desc-' + ai"
                  rows="2" [placeholder]="'campaignImport.arcSynopsisPlaceholder' | translate"></textarea>
                }
                <!-- Chapitres -->
                @for (chapter of arc.chapters; track chapter; let ci = $index) {
                  <div class="chapter-card">
                    <div class="node-head chapter-head" [class.existing-node]="chapter.existing">
                      <button type="button" class="btn-collapse" (click)="toggleChapter(chapter)">
                        <lucide-icon [img]="chapter.collapsed ? ChevronRight : ChevronDown" [size]="14"></lucide-icon>
                      </button>
                      <lucide-icon [img]="BookOpen" [size]="14" class="node-icon"></lucide-icon>
                      <input type="text" class="node-name" [(ngModel)]="chapter.name" [name]="'chap-' + ai + '-' + ci"
                        [readonly]="chapter.existing" [placeholder]="'campaignImport.chapterNamePlaceholder' | translate" />
                      @if (chapter.existing) {
                        <span class="badge-existing">{{ 'campaignImport.alreadyPresent' | translate }}</span>
                      }
                      @if (!chapter.existing) {
                        <button type="button" class="btn-remove" (click)="removeChapter(arc, ci)" [title]="'campaignImport.removeChapter' | translate">
                          <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
                        </button>
                      }
                    </div>
                    @if (!chapter.collapsed) {
                      <div class="node-body">
                        @if (!chapter.existing) {
                          <textarea class="node-desc" [(ngModel)]="chapter.description" [name]="'chap-desc-' + ai + '-' + ci"
                          rows="2" [placeholder]="'campaignImport.chapterSynopsisPlaceholder' | translate"></textarea>
                        }
                        <!-- Scènes -->
                        @for (scene of chapter.scenes; track scene; let si = $index) {
                          <div class="scene-card"
                            [class.existing-node]="scene.existing">
                            <div class="scene-row">
                              <lucide-icon [img]="MapPin" [size]="13" class="node-icon scene-icon"></lucide-icon>
                              <div class="scene-fields">
                                <input type="text" class="node-name" [(ngModel)]="scene.name"
                                  [name]="'scene-' + ai + '-' + ci + '-' + si" [readonly]="scene.existing"
                                  [placeholder]="'campaignImport.sceneNamePlaceholder' | translate" />
                                @if (!scene.existing) {
                                  <input type="text" class="node-desc-inline" [(ngModel)]="scene.description"
                                    [name]="'scene-desc-' + ai + '-' + ci + '-' + si" [placeholder]="'campaignImport.synopsisOptionalPlaceholder' | translate" />
                                }
                              </div>
                              @if (scene.existing) {
                                <span class="badge-existing">{{ 'campaignImport.alreadyPresent' | translate }}</span>
                              }
                              @if (!scene.existing) {
                                <button type="button" class="btn-details" (click)="toggleDetails(scene)"
                                  [title]="'campaignImport.detailsTitle' | translate">
                                  <lucide-icon [img]="scene.detailsOpen ? ChevronDown : ChevronRight" [size]="12"></lucide-icon>
                                  {{ 'campaignImport.details' | translate }}@if (scene.rooms.length) {
                                  <span> {{ 'campaignImport.roomsCount' | translate:{ n: scene.rooms.length } }}</span>
                                }
                              </button>
                            }
                            @if (!scene.existing) {
                              <button type="button" class="btn-remove" (click)="removeScene(chapter, si)" [title]="'campaignImport.removeScene' | translate">
                                <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
                              </button>
                            }
                          </div>
                          @if (scene.detailsOpen && !scene.existing) {
                            <div class="scene-details">
                              <label class="field-label">{{ 'campaignImport.playerNarrationLabel' | translate }}</label>
                              <textarea class="node-desc" [(ngModel)]="scene.playerNarration"
                                [name]="'scene-pn-' + ai + '-' + ci + '-' + si" rows="3"
                              [placeholder]="'campaignImport.playerNarrationPlaceholder' | translate"></textarea>
                              <label class="field-label">{{ 'campaignImport.gmNotesLabel' | translate }}</label>
                              <textarea class="node-desc" [(ngModel)]="scene.gmNotes"
                                [name]="'scene-gm-' + ai + '-' + ci + '-' + si" rows="3"
                              [placeholder]="'campaignImport.gmNotesPlaceholder' | translate"></textarea>
                              <!-- Pièces (donjon) : vide = scène narrative classique -->
                              <span class="field-label">{{ 'campaignImport.roomsLabel' | translate }}</span>
                              <div class="rooms">
                                @for (room of scene.rooms; track room; let ri = $index) {
                                  <div class="room-row">
                                    <input type="text" class="room-name" [(ngModel)]="room.name"
                                      [name]="'room-' + ai + '-' + ci + '-' + si + '-' + ri" [placeholder]="'campaignImport.roomPlaceholder' | translate" />
                                    <input type="text" class="room-field" [(ngModel)]="room.description"
                                      [name]="'room-desc-' + ai + '-' + ci + '-' + si + '-' + ri" [placeholder]="'common.description' | translate" />
                                    <input type="text" class="room-field" [(ngModel)]="room.enemies"
                                      [name]="'room-en-' + ai + '-' + ci + '-' + si + '-' + ri" [placeholder]="'campaignImport.enemiesPlaceholder' | translate" />
                                    <input type="text" class="room-field" [(ngModel)]="room.loot"
                                      [name]="'room-loot-' + ai + '-' + ci + '-' + si + '-' + ri" [placeholder]="'campaignImport.lootPlaceholder' | translate" />
                                    <button type="button" class="btn-remove" (click)="removeRoom(scene, ri)" [title]="'campaignImport.removeRoom' | translate">
                                      <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
                                    </button>
                                  </div>
                                }
                                <button type="button" class="btn-add-inline" (click)="addRoom(scene)">
                                  <lucide-icon [img]="Plus" [size]="12"></lucide-icon> {{ 'campaignImport.room' | translate }}
                                </button>
                              </div>
                            </div>
                          }
                        </div>
                      }
                      <button type="button" class="btn-add-inline" (click)="addScene(chapter)">
                        <lucide-icon [img]="Plus" [size]="12"></lucide-icon> {{ 'campaignImport.scene' | translate }}
                      </button>
                    </div>
                  }
                </div>
              }
              <button type="button" class="btn-add-inline" (click)="addChapter(arc)">
                <lucide-icon [img]="Plus" [size]="12"></lucide-icon> {{ 'campaignImport.chapter' | translate }}
              </button>
            </div>
          }
        </div>
      }
      <button type="button" class="btn-add" (click)="addArc()">
        <lucide-icon [img]="Plus" [size]="14"></lucide-icon> {{ 'campaignImport.addArc' | translate }}
      </button>
    </div>

    <!-- PNJ détectés dans le PDF : revue par cases à cocher -->
    @if (npcs.length > 0) {
      <div class="npc-review">
        <h3>{{ 'campaignImport.npcReviewTitle' | translate:{ n: npcs.length } }}</h3>
        <p class="hint">{{ 'campaignImport.npcReviewHint' | translate }}</p>
        <ul class="npc-list">
          @for (npc of npcs; track npc.name) {
            <li class="npc-row" [class.npc-existing]="npc.existing">
              <label class="npc-check">
                <input type="checkbox" [(ngModel)]="npc.selected" [disabled]="npc.existing">
                <strong>{{ npc.name }}</strong>
                @if (npc.existing) {
                  <em class="npc-tag">{{ 'campaignImport.alreadyPresent' | translate }}</em>
                }
              </label>
              @if (npc.description) {
                <p class="npc-desc">{{ npc.description }}</p>
              }
            </li>
          }
        </ul>
      </div>
    }

    @if (applyError) {
      <p class="apply-error">{{ applyError }}</p>
    }
    <div class="review-actions">
      <button type="button" class="btn-primary" [disabled]="applying || !hasNewContent" (click)="apply()">
        <lucide-icon [img]="Check" [size]="16"></lucide-icon>
        {{ (applying ? 'campaignImport.creating' : 'campaignImport.createInCampaign') | translate }}
      </button>
      <button type="button" class="btn-secondary" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
    </div>
  </section>
}

</div>
