<div class="gse-page">

  <div class="gse-header">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      {{ 'gameSystemEdit.backToList' | translate }}
    </button>
    <h1>
      <lucide-icon [img]="Dices" [size]="22"></lucide-icon>
      {{ (id ? 'gameSystemEdit.editTitle' : 'gameSystemEdit.createTitle') | translate }}
    </h1>
  </div>

  <div class="gse-form">

    <div class="field">
      <label for="gs-name">{{ 'gameSystemEdit.nameLabel' | translate }}</label>
      <input id="gs-name" type="text" [(ngModel)]="name" name="name" [placeholder]="'gameSystemEdit.namePlaceholder' | translate" />
    </div>

    <div class="field">
      <label for="gs-description">{{ 'gameSystemEdit.descriptionLabel' | translate }}</label>
      <textarea id="gs-description" [(ngModel)]="description" name="description" rows="2" [placeholder]="'gameSystemEdit.descriptionPlaceholder' | translate"></textarea>
    </div>

    <div class="field">
      <label for="gs-author">{{ 'gameSystemEdit.authorLabel' | translate }}</label>
      <input id="gs-author" type="text" [(ngModel)]="author" name="author" [placeholder]="'gameSystemEdit.authorPlaceholder' | translate" />
    </div>

    <!-- Sections de règles -->
    <div class="sections-area">
      <h2 class="sections-title">{{ 'gameSystemEdit.rulesTitle' | translate }}</h2>
      <p class="sections-hint">{{ 'gameSystemEdit.rulesHint' | translate }}</p>

      <!-- Import d'un PDF de règles : l'IA propose un découpage en sections,
      que l'utilisateur révise ci-dessous avant d'enregistrer. -->
      <div class="import-row">
        <input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
        <button type="button" class="btn-import" [disabled]="importing" (click)="pdfInput.click()">
          <lucide-icon [img]="Upload" [size]="14"></lucide-icon>
          {{ (importing ? 'gameSystemEdit.importInProgress' : 'gameSystemEdit.importButton') | translate }}
        </button>
        @if (!importing) {
          <span class="import-hint">{{ 'gameSystemEdit.importHint' | translate }}</span>
        }
      </div>

      <!-- Progression live de l'import (étape + barre + sections trouvées). -->
      @if (importing) {
        <div class="import-progress">
          <p class="import-phase">{{ importPhase }}</p>
          @if (importProgress) {
            <div class="progress-bar">
              <div class="progress-fill"
                [style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
              </div>
            </div>
          }
          @if (importStatus) {
            <p class="import-status" role="status">{{ importStatus }}</p>
          }
          @if (importFound.length) {
            <p class="import-found">
              {{ 'gameSystemEdit.sectionsFound' | translate:{ titles: importFound.join(' · ') } }}
            </p>
          }
        </div>
      }

      @if (importNote) {
        <p class="import-note">{{ importNote }}</p>
      }
      @if (importError) {
        <p class="import-error">{{ importError }}</p>
      }

      <div class="section-list">
        @for (section of sections; track section; let i = $index) {
          <div class="section-card" [class.collapsed]="section.collapsed">
            <div class="section-head">
              <button type="button" class="btn-collapse" (click)="toggleCollapse(section)">
                <lucide-icon [img]="section.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
              </button>
              <input
                type="text"
                class="section-title-input"
                [(ngModel)]="section.title"
                [name]="'title-' + i"
                [placeholder]="'gameSystemEdit.sectionTitlePlaceholder' | translate"
                />
                <button type="button" class="btn-remove" (click)="removeSection(i)" [title]="'gameSystemEdit.removeSection' | translate">
                  <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
                </button>
              </div>
              @if (!section.collapsed) {
                <textarea
                  class="section-content"
                  [(ngModel)]="section.content"
                  [name]="'content-' + i"
                  rows="6"
                  [placeholder]="'gameSystemEdit.sectionContentPlaceholder' | translate"
                ></textarea>
              }
            </div>
          }

          @if (sections.length === 0) {
            <div class="empty-hint">
              {{ 'gameSystemEdit.noSections' | translate }}
            </div>
          }
        </div>

        <div class="add-row">
          <span class="add-label">{{ 'gameSystemEdit.addSection' | translate }}</span>
          @for (name of suggestedSections; track name) {
            <button
              type="button"
              class="chip"
              [class.disabled]="isSectionUsed(name)"
              (click)="addSuggested(name)"
              [disabled]="isSectionUsed(name)">
              <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
              {{ name }}
            </button>
          }
          <button type="button" class="chip chip-custom" (click)="addBlank()">
            <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
            {{ 'gameSystemEdit.addOther' | translate }}
          </button>
        </div>
      </div>

      <!-- Templates de fiches PJ/PNJ -->
      <div class="templates-area">
        <h2 class="sections-title">{{ 'gameSystemEdit.charactersTitle' | translate }}</h2>
        <p class="sections-hint">{{ 'gameSystemEdit.charactersHint' | translate }}</p>

        <app-template-fields-editor
          [label]="'gameSystemEdit.pcFieldsLabel' | translate"
          [hint]="'gameSystemEdit.pcFieldsHint' | translate"
          [fields]="characterTemplate"
          [suggestions]="characterFieldSuggestions"
          (fieldsChange)="characterTemplate = $event">
        </app-template-fields-editor>

        <app-template-fields-editor
          [label]="'gameSystemEdit.npcFieldsLabel' | translate"
          [hint]="'gameSystemEdit.npcFieldsHint' | translate"
          [fields]="npcTemplate"
          [suggestions]="npcFieldSuggestions"
          (fieldsChange)="npcTemplate = $event">
        </app-template-fields-editor>

        <app-template-fields-editor
          [label]="'gameSystemEdit.enemyFieldsLabel' | translate"
          [hint]="'gameSystemEdit.enemyFieldsHint' | translate"
          [fields]="enemyTemplate"
          [suggestions]="enemyFieldSuggestions"
          (fieldsChange)="enemyTemplate = $event">
        </app-template-fields-editor>
      </div>

      <div class="actions">
        <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
          <lucide-icon [img]="Save" [size]="16"></lucide-icon>
          {{ (id ? 'common.save' : 'common.create') | translate }}
        </button>
        <button type="button" class="btn-secondary" (click)="back()">{{ 'common.cancel' | translate }}</button>
      </div>

    </div>

  </div>
