{% set voucher = voucher|default(null) %}
{% set pago = pago|default(null) %}
{% set mode = mode|default('compact') %}
{% set voucherJobs = voucherJobs|default({}) %}
{% set cheque = cheque|default(null) %}
{% set transferencia = transferencia|default(null) %}
{% set voucherId = voucher.id|default(null) %}
{% set voucherNumber = voucher.numeroVoucher|default(voucher.numero|default(null)) %}
{% set voucherEstado = voucher.estado|default(null) %}
{% set pagoId = pago.id|default(pagoId|default(voucher.pago.id|default(null))) %}
{% set pagoEstado = pago.estado|default(null) %}
{% set canGenerate = voucher is empty and pagoId and pagoEstado != 'Anulado' %}
{% set statusClass = {
  'generado': 'status-pill-success',
  'sincronizado': 'status-pill-success',
  'pendiente': 'status-pill-warning',
  'procesando': 'status-pill-warning',
  'error': 'status-pill-warning',
  'anulado': 'status-pill-muted'
} %}

{% macro job_badge(job) %}
  {% if job %}
    {% if job.estado in ['pendiente', 'procesando'] %}
      <span class="status-pill status-pill-warning">{{ job.estado|capitalize }}{% if job.progreso %} {{ job.progreso }}%{% endif %}</span>
    {% elseif job.estado == 'error' %}
      <span class="status-pill status-pill-warning">Error</span>
    {% elseif job.estado == 'completado' %}
      <span class="status-pill status-pill-success">Completado</span>
    {% else %}
      <span class="status-pill status-pill-muted">{{ job.estado|capitalize }}</span>
    {% endif %}
  {% endif %}
{% endmacro %}

{% import _self as voucherUi %}

