@using System.Linq
@using System.Text.Json
@using Domain.Dtos.Stock

@inject IToastService Toast

@if (Visible && Expedition is not null)
{
    <style>
        /* Overlay + panel (bootstrap-like offcanvas) */
        .drawer-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.35);
            z-index: 1050;
        }

        .drawer-panel {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 560px; /* ajustable: 480–640px suele ir bien */
            max-width: 95vw;
            z-index: 1051;
            overflow: auto;
        }
    </style>
  <div class="drawer-overlay" @onclick="() => Close()"></div>

  <div class="drawer-panel card shadow-lg">
    <div class="card-header py-2">
      <div class="d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
          <h5 class="mb-0">
            Expedición <span class="fw-semibold">@Expedition.Expeditionnumber</span>
          </h5>
          @if (!string.IsNullOrWhiteSpace(Expedition.StatusLabel))
          {
            <span class="badge @GetStatusBadgeClass(Expedition.StatusLabel!)">
              @Expedition.StatusLabel
            </span>
          }
        </div>
        <div class="d-flex gap-2">
          <button class="btn btn-sm btn-warning rounded-pill" title="Descargar"
                  @onclick="RequestExportPdf">
            <i class="fas fa-file-pdf me-1"></i> PDF
          </button>
          <button class="btn btn-sm btn-danger rounded-pill" title="Cerrar"
                  @onclick="() => Close()">
            <i class="fas fa-times me-1"></i> Cerrar
          </button>
        </div>
      </div>
    </div>

    <div class="card-body pb-2">
      <ul class="nav nav-tabs small" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link @(activeTab == 0 ? "active" : "")"
                  @onclick="() => SetTab(0)" role="tab">
            Datos
          </button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link @(activeTab == 1 ? "active" : "")"
                  @onclick="() => SetTab(1)" role="tab">
            Ítems (@(Expedition.Items?.Count ?? 0))
          </button>
        </li>
      </ul>

      <div class="tab-content pt-3">
        @if (activeTab == 0)
        {
          <div class="tab-pane fade show active" style="zoom: 0.8;">
            <div class="row g-2">
              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Número</div>
                    <div class="fw-semibold">@Expedition.Expeditionnumber</div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Fecha</div>
                    <div class="fw-semibold">@Expedition.Issuedate.ToString("yyyy-MM-dd")</div>
                  </div>
                </div>
              </div>

              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Ubicación</div>
                    <div class="fw-semibold">@Expedition.LocationName</div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Estado</div>
                    <div class="fw-semibold">
                      <span class="badge @GetStatusBadgeClass(Expedition.StatusLabel)">@Expedition.StatusLabel</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Datos del snapshot -->
              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Paciente</div>
                    <div class="fw-semibold">@GetPatient(Expedition.ExtrainfoJson)</div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Médico</div>
                    <div class="fw-semibold">@GetProfessional(Expedition.ExtrainfoJson)</div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Hospital</div>
                    <div class="fw-semibold">@GetInstitution(Expedition.ExtrainfoJson)</div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="card border-0 bg-light-subtle">
                  <div class="card-body py-2">
                    <div class="small text-muted mb-1">Fecha de cirugía</div>
                    <div class="fw-semibold">@GetSurgeryDateShort(Expedition.ExtrainfoJson)</div>
                  </div>
                </div>
              </div>

              <div class="col-12">
                <label class="form-label mb-1 small text-muted">Observaciones</label>
                <div class="form-control form-control-sm" style="min-height: 60px;">@Expedition.Observations</div>
              </div>

              @if (!string.IsNullOrWhiteSpace(Expedition.ExtrainfoJson))
              {
                <div class="col-12">
                  <label class="form-label mb-1 small text-muted">Extra info (snapshot)</label>
                  <pre class="form-control form-control-sm" style="height: 120px; overflow:auto; white-space: pre-wrap;">@Expedition.ExtrainfoJson</pre>
                </div>
              }
            </div>
          </div>
        }
        else
        {
          <div class="tab-pane fade show active"style="zoom: 0.8;">
            <div class="table-responsive">
              <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th style="width:120px">Código</th>
                    <th>Producto</th>
                    <th style="width:80px" class="text-center">Cant.</th>
                    <th style="width:140px">Lote</th>
                    <th style="width:160px">Serie</th>
                    <th style="width:120px">Vence</th>
                    <th style="width:160px">Ubicación</th>
                  </tr>
                </thead>
                                <tbody>
                                    @if (Loading && Expedition?.Items is null)
                                    {
                                        <tr>
                                            <td colspan="7" class="text-center py-4">
                                                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                                                Cargando ítems...
                                            </td>
                                        </tr>
                                    }
                                    else if (PagedItems?.Any() == true)
                                    {
                                        @foreach (var it in PagedItems!)
                                        {
                                            <tr>
                                                <td class="fw-semibold">@it.FactoryCode</td>
                                                <td class="text-truncate" style="max-width: 360px">@it.ProductName</td>
                                                <td class="text-center">@it.Quantity</td>
                                                <td>@it.Batch</td>
                                                <td>@it.Serial</td>
                                                <td>@(it.Expiration?.ToString("yyyy-MM-dd"))</td>
                                                <td>@it.LocationName</td>
                                            </tr>
                                        }
                                    }
                                    else
                                    {
                                        <tr><td colspan="7" class="text-center text-muted py-4">Sin ítems</td></tr>
                                    }
                                </tbody>
                            </table>
            </div>

            <div class="d-flex justify-content-between align-items-center px-1 py-2 border-top">
              <div class="text-muted small">
                @if (TotalItems > 0)
                {
                  <span>Página @itemsPage de @ItemsTotalPages — @TotalItems ítem(s)</span>
                }
              </div>
              <div class="d-flex align-items-center gap-2">
                                <select class="form-select form-select-sm" style="width:auto"
                                        @bind="itemsPageSize"
                                        @bind:after="OnItemsPageSizeChanged">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                </select>
                <div class="btn-group">
                  <button class="btn btn-sm btn-outline-secondary rounded-pill"
                          disabled="@(itemsPage<=1)" @onclick="PrevItemsPage">
                    <i class="fas fa-chevron-left"></i> Anterior
                  </button>
                  <button class="btn btn-sm btn-outline-secondary rounded-pill"
                          disabled="@(itemsPage>=ItemsTotalPages)" @onclick="NextItemsPage">
                    Siguiente <i class="fas fa-chevron-right"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        }
      </div>
    </div>
  </div>
}

@code {
  // Parámetros
  [Parameter] public ExpeditionDto? Expedition { get; set; }
  [Parameter] public bool Visible { get; set; }
  [Parameter] public EventCallback<bool> VisibleChanged { get; set; }
  [Parameter] public EventCallback<(int Id, string Number)> ExportPdfRequested { get; set; }
    [Parameter] public bool Loading { get; set; }

  // Estado local
  private int activeTab = 0;
  private int itemsPage = 1;
  private int itemsPageSize = 10;
  private int? lastExpeditionId;

  protected override void OnParametersSet()
  {
      if (Expedition?.Id != lastExpeditionId)
      {
          lastExpeditionId = Expedition?.Id;
          itemsPage = 1;           // reset de página al cambiar de expedición
          activeTab = 0;           // opcional: volver a "Datos"
      }
  }

  private void SetTab(int tab) => activeTab = tab;

  // Paginación de ítems
  private int TotalItems => Expedition?.Items?.Count ?? 0;
  private int ItemsTotalPages => TotalItems == 0 ? 1 : (int)Math.Ceiling(TotalItems / (double)itemsPageSize);
  private IEnumerable<ExpeditionItemDto> PagedItems =>
      Expedition?.Items?
          .Skip((itemsPage - 1) * itemsPageSize)
          .Take(itemsPageSize) ?? Enumerable.Empty<ExpeditionItemDto>();

  private void PrevItemsPage()
  {
      if (itemsPage <= 1) return;
      itemsPage--;
  }
  private void NextItemsPage()
  {
      if (itemsPage >= ItemsTotalPages) return;
      itemsPage++;
  }
  private void ChangeItemsPageSize(string? value)
  {
      if (int.TryParse(value, out var newSize) && newSize > 0)
      {
          itemsPageSize = newSize;
          itemsPage = 1;
      }
  }

  // Acciones
  private async Task RequestExportPdf()
  {
      if (Expedition is null) return;
      await ExportPdfRequested.InvokeAsync((Expedition.Id, Expedition.Expeditionnumber));
  }

  private async Task Close()
  {
      await VisibleChanged.InvokeAsync(false);
  }

  // Snapshot helpers (case-insensitive y tolerantes a null)
  private static string? GetProfessional(string? json) => TryGetString(json, "Professional");
  private static string? GetInstitution(string? json) => TryGetString(json, "Institution");
  private static string? GetPatient(string? json) => TryGetString(json, "Patient");
  private static string? GetSurgeryDateShort(string? json)
      => TryGetDate(json, "SurgeryDate")?.ToString("yyyy-MM-dd");

  private static string? TryGetString(string? json, string propName)
  {
      if (string.IsNullOrWhiteSpace(json)) return null;
      try
      {
          using var doc = JsonDocument.Parse(json);
          var root = doc.RootElement;
          if (root.ValueKind != JsonValueKind.Object) return null;

          foreach (var p in root.EnumerateObject())
          {
              if (string.Equals(p.Name, propName, StringComparison.OrdinalIgnoreCase) &&
                  p.Value.ValueKind == JsonValueKind.String)
                  return p.Value.GetString();
          }
          return null;
      }
      catch { return null; }
  }

  private static DateTime? TryGetDate(string? json, string propName)
  {
      var s = TryGetString(json, propName);
      if (string.IsNullOrWhiteSpace(s)) return null;
      if (DateTime.TryParse(s, out var dt)) return dt;
      return null;
  }

  // UI helpers
  private static string GetStatusBadgeClass(string? status)
  {
      if (string.IsNullOrWhiteSpace(status)) return "bg-secondary";
      return status switch
      {
          "Emitida"      => "bg-secondary",
          "En tránsito"  => "bg-info",
          "En destino"   => "bg-primary",
          "Retorno"      => "bg-warning text-dark",
          "Cerrada"      => "bg-success",
          "Anulada"      => "bg-danger",
          _              => "bg-secondary"
      };
  }
    private void OnItemsPageSizeChanged()
    {
        if (itemsPageSize <= 0) itemsPageSize = 10; // por las dudas
        itemsPage = 1;  // resetea a la primera página
                        // No hace falta nada más: PagedItems se recalcula y Blazor re-renderiza.
    }
}