// ../../Modelo/Archivos_JS/Gestion_Vehicular.js
$(function () {
  const URL_LISTAR  = '../../Controlador/Ctrl_Administrador/MySQL_Listar_Vehiculos_DT.php';
  const URL_CAMBIAR = '../../Controlador/Ctrl_Administrador/MySQL_Cambiar_Estado_Vehiculo.php';

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

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

  /* ------------------------- Utils ------------------------- */
  function escapeHtml(text) {
    if (text === null || text === undefined) return '';
    return String(text)
      .replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")
      .replace(/"/g,"&quot;").replace(/'/g,"&#039;");
  }
  function hoyISO() {
    const d=new Date(), m=String(d.getMonth()+1).padStart(2,'0'), day=String(d.getDate()).padStart(2,'0');
    return `${d.getFullYear()}-${m}-${day}`;
  }
  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 tarjetas (sin caché) --------------------- */
  function cargarVehiculosParaTarjetas({ mantenerPagina=true } = {}) {
    return $.ajax({
      url: URL_LISTAR,
      type:'GET',
      dataType:'json',
      cache: false,
      data: { _: Date.now() }   // ← rompe caché del navegador/proxy
    })
    .done(json => {
      const arr = Array.isArray(json) ? json : (Array.isArray(json?.data) ? json.data : null);
      if (arr) {
        data = arr;
        if (!mantenerPagina) pagina = 1;
      }
    })
    .fail(err => console.warn('No se pudo actualizar las tarjetas de vehículos.', err));
  }

  function renderizarTarjetas() {
    clampPagina();
    $cardsWrap.empty();

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

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

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

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

      const fdesde = escapeHtml(v.fecha_estado_desde || '');

      const puedeEditar   = !!window.puedeEditar;
      const puedeEliminar = !!window.puedeEliminar;
      const btnEditar = puedeEditar
        ? `<a href="Adm_Editar_Vehiculo.php?IV=${encodeURIComponent(v.id)}" class="btn btn-sm btn-outline-primary">
             <i class="bx bx-edit"></i> Editar
           </a>` : '';
      const btnEliminar = puedeEliminar
        ? `<a href="../../Controlador/Ctrl_Administrador/MySQL_Borrar_Vehiculo.php?IPV=${encodeURIComponent(v.placa||'')}"
             class="btn btn-sm btn-outline-danger">
             <i class="bx bx-trash"></i> Eliminar
           </a>` : '';
      const actionsHTML = (btnEditar || btnEliminar)
        ? `<div class="d-flex justify-content-between acciones-tarjeta mt-2">${btnEditar}${btnEliminar}</div>`
        : '';

      $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(v.placa)} - ${escapeHtml(v.modelo)}</h5>
              <p class="card-text mb-1"><strong>Año:</strong> ${escapeHtml(v.ano_fabricacion)}</p>
              <p class="card-text mb-1"><strong>Tipo:</strong> ${escapeHtml(v.tipo_vehiculo)}</p>
              <p class="card-text mb-1"><strong>Combustible:</strong> ${escapeHtml(v.tipo_combustible)}</p>
              <p class="card-text mb-1"><strong>Capacidad:</strong> ${escapeHtml(v.capacidad_combustible)} GLN</p>
              <p class="card-text mb-1"><strong>Kilometraje Inicial:</strong> ${escapeHtml(v.kilometraje_inicial)} KM</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-vehiculo"
                      role="button"
                      title="${fdesde ? 'Desde: '+fdesde : ''}"
                      data-id="${escapeHtml(v.id)}"
                      data-estado="${escapeHtml(estado)}"
                      data-motivo="${escapeHtml(v.motivo_estado || '')}"
                      data-fecha-desde="${fdesde}"
                      data-modulo="vehiculos">${est.texto}</span>
              </p>
              ${motivoHTML}
              ${actionsHTML}
            </div>
          </div>
        </div>
      `);
    });

    const tp = totalPaginas();
    $cardsWrap.append(`
      <div class="pagination-controls text-center my-2">
        <button class="btn btn-sm btn-outline-secondary me-2" id="btnPrevCardsVeh" ${pagina<=1?'disabled':''}>Anterior</button>
        <span class="mx-2">Página ${pagina} de ${tp}</span>
        <button class="btn btn-sm btn-outline-secondary ms-2" id="btnNextCardsVeh" ${pagina>=tp?'disabled':''}>Siguiente</button>
      </div>
    `);
    $('#btnPrevCardsVeh').on('click', ()=>{ if(pagina>1){ pagina--; renderizarTarjetas(); }});
    $('#btnNextCardsVeh').on('click', ()=>{ 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 cargarVehiculosParaTarjetas({mantenerPagina:false}); } finally { renderizarTarjetas(); }
    } else {
      $cardsWrap.addClass('d-none').empty(); $tablaWrap.removeClass('d-none');
      $(this).text('Ver como tarjetas');
    }
  });

  /* -------------------- Botón Actualizar (sin caché) -------------------- */
  $(document).on('click', '#btnActualizarVehiculos', async function(e){
    e.preventDefault();
    const $btn=$(this), txt=$btn.text(); $btn.prop('disabled',true).text('Actualizando...');
    try {
      if (window.dtVehiculos?.ajax?.reload) {
        await new Promise(res=> window.dtVehiculos.ajax.reload(()=>res(), false));
      }
      if (!$cardsWrap.hasClass('d-none')) {
        try { await cargarVehiculosParaTarjetas({mantenerPagina:true}); } finally { renderizarTarjetas(); }
      }
    } finally { $btn.prop('disabled',false).text(txt); }
  });

  /* -------------------- Vista automática -------------------- */
  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)');
        cargarVehiculosParaTarjetas({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);

  /* ===================== MODAL: estado + FECHAS ===================== */
  const $modal      = $('#modalEstadoVehiculo');
  const $idVeh      = $('#estado_id_vehiculo');
  const $estado     = $('#nuevo_estado');
  const $fCambio    = $('#fecha_cambio');     // cuando sale de ACTIVO
  const $fRegreso   = $('#fecha_regreso');    // cuando vuelve a ACTIVO
  const $grpCambio  = $('#grp_fecha_cambio');
  const $grpRegreso = $('#grp_fecha_regreso');
  const $motivo     = $('#motivo_estado');
  const $motivoWrap = $('#motivo_container');

  function toggleCampos(){
    const v = ($estado.val()||'').toLowerCase();
    const esActivo = (v === 'activo');
    const requiereMotivo = (v !== 'activo'); // motivo solo cuando NO está 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('');
    } else {
      if (!$fCambio.val()) $fCambio.val(hoyISO());
      $fRegreso.val('');
    }

    $motivoWrap.toggle(requiereMotivo);
  }
  $estado.on('change', toggleCampos);

  // Abrir modal desde tarjeta (.cambiar-estado-vehiculo) o desde tabla (.cambiar-estado)
  $(document).on('click', '.cambiar-estado, .cambiar-estado-vehiculo', function(){
    if (!window.puedeEstadoVehiculos) return;

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

    $idVeh.val(id);
    $estado.val(estadoActual);
    $motivo.val(motivoActual);

    $fCambio.val(desde || '');
    $fRegreso.val('');

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

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

  // Guardar cambio
  $('#btnGuardarEstadoVehiculo').on('click', function(){
    const id            = parseInt($idVeh.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;

    if (!id) {
      Swal.fire('Atención','Vehículo no identificado.','warning'); return;
    }
    if (estadoNuevo === 'activo' && !fecha_regreso) {
      Swal.fire({icon:'warning', title:'Fecha requerida', text:'Indique la fecha de regreso a ACTIVO.'}); return;
    }
    if (estadoNuevo !== 'activo' && !fecha_cambio) {
      Swal.fire({icon:'warning', title:'Fecha requerida', text:'Indique la fecha de cambio.'}); return;
    }
    if (estadoNuevo !== 'activo' && !motivo) {
      Swal.fire({icon:'warning', title:'Motivo requerido', text:'Debe ingresar el motivo del cambio.'}); return;
    }

    const $badge = $(`.cambiar-estado[data-id='${id}'], .cambiar-estado-vehiculo[data-id='${id}']`).first();
    const fechaDesdeActual = ($badge.attr('data-fecha-desde') || $badge.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 activo (${fechaDesdeActual}).`, 'warning');
      return;
    }

    $.ajax({
      url: URL_CAMBIAR,
      method: 'POST',
      dataType: 'json',
      data: { 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:'Operativo', no_operativo:'No Operativo', mantenimiento:'Mantenimiento', desincorporado:'Desincorporado' };
      const badge = mapBadge[estadoNuevo] || 'bg-secondary';
      const texto = mapText[estadoNuevo] || estadoNuevo;
      const nuevoDesde = (estadoNuevo === 'activo') ? fecha_regreso : fecha_cambio;
      const motivoToSet = (estadoNuevo === 'activo') ? '' : motivo;

      // 1) Actualiza badges existentes (tabla y tarjeta)
      $(`.cambiar-estado[data-id='${id}'], .cambiar-estado-vehiculo[data-id='${id}']`)
        .each(function(){
          $(this)
            .removeClass()
            .addClass(`badge ${badge} ${$(this).hasClass('cambiar-estado-vehiculo') ? 'cambiar-estado-vehiculo' : 'cambiar-estado'}`)
            .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 `data` para que la próxima renderización ya venga correcto
      const idx = data.findIndex(x => String(x.id) === String(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) Si estás en tarjetas, re-render inmediato y además refresco sin caché desde servidor
      if (!$cardsWrap.hasClass('d-none')) {
        renderizarTarjetas(); // inmediato
        try { await cargarVehiculosParaTarjetas({mantenerPagina:true}); } finally { renderizarTarjetas(); }
      }

      // 4) Refrescar DataTable si está visible
      if (window.dtVehiculos?.ajax?.reload) window.dtVehiculos.ajax.reload(null, false);
    })
    .fail(()=>{
      Swal.fire({ icon:'error', title:'Error', text:'Error al conectar con el servidor.' });
    });
  });

  // Enter para guardar
  $('#modalEstadoVehiculo').on('keypress', function (e) {
    if (e.key === 'Enter') { e.preventDefault(); $('#btnGuardarEstadoVehiculo').click(); }
  });
});
