@if (cargando()) {
  <p class="muted">Cargando…</p>
}

@if (error(); as e) {
  <div class="alert error" role="alert">{{ e }}</div>
}

@if (cabecera(); as c) {
  <section class="encabezado">
    <div>
      <h1>Planificación Nº {{ c.docNum }}</h1>
      <p class="muted">
        Almacén {{ c.whsCode }} ·
        <span class="chip" [class.neutral]="c.status === 'O'" [class.ok]="c.status === 'C'">
          {{ c.status === 'O' ? 'Abierta' : 'Cerrada' }}
        </span>
      </p>
    </div>
    <a class="btn" routerLink="/planificaciones">Volver</a>
  </section>

  <app-stepper [actual]="paso()" />

  @if (advertencias().length > 0) {
    <div class="alert warn">
      <strong>Avisos del procesamiento:</strong>
      <ul>
        @for (a of advertencias(); track $index) {
          <li>{{ a }}</li>
        }
      </ul>
    </div>
  }

  @if (aviso(); as a) {
    <div class="alert ok">{{ a }}</div>
  }

  <form class="card" [formGroup]="form" (ngSubmit)="guardarCabecera()">
    <h2>Datos de las Devoluciones</h2>
    <div class="rejilla">
      <div class="field">
        <label for="docDate">Fecha</label>
        <input id="docDate" type="date" formControlName="docDate" />
      </div>
      <div class="field">
        <label for="series">Serie</label>
        <select id="series" formControlName="series">
          <option [ngValue]="0" disabled>Seleccione…</option>
          @for (s of catalogos()?.series ?? []; track s.series) {
            <option [ngValue]="s.series">{{ s.name }}</option>
          }
        </select>
      </div>
      <div class="field">
        <label for="tipoDespacho">Tipo de despacho</label>
        <select id="tipoDespacho" formControlName="tipoDespacho">
          <option value="" disabled>Seleccione…</option>
          @for (o of catalogos()?.tiposDespacho ?? []; track o.value) {
            <option [value]="o.value">{{ o.value }} · {{ o.description }}</option>
          }
        </select>
      </div>
      <div class="field">
        <label for="indicadorTraslado">Indicador de traslado</label>
        <select id="indicadorTraslado" formControlName="indicadorTraslado">
          <option value="" disabled>Seleccione…</option>
          @for (o of catalogos()?.indicadoresTraslado ?? []; track o.value) {
            <option [value]="o.value">{{ o.value }} · {{ o.description }}</option>
          }
        </select>
      </div>
      <div class="field">
        <label for="printingLines">Líneas por documento</label>
        <input id="printingLines" type="number" min="1" formControlName="printingLines" />
      </div>
    </div>

    <h3>Transporte</h3>
    <div class="rejilla">
      <div class="field">
        <label for="rutTransporte">RUT transportista</label>
        <input id="rutTransporte" type="text" formControlName="rutTransporte" maxlength="20" />
      </div>
      <div class="field">
        <label for="patente">Patente</label>
        <input id="patente" type="text" formControlName="patente" maxlength="20" />
      </div>
      <div class="field">
        <label for="rutChofer">RUT chofer</label>
        <input id="rutChofer" type="text" formControlName="rutChofer" maxlength="20" />
      </div>
      <div class="field">
        <label for="nombreChofer">Nombre chofer</label>
        <input id="nombreChofer" type="text" formControlName="nombreChofer" maxlength="100" />
      </div>
      <div class="field">
        <label for="fechaSalida">Fecha salida</label>
        <input id="fechaSalida" type="date" formControlName="fechaSalida" />
      </div>
      <div class="field">
        <label for="horaSalida">Hora salida</label>
        <input id="horaSalida" type="time" formControlName="horaSalida" />
      </div>
      <div class="field">
        <label for="fechaLlegada">Fecha llegada</label>
        <input id="fechaLlegada" type="date" formControlName="fechaLlegada" />
      </div>
    </div>
    <p class="muted nota">
      RUT transportista, patente y datos del chofer se envían a la Devolución. Las fechas y la hora solo se guardan en la
      planificación.
    </p>
    @if (abierta()) {
      <div class="acciones">
        <button class="btn" type="submit" [disabled]="form.invalid || ocupado()">Guardar cabecera</button>
      </div>
    }
  </form>

  <section class="card">
    <div class="titulo-grilla">
      <h2>Líneas</h2>
      <button class="btn exportar" type="button" (click)="exportarExcel()" [disabled]="lineas().length === 0">
        Exportar a Excel
      </button>
      <span class="muted resumen">
        {{ aplicables().length }} marcada(s) pendiente(s) · {{ conDestino() }} con Devolución
        @if (conError() > 0) {
          · <span class="texto-error">{{ conError() }} con error</span>
        }
      </span>
    </div>
    <div class="scroll">
      <table class="grid">
        <thead>
          <tr>
            <th></th><th>Artículo</th><th class="num">Cantidad</th><th class="num">Consignación</th>
            <th>Entrada</th><th>Fecha entrada</th><th class="num">Abierta</th><th class="num">Asignada</th>
            <th>Proveedor</th><th>Devolución</th>
          </tr>
        </thead>
        <tbody>
          @for (l of lineas(); track l.lineId) {
            @if (l.tipoFila === 'F') {
              <tr class="padre">
                <td></td>
                <td colspan="1"><code>{{ l.itemCode }}</code> {{ l.itemDescription }}</td>
                <td class="num">{{ l.quantity }}</td>
                <td class="num">{{ l.onHand }}</td>
                <td colspan="6">
                  <span class="chip" [class.ok]="l.status === 'OK'" [class.falta]="l.status === 'SIN_STOCK'">
                    {{ l.status === 'SIN_STOCK' ? 'Sin stock' : 'OK' }}
                  </span>
                </td>
              </tr>
            } @else {
              <tr class="hijo" [class.deshabilitada]="!l.applied">
                <td class="centro">
                  <input
                    type="checkbox"
                    [checked]="l.applied"
                    [disabled]="!puedeMarcar(l)"
                    [attr.aria-label]="'Devolver la línea de la Entrada ' + l.baseRef"
                    (change)="alternar(l, $any($event.target).checked)"
                  />
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td>Nº {{ l.baseRef }}</td>
                <td>{{ l.baseDocDate }}</td>
                <td class="num">{{ l.openQty }}</td>
                <td class="num">{{ l.allocatedQty }}</td>
                <td>{{ l.cardCode }} <span class="muted">{{ l.cardName }}</span></td>
                <td>
                  @if (l.targetEntry != null) {
                    <span class="chip ok">Devolución {{ l.targetEntry }}</span>
                  } @else if (l.errMsg) {
                    <span class="texto-error" [title]="l.errMsg">{{ l.errCode }}: {{ l.errMsg }}</span>
                  }
                </td>
              </tr>
            }
          }
        </tbody>
      </table>
    </div>
  </section>

  @if (resultado(); as r) {
    <section class="card">
      <h2>Resultado de la creación</h2>
      @if (r.errorGuardado) {
        <div class="alert error" role="alert">
          Las Devoluciones se crearon, pero no se pudo guardar el detalle en la planificación: {{ r.errorGuardado }}
        </div>
      }
      <table class="grid">
        <thead>
          <tr><th>#</th><th>Proveedor</th><th class="num">Líneas</th><th>Resultado</th></tr>
        </thead>
        <tbody>
          @for (d of r.devoluciones; track d.numero) {
            <tr>
              <td>{{ d.numero }}</td>
              <td>{{ d.cardCode }} <span class="muted">{{ d.cardName }}</span></td>
              <td class="num">{{ d.lineas }}</td>
              <td>
                @if (d.docEntry != null) {
                  <span class="chip ok">Devolución Nº {{ d.docNum }}</span>
                } @else {
                  <span class="texto-error">{{ d.error }}</span>
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
    </section>
  }

  @if (conDestino() > 0) {
    <section class="card">
      <h2>Descargar PDF</h2>
      <p class="muted nota">
        Guía de despacho electrónica (DTE 52) de cada Devolución creada, desde el web service de BES.
      </p>
      <div class="barra-pdf">
        <label class="opcion-pdf">
          <input type="checkbox" [checked]="pdfUnir()" (change)="pdfUnir.set($any($event.target).checked)" [disabled]="pdfCargando()" />
          Unir todos los PDF en uno solo
        </label>
        <button class="btn primary" type="button" (click)="descargarPdf()" [disabled]="pdfCargando()">
          {{ pdfCargando() ? 'Consultando BES…' : 'Descargar PDF' }}
        </button>
      </div>

      @if (pdfResultado(); as r) {
        <table class="grid">
          <thead>
            <tr><th>Devolución</th><th>Folio consultado</th><th>Resultado</th></tr>
          </thead>
          <tbody>
            @for (d of r.devoluciones; track d.docEntry) {
              <tr>
                <td>{{ d.docEntry }}</td>
                <td>{{ d.folio ?? '—' }}</td>
                <td>
                  @if (d.error) {
                    <span class="texto-error">{{ d.error }}</span>
                  } @else if (r.unificado) {
                    <span class="chip ok">Incluida en el PDF unificado</span>
                  } @else if (urlDe(d.folio); as url) {
                    <a [href]="url" [attr.download]="nombreDe(d.folio)">Descargar {{ nombreDe(d.folio) }}</a>
                  }
                </td>
              </tr>
            }
          </tbody>
        </table>

        @if (r.unificado && pdfDescargas()[0]; as u) {
          <p class="nota">
            <a class="btn primary" [href]="u.url" [attr.download]="u.nombre">Descargar {{ u.nombre }}</a>
          </p>
        }
        @if (r.archivos.length === 0) {
          <div class="alert error" role="alert">No se pudo descargar ningún PDF. Revise los mensajes de cada Devolución.</div>
        } @else if (r.devoluciones.some((d) => d.error)) {
          <div class="alert warn">Algunas Devoluciones no tienen PDF (ver detalle). Puede volver a intentarlo.</div>
        }
      }
    </section>
  }

  <section class="pie">
    <span></span>
    @if (abierta()) {
      <div class="acciones">
        @if (conDestino() === 0) {
          <a class="btn" routerLink="/planificaciones/nueva" [queryParams]="{ reemplaza: c.docEntry }">Rehacer FIFO</a>
        }
        <button class="btn" type="button" (click)="cerrar()" [disabled]="ocupado()">Cerrar planificación</button>
        <button class="btn primary" type="button" (click)="crearDevoluciones()" [disabled]="!puedeCrear()">
          {{ ocupado() ? 'Procesando…' : 'Crear devoluciones' }}
        </button>
      </div>
    }
  </section>
}