$(document).ready(function () {
  const $tabla     = $('#tablaResponsive');      // contenedor de la tabla
  const $tarjetas  = $('#tarjetasResponsive');   // contenedor de tarjetas
  const $toggleBtn = $('#toggleViewBtn');

  // === Helpers de formato ===
  const n2   = v => (isFinite(v) ? Number(v).toFixed(2) : '0.00');
  const money= v => 'S/ ' + n2(v);

  // === Paginación tarjetas ===
  window.pagina = 1;
  const porPagina = 5;
  const contenedor = $tarjetas;

  // Render seguro (últimos primero por si el backend no trajo ordenado)
  window.renderizarTarjetas = function () {
    const raw = Array.isArray(window.abastecimientosData) ? window.abastecimientosData.slice() : [];

    // ordenar por fecha + hora DESC y, si empata, por id DESC
    raw.sort((a, b) => {
      const ta = `${a.fecha_abastecimiento || ''} ${a.hora_abastecimiento || ''}`;
      const tb = `${b.fecha_abastecimiento || ''} ${b.hora_abastecimiento || ''}`;
      if (ta === tb) return (b.id || 0) - (a.id || 0);
      return ta < tb ? 1 : -1; // desc
    });

    contenedor.empty();

    const total = raw.length;
    if (!total) {
      contenedor.append(`
        <div class="col-12 col-sm-10 col-md-8 col-lg-6 mx-auto">
          <div class="card mb-3 shadow-sm mx-2">
            <div class="card-body text-center text-muted">
              No hay registros para mostrar.
            </div>
          </div>
        </div>
      `);
      return;
    }

    const inicio = (window.pagina - 1) * porPagina;
    const fin    = inicio + porPagina;
    const subset = raw.slice(inicio, fin);

    subset.forEach(a => {
      // Cálculo de total
      const gln = parseFloat(a.cantidad_gln || 0);
      const vu  = parseFloat(a.valor_unitario_gln || 0);
      const total = gln * vu;

      let botones = '';
      if (window.puedeEditar) {
        botones += `<a href="Adm_Editar_Abastecimiento.php?IA=${a.id}" class="btn btn-sm btn-outline-primary btn-edit"><i class="bx bx-edit"></i> Editar</a>`;
      }
      if (window.puedeEliminar) {
        botones += `<a href="../../Controlador/Ctrl_Administrador/MySQL_Borrar_Abastecimiento.php?IDA=${a.id}" class="btn btn-sm btn-outline-danger btn-delete"><i class="bx bx-trash"></i> Eliminar</a>`;
      }

      contenedor.append(`
        <div class="col-12 col-sm-10 col-md-8 col-lg-6 mx-auto">
          <div class="card mb-3 shadow-sm mx-2">
            <div class="card-body">
              <h5 class="card-title text-primary">Vehículo: ${a.vehiculo ?? ''}</h5>
              <p class="card-text mb-1"><strong>Conductor:</strong> ${a.chofer ?? ''}</p>
              <p class="card-text mb-1"><strong>Grifo:</strong> ${a.grifo ?? ''}</p>
              <p class="card-text mb-1"><strong>Combustible:</strong> ${a.combustible_abastecido ?? '-'}</p>
              <p class="card-text mb-1"><strong>Galones:</strong> ${n2(gln)}</p>
              <p class="card-text mb-1"><strong>Valor Unitario:</strong> ${n2(vu)}</p>
              <p class="card-text mb-1"><strong>Total S/:</strong> ${money(total)}</p>
              <p class="card-text mb-1"><strong>Kilometraje:</strong> ${a.kilometraje ?? ''} KM</p>
              <p class="card-text mb-1"><strong>N° Vale:</strong> ${a.numero_vale ?? ''}</p>
              <p class="card-text mb-1"><strong>Fecha:</strong> ${a.fecha_abastecimiento ?? ''}</p>
              <p class="card-text mb-2"><strong>Hora:</strong> ${a.hora_abastecimiento ?? ''}</p>
              <div class="d-flex justify-content-between">${botones}</div>
            </div>
          </div>
        </div>
      `);
    });
  };

  // Botón toggle tabla ↔ tarjetas (solo alterna d-none)
  $toggleBtn.on('click', function () {
    if ($tabla.is(':visible')) {
      mostrarTarjetas();
    } else {
      mostrarTabla();
    }
  });

  // Paginación tarjetas (defensivo por si no existen)
  const $prev = $('#prevBtn');
  const $next = $('#nextBtn');

  if ($prev.length) {
    $prev.on('click', function () {
      if (window.pagina > 1) { window.pagina--; window.renderizarTarjetas(); }
    });
  }

  if ($next.length) {
    $next.on('click', function () {
      const total = Array.isArray(window.abastecimientosData) ? window.abastecimientosData.length : 0;
      const totalPaginas = Math.max(1, Math.ceil(total / porPagina));
      if (window.pagina < totalPaginas) { window.pagina++; window.renderizarTarjetas(); }
    });
  }

  // Mostrar tabla
  function mostrarTabla() {
    $tabla.removeClass('d-none');     // mantener d-md-block tal cual
    $tarjetas.addClass('d-none');
    $toggleBtn.text('Ver como tarjetas');

    if ($.fn.DataTable.isDataTable('#tablaAbastecimientos')) {
      const table = $('#tablaAbastecimientos').DataTable();
      table.columns.adjust();
      if (table.responsive && typeof table.responsive.recalc === 'function') {
        table.responsive.recalc();
      }
    }
  }

  // Mostrar tarjetas
  function mostrarTarjetas() {
    $tabla.addClass('d-none');
    $tarjetas.removeClass('d-none');
    $toggleBtn.text('Ver como tabla (Exportar)');
    window.pagina = 1;
    window.renderizarTarjetas();
  }

  // Vista inicial según tamaño
  function ajustarVistaPorTamaño() {
    if (window.matchMedia('(max-width: 767.98px)').matches) {
      mostrarTarjetas();
    } else {
      mostrarTabla();
    }
  }
  ajustarVistaPorTamaño();

  // Escuchar cambios de tamaño
  const mq = window.matchMedia('(max-width: 767.98px)');
  if (mq.addEventListener) {
    mq.addEventListener('change', ajustarVistaPorTamaño);
  } else if (mq.addListener) {
    mq.addListener(ajustarVistaPorTamaño); // fallback
  }

  // Ocultar botones según permisos
  if (!window.puedeAgregar)  $('.btn-add').hide();
  if (!window.puedeEditar)   $('.btn-edit').hide();
  if (!window.puedeEliminar) $('.btn-delete').hide();
  if (!window.tienePermisoReportes) $('.btn-export').hide();
});
