// ../../Modelo/Archivos_JS/Gestion_Grifos.js
$(function () {
  const URL_LISTAR  = '../../Controlador/Ctrl_Administrador/MySQL_Listar_Grifos_DT.php';
  const URL_CAMBIAR = '../../Controlador/Ctrl_Administrador/MySQL_Cambiar_Estado_Grifo.php';

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

  const POR_PAGINA = 8;
  let pagina = 1;
  let data   = Array.isArray(window.grifosData) ? window.grifosData.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 cargarGrifosParaTarjetas({ 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 grifos.', err);
    });
  }

  /* --------------------- Render tarjetas + paginación --------------------- */
  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 grifos para mostrar.</div>');
      return;
    }

    subset.forEach(g => {
      const estado = (g.estado || '').toString().toLowerCase();
      const estMap = {
        'activo':         { badge: 'bg-success',     texto: 'Activo' },
        'inactivo':       { badge: 'bg-secondary',   texto: 'Inactivo' },
        'mantenimiento':  { badge: 'bg-primary',     texto: 'Mantenimiento' },
        'desincorporado': { badge: 'bg-danger',      texto: 'Desincorporado' }
      };
      const est = estMap[estado] || { badge: 'bg-secondary', texto: g.estado || '' };
      const fDesde = escapeHtml(g.fecha_estado_desde || '');
      const motivo = String(g.motivo_estado || '').trim();
      const motivoHTML = motivo ? `<p class="card-text mb-1"><strong>Motivo:</strong> ${escapeHtml(motivo)}</p>` : '';

      let botones = '';
      if (window.puedeEditar) {
        botones += `<a href="Adm_Editar_Grifo.php?IG=${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_Grifo.php?IDG=${encodeURIComponent(g.id)}" class="btn btn-sm btn-outline-danger"><i class="bx bx-trash"></i> Eliminar</a>`;
      }

      $cardsWrap.append(`
        <div class="col-12 col-sm-10 col-md-8 col-lg-6 mx-auto">
          <div class="card card-driver mb-3 shadow-sm mx-2">
            <div class="card-body">
              <h5 class="card-title text-primary">${escapeHtml(g.nombre)}</h5>
              <p class="card-text mb-1"><strong>RUC:</strong> ${escapeHtml(g.ruc)}</p>
              <p class="card-text mb-1"><strong>Teléfono:</strong> ${escapeHtml(g.telefono)}</p>
              <p class="card-text mb-1"><strong>Lugar:</strong> ${escapeHtml(g.lugar)}</p>
              <p class="card-text mb-1 d-flex align-items-center">
                <strong class="me-2">Estado:</strong>
                <span class="badge ${est.badge} cambiar-estado-grifo"
                      role="button"
                      title="${fDesde ? 'Desde: ' + fDesde : ''}"
                      data-id="${escapeHtml(g.id)}"
                      data-estado="${escapeHtml(estado)}"
                      data-motivo="${escapeHtml(motivo)}"
                      data-fecha-desde="${fDesde}"
                      data-modulo="grifos">${est.texto}</span>
              </p>
              ${motivoHTML}
              <div class="d-flex justify-content-between mt-2 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="btnPrevCardsGrifo" ${prevDisabled}>Anterior</button>
        <span class="mx-2">Página ${pagina} de ${tp}</span>
        <button class="btn btn-sm btn-outline-secondary" id="btnNextCardsGrifo" ${nextDisabled}>Siguiente</button>
      </div>
    `);
    $cardsWrap.append(paginador);

    $('#btnPrevCardsGrifo').on('click', function(){ if (pagina > 1) { pagina--; renderizarTarjetas(); } });
    $('#btnNextCardsGrifo').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 cargarGrifosParaTarjetas({ mantenerPagina: false }); } finally { renderizarTarjetas(); }
    } else {
      $cardsWrap.addClass('d-none').empty();
      $tablaWrap.removeClass('d-none');
      $(this).text('Ver como tarjetas');
    }
  });

  /* ---------------- 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)');
        cargarGrifosParaTarjetas({ 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      = $('#modalEstadoGrifo');
  const $idGrifo    = $('#estado_id_grifo');
  const $estado     = $('#nuevo_estado');
  const $fCambio    = $('#fecha_cambio');    // cuando NO es 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');

    $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 pasa 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
  $(document).on('click', '.cambiar-estado-grifo', function(){
    if (!window.puedeEstadoGrifos) 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')||''));

    $idGrifo.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
  $('#btnGuardarEstadoGrifo').on('click', function(){
    const grifo_id     = parseInt($idGrifo.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 (!grifo_id) { Swal.fire('Atención','Grifo no identificado.','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-grifo[data-id='${grifo_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 no activa (${fechaDesdeActual}).`, 'warning');
      return;
    }

    $.ajax({
      url: URL_CAMBIAR,
      method: 'POST',
      dataType: 'json',
      data: { id: grifo_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', inactivo:'bg-secondary', mantenimiento:'bg-primary', desincorporado:'bg-danger' };
      const mapText  = { activo:'Activo',     inactivo:'Inactivo',     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 badge en DOM (tabla y tarjeta)
      $(`.cambiar-estado-grifo[data-id='${grifo_id}']`)
        .each(function(){
          $(this)
            .removeClass()
            .addClass(`badge ${badge} cambiar-estado-grifo`)
            .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(grifo_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 cargarGrifosParaTarjetas({ mantenerPagina: true }); } finally { renderizarTarjetas(); }
      }

      // 4) Refrescar DataTable si está visible
      if (window.dtGrifos?.ajax?.reload) window.dtGrifos.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
  $modal.on('keypress', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      $('#btnGuardarEstadoGrifo').click();
    }
  });

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

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

  /* --------------- Deshabilitar badges si no hay permiso --------------- */
  if (!window.puedeEstadoGrifos) {
    $(document)
      .on('mouseenter', '.cambiar-estado-grifo', function(){ $(this).attr('title', 'No tienes permisos para cambiar el estado'); })
      .on('click', '.cambiar-estado-grifo', function(e){ e.preventDefault(); });
    $('.cambiar-estado-grifo').css({ cursor:'not-allowed' });
  }
});
