// Endpoint del controlador (ajustado a tu estructura)
const ENDPOINT = "../../Controlador/Ctrl_Administrador/MySQL_Mantenimiento_Aceite.php";

function badgeRestantes(v){
  if(v===null || v===undefined || v==='') return '<span class="badge bg-secondary">-</span>';
  const n = parseInt(v,10); if(isNaN(n)) return '<span class="badge bg-secondary">-</span>';
  if(n <= 0)   return `<span class="badge bg-danger">${n}</span>`;
  if(n <= 500) return `<span class="badge bg-warning text-dark">${n}</span>`;
  return `<span class="badge bg-success">${n}</span>`;
}
function badgeEstado(e){
  const map = {
    cambio_realizado: ['bg-success','Cambio realizado'],
    programar_cambio: ['bg-primary','Programar cambio'],
    verificar_km:     ['bg-warning text-dark','Verificar KM'],
    observado:        ['bg-danger','Observado']
  };
  const [cls,txt]=(map[e]||['bg-secondary',e?.replace('_',' ')||'-']);
  return `<span class="badge ${cls}">${txt}</span>`;
}

$(function(){
  const dt = $("#tblMantAceite").DataTable({
    ajax:{ url: ENDPOINT, type:"GET", data:{action:"list"}, dataSrc: r=> (r && r.data) ? r.data : [] },
    columns:[
      {data:"placa"},
      {data:"ultimo_cambio_km", className:"text-end"},
      {data:"ultimo_cambio_fecha"},
      {data:"frecuencia_km", className:"text-end"},
      {data:"km_actual", className:"text-end"},
      {data:"proximo_cambio_km", className:"text-end"},
      {data:"km_restantes", className:"text-center", render: badgeRestantes},
      {data:"estado", render: badgeEstado},
      {data:"observacion", defaultContent:"-"},
      {data:"updated_at", render:d=> d? new Date(d).toLocaleString() : '-'},
      {data:null, orderable:false, render:(_,__,row)=>
        `<button class="btn btn-sm btn-outline-info btn-registrar" data-id="${row.vehiculo_id}" title="Registrar cambio con KM actual"><i class='bx bx-check-circle'></i></button>`
      }
    ],
    order:[[6,'asc']],
    responsive:true,
    dom: 'Bfrtip',
    buttons: [
      { extend:'excel', className:'btn btn-success btn-sm', text:'Excel' },
      { extend:'print', className:'btn btn-secondary btn-sm', text:'Imprimir' },
      { text:'Recargar', className:'btn btn-outline-primary btn-sm', action:()=>dt.ajax.reload() }
    ],
    language:{ url:"https://cdn.datatables.net/plug-ins/1.13.8/i18n/es-ES.json" }
  });

  const modalEl = document.getElementById('modalMantAceite');
  const modal = new bootstrap.Modal(modalEl);

  // --- Select2: inicializador para el select de vehículos
  function initSelect2Vehiculo() {
    const $sel = $('#selVehiculo');

    // Evita reinicializaciones
    if ($sel.hasClass('select2-hidden-accessible')) {
      $sel.select2('destroy');
    }

    $sel.select2({
      theme: 'bootstrap-5',
      width: '100%',
      placeholder: 'Seleccione vehículo',
      allowClear: true,
      dropdownParent: $('#modalMantAceite')
    });

    // Auto-focus al buscador cuando abre
    $sel.on('select2:open', () => {
      const searchBox = document.querySelector('.select2-container--open .select2-search__field');
      if (searchBox) searchBox.focus();
    });
  }

  // Abrir modal para nuevo mantenimiento
  $("#btnNuevo").on("click", ()=>{
    $("#frmMantAceite")[0].reset();
    $("#km_actual").val('');
    $("#km_cambio").val('');
    $("#fecha_cambio").val(new Date().toISOString().slice(0,10));

    cargarVehiculos().then(() => {
      // Deja el select vacío con placeholder
      $('#selVehiculo').val(null).trigger('change');
      initSelect2Vehiculo();
      modal.show();
    });
  });

  // También asegura que Select2 esté listo si se abre por otros medios
  $(modalEl).on('shown.bs.modal', () => {
    initSelect2Vehiculo();
  });

  // Cargar lista de vehículos (devuelve Promesa)
  function cargarVehiculos(){
    $("#selVehiculo").html('<option value="">Cargando...</option>');
    return $.getJSON(ENDPOINT, {action:'vehiculos'})
      .then(res=>{
        let html = '<option value=""></option>'; // para allowClear + placeholder
        (res.data||[]).forEach(v=>{
          const marca = v.marca ? ` - ${v.marca}` : '';
          html += `<option value="${v.id}">${v.placa}${marca}</option>`;
        });
        $("#selVehiculo").html(html);
      })
      .catch(xhr=>{
        $("#selVehiculo").html('<option value="">Error al cargar</option>');
        console.error('vehiculos:', xhr.responseText);
      });
  }

  // Al elegir vehículo, traer KM actual y sugerir KM del cambio = KM actual
  $("#selVehiculo").on("change", function(){
    const id = $(this).val();
    if(!id){ $("#km_actual").val(''); $("#km_cambio").val(''); return; }
    $.getJSON(ENDPOINT, {action:'get_km', vehiculo_id:id}, res=>{
      const km = res?.km_actual ?? 0;
      $("#km_actual").val(km);
      $("#km_cambio").val(km);
    }).fail(xhr=> console.error('get_km:', xhr.responseText));
  });

  // Guardar mantenimiento (agregar)
  $("#btnGuardarCambio").on("click", ()=>{
    const data = {
      action:'agregar',
      vehiculo_id: $("#selVehiculo").val(),
      km_cambio: $("#km_cambio").val(),
      fecha_cambio: $("#fecha_cambio").val(),
      frecuencia_km: $("#frecuencia_km").val(),
      observacion: $("#observacion").val()
    };
    if(!data.vehiculo_id || !data.km_cambio || !data.fecha_cambio){
      Swal.fire('Faltan datos', 'Completa vehículo, km y fecha', 'warning'); return;
    }
    $.post(ENDPOINT, data, res=>{
      if(res?.ok){
        Swal.fire({icon:'success', title: res.msg || 'Guardado', timer: 1200, showConfirmButton:false});
        modal.hide(); 
        dt.ajax.reload();
      }else{
        Swal.fire('Error', res?.msg || 'No se pudo guardar', 'error');
      }
    }, 'json').fail(xhr=>{
      console.error('agregar:', xhr.responseText);
      Swal.fire('Error', 'Respuesta inválida del servidor', 'error');
    });
  });

  // Registrar cambio con KM actual desde la tabla (opción rápida)
  $("#tblMantAceite").on("click", ".btn-registrar", function(){
    const data = dt.row($(this).closest('tr')).data();
    Swal.fire({
      title:`¿Registrar cambio de aceite para ${data.placa}?`,
      text:'Se usará el KM actual (último abastecimiento).',
      icon:'question', showCancelButton:true, confirmButtonText:'Sí, registrar'
    }).then(r=>{
      if(!r.isConfirmed) return;
      $.post(ENDPOINT, {action:'registrar_cambio', vehiculo_id: data.vehiculo_id, observacion: ''}, res=>{
        if(res?.ok){
          Swal.fire({icon:'success', title: res.msg || 'Registrado', timer:1200, showConfirmButton:false});
          dt.ajax.reload();
        } else {
          Swal.fire('Error', res?.msg || 'No se pudo registrar', 'error');
        }
      }, 'json').fail(xhr=>{
        console.error('registrar_cambio:', xhr.responseText);
        Swal.fire('Error', 'Respuesta inválida del servidor', 'error');
      });
    });
  });
});
