<div class="dice-panel">

  <div class="dice-controls">
    <div class="face-grid">
      @for (f of faces; track f) {
        <button
          type="button"
          class="face-chip"
          [class.face-chip--active]="selectedFace === f"
          (click)="selectedFace = f">
          d{{ f }}
        </button>
      }
    </div>

    <div class="dice-inputs">
      <label class="input-group">
        <span>Nombre</span>
        <input type="number" min="1" max="20" [(ngModel)]="count" />
      </label>
      <label class="input-group">
        <span>Modificateur</span>
        <input type="number" [(ngModel)]="modifier" />
      </label>
    </div>

    <button type="button" class="btn-primary btn-roll" (click)="roll()">
      <lucide-icon [img]="Dices" [size]="16"></lucide-icon>
      Lancer {{ count }}d{{ selectedFace }}{{ modifier === 0 ? '' : (modifier > 0 ? '+' + modifier : modifier) }}
    </button>
  </div>

  @if (history.length > 0) {
    <div class="dice-history">
      <div class="history-header">
        <span>Derniers jets</span>
        <button type="button" class="btn-link" (click)="clearHistory()" title="Vider l'historique local">
          <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
        </button>
      </div>
      <ul class="history-list">
        @for (r of history; track r) {
          <li class="history-item">
            <div class="history-text">
              <span class="history-notation">{{ r.notation }}</span>
              @if (r.rolls.length > 1) {
                <span class="history-detail">[{{ r.rolls.join(', ') }}]</span>
              }
              <span class="history-total">= {{ r.total }}</span>
            </div>
            <button type="button"
              class="btn-icon"
              [disabled]="!canAddToJournal"
              [title]="canAddToJournal ? 'Ajouter au journal' : 'Session terminée'"
              (click)="addToJournal(r)">
              <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon>
            </button>
          </li>
        }
      </ul>
    </div>
  }

  @if (history.length === 0) {
    <p class="placeholder-hint">
      Choisis un dé et lance.
    </p>
  }

</div>
