<div class="editeur">
  @if (!pdf()) {
    <!-- Zone de glisser-déposer initiale -->
    <div
      class="depot"
      [class.survol]="survolDepot()"
      (dragover)="empecherDefaut($event)"
      (dragleave)="finSurvol($event)"
      (drop)="surFichierDepose($event)"
    >
      <div class="depot-contenu">
        <div class="icone">📄</div>
        <h2>Glissez-déposez un PDF ici</h2>
        <p>ou</p>
        <label class="btn btn-primaire">
          Parcourir un fichier
          <input
            type="file"
            accept="application/pdf"
            hidden
            (change)="surFichierChoisi($event)"
          />
        </label>
        @if (message()) {
          <p class="message-erreur">{{ message() }}</p>
        }
      </div>
    </div>
  } @else {
    <!-- Barre d'outils -->
    <div class="barre-outils">
      <div class="groupe">
        <button class="btn" [class.actif]="outil() === 'selection'" (click)="choisirOutil('selection')" title="Sélection">↖</button>
        <button class="btn" [class.actif]="outil() === 'texte'" (click)="choisirOutil('texte')" title="Texte">T</button>
        <label class="btn" title="Image">
          🖼
          <input type="file" accept="image/*" hidden (change)="surImageChoisie($event)" />
        </label>
        <button class="btn" [class.actif]="outil() === 'signature'" (click)="choisirOutil('signature')" title="Signature">✍</button>

        <!-- Menu déroulant des formes -->
        <div class="menu-formes">
          <button class="btn" [class.actif]="estForme(outil())" (click)="basculerMenuFormes()" title="Formes">
            {{ iconeForme(formeActive()) }} ▾
          </button>
          @if (menuFormesOuvert()) {
            <div class="menu-deroulant">
              @for (f of formes; track f.outil) {
                <button class="item" [class.actif]="outil() === f.outil" (click)="choisirForme(f.outil)">
                  <span class="ic">{{ f.icone }}</span> {{ f.libelle }}
                </button>
              }
            </div>
          }
        </div>

        <button class="btn" [class.actif]="outil() === 'lien'" (click)="choisirOutil('lien')" title="Lien">🔗</button>
        <input
          class="selecteur-couleur"
          type="color"
          [value]="couleur()"
          (input)="couleur.set($any($event.target).value)"
          title="Couleur"
        />
      </div>

      <div class="groupe">
        <button class="btn" (click)="zoomMoins()" title="Dézoomer">−</button>
        <span class="zoom-valeur">{{ (zoom() * 100).toFixed(0) }} %</span>
        <button class="btn" (click)="zoomPlus()" title="Zoomer">+</button>
        <span class="zoom-valeur" title="version">v16</span>
      </div>

      <div class="groupe">
        <button class="btn" (click)="telecharger()">⬇ Télécharger</button>
        @if (estConnecte$ | async) {
          <button class="btn btn-primaire" (click)="sauvegarder()" [disabled]="chargement()">
            💾 Sauvegarder
          </button>
        } @else {
          <button class="btn" (click)="allerConnexion()">Se connecter pour sauvegarder</button>
        }
      </div>
    </div>

    @if (message()) {
      <p class="bandeau">{{ message() }}</p>
    }

    <!-- Pages -->
    <div class="zone-pages">
      @for (i of pages(); track i) {
        <app-page-layer
          [pdf]="pdf()!"
          [pageIndex]="i"
          [zoom]="zoom()"
          [outil]="outil()"
          [couleur]="couleur()"
          [chargeUtile]="chargeUtile()"
          [annotations]="annotations()"
          (annotationsChange)="majAnnotations($event)"
          (outilConsomme)="outilConsomme()"
        />
      }
    </div>
  }

  @if (afficheSignature()) {
    <app-signature-dialog
      (valide)="signatureValidee($event)"
      (annule)="signatureAnnulee()"
    />
  }
</div>
