<div class="rte-page">
  <div class="rte-toolbar">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      Retour
    </button>
    <span class="spacer"></span>
    <button class="btn-save" (click)="save()" [disabled]="saving">
      <lucide-icon [img]="Save" [size]="14"></lucide-icon>
      {{ saving ? 'Enregistrement…' : 'Enregistrer' }}
    </button>
  </div>

  <h1>{{ tableId ? 'Éditer la table' : 'Nouvelle table aléatoire' }}</h1>

  @if (errorMessage) {
    <div class="error">{{ errorMessage }}</div>
  }

  <div class="form-row">
    <label for="rt-name">Nom *</label>
    <input id="rt-name" type="text" [(ngModel)]="name" placeholder="Ex: Rencontres en forêt">
  </div>

  <div class="form-row">
    <label for="rt-desc">Description</label>
    <textarea id="rt-desc" rows="2" [(ngModel)]="description" placeholder="À quoi sert cette table ?"></textarea>
  </div>

  <div class="form-row">
    <label for="rt-formula">Formule du dé *</label>
    <input id="rt-formula" type="text" [(ngModel)]="diceFormula" placeholder="1d20, 2d6, d100…"
      [class.invalid]="diceFormula && !formulaValid">
    <small class="hint" [class.bad]="diceFormula && !formulaValid">
      {{ formulaValid ? 'Formule valide' : 'Format attendu : NdM (ex. 1d20, 2d6, d100)' }}
    </small>
  </div>

  <!-- Génération IA -->
  <div class="ai-box">
    <div class="ai-title">
      <lucide-icon [img]="Sparkles" [size]="15"></lucide-icon> Générer avec l'IA
    </div>
    <p class="ai-hint">Décris la table ; l'IA propose les entrées (revois-les avant d'enregistrer). Contextualisé avec ta campagne.</p>
    <textarea rows="2" [(ngModel)]="aiPrompt"
    placeholder="Ex: rencontres aléatoires dans une forêt hantée, ton sombre"></textarea>
    <div class="ai-actions">
      <button class="btn-ai" (click)="generateWithAI()" [disabled]="generating">
        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
        {{ generating ? 'Génération…' : 'Générer (' + diceFormula + ')' }}
      </button>
      @if (aiError) {
        <span class="ai-error">{{ aiError }}</span>
      }
    </div>
  </div>

  <div class="entries-head">
    <h2>Entrées</h2>
    <div class="entries-actions">
      <button class="btn-mini" (click)="autoRanges()" title="Répartir les plages sur la formule">
        <lucide-icon [img]="Wand2" [size]="13"></lucide-icon> Auto-plages
      </button>
      <button class="btn-mini" (click)="addEntry()">
        <lucide-icon [img]="Plus" [size]="13"></lucide-icon> Ajouter
      </button>
    </div>
  </div>

  <div class="entry-row head">
    <span class="c-range">Min</span>
    <span class="c-range">Max</span>
    <span class="c-label">Résultat</span>
    <span class="c-detail">Détail</span>
    <span class="c-del"></span>
  </div>

  @for (e of entries; track e; let i = $index) {
    <div class="entry-row">
      <input class="c-range" type="number" [(ngModel)]="e.minRoll">
      <input class="c-range" type="number" [(ngModel)]="e.maxRoll">
      <input class="c-label" type="text" [(ngModel)]="e.label" placeholder="Résultat">
      <input class="c-detail" type="text" [(ngModel)]="e.detail" placeholder="Détail (optionnel)">
      <button class="c-del btn-del" (click)="removeEntry(i)" title="Supprimer">
        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
      </button>
    </div>
  }

  @if (entries.length === 0) {
    <p class="empty-hint">Aucune entrée — clique « Ajouter ».</p>
  }
</div>