{% if mode == 'compact' %}
  <div class="voucher-widget voucher-widget-compact">
    {% if voucher %}
      <a href="{{ path('pago_voucher_show', {id: voucherId}) }}" class="inline-flex items-center gap-2 rounded border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">
        <span>Voucher</span>
        {% if voucherNumber %}<span class="text-slate-500">{{ voucherNumber }}</span>{% endif %}
        {% if voucherEstado %}
          <span class="status-pill {{ statusClass[voucherEstado]|default('status-pill-muted') }}">{{ voucherEstado|capitalize }}</span>
        {% endif %}
      </a>
    {% elseif canGenerate %}
      <form method="post" action="{{ path('pago_voucher_generate', {id: pagoId}) }}" class="inline-flex">
        <input type="hidden" name="_token" value="{{ csrf_token('pago_voucher_generate_' ~ pagoId) }}">
        <button type="submit" class="inline-flex items-center rounded border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50">
          Generar voucher
        </button>
      </form>
    {% else %}
      <span class="status-pill status-pill-muted" title="{{ pagoEstado == 'Anulado' ? 'El pago esta anulado.' : 'El voucher todavia no esta disponible.' }}">Sin voucher</span>
    {% endif %}
  </div>
{% else %}
  {% set pdfJob = voucherJobs.pdf|default(null) %}
  {% set xlsxJob = voucherJobs.xlsx|default(null) %}
  {% set syncJob = voucherJobs.sync|default(null) %}
  {% set voucherHistory = voucherJobs.history|default([]) %}
  {% set isVoided = voucherEstado == 'anulado' %}

  <section class="section-card voucher-widget voucher-widget-full">
    <div class="section-card-header">
      <div>
        <h3 class="section-card-title">Voucher de pago</h3>
        <p class="section-card-subtitle">
          Estado, archivos y acciones del comprobante operativo.
        </p>
      </div>
      {% if voucher %}
        <span class="status-pill {{ statusClass[voucherEstado]|default('status-pill-muted') }}">{{ voucherEstado|capitalize }}</span>
      {% else %}
        <span class="status-pill status-pill-muted">Sin voucher</span>
      {% endif %}
    </div>

    <div class="section-card-body space-y-5">
      {% if voucher %}
        <div class="grid gap-4 md:grid-cols-4">
          <div>
            <p class="text-xs font-medium uppercase text-secondary-500">Numero</p>
            <p class="mt-1 text-sm font-semibold text-secondary-900">{{ voucherNumber ?: '-' }}</p>
          </div>
          <div>
            <p class="text-xs font-medium uppercase text-secondary-500">Pago</p>
            <p class="mt-1 text-sm font-semibold text-secondary-900">PAY-{{ '%05d'|format(voucher.pago.id) }}</p>
          </div>
          <div>
            <p class="text-xs font-medium uppercase text-secondary-500">Total</p>
            <p class="mt-1 text-sm font-semibold text-secondary-900">{{ voucher.moneda }} {{ voucher.total|number_format(2, '.', ',') }}</p>
          </div>
          <div>
            <p class="text-xs font-medium uppercase text-secondary-500">Generado</p>
            <p class="mt-1 text-sm font-semibold text-secondary-900">{{ voucher.fechaGeneracion|date('d/m/Y H:i') }}</p>
          </div>
        </div>

        {% if isVoided %}
          <div class="alert alert-warning space-y-2">
            <p>Voucher anulado. Se conservan los archivos existentes para consulta, pero no se permiten regeneraciones ni sincronizaciones.</p>
            <form method="post" action="{{ path('pago_voucher_unvoid', {id: voucher.id}) }}" onsubmit="return confirm('Reactivar este voucher?');">
              <input type="hidden" name="_token" value="{{ csrf_token('pago_voucher_unvoid_' ~ voucher.id) }}">
              <button class="btn btn-secondary">Desanular</button>
            </form>
          </div>
        {% endif %}

        <div class="grid gap-4 lg:grid-cols-3">
          <article class="operation-panel">
            <div class="operation-panel-header">
              <div>
                <h4 class="operation-panel-title">Archivos</h4>
                <p class="operation-panel-copy">PDF y XLSX generados por job.</p>
              </div>
            </div>
            <div class="mt-4 space-y-3">
              {% for format, label in {'pdf': 'PDF', 'xlsx': 'XLSX'} %}
                {% set filePath = format == 'pdf' ? voucher.archivoPdf : voucher.archivoExcel %}
                {% set fileJob = format == 'pdf' ? pdfJob : xlsxJob %}
                <div class="flex flex-wrap items-center justify-between gap-2 rounded-md border border-secondary-200 px-3 py-2">
                  <div>
                    <p class="text-sm font-medium text-secondary-900">{{ label }}</p>
                    <div class="mt-1">{{ voucherUi.job_badge(fileJob) }}</div>
                    {% if fileJob and fileJob.estado == 'error' and fileJob.error %}
                      <p class="mt-1 max-w-sm text-xs text-red-700">{{ fileJob.error }}</p>
                    {% endif %}
                  </div>
                  <div class="flex flex-wrap gap-2">
                    {% if filePath %}
                      <a href="{{ path('pago_voucher_file_download', {id: voucher.id, format: format}) }}" class="btn btn-secondary">Descargar</a>
                    {% elseif not isVoided and (fileJob is empty or fileJob.estado in ['error', 'completado']) %}
                      <form method="post" action="{{ path('pago_voucher_file_generate', {id: voucher.id, format: format}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('pago_voucher_file_' ~ format ~ '_' ~ voucher.id) }}">
                        {% if fileJob and fileJob.estado == 'error' %}<input type="hidden" name="retry" value="1">{% endif %}
                        <button class="btn btn-secondary">{{ fileJob and fileJob.estado == 'error' ? 'Reintentar' : 'Generar' }}</button>
                      </form>
                    {% endif %}
                  </div>
                </div>
              {% endfor %}
            </div>
          </article>

          <article class="operation-panel">
            <div class="operation-panel-header">
              <div>
                <h4 class="operation-panel-title">Acciones</h4>
                <p class="operation-panel-copy">Solo se muestran las acciones aplicables.</p>
              </div>
            </div>
            <div class="mt-4 flex flex-wrap gap-2">
              <a href="{{ path('pago_voucher_print', {id: voucher.id}) }}" class="btn btn-secondary">Imprimir</a>
              <a href="{{ path('pago_voucher_excel', {id: voucher.id}) }}" class="btn btn-secondary">CSV</a>
              {% if not isVoided %}
                <form method="post" action="{{ path('pago_voucher_sync', {id: voucher.id}) }}">
                  <input type="hidden" name="_token" value="{{ csrf_token('pago_voucher_sync_' ~ voucher.id) }}">
                  {% if syncJob and syncJob.estado == 'error' %}<input type="hidden" name="retry" value="1">{% endif %}
                  <button class="btn btn-secondary" {% if syncJob and syncJob.estado in ['pendiente', 'procesando'] %}disabled title="Ya hay una sincronizacion pendiente."{% endif %}>
                    {{ syncJob and syncJob.estado == 'error' ? 'Reintentar sync' : 'Sincronizar' }}
                  </button>
                </form>
                <form method="post" action="{{ path('pago_voucher_generate', {id: voucher.pago.id}) }}" onsubmit="return confirm('Regenerar voucher? Se reconstruira el detalle con las aplicaciones actuales.');">
                  <input type="hidden" name="_token" value="{{ csrf_token('pago_voucher_generate_' ~ voucher.pago.id) }}">
                  <input type="hidden" name="force" value="1">
                  <button class="btn btn-secondary">Regenerar</button>
                </form>
                <form method="post" action="{{ path('pago_voucher_void', {id: voucher.id}) }}" onsubmit="return confirm('Anular voucher? Esta accion no se puede regenerar despues.');">
                  <input type="hidden" name="_token" value="{{ csrf_token('pago_voucher_void_' ~ voucher.id) }}">
                  <button class="btn btn-danger">Anular</button>
                </form>
              {% endif %}
            </div>
            {% if syncJob %}
              <div class="mt-4 rounded-md border border-secondary-200 px-3 py-2 text-sm text-secondary-700">
                <div class="flex items-center justify-between gap-2">
                  <span>Sincronizacion nube</span>
                  {{ voucherUi.job_badge(syncJob) }}
                </div>
                {% if syncJob.estado == 'error' and syncJob.error %}
                  <p class="mt-2 text-xs text-red-700">{{ syncJob.error }}</p>
                {% endif %}
              </div>
            {% endif %}
          </article>

          <article class="operation-panel">
            <div class="operation-panel-header">
              <div>
                <h4 class="operation-panel-title">Medio de pago</h4>
                <p class="operation-panel-copy">Cheque o transferencia relacionada.</p>
              </div>
            </div>
            <div class="mt-4 space-y-2 text-sm">
              {% if voucher.formaPago == 1 %}
                {% if cheque %}
                  <a href="{{ path('pago_cheque_show', {id: cheque.id}) }}" class="btn btn-secondary">Ver cheque {{ cheque.numeroCheque }}</a>
                  {% if cheque.estado == 'entregado' %}
                    <p class="operation-panel-note">Cheque entregado. No se debe regenerar el flujo operativo.</p>
                  {% endif %}
                {% elseif not isVoided %}
                  <a href="{{ path('pago_cheque_create', {id: voucher.pago.id}) }}" class="btn btn-secondary">Crear cheque</a>
                {% else %}
                  <p class="empty-state-inline">Voucher anulado.</p>
                {% endif %}
              {% elseif voucher.formaPago in [2, 3, 4] %}
                {% if transferencia %}
                  <a href="{{ path('pago_transferencia_show', {id: transferencia.id}) }}" class="btn btn-secondary">Ver transferencia</a>
                  {% if transferencia.estado == 'sincronizada' %}
                    <p class="operation-panel-note">Transferencia sincronizada.</p>
                  {% endif %}
                {% elseif not isVoided %}
                  <a href="{{ path('pago_transferencia_create', {id: voucher.pago.id}) }}" class="btn btn-secondary">Registrar transferencia</a>
                {% else %}
                  <p class="empty-state-inline">Voucher anulado.</p>
                {% endif %}
              {% else %}
                <p class="empty-state-inline">No aplica cheque o transferencia.</p>
              {% endif %}
            </div>
          </article>
        </div>

        <div class="operation-panel">
          <div class="operation-panel-header">
            <div>
              <h4 class="operation-panel-title">Historial de jobs</h4>
              <p class="operation-panel-copy">Ultimos procesos relacionados con archivos y sincronizacion.</p>
            </div>
          </div>
          <div class="mt-4 overflow-x-auto">
            <table class="table-modern">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th>Tipo</th>
                  <th>Estado</th>
                  <th>Detalle</th>
                </tr>
              </thead>
              <tbody>
                {% for job in voucherHistory|slice(0, 8) %}
                  <tr>
                    <td>{{ job.createdAt|date('d/m/Y H:i') }}</td>
                    <td>{{ job.tipo }}</td>
                    <td>{{ voucherUi.job_badge(job) }}</td>
                    <td class="text-secondary-600">{{ job.error ?: (job.archivoResultado ?: '-') }}</td>
                  </tr>
                {% else %}
                  <tr>
                    <td colspan="4" class="empty-state-inline">Sin jobs registrados para este voucher.</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      {% else %}
        <div class="empty-state-inline">Este pago todavia no tiene voucher.</div>
        {% if canGenerate %}
          <form method="post" action="{{ path('pago_voucher_generate', {id: pagoId}) }}">
            <input type="hidden" name="_token" value="{{ csrf_token('pago_voucher_generate_' ~ pagoId) }}">
            <button class="btn btn-primary">Generar voucher</button>
          </form>
        {% endif %}
      {% endif %}
    </div>
  </section>
{% endif %}