// ../../Modelo/Archivos_JS/DataTable_Usuarios.js
$(function () {
  $.fn.dataTable.ext.errMode = 'none';

  const $wrap  = $('#tablaResponsive');      // contenedor de la tabla (d-none en móvil)
  const $table = $('#tablaUsuarios');
  const $cards = $('#tarjetasResponsive');   // contenedor de tarjetas (solo móvil)
  const $btn   = $('#toggleViewBtn');
  const $btnActualizar = $('#btnActualizarUsuarios');

  let dt = null;
  let vista = 'tabla'; // 'tabla' | 'tarjetas'

  // ------- fallback: si en móvil no se pintan tarjetas por PHP, intentar con JS -------
  function ensureCardsFallback() {
    if (!$cards.length) return;
    const tieneTarjetas = $cards.find('.card-driver').length > 0;
    const data = Array.isArray(window.usuariosData) ? window.usuariosData : [];
    if (tieneTarjetas || data.length === 0) return;

    // Render mínimo (no modal ni acciones avanzadas) para no dejarlo vacío
    $cards.empty();
    data.forEach(u => {
      const estado = String(u.estado || '').toLowerCase();
      const map = { activo:'bg-success', inactivo:'bg-secondary', suspendido:'bg-warning', bloqueado:'bg-danger' };
      const mapTx = { activo:'Activ@', inactivo:'Inactiv@', suspendido:'Suspendid@', bloqueado:'Bloquead@' };

      $cards.append(`
        <div class="card-driver mb-3 shadow-sm">
          <h5>${(u.nombre||'') + ' ' + (u.apellido||'')}</h5>
          <p><strong>Usuario:</strong> ${u.usuario||''}</p>
          <p><strong>Correo:</strong> ${u.correo||''}</p>
          <p><strong>Teléfono:</strong> ${u.telefono||''}</p>
          <p><strong>Cargo:</strong> ${u.cargo_usuario||''}</p>
          <p class="mb-2">
            <strong>Estado:</strong>
            <span class="badge ${map[estado]||'bg-dark'} cambiar-estado-usuario"
              role="button"
              data-id="${u.id_usuario}"
              data-estado="${estado}"
              data-motivo="${(u.motivo_estado||'').replace(/"/g,'&quot;')}"
              data-fecha-desde="${u.fecha_estado_desde||''}"
              data-modulo="usuarios">
              ${mapTx[estado]||u.estado||''}
            </span>
          </p>
        </div>
      `);
    });

    if (!data.length) {
      $cards.html('<div class="text-center text-muted py-3">No hay usuarios para mostrar.</div>');
    }
  }

  // ------- auditoría de exportación -------
  function auditarExportacion(tipo) {
    $.ajax({
      url: '../../Controlador/Utilidades/Auditoria_Exportacion_Usuarios.php',
      method: 'POST',
      data: { accion: tipo }
    });
  }

  // ------- construir botones de exportación si hay permiso -------
  function buildButtons() {
    if (!window.tienePermisoReportes) return [];
    return [
      {
        extend: 'copy',
        text: 'Copiar',
        exportOptions: { columns: ':not(:last-child)' },
        action: function (e, dt, node, config) {
          auditarExportacion('copiar');
          $.fn.dataTable.ext.buttons.copyHtml5.action.call(this, e, dt, node, config);
        }
      },
      {
        extend: 'excelHtml5',
        text: 'Excel',
        title: null,
        exportOptions: { columns: ':not(:last-child)' },
        action: function (e, dt, node, config) {
          auditarExportacion('excel');
          $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);
        }
      },
      {
        extend: 'csvHtml5',
        text: 'CSV',
        charset: 'utf-8',
        bom: true,
        exportOptions: { columns: ':not(:last-child)' },
        action: function (e, dt, node, config) {
          auditarExportacion('csv');
          $.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, node, config);
        }
      },
      {
        extend: 'pdfHtml5',
        text: 'PDF',
        title: '',
        orientation: 'landscape',
        pageSize: 'A4',
        exportOptions: { columns: ':not(:last-child)', stripHtml: true },
        customize: function (doc) {
          // que “llene” la hoja
          doc.pageMargins = [20, 60, 20, 30];
          doc.defaultStyle = { fontSize: 9, alignment: 'center' };
          doc.styles.tableHeader = { fillColor: '#009EE3', color: '#FFFFFF', fontSize: 9, alignment: 'center' };

          // encabezado con datos de empresa
          const empresa = window.empresaInfo || {};
          const now = new Date();
          const fecha = now.toLocaleDateString() + ' ' + now.toLocaleTimeString();
          const header = {
            margin: [0, 0, 0, 8],
            alignment: 'center',
            stack: [
              { text: (empresa.nombre || ''), bold: true, fontSize: 14 },
              { text: 'RUC: ' + (empresa.ruc || ''), fontSize: 10 },
              { text: `Reporte generado el: ${fecha}`, fontSize: 9 },
              { text: `Usuario: ${empresa.usuario || ''} - Cargo: ${(empresa.cargo || '').toString().toUpperCase()}`, fontSize: 9 }
            ]
          };
          doc.content.splice(0, 0, header);

          // ancho 100% para la tabla
          const table = doc.content.find(c => c.table);
          if (table) {
            const cols = table.table.body[0].length;
            table.table.widths = Array(cols).fill('*');
            table.layout = {
              hLineWidth: () => 0.5,
              vLineWidth: () => 0.5,
              hLineColor: () => '#CCCCCC',
              vLineColor: () => '#CCCCCC',
              paddingLeft: () => 4,
              paddingRight: () => 4,
              paddingTop: () => 3,
              paddingBottom: () => 3
            };
          }

          doc.footer = function (currentPage, pageCount) {
            return {
              margin: [20, 0, 20, 0],
              fontSize: 8,
              columns: [
                { text: (empresa.nombre || ''), alignment: 'left' },
                { text: 'Página ' + currentPage + ' de ' + pageCount, alignment: 'right' }
              ]
            };
          };
        },
        action: function (e, dt, node, config) {
          auditarExportacion('pdf');
          $.fn.dataTable.ext.buttons.pdfHtml5.action.call(this, e, dt, node, config);
        }
      }
    ];
  }

  // ------- inicializar DataTable (solo 1 vez) -------
  function initOnce() {
    if (dt) return dt;

    dt = $table.DataTable({
      responsive: true,
      scrollX: true,
      pageLength: 8,
      order: [],
      dom: 'Bfrtip',                     
      buttons: buildButtons(),           
      columnDefs: [
        { targets: [0,1,2,3,4,5,7], className: 'text-start' },
        { targets: [6,8,9], className: 'text-center' },
        { targets: 0, width: '5%'  },
        { targets: 1, width: '8%'  },
        { targets: 2, width: '5%'  },
        { targets: 3, width: '8%' },
        { targets: 4, width: '14%' },
        { targets: 5, width: '16%' },
        { targets: 6, width: '10%' },
        { targets: 7, width: '10%' },
        { targets: 8, width: '8%'  },
        { targets: 9, width: '8%'  }
      ],
      language: { url: '../../Modelo/Archivos_JS/datatables_es.json' }
    });

    // Buscar solo con Enter
    const $input = $('#tablaUsuarios_filter input');
    $input.off('keyup').on('keyup', function (e) {
      if (e.key === 'Enter') dt.search(this.value).draw();
    });

    return dt;
  }

  // ------- alternar vistas -------
  function showTable() {
    vista = 'tabla';
    initOnce();
    $cards.addClass('d-none');
    $wrap.removeClass('d-none');

    // dar tiempo a pintar botones y recalcular
    setTimeout(() => {
      dt.columns.adjust().responsive.recalc();
    }, 100);

    $btn.text('Ver como tarjetas');
  }

  function showCards() {
    vista = 'tarjetas';
    $wrap.addClass('d-none');
    $cards.removeClass('d-none');
    $btn.text('Ver como tabla');
    ensureCardsFallback();
  }

  // ------- estado inicial según ancho -------
  const isMobile = window.matchMedia('(max-width: 767.98px)').matches;
  if (isMobile) showCards(); else showTable();

  // ------- Alternar al pulsar botón -------
  $btn.on('click', function () {
    const tablaVisible = !$wrap.hasClass('d-none');
    if (tablaVisible) showCards();
    else showTable();
  });

  // ------- Ajustar al volver con el botón “atrás” / BFCache -------
  window.addEventListener('pageshow', function () {
    if (vista === 'tabla' && dt) {
      setTimeout(() => dt.columns.adjust().responsive.recalc(), 100);
    }
  });

  // ------- Botón Actualizar -------
  $btnActualizar.on('click', function (e) {
    e.preventDefault();
    const $b = $(this);
    const prev = $b.html();
    $b.prop('disabled', true).html('Actualizando...');
    // Mantener la vista actual tras recarga
    sessionStorage.setItem('usuarios__vista', vista);
    location.reload(true);
  });

  // Al cargar (tras recarga), restablecer la vista que teníamos
  const vistaGuardada = sessionStorage.getItem('usuarios__vista');
  if (vistaGuardada) {
    sessionStorage.removeItem('usuarios__vista');
    if (vistaGuardada === 'tarjetas') showCards();
    else showTable();
  }
});
