@extends('layouts.enterprise')

@section('title', 'Vistas Previas')

@section('content')
  @php
    $indexRoute = request()->routeIs('accountant.*')
      ? route('accountant.incomes.generated_invoices')
      : route('admin.incomes.generated_invoices');
  @endphp

  <div class="card generated-invoices-page-shell">
    <h1 class="page-title">Vistas Previas</h1>
    <p class="subtle">Consulta las vistas previas finalizadas. Aquí ya no verás borradores: solo documentos listos para imprimir, revisar o convertir en factura.</p>

    <sl-details class="filters-collapse" @if(($filters['q'] ?? '') !== '') open @endif>
      <div slot="summary" class="filters-summary">
        <img src="{{ asset('build/assets/logo.png') }}" alt="" class="filter-favicon">
        <span>Filtros</span>
        @if(($filters['q'] ?? '') !== '')
          <span class="badge">Activos</span>
        @endif
      </div>
      <form method="GET" action="{{ $indexRoute }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--three">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Folio, cliente, solicitud, JN o RC solicitud">
            <small>El RC cliente capturado por artículo no reemplaza el RC solicitud (Pipefy); aquí el buscador revisa folio, cliente y solicitudes ligadas.</small>
          </div>
          <div class="field field-actions">
            <label>&nbsp;</label>
            <button class="btn" type="submit">Filtrar</button>
          </div>
          <div class="field field-actions">
            <label>&nbsp;</label>
            <a class="btn btn-secondary" href="{{ $indexRoute }}">Limpiar</a>
          </div>
        </div>
      </form>
    </sl-details>

    <div class="card card-dashed" style="margin-top:14px;">
      <div class="filters-actions" style="justify-content:space-between;">
        <div class="filters-actions">
          <span class="badge">Resultados: {{ $generatedInvoices->total() }}</span>
          <span class="badge">Solo vistas previas finalizadas</span>
        </div>
      </div>

      <div class="movements-table-wrap" style="margin-top:12px;">
        <table class="movements-table movements-table--wide">
          <thead>
            <tr>
              <th>Folio</th>
              <th>Fecha</th>
              <th>Cliente</th>
              <th>Oficina</th>
              <th>Solicitudes</th>
              <th>Subtotal</th>
              <th>IVA</th>
              <th>Total</th>
              <th>Vista previa</th>
              <th>Factura</th>
            </tr>
          </thead>
          <tbody>
            @forelse($generatedInvoices as $invoice)
              @php
                $invoiceRequests = ($hasGroupingPivot ?? false)
                  ? ($invoice->pipefyRequests ?? collect())
                  : collect();
                if ($invoiceRequests->isEmpty() && $invoice->pipefyRequest) {
                  $invoiceRequests = collect([$invoice->pipefyRequest]);
                }
              @endphp
              <tr>
                <td>{{ $invoice->folio }}</td>
                <td>{{ optional($invoice->issue_date)->format('Y-m-d') ?: '-' }}</td>
                <td>{{ $invoice->client?->name ?: '-' }}</td>
                <td>
                  @if($invoice->office)
                    {{ $invoice->office->office_code ?: 'SIN-COD' }} | {{ $invoice->office->name }}
                  @else
                    -
                  @endif
                </td>
                <td>
                  <div><strong>{{ $invoiceRequests->count() }} solicitud(es)</strong></div>
                  <div class="subtle cell-subtle">
                    JN(s): {{ $invoiceRequests->pluck('title')->filter()->implode(', ') ?: '-' }}
                  </div>
                  @foreach($invoiceRequests->take(4) as $invoiceRequest)
                    <div class="subtle cell-subtle">
                      #{{ $invoiceRequest->id }} | JN {{ $invoiceRequest->title ?: '-' }} | RC solicitud (Pipefy): {{ $invoiceRequest->rc_list ?: '-' }}
                    </div>
                  @endforeach
                  @if($invoiceRequests->count() > 4)
                    <div class="subtle cell-subtle">+{{ $invoiceRequests->count() - 4 }} más</div>
                  @endif
                  @if($invoice->items->isNotEmpty())
                    @php
                      $invoiceItemsPayload = $invoice->items->map(function ($generatedItem) {
                        $itemRequest = $generatedItem->pipefyRequestItem?->request;

                        return [
                          'label' => ($generatedItem->sat_item_label ?: 'Artículo') . ' | $' . number_format((float) $generatedItem->line_total, 2),
                          'concept' => (string) ($generatedItem->description ?: '-'),
                          'request' => '#'.($itemRequest?->id ?: '-') . ' | JN ' . ($itemRequest?->title ?: '-'),
                          'item_rc' => (string) ($generatedItem->item_rc ?: 'Sin RC capturado'),
                          'quantity' => number_format((float) $generatedItem->quantity, 2),
                          'unit_price' => number_format((float) $generatedItem->unit_price, 2),
                        ];
                      })->values()->all();
                    @endphp
                    <div class="invoice-item-match-trigger">
                      <sl-button
                        type="button"
                        size="small"
                        variant="neutral"
                        data-dialog-open="invoice-items-dialog"
                        data-dialog-title="Artículos de la vista previa {{ $invoice->folio }}"
                        data-dialog-source="invoice-items-data-{{ $invoice->id }}"
                      >
                        Ver artículos ({{ $invoice->items->count() }})
                      </sl-button>
                    </div>
                    <script type="application/json" id="invoice-items-data-{{ $invoice->id }}">@json($invoiceItemsPayload)</script>
                  @endif
                </td>
                <td>${{ number_format((float) $invoice->subtotal, 2) }}</td>
                <td>${{ number_format((float) $invoice->tax, 2) }}</td>
                <td>${{ number_format((float) $invoice->total, 2) }}</td>
                <td>
                  @if($invoice->id)
                    <sl-button
                      href="{{ route($printRouteName, ['generatedInvoice' => $invoice->id]) }}"
                      target="_blank"
                      rel="noopener"
                      size="small"
                    >Abrir PDF</sl-button>
                  @else
                    <span class="badge">PDF no disponible</span>
                  @endif
                </td>
                <td>
                  @if(!($hasFacturamaColumns ?? false))
                    <span class="badge">Migración pendiente</span>
                  @elseif($invoice->facturama_cfdi_id)
                    <div class="filters-actions">
                      <span class="badge badge-income">Creada</span>
                      @if($invoice->facturama_pdf_path)
                        <sl-button href="{{ asset('storage/'.$invoice->facturama_pdf_path) }}" target="_blank" rel="noopener" size="small">PDF</sl-button>
                      @endif
                      @if($invoice->facturama_xml_path)
                        <sl-button href="{{ asset('storage/'.$invoice->facturama_xml_path) }}" target="_blank" rel="noopener" size="small" variant="neutral">XML</sl-button>
                      @endif
                    </div>
                    @if(($hasFacturamaPaymentComplementColumns ?? false) && $invoice->facturama_payment_complement_cfdi_id)
                      <div class="filters-actions" style="margin-top:8px;">
                        <span class="badge">Complemento creado</span>
                        @if($invoice->facturama_payment_complement_pdf_path)
                          <sl-button href="{{ asset('storage/'.$invoice->facturama_payment_complement_pdf_path) }}" target="_blank" rel="noopener" size="small">PDF pago</sl-button>
                        @endif
                        @if($invoice->facturama_payment_complement_xml_path)
                          <sl-button href="{{ asset('storage/'.$invoice->facturama_payment_complement_xml_path) }}" target="_blank" rel="noopener" size="small" variant="neutral">XML pago</sl-button>
                        @endif
                      </div>
                    @elseif(($hasFacturamaPaymentComplementColumns ?? false))
                      <div class="filters-actions" style="margin-top:8px;">
                        <sl-button
                          href="{{ route($printRouteName, ['generatedInvoice' => $invoice->id]) }}"
                          target="_blank"
                          rel="noopener"
                          size="small"
                          variant="neutral"
                        >Registrar pago</sl-button>
                      </div>
                    @endif
                    @if($invoice->facturama_error_message)
                      <div class="subtle cell-subtle">{{ $invoice->facturama_error_message }}</div>
                    @endif
                    @if(($hasFacturamaPaymentComplementColumns ?? false) && $invoice->facturama_payment_complement_error_message)
                      <div class="subtle cell-subtle">{{ $invoice->facturama_payment_complement_error_message }}</div>
                    @endif
                  @elseif($invoice->facturama_status === \App\Models\GeneratedInvoice::FACTURAMA_STATUS_FAILED)
                    <span class="badge badge-expense">Error</span>
                    <div class="subtle cell-subtle">{{ $invoice->facturama_error_message ?: 'Revisa la vista previa para reintentar.' }}</div>
                  @else
                    <span class="badge">Pendiente</span>
                  @endif
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="10">Aún no hay vistas previas finalizadas.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div style="margin-top:14px;">
        {{ $generatedInvoices->links('vendor.pagination.enterprise') }}
      </div>
    </div>
  </div>

  <sl-dialog id="invoice-items-dialog" label="Artículos de la vista previa" class="invoice-items-dialog" hoist>
    <div class="invoice-item-match-list" id="invoice-items-dialog-body"></div>
    <div slot="footer">
      <sl-button type="button" variant="neutral" data-dialog-close="invoice-items-dialog">
        Cerrar
      </sl-button>
    </div>
  </sl-dialog>
