@if (loading()) {
  <mat-spinner diameter="32" />
} @else if (scenario(); as s) {
  <div class="header">
    <a mat-icon-button routerLink="/scenarios" aria-label="Volver a escenarios" matTooltip="Volver a escenarios">
      <mat-icon>arrow_back</mat-icon>
    </a>
    <h1>{{ s.code }}</h1>
    <mat-chip-set>
      <mat-chip [class]="s.active ? 'chip-active' : 'chip-inactive'">
        {{ s.active ? 'Activo' : 'Inactivo' }}
      </mat-chip>
    </mat-chip-set>
    <button mat-button (click)="toggleActive()">{{ s.active ? 'Desactivar' : 'Activar' }}</button>
  </div>

  <section class="card">
    <h2>Configuración</h2>
    <dl class="config-grid">
      <dt>Nombre</dt>
      <dd>{{ s.name }}</dd>
      <dt>Business object</dt>
      <dd>{{ s.businessObject }}{{ s.destinationBusinessObject ? ' → ' + s.destinationBusinessObject : '' }}</dd>
      <dt>Base origen</dt>
      <dd>{{ s.originDatabaseCode }}</dd>
      <dt>Key field</dt>
      <dd>{{ s.keyField }} ({{ s.keyType }})</dd>
      <dt>Key strategy</dt>
      <dd>{{ s.keyStrategy }}{{ s.matchField ? ' — match field: ' + s.matchField : '' }}</dd>
      <dt>Destination mode</dt>
      <dd>{{ s.destinationMode }}{{ s.routingField ? ' — routing field: ' + s.routingField : '' }}</dd>
    </dl>
  </section>

  <section class="card">
    <h2>Destinos</h2>
    <ul class="destinations-list">
      @for (d of s.destinations; track d.id) {
        <li>
          {{ d.databaseCode }}
          <button mat-icon-button (click)="removeDestination(d.databaseCode)" aria-label="Quitar destino">
            <mat-icon>close</mat-icon>
          </button>
        </li>
      } @empty {
        <li class="empty">
          {{ s.destinationMode === 'payload' ? 'Destino resuelto por payload (routingField), no aplica lista fija.' : 'Sin destinos configurados.' }}
        </li>
      }
    </ul>

    @if (s.destinationMode === 'fixed') {
      <div class="add-destination">
        <mat-form-field appearance="outline">
          <mat-label>Agregar destino</mat-label>
          <mat-select (selectionChange)="newDestinationCode.set($event.value)">
            @for (db of availableDestinations(); track db.code) {
              <mat-option [value]="db.code">{{ db.code }} — {{ db.name }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
        <button mat-button (click)="addDestination()">Agregar</button>
      </div>
    }
  </section>

  <section class="card">
    <div class="source-header">
      <h2>Código fuente (solo lectura)</h2>
      @if (sourceContent()) {
        <div class="source-actions">
          <button
            mat-icon-button
            (click)="toggleSourceBackground()"
            [attr.aria-label]="grayBackground() ? 'Fondo oscuro' : 'Fondo gris'"
            [matTooltip]="grayBackground() ? 'Fondo oscuro' : 'Fondo gris (más contraste)'"
          >
            <mat-icon>contrast</mat-icon>
          </button>
          <button mat-icon-button (click)="copySource()" aria-label="Copiar código" matTooltip="Copiar código">
            <mat-icon>content_copy</mat-icon>
          </button>
        </div>
      }
    </div>
    @if (sourceContent(); as content) {
      <p class="source-path">{{ sourcePath() }}</p>
      <pre class="source" [class.source-gray]="grayBackground()"><code class="hljs" [innerHTML]="highlightedSource()"></code></pre>
      <p class="hint">Para editar filter/transform, abrí este archivo en tu editor (VSCode) — no se edita desde acá.</p>
    } @else {
      <p class="empty">No se encontró el archivo .ts de este escenario.</p>
    }
  </section>

  <section class="card">
    <h2>Mapeos de valor</h2>
    <table mat-table [dataSource]="mappings()" class="mat-elevation-z1">
      <ng-container matColumnDef="fieldName">
        <th mat-header-cell *matHeaderCellDef>Campo</th>
        <td mat-cell *matCellDef="let m">{{ m.fieldName }}</td>
      </ng-container>
      <ng-container matColumnDef="databaseCode">
        <th mat-header-cell *matHeaderCellDef>Destino</th>
        <td mat-cell *matCellDef="let m">{{ m.databaseCode }}</td>
      </ng-container>
      <ng-container matColumnDef="sourceValue">
        <th mat-header-cell *matHeaderCellDef>Valor origen</th>
        <td mat-cell *matCellDef="let m">{{ m.sourceValue }}</td>
      </ng-container>
      <ng-container matColumnDef="targetValue">
        <th mat-header-cell *matHeaderCellDef>Valor destino</th>
        <td mat-cell *matCellDef="let m">{{ m.targetValue }}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="mappingsColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: mappingsColumns"></tr>
    </table>
    @if (mappings().length === 0) {
      <p class="empty">No hay mapeos cargados todavía.</p>
    }

    <form [formGroup]="mappingForm" (ngSubmit)="addMapping()" class="mapping-form">
      <mat-form-field appearance="outline">
        <mat-label>Campo</mat-label>
        <input matInput formControlName="fieldName" placeholder="ej. GroupCode" />
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Destino</mat-label>
        <mat-select formControlName="databaseCode">
          @for (d of s.destinations; track d.id) {
            <mat-option [value]="d.databaseCode">{{ d.databaseCode }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Valor origen</mat-label>
        <input matInput formControlName="sourceValue" />
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Valor destino</mat-label>
        <input matInput formControlName="targetValue" />
      </mat-form-field>
      <button mat-flat-button color="primary" type="submit">Agregar mapeo</button>
    </form>
  </section>
}