<div class="adapt-page">

  <div class="page-header">
    <button type="button" class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      Retour à la campagne
    </button>
    <h1>Adapter un PDF à cette campagne</h1>
    <p class="subtitle">
      L'IA connaît votre campagne (structure, PNJ, univers) et lit le PDF, puis discute avec vous
      pour l'intégrer et l'adapter. Ce sont des <strong>conseils</strong> : rien n'est créé,
      vous appliquez ce qui vous plaît — et vous pouvez lui répondre pour qu'elle ajuste.
    </p>
  </div>

  <!-- Choix / changement du PDF -->
  <section class="upload-bar">
    <input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
    <button type="button" class="btn-primary" [disabled]="streaming" (click)="pdfInput.click()">
      <lucide-icon [img]="Upload" [size]="15"></lucide-icon>
      {{ hasConversation ? 'Changer de PDF' : 'Choisir un PDF à adapter' }}
    </button>
    <span class="file-name" *ngIf="fileName">{{ fileName }}</span>
  </section>

  <p class="adapt-error" *ngIf="error">{{ error }}</p>

  <!-- Conversation -->
  <section class="chat" *ngIf="hasConversation">
    <div class="msg" *ngFor="let m of messages; let i = index"
         [class.msg--user]="m.role === 'user'" [class.msg--assistant]="m.role === 'assistant'">
      <div class="msg-role">{{ m.role === 'user' ? 'Vous' : 'IA' }}</div>

      <div class="msg-body" *ngIf="m.role === 'user'">{{ m.content }}</div>
      <div class="msg-body markdown-body" *ngIf="m.role === 'assistant'" [innerHTML]="m.content | markdown"></div>

      <div class="msg-actions" *ngIf="m.role === 'assistant' && m.content && !(streaming && i === messages.length - 1)">
        <button type="button" class="btn-copy" (click)="copy(i)">
          <lucide-icon [img]="copiedIndex === i ? Check : Copy" [size]="12"></lucide-icon>
          {{ copiedIndex === i ? 'Copié' : 'Copier' }}
        </button>
      </div>

      <span class="streaming-cursor" *ngIf="streaming && i === messages.length - 1 && m.role === 'assistant'">▌</span>
    </div>
  </section>

  <!-- Saisie d'un feedback -->
  <section class="composer" *ngIf="hasConversation">
    <textarea
      [(ngModel)]="input"
      [disabled]="streaming"
      rows="2"
      placeholder="Répondez à l'IA : corrigez, demandez une alternative, un autre lieu à intégrer…"
      (keydown.enter)="$event.preventDefault(); sendCurrent()"></textarea>
    <button type="button" class="btn-send" [disabled]="streaming || !input.trim()" (click)="sendCurrent()">
      <lucide-icon [img]="Send" [size]="16"></lucide-icon>
    </button>
  </section>

</div>