@endsection

@push('styles')
  <style>
    .wrap {
      max-width: min(1720px, calc(100vw - 32px));
      padding-left: 16px;
      padding-right: 16px;
    }
    .generated-invoices-page-shell {
      width: 100%;
    }
    .filters-collapse::part(base) {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
    }
    .filters-collapse::part(summary) {
      padding: 12px 14px;
      font-weight: 600;
      color: #0b1220;
    }
    .filters-collapse::part(content) {
      padding: 0 14px 14px;
    }
    .filters-summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filter-favicon {
      width: 18px;
      height: 18px;
      object-fit: contain;
      border-radius: 4px;
      background: #fff;
      border: 1px solid var(--border);
      padding: 2px;
    }
    .filters-grid {
      display: grid;
      gap: 10px;
    }
    .filters-grid--three {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: end;
    }
    .field-actions {
      display: flex;
      align-items: end;
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .movements-table {
      min-width: 1100px;
      margin: 0;
      border: 0;
    }
    .card-dashed {
      border: 1px dashed var(--border);
      box-shadow: none;
    }
    .cell-subtle {
      display: block;
      margin-top: 2px;
    }
    .invoice-item-match-trigger {
      margin-top: 10px;
    }
    .invoice-item-match-list {
      display: grid;
      gap: 8px;
    }
    .invoice-item-match-card {
      display: grid;
      gap: 3px;
      padding: 10px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      border-radius: 10px;
      background: #fff;
    }
    .invoice-item-match-card small {
      display: block;
      color: #64748b;
      line-height: 1.35;
    }
    .invoice-items-dialog::part(base) {
      position: fixed !important;
      inset: 0 !important;
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      padding: max(18px, env(safe-area-inset-top)) 18px 18px !important;
    }
    .invoice-items-dialog::part(overlay) {
      background: rgba(15, 23, 42, 0.56);
      backdrop-filter: blur(5px);
    }
    .invoice-items-dialog::part(panel) {
      width: min(920px, calc(100vw - 24px));
      max-width: min(920px, calc(100vw - 24px));
      max-height: calc(100vh - 36px);
      margin: 0 auto !important;
      border-radius: 18px;
      border: 1px solid var(--border);
      box-shadow: 0 32px 80px rgba(15, 23, 42, 0.32);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #fff;
    }
    .invoice-items-dialog::part(body) {
      padding: 0 20px 20px;
      flex: 1 1 auto;
      min-height: 0;
      max-height: calc(100vh - 210px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    @media (max-width: 900px) {
      .wrap {
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
      }
      .filters-grid--three {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush

@push('scripts')
  <script>
    const resetGeneratedInvoiceDialogPosition = (dialog) => {
      if (!dialog) return;

      const bodyPart = dialog.shadowRoot?.querySelector('[part="body"]');
      if (bodyPart && typeof bodyPart.scrollTo === 'function') {
        bodyPart.scrollTo({ top: 0, left: 0, behavior: 'auto' });
      } else if (bodyPart) {
        bodyPart.scrollTop = 0;
      }

      const panelPart = dialog.shadowRoot?.querySelector('[part="panel"]');
      if (panelPart && typeof panelPart.scrollTo === 'function') {
        panelPart.scrollTo({ top: 0, left: 0, behavior: 'auto' });
      } else if (panelPart) {
        panelPart.scrollTop = 0;
      }
    };

    const escapeInvoiceItemsHtml = (value) => {
      return String(value ?? '')
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');
    };

    document.addEventListener('DOMContentLoaded', () => {
      const dialog = document.getElementById('invoice-items-dialog');
      if (!dialog) return;

      dialog.addEventListener('sl-after-show', () => {
        window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
        resetGeneratedInvoiceDialogPosition(dialog);

        requestAnimationFrame(() => {
          const firstFocusable = dialog.shadowRoot?.querySelector('[part="close-button"]')
            || dialog.querySelector('sl-button, button, a, input, select, textarea');
          if (firstFocusable && typeof firstFocusable.focus === 'function') {
            try {
              firstFocusable.focus({ preventScroll: true });
            } catch (error) {
              firstFocusable.focus();
            }
          }
        });
      });

      dialog.addEventListener('sl-after-hide', () => {
        const returnScrollY = Number(dialog.dataset.returnScrollY || 0);
        window.scrollTo({ top: returnScrollY, left: 0, behavior: 'auto' });
      });
    });

    document.addEventListener('click', (event) => {
      const openTrigger = event.target.closest('[data-dialog-open]');
      if (openTrigger) {
        const dialogId = openTrigger.getAttribute('data-dialog-open');
        const dialog = document.getElementById(dialogId);
        if (dialog && typeof dialog.show === 'function') {
          if (dialogId === 'invoice-items-dialog') {
            dialog.dataset.returnScrollY = String(window.scrollY || window.pageYOffset || 0);
            const title = openTrigger.getAttribute('data-dialog-title') || 'Artículos de la vista previa';
            const sourceId = openTrigger.getAttribute('data-dialog-source');
            const sourceNode = sourceId ? document.getElementById(sourceId) : null;
            const body = document.getElementById('invoice-items-dialog-body');
            let items = [];

            if (sourceNode) {
              try {
                items = JSON.parse(sourceNode.textContent || '[]');
              } catch (error) {
                items = [];
              }
            }

            dialog.label = title;

            if (body) {
              body.innerHTML = items.length
                ? items.map((item) => `
                  <div class="invoice-item-match-card">
                    <strong>${escapeInvoiceItemsHtml(item.label || 'Artículo')}</strong>
                    <small>Concepto: ${escapeInvoiceItemsHtml(item.concept || '-')}</small>
                    <small>Solicitud: ${escapeInvoiceItemsHtml(item.request || '-')}</small>
                    <small>RC cliente: ${escapeInvoiceItemsHtml(item.item_rc || 'Sin RC capturado')}</small>
                    <small>Cantidad: ${escapeInvoiceItemsHtml(item.quantity || '0.00')} | Precio unitario: $${escapeInvoiceItemsHtml(item.unit_price || '0.00')}</small>
                  </div>
                `).join('')
                : '<div class="invoice-item-match-card"><small>No hay artículos para mostrar.</small></div>';
            }
          }

          dialog.show();
        }
        return;
      }

      const closeTrigger = event.target.closest('[data-dialog-close]');
      if (closeTrigger) {
        const dialogId = closeTrigger.getAttribute('data-dialog-close');
        const dialog = document.getElementById(dialogId);
        if (dialog && typeof dialog.hide === 'function') {
          dialog.hide();
        }
      }
    });
  </script>
@endpush