// Modelo/Archivos_JS/Gestion_Rutas.js
$(function () {
  // === Endpoint JSON (ajústalo si tu URL es distinta) ===
  const URL_LISTAR_RUTAS = '../../Controlador/Ctrl_Administrador/MySQL_Listar_Rutas_DT.php';

  const $tablaWrap = $('#tablaResponsive');
  const $cardsWrap = $('#tarjetasResponsive');
  const $toggleBtn = $('#toggleViewBtn');

  const POR_PAGINA = 10;
  let pagina = 1;
  let data = Array.isArray(window.rutasData) ? window.rutasData.slice() : [];

  // ---------- Utils ----------
  function escapeHtml(text) {
    return text
      ? text.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;")
      : '';
  }
  function totalPaginas() { return Math.max(1, Math.ceil(data.length / POR_PAGINA)); }
  function clampPagina() { const tp = totalPaginas(); if (pagina > tp) pagina = tp; if (pagina < 1) pagina = 1; }

  // ---------- Carga de datos para tarjetas ----------
  function cargarRutasParaTarjetas({ mantenerPagina = true } = {}) {
    return $.ajax({
      url: URL_LISTAR_RUTAS,
      type: 'GET',
      dataType: 'json'
    }).then(function (json) {
      data = Array.isArray(json) ? json : (Array.isArray(json.data) ? json.data : []);
      if (!mantenerPagina) pagina = 1;
    }).catch(function (err) {
      console.warn('No se pudo actualizar las tarjetas desde el servidor.', err);
    });
  }

  // ---------- Render tarjetas ----------
  function renderizarTarjetas() {
    clampPagina();
    $cardsWrap.empty();

    const inicio = (pagina - 1) * POR_PAGINA;
    const fin    = inicio + POR_PAGINA;
    const subset = data.slice(inicio, fin);

    if (subset.length === 0) {
      $cardsWrap.append('<div class="text-center text-muted py-3">No hay rutas para mostrar.</div>');
      return;
    }

    subset.forEach(r => {
      const id   = r.id;
      const nom  = escapeHtml(r.nombre_ruta || '');
      const km   = escapeHtml(String(r.km_estimado ?? ''));
      const desc = escapeHtml(r.descripcion || 'Sin descripción');

      const enlace = (r.enlace_mapa && String(r.enlace_mapa).trim() !== '')
        ? `<p class="card-text mb-2">
             <strong>Enlace de Ruta (Google Maps):</strong><br>
             <a href="${escapeHtml(r.enlace_mapa)}" target="_blank" class="btn btn-sm btn-outline-info mt-1 w-100">
               <i class='bx bx-map'></i> Ver en Mapa
             </a>
           </p>`
        : `<p class="card-text mb-2">
             <strong>Enlace de Ruta (Google Maps):</strong><br>
             <span class="text-muted">No disponible</span>
           </p>`;

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

      $cardsWrap.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">${nom}</h5>
              <p class="card-text mb-1"><strong>Kilometraje:</strong> ${km} km</p>
              <p class="card-text mb-1"><strong>Descripción:</strong> ${desc}</p>
              ${enlace}
              <div class="d-flex justify-content-between">${acciones}</div>
            </div>
          </div>
        </div>
      `);
    });

    // Paginador
    const tp = totalPaginas();
    const prevDisabled = pagina <= 1 ? 'disabled' : '';
    const nextDisabled = pagina >= tp ? 'disabled' : '';
    const paginador = $(`
      <div class="pagination-controls">
        <button class="btn btn-sm btn-outline-secondary" id="btnPrevCards" ${prevDisabled}>Anterior</button>
        <span class="mx-2">Página ${pagina} de ${tp}</span>
        <button class="btn btn-sm btn-outline-secondary" id="btnNextCards" ${nextDisabled}>Siguiente</button>
      </div>
    `);
    $cardsWrap.append(paginador);

    $('#btnPrevCards').on('click', function () {
      if (pagina > 1) { pagina--; renderizarTarjetas(); }
    });
    $('#btnNextCards').on('click', function () {
      if (pagina < totalPaginas()) { pagina++; renderizarTarjetas(); }
    });
  }

  // ---------- Toggle Tabla ↔ Tarjetas ----------
  $toggleBtn.on('click', async function () {
    const tablaVisible = !$tablaWrap.hasClass('d-none');

    if (tablaVisible) {
      // Mostrar tarjetas
      $tablaWrap.addClass('d-none');
      $cardsWrap.removeClass('d-none');
      $(this).text('Ver como tabla (Exportar)');
      await cargarRutasParaTarjetas({ mantenerPagina: false });
      renderizarTarjetas();
    } else {
      // Volver a tabla
      $cardsWrap.addClass('d-none').empty();
      $tablaWrap.removeClass('d-none');
      $(this).text('Ver como tarjetas');
    }
  });

  // ---------- Botón Actualizar (delegado y robusto) ----------
  $(document).on('click', '#btnActualizarRutas', async function (e) {
    e.preventDefault();
    const $btn = $(this);
    const txtOriginal = $btn.text();
    $btn.prop('disabled', true).text('Actualizando...');

    try {
      // 1) Recargar DataTable si existe
      if (window.dtRutas && typeof window.dtRutas.ajax?.reload === 'function') {
        await new Promise(resolve => {
          window.dtRutas.ajax.reload(() => resolve(), false);
        });
      }
      // 2) Si estás viendo tarjetas, refrescar también
      if (!$cardsWrap.hasClass('d-none')) {
        await cargarRutasParaTarjetas({ mantenerPagina: true });
        renderizarTarjetas();
      }
    } finally {
      $btn.prop('disabled', false).text(txtOriginal);
    }
  });

  // ---------- Vista automática por tamaño ----------
  function ajustarVistaPorTamaño() {
    if (window.matchMedia('(max-width: 767.98px)').matches) {
      if ($cardsWrap.hasClass('d-none')) {
        $tablaWrap.addClass('d-none');
        $cardsWrap.removeClass('d-none');
        $toggleBtn.text('Ver como tabla (Exportar)');
        cargarRutasParaTarjetas({ mantenerPagina: false }).always(renderizarTarjetas);
      }
    } else {
      if ($tablaWrap.hasClass('d-none')) {
        $cardsWrap.addClass('d-none').empty();
        $tablaWrap.removeClass('d-none');
        $toggleBtn.text('Ver como tarjetas');
      }
    }
  }
  ajustarVistaPorTamaño();
  window.matchMedia('(max-width: 767.98px)').addEventListener('change', ajustarVistaPorTamaño);
});
