<div class="view-page" *ngIf="scene">

  <header class="view-header">
    <div>
      <h1>
        <lucide-icon *ngIf="scene.icon" [img]="resolveCampaignIcon(scene.icon)" [size]="22" class="title-icon"></lucide-icon>
        {{ scene.name }}
      </h1>
      <p class="view-subtitle">Scène</p>
    </div>
    <div class="view-actions">
      <button type="button" class="btn-primary" (click)="editMode()">
        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
        Modifier
      </button>
      <button type="button" class="btn-danger" (click)="deleteScene()" title="Supprimer la scène">
        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
        Supprimer
      </button>
    </div>
  </header>

  <!-- Illustrations (rendu editorial magazine) -->
  <section class="view-section" *ngIf="(scene.illustrationImageIds?.length ?? 0) > 0">
    <app-image-gallery [imageIds]="scene.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
  </section>

  <!-- Cartes & plans -->
  <section class="view-section" *ngIf="(scene.mapImageIds?.length ?? 0) > 0">
    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
    <app-image-gallery [imageIds]="scene.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
  </section>

  <!-- Description courte -->
  <section class="view-section">
    <h2 class="view-section-title"><span class="view-section-icon">📝</span> Description</h2>
    <p class="view-section-body" *ngIf="scene.description?.trim(); else emptyDesc">{{ scene.description }}</p>
    <ng-template #emptyDesc><p class="view-section-empty">Non renseigné</p></ng-template>
  </section>

  <!-- Contexte et ambiance -->
  <div class="view-row" *ngIf="scene.location?.trim() || scene.timing?.trim()">
    <section class="view-section" *ngIf="scene.location?.trim()">
      <h2 class="view-section-title"><span class="view-section-icon">📍</span> Lieu</h2>
      <p class="view-section-body">{{ scene.location }}</p>
    </section>
    <section class="view-section" *ngIf="scene.timing?.trim()">
      <h2 class="view-section-title"><span class="view-section-icon">⏰</span> Moment</h2>
      <p class="view-section-body">{{ scene.timing }}</p>
    </section>
  </div>

  <section class="view-section" *ngIf="scene.atmosphere?.trim()">
    <h2 class="view-section-title"><span class="view-section-icon">🌫️</span> Ambiance et atmosphère</h2>
    <p class="view-section-body">{{ scene.atmosphere }}</p>
  </section>

  <!-- Narration pour les joueurs -->
  <section class="view-section" *ngIf="scene.playerNarration?.trim()">
    <h2 class="view-section-title"><span class="view-section-icon">📖</span> Narration pour les joueurs</h2>
    <p class="view-section-body">{{ scene.playerNarration }}</p>
  </section>

  <!-- Choix et conséquences -->
  <section class="view-section" *ngIf="scene.choicesConsequences?.trim()">
    <h2 class="view-section-title"><span class="view-section-icon">🔀</span> Choix et conséquences</h2>
    <p class="view-section-body">{{ scene.choicesConsequences }}</p>
  </section>

  <!-- Combat ou rencontre -->
  <ng-container *ngIf="scene.combatDifficulty?.trim() || scene.enemies?.trim()">
    <section class="view-section" *ngIf="scene.combatDifficulty?.trim()">
      <h2 class="view-section-title"><span class="view-section-icon">⚔️</span> Difficulté estimée</h2>
      <p class="view-section-body">{{ scene.combatDifficulty }}</p>
    </section>
    <section class="view-section" *ngIf="scene.enemies?.trim()">
      <h2 class="view-section-title"><span class="view-section-icon">🐲</span> Ennemis et créatures</h2>
      <p class="view-section-body">{{ scene.enemies }}</p>
    </section>
  </ng-container>

  <!-- Notes et secrets du MJ (privé) -->
  <section class="view-section view-section--private" *ngIf="scene.gmSecretNotes?.trim()">
    <h2 class="view-section-title">
      <span class="view-section-icon">🔒</span>
      Notes et secrets du MJ
    </h2>
    <p class="view-section-body">{{ scene.gmSecretNotes }}</p>
  </section>

  <!-- Pages Lore liées -->
  <section class="view-section" *ngIf="loreId && (scene.relatedPageIds?.length ?? 0) > 0">
    <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
    <div class="view-chips">
      <a class="view-chip"
         *ngFor="let relId of scene.relatedPageIds"
         [routerLink]="['/lore', loreId, 'pages', relId]">
        {{ titleOfRelated(relId) }}
      </a>
    </div>
  </section>

  <!-- Lieu explorable : pièces (mode donjon) -->
  <section class="view-section" *ngIf="(scene.rooms?.length ?? 0) > 0">
    <h2 class="view-section-title"><span class="view-section-icon">🏰</span> Pièces du lieu</h2>
    <div class="rooms-readonly">
      <article class="room-readonly" *ngFor="let r of scene.rooms; let i = index">
        <header class="room-readonly-head">
          <span class="room-readonly-index">#{{ i + 1 }}</span>
          <span class="room-readonly-name">{{ r.name }}</span>
          <span class="room-readonly-floor" *ngIf="r.floor !== null && r.floor !== undefined">
            Étage {{ r.floor }}
          </span>
        </header>
        <p class="room-readonly-desc" *ngIf="r.description?.trim()">{{ r.description }}</p>
        <div class="room-readonly-grid">
          <div *ngIf="r.enemies?.trim()">
            <strong>⚔️ Ennemis</strong>
            <p>{{ r.enemies }}</p>
          </div>
          <div *ngIf="r.loot?.trim()">
            <strong>💰 Loot</strong>
            <p>{{ r.loot }}</p>
          </div>
          <div *ngIf="r.traps?.trim()">
            <strong>⚠️ Pièges</strong>
            <p>{{ r.traps }}</p>
          </div>
          <div *ngIf="r.gmNotes?.trim()" class="room-readonly-private">
            <strong>🔒 Notes MJ</strong>
            <p>{{ r.gmNotes }}</p>
          </div>
        </div>
        <div class="room-readonly-branches" *ngIf="(r.branches?.length ?? 0) > 0">
          <strong>→ Sorties</strong>
          <ul>
            <li *ngFor="let b of r.branches">
              <em>{{ b.label }}</em> → {{ roomNameById(scene, b.targetRoomId) }}
              <span class="branch-cond" *ngIf="b.condition?.trim()">(si : {{ b.condition }})</span>
            </li>
          </ul>
        </div>
      </article>
    </div>
  </section>

</div>
