(() => {
  // si jQuery está cargado, añade CSRF a AJAX
  const csrfToken = document.querySelector('meta[name="_csrf"]')?.getAttribute('content');
  const csrfHeader = document.querySelector('meta[name="_csrf_header"]')?.getAttribute('content');
  if (window.$ && csrfToken && csrfHeader) {
    $.ajaxSetup({
      beforeSend: function (xhr) {
        xhr.setRequestHeader(csrfHeader, csrfToken);
      }
    });
  }

  const language = document.documentElement.lang || 'es-ES';

  // Comprueba dependencias antes de iniciar
  if (!window.DataTable) {
    console.error('DataTables no está cargado aún');
    return;
  }

  const table = new DataTable('#margenes-datatable', {
    processing: true,
    serverSide: true,
    orderCellsTop: true,
    stateSave: true,
    pageLength: 50,
    language: { url: '/assets/libs/datatables/i18n/' + language + '.json' },
    responsive: true,
    ajax: {
      url: '/configuracion/margenes-presupuesto/datatable',
      method: 'GET',
      data: function (d) {
        d.f_encuadernacion = $('#search-encuadernacion').val() || '';   // 'USER' | 'ADMIN' | 'SUPERADMIN' | ''
        d.f_cubierta = $('#search-cubierta').val() || '';   // 'true' | 'false' | ''
      }
    },
    order: [[0, 'asc']],
    columns: [
      { data: 'id', name: 'id', orderable: true },
      { data: 'tipoEncuadernacion', name: 'tipoEncuadernacion', orderable: true },
      { data: 'tipoCubierta', name: 'tipoCubierta', orderable: true },
      { data: 'tiradaMin', name: 'tiradaMin', orderable: true },
      { data: 'tiradaMax', name: 'tiradaMax', orderable: true },
      { data: 'margenMax', name: 'margenMax', orderable: true },
      { data: 'margenMin', name: 'margenMin', orderable: true },
      { data: 'actions', name: 'actions' }
    ],
    columnDefs: [{ targets: -1, orderable: false, searchable: false }]
  });

  table.on("keyup", ".margenes-presupuesto-filter", function () {
    const colName = $(this).data("col");
    const colIndex = table.settings()[0].aoColumns.findIndex(c => c.name === colName);

    if (colIndex >= 0) {
      table.column(colIndex).search(this.value).draw();
    }
  });

  table.on("change", ".margenes-presupuesto-select-filter", function () {
    table.draw();
  });

  const modalEl = document.getElementById('margenesPresupuestoFormModal');
  const modal = bootstrap.Modal.getOrCreateInstance(modalEl);

  // Abrir "Crear"
  $('#addButton').on('click', (e) => {
    e.preventDefault();
    $.get('/configuracion/margenes-presupuesto/form', function (html) {
      $('#margenesPresupuestoModalBody').html(html);
      const title = $('#margenesPresupuestoModalBody #margenesPresupuestoForm').data('add');
      $('#margenesPresupuestoModal .modal-title').text(title);
      modal.show();
    });
  });

  // Abrir "Editar"
  $(document).on('click', '.btn-edit-margen', function (e) {
    e.preventDefault();
    const id = $(this).data('id');
    $.get('/configuracion/margenes-presupuesto/form', { id }, function (html) {
      $('#margenesPresupuestoModalBody').html(html);
      const title = $('#margenesPresupuestoModalBody #margenesPresupuestoForm').data('edit');
      $('#margenesPresupuestoModal .modal-title').text(title);
      modal.show();
    });
  });

  // Botón "Eliminar"
  $(document).on('click', '.btn-delete-margen', function (e) {
    e.preventDefault();
    const id = $(this).data('id');

    Swal.fire({
      title: window.languageBundle.get(['margenes-presupuesto.delete.title']) || 'Eliminar margen',
      html: window.languageBundle.get(['margenes-presupuesto.delete.text']) || 'Esta acción no se puede deshacer.',
      icon: 'warning',
      showCancelButton: true,
      buttonsStyling: false,
      customClass: {
        confirmButton: 'btn btn-danger w-xs mt-2',
        cancelButton: 'btn btn-light w-xs mt-2'
      },
      confirmButtonText: window.languageBundle.get(['margenes-presupuesto.delete.button']) || 'Eliminar',
      cancelButtonText: window.languageBundle.get(['app.cancelar']) || 'Cancelar',
    }).then((result) => {
      if (!result.isConfirmed) return;

      $.ajax({
        url: '/configuracion/margenes-presupuesto/' + id,
        type: 'DELETE',
        success: function () {
          Swal.fire({
            icon: 'success', title: window.languageBundle.get(['margenes-presupuesto.delete.ok.title']) || 'Eliminado',
            text: window.languageBundle.get(['margenes-presupuesto.delete.ok.text']) || 'El margen ha sido eliminado con éxito.',
            showConfirmButton: true,
            customClass: {
              confirmButton: 'btn btn-secondary w-xs mt-2',
            },
          });
          $('#margenes-datatable').DataTable().ajax.reload(null, false);
        },
        error: function (xhr) {
          //  usa el mensaje del backend; fallback genérico por si no llega JSON
          const msg = (xhr.responseJSON && xhr.responseJSON.message)
            || 'Error al eliminar el usuario.';
          Swal.fire({ icon: 'error', title: 'No se pudo eliminar', text: msg });
        }
      });
    });
  });

  // Submit del form en el modal
  $(document).on('submit', '#margenesPresupuestoForm', function (e) {
    e.preventDefault();
    const $form = $(this);

    $.ajax({
      url: $form.attr('action'),
      type: 'POST',               // PUT simulado via _method
      data: $form.serialize(),
      dataType: 'html',
      success: function (html) {
        // Si por cualquier motivo llega 200 con fragmento, lo insertamos igual
        if (typeof html === 'string' && html.indexOf('id="margenesPresupuestoForm"') !== -1 && html.indexOf('<html') === -1) {
          $('#margenesPresupuestoModalBody').html(html);
          const isEdit = $('#margenesPresupuestoModalBody #margenesPresupuestoForm input[name="_method"][value="PUT"]').length > 0;
          const title = $('#margenesPresupuestoModalBody #margenesPresupuestoForm').data(isEdit ? 'edit' : 'add');
          $('#margenesPresupuestoModal .modal-title').text(title);
          return;
        }
        // Éxito real: cerrar y recargar tabla
        modal.hide();
        table.ajax.reload(null, false);
      },
      error: function (xhr) {
        // Con 422 devolvemos el fragmento con errores aquí
        if (xhr.status === 422 && xhr.responseText) {
          $('#margenesPresupuestoModalBody').html(xhr.responseText);
          const isEdit = $('#margenesPresupuestoModalBody #margenesPresupuestoForm input[name="_method"][value="PUT"]').length > 0;
          const title = $('#margenesPresupuestoModalBody #margenesPresupuestoForm').data(isEdit ? 'edit' : 'add');
          $('#margenesPresupuestoModal .modal-title').text(title);
          return;
        }
        // Fallback
        $('#margenesPresupuestoModalBody').html('<div class="p-3 text-danger">Error inesperado.</div>');
      }
    });
  });

})();
