// resources/js/formularios/form-stepper.js
import Alpine from 'alpinejs';

function getSection(root, step) {
  return root.querySelector(`[x-ref="step${step}"]`);
}
function checkSectionValidity(section, { showUI = false } = {}) {
  if (!section) return true;
  const fields = section.querySelectorAll('input[required], select[required], textarea[required]');
  for (const el of fields) {
    const isNumberEmpty = el.type === 'number' && (el.value === '' || el.value === null);
    const isInvalid = !el.checkValidity() || isNumberEmpty;
    if (isInvalid) { if (showUI) el.reportValidity(); return false; }
  }
  return true;
}

export function formStepper(total = 5, labels = ['Datos básicos','Disposiciones','Ejecución','Indicadores','Resumen']) {
  return {
    step: 1, total, labels,
    isCurrentStepValid() {
      const section = getSection(this.$root, this.step);
      return checkSectionValidity(section, { showUI: false });
    },
// resources/js/formularios/form-stepper.js
next() {
  const section = getSection(this.$root, this.step);
  if (!checkSectionValidity(section, { showUI: true })) return;

  // 🔔 Pedir a las secciones que sincronicen su resumen
  window.dispatchEvent(new CustomEvent('sync-resumen'));
  // Despacho diferido para garantizar que Alpine haya aplicado los x-model
  requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('sync-resumen')));

  if (this.step < this.total) this.step++;
},

    prev() { if (this.step > 1) this.step--; },
    back() { this.prev(); },
    onSubmit() {

     const section = getSection(this.$root, this.step);
      if (!checkSectionValidity(section, { showUI: true })) return;

      // Si NO estamos en el último paso, solo avanza
      if (this.step < this.total) { this.step++; return; }
      // Fuerza sincronización de campos ocultos (porcentajes/totales) antes del submit
      window.dispatchEvent(new CustomEvent('sync-resumen'));
      // Asegura que Alpine aplique los x-model antes de enviar
      requestAnimationFrame(() => {
        window.dispatchEvent(new CustomEvent('sync-resumen'));
        try {
          if (this.$refs?.form && typeof this.$refs.form.submit === 'function') {
            this.$refs.form.submit(); // nativo: no dispara @submit.prevent
          } else if (this.$el && typeof this.$el.submit === 'function') {
            this.$el.submit();
          } else {
            const ev = new Event('submit', { bubbles: true, cancelable: true });
            this.$root.dispatchEvent(ev);
          }
        } catch (e) {
          console.error('Error al enviar el formulario:', e);
        }
      });
    },
  };
}

// ---- Registro resiliente (no reinicia Alpine)
// al final de form-stepper.js
(function register() {
  const install = (A) => {
    A.data('formStepper', formStepper);
    if (!A.store('resumen')) {         // 👈 no lo sobrescribas si ya existe
      A.store('resumen', {
        disposiciones: 0, disposicionesTotal: 0, disposicionesObtenido: 0,
        ejecucion: 0,     ejecucionTotal: 0,     ejecucionObtenido: 0,
        resultados: 0,    resultadosTotal: 0,    resultadosObtenido: 0,

        // Totales de ajustes por matriz de ejecución (trimestres y total)
        matrizAjustesTotal: 0,
        matrizAjustesI: 0,
        matrizAjustesII: 0,
        matrizAjustesIII: 0,

        // Porcentajes efectivos de ejecución de la matriz (VE/VC)
        matrizPctTotal: 0,
        matrizPctI: 0,
        matrizPctII: 0,
        matrizPctIII: 0,
      });
    }
  };
  if (window.Alpine) install(window.Alpine);
  else document.addEventListener('alpine:init', () => install(window.Alpine));
})();

