// Modelo/Archivos_JS/Gestion_Galoneras.js
$(function () {
  const URL_LISTAR  = '../../Controlador/Ctrl_Administrador/MySQL_Listar_Galoneras_DT.php';
  const URL_CAMBIAR = '../../Controlador/Ctrl_Administrador/MySQL_Cambiar_Estado_Galonera.php';

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

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

  /* ------------------------- Utilidades ------------------------- */
  function escapeHtml(text) {
    return (text === null || text === undefined) ? '' : String(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; }
  function hoyISO(){
    const d = new Date();
    const m = String(d.getMonth()+1).padStart(2,'0');
    const day = String(d.getDate()).padStart(2,'0');
    return `${d.getFullYear()}-${m}-${day}`;
  }

  /* -------------------- Carga para tarjetas (sin caché) --------------------- */
  function cargarGalonerasParaTarjetas({ mantenerPagina = true } = {}) {
    return $.ajax({
      url: URL_LISTAR,
      type: 'GET',
      dataType: 'json',
      cache: false,
      data: { _: Date.now() } // rompe caché
    })
    .done(function (json) {
      data = Array.isArray(json) ? json : (Array.isArray(json?.data) ? json.data : []);
      if (!mantenerPagina) pagina = 1;
    })
    .fail(function (err) {
      console.warn('No se pudo actualizar las tarjetas de galoneras.', err);
    });
  }

  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 galoneras para mostrar.</div>');
      return;
    }

    subset.forEach(g => {
      const estadoMap = {
        'activo':         { badge: 'bg-success',               texto: 'Activo' },
        'no_operativo':   { badge: 'bg-secondary',             texto: 'No operativo' },
        'mantenimiento':  { badge: 'bg-warning text-dark',     texto: 'Mantenimiento' },
        'desincorporado': { badge: 'bg-dark',                  texto: 'Desincorporado' }
      };
      const estado = (g.estado || '').toString().toLowerCase();
      const est    = estadoMap[estado] || { badge: 'bg-secondary', texto: g.estado || '' };

      const mostrarMotivo = (estado !== 'activo') && !!String(g.motivo_estado||'').trim();
      const motivoHTML = mostrarMotivo
        ? `<p class="card-text mb-1"><strong>Motivo:</strong> ${escapeHtml(g.motivo_estado)}</p>` : '';

      const fDesde = escapeHtml(g.fecha_estado_desde || '');

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

      const capacidad = (parseFloat(g.capacidad_litros || 0));
      const capacidadTxt = isNaN(capacidad) ? '—' : capacidad.toFixed(2) + ' L';

      // ⬇️ CORREGIDO: usar NOMBRE del combustible; fallback al ID mapeado si no viene
      const rawName = (g.tipo_combustible_nombre ?? '').toString().trim();
      let tipoNombre = rawName;
      if (!tipoNombre) {
        const idTipo = (g.tipo_combustible_id !== null && g.tipo_combustible_id !== undefined) ? Number(g.tipo_combustible_id) : null;
        const map = { 1: 'DIESEL B5 (DB5)', 2: 'G-REGULAR', 3: 'G-PREMIUM' };
        tipoNombre = (idTipo !== null) ? (map[idTipo] || `ID ${idTipo}`) : '—';
      }

      $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">${escapeHtml(g.codigo)}</h5>
              <p class="card-text mb-1"><strong>Capacidad:</strong> ${capacidadTxt}</p>
              <p class="card-text mb-1"><strong>Tipo combustible:</strong> ${escapeHtml(tipoNombre)}</p>
              <p class="card-text mb-2 d-flex align-items-center">
                <strong class="me-2">Estado:</strong>
                <span class="badge ${est.badge} cambiar-estado-galonera"
                      role="button"
                      title="${fDesde ? 'Desde: ' + fDesde : ''}"
                      data-id="${escapeHtml(g.id)}"
                      data-estado="${escapeHtml(estado)}"
                      data-motivo="${escapeHtml(g.motivo_estado || '')}"
                      data-fecha-desde="${fDesde}"
                      data-modulo="galoneras">${est.texto}</span>
              </p>
              ${motivoHTML}
              <div class="d-flex justify-content-between acciones-tarjeta">${botones}</div>
            </div>
          </div>
        </div>
      `);
    });

    const tp = totalPaginas();
    const prevDisabled = pagina <= 1 ? 'disabled' : '';
    const nextDisabled = pagina >= tp ? 'disabled' : '';
    const paginador = $(`
      <div class="pagination-controls text-center pb-3">
        <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) {
      $tablaWrap.addClass('d-none');
      $cardsWrap.removeClass('d-none');
      $(this).text('Ver como tabla (Exportar)');
      try { await cargarGalonerasParaTarjetas({ mantenerPagina: false }); } finally { renderizarTarjetas(); }
    } else {
      $cardsWrap.addClass('d-none').empty();
      $tablaWrap.removeClass('d-none');
      $(this).text('Ver como tarjetas');
    }
  });

  /* -------------------------- Botón Actualizar -------------------------- */
  $(document).on('click', '#btnActualizarGaloneras', async function (e) {
    e.preventDefault();
    const $btn = $(this);
    const txt = $btn.text();
    $btn.prop('disabled', true).text('Actualizando...');

    try {
      if (window.dtGaloneras?.ajax?.reload) {
        await new Promise(resolve => window.dtGaloneras.ajax.reload(() => resolve(), false));
      }
      if (!$cardsWrap.hasClass('d-none')) {
        try { await cargarGalonerasParaTarjetas({ mantenerPagina: true }); } finally { renderizarTarjetas(); }
      }
    } finally {
      $btn.prop('disabled', false).text(txt);
    }
  });

  /* ---------------- Vista automática por tamaño de pantalla ------------- */
  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)');
        cargarGalonerasParaTarjetas({ mantenerPagina: false }).always(renderizarTarjetas);
      } else if (Array.isArray(data) && data.length && !$cardsWrap.children().length) {
        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);

  /* ===================== Cambio de estado con fechas ===================== */
  const $modal = $('#modalEstadoGalonera');
  const $idGalonera = $('#estado_id_galonera');
  const $estado = $('#nuevo_estado_galonera');
  const $fCambio = $('#fecha_cambio_galonera');     // input[type="date"] para NO ACTIVO
  const $fRegreso = $('#fecha_regreso_galonera');   // input[type="date"] para ACTIVO
  const $grpCambio = $('#grp_fecha_cambio_galonera');
  const $grpRegreso = $('#grp_fecha_regreso_galonera');
  const $motivo = $('#motivo_estado_galonera');
  const $motivoWrap = $('#motivo_container_galonera');

  function toggleCampos(){
    const v = ($estado.val()||'').toLowerCase();
    const esActivo = (v === 'activo');

    $grpRegreso.toggle(esActivo);
    $grpCambio.toggle(!esActivo);

    $fRegreso.prop('required', esActivo);
    $fCambio.prop('required', !esActivo);

    if (esActivo) {
      if (!$fRegreso.val()) $fRegreso.val(hoyISO());
      $fCambio.val('');
      $motivo.val(''); // limpiar motivo si volverá a activo
    } else {
      if (!$fCambio.val()) $fCambio.val(hoyISO());
      $fRegreso.val('');
    }

    $motivoWrap.toggle(!esActivo);
    $motivo.prop('required', !esActivo);
  }
  $estado.on('change', toggleCampos);

  // Abrir modal desde badge/botón
  $(document).on('click', '.cambiar-estado-galonera', function(){
    if (!window.puedeEstadoGaloneras) return;

    const id = $(this).data('id');
    const estadoActual = (String($(this).data('estado')||'activo')).toLowerCase();
    const desde = $(this).attr('data-fecha-desde') || '';
    const motivoActual = (String($(this).attr('data-motivo')||$(this).data('motivo')||''));

    $idGalonera.val(id);
    $estado.val(estadoActual);
    $fCambio.val(desde || '');
    $fRegreso.val('');
    $motivo.val(motivoActual);

    const hoy = hoyISO();
    $fCambio.attr('max', hoy);
    $fRegreso.attr('max', hoy);

    toggleCampos();
    $modal.modal('show');
  });

  // Guardar cambio de estado
  $('#btnGuardarEstadoGalonera').on('click', function(){
    const galonera_id = parseInt($idGalonera.val(),10);
    const estadoNuevo = ($estado.val()||'').toLowerCase();
    const fecha_cambio  = $fCambio.val();
    const fecha_regreso = $fRegreso.val();
    const motivoRaw = $motivo.val().trim();
    const motivo    = (estadoNuevo === 'activo') ? '' : motivoRaw; // limpiar motivo si pasa a ACTIVO

    if (!galonera_id) { Swal.fire('Atención','Galonera no identificada.','warning'); return; }
    if (estadoNuevo === 'activo' && !fecha_regreso) { Swal.fire('Atención','Indique la fecha de regreso.','warning'); return; }
    if (estadoNuevo !== 'activo' && !fecha_cambio) { Swal.fire('Atención','Indique la fecha de cambio.','warning'); return; }
    if (estadoNuevo !== 'activo' && !motivo) {
      Swal.fire({ icon: 'warning', title: 'Motivo requerido', text: 'Debe ingresar el motivo del cambio.' });
      return;
    }

    // Validación: no permitir regreso antes del "desde" actual (si lo tenemos)
    const $badgeActual = $(`.cambiar-estado-galonera[data-id='${galonera_id}']`).first();
    const fechaDesdeActual = ($badgeActual.attr('data-fecha-desde') || $badgeActual.data('fecha-desde') || '').toString();
    if (estadoNuevo === 'activo' && fecha_regreso && fechaDesdeActual && fecha_regreso < fechaDesdeActual) {
      Swal.fire('Atención', `La fecha de regreso (${fecha_regreso}) no puede ser menor a la fecha desde la que está no operativa (${fechaDesdeActual}).`, 'warning');
      return;
    }

    $.ajax({
      url: URL_CAMBIAR,
      method: 'POST',
      dataType: 'json',
      data: { galonera_id, estado: estadoNuevo, motivo, fecha_cambio, fecha_regreso }
    })
    .done(async r=>{
      const ok   = (r && (r.ok === true || r.success === true));
      const msg  = (r && (r.msg || r.message)) || '';
      if (!ok) { Swal.fire({ icon:'error', title:'Error', text: msg || 'No se pudo actualizar.' }); return; }

      const mapBadge = {
        activo: 'bg-success',
        no_operativo: 'bg-warning',
        mantenimiento: 'bg-primary',
        desincorporado: 'bg-danger'
      };
      const mapText  = {
        activo: 'Activo',
        no_operativo: 'No operativo',
        mantenimiento: 'Mantenimiento',
        desincorporado: 'Desincorporado'
      };
      const badge = mapBadge[estadoNuevo] || 'bg-warning';
      const texto = mapText[estadoNuevo] || estadoNuevo;
      const nuevoDesde = (estadoNuevo === 'activo') ? fecha_regreso : fecha_cambio;
      const motivoToSet = (estadoNuevo === 'activo') ? '' : motivo;

      // 1) Actualiza badge en DOM (tabla y tarjeta)
      $(`.cambiar-estado-galonera[data-id='${galonera_id}']`)
        .each(function(){
          $(this)
            .removeClass()
            .addClass(`badge ${badge} cambiar-estado-galonera`)
            .text(texto)
            .attr('title', nuevoDesde ? ('Desde: ' + nuevoDesde) : '')
            .attr('data-fecha-desde', nuevoDesde || '')
            .attr('data-motivo', motivoToSet)
            .data('estado', estadoNuevo)
            .data('motivo', motivoToSet)
            .data('fecha-desde', nuevoDesde || '');
        });

      // 2) Actualiza el arreglo local para reflejo inmediato
      const idx = data.findIndex(x => String(x.id) === String(galonera_id));
      if (idx !== -1) {
        data[idx].estado = estadoNuevo;
        data[idx].motivo_estado = motivoToSet;
        data[idx].fecha_estado_desde = nuevoDesde || null;
      }

      Swal.fire({ icon:'success', title:'¡Éxito!', text: msg || 'Estado actualizado.', timer: 1600, showConfirmButton:false });
      $modal.modal('hide');

      // 3) Re-render inmediato de tarjetas y luego fetch fresco sin caché
      if (!$cardsWrap.hasClass('d-none')) {
        renderizarTarjetas();
        try { await cargarGalonerasParaTarjetas({ mantenerPagina: true }); } finally { renderizarTarjetas(); }
      }

      // 4) Refrescar DataTable si está visible
      if (window.dtGaloneras?.ajax?.reload) window.dtGaloneras.ajax.reload(null,false);
    })
    .fail(xhr=>{
      const m = (xhr.responseJSON && (xhr.responseJSON.msg || xhr.responseJSON.message))
        ? (xhr.responseJSON.msg || xhr.responseJSON.message)
        : 'Error al conectar con el servidor.';
      Swal.fire({ icon:'error', title:'Error', text:m });
    });
  });

  // Enter para guardar desde el modal
  $('#modalEstadoGalonera').on('keypress', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      $('#btnGuardarEstadoGalonera').click();
    }
  });
});
