// wizzards.js — módulo de wizard con soporte para registración de renderizadores por paso
(function(){
  const modules = {}; // registry de módulos por nombre

  const steps = [
    { id: 'incidencias', label: 'Incidencias', module: 'incidencias' },
    { id: 'descuentos', label: 'Descuentos', module: 'descuentos' },
    { id: 'bonos', label: 'Bonos', module: 'bonos' },
    { id: 'sueldos', label: 'Sueldos', module: 'sueldos' }
  ];

  // API pública para registrar módulos desde otros scripts
  function registerModule(name, impl) { modules[name] = impl; }

  function createStepEl(step, index, currentIndex) {
    const el = document.createElement('div');
    el.className = 'pc-step' + (index === currentIndex ? ' active' : '') + (index > currentIndex ? ' disabled' : '');
    el.dataset.index = index;
    el.innerHTML = `<div class="fw-bold">${index+1}. ${step.label}</div>`;
    el.addEventListener('click', () => {
      const idx = parseInt(el.dataset.index, 10);
      if (idx <= getState().current) setState({ current: idx });
    });
    return el;
  }

  // estado simple en localStorage
  function getState() {
    try { return JSON.parse(localStorage.getItem('pc_wizzard_state')) || { current: 0 }; } catch(e){ return { current:0 }; }
  }
  function setState(s) { localStorage.setItem('pc_wizzard_state', JSON.stringify(s)); render(); }

  function render() {
    const root = document.getElementById('pcWizzard');
    if (!root) return;
    const stepsEl = document.getElementById('pcSteps');
    const content = document.getElementById('pcWizardContent');
    const prevBtn = document.getElementById('pcPrev');
    const nextBtn = document.getElementById('pcNext');

    const state = getState();
    stepsEl.innerHTML = '';
    steps.forEach((s,i)=> stepsEl.appendChild(createStepEl(s,i,state.current)));

    // renderizar mediante módulo correspondiente
    const step = steps[state.current];
    content.innerHTML = '<div class="text-muted">Cargando...</div>';
    const mod = modules[step.module];
    if (mod && typeof mod.render === 'function') {
      try { mod.render(content, { step, index: state.current, stateGetter: getState, stateSetter: setState }); }
      catch (err) { console.error('Error en render module', err); content.innerHTML = '<div class="text-danger">Error al renderizar el módulo.</div>'; }
    } else {
      // fallback simple
      content.innerHTML = `<div><h6>${step.label}</h6><p class="text-muted">No hay módulo registrado para este paso.</p></div>`;
    }

    // controles
    prevBtn.disabled = state.current === 0;
    nextBtn.textContent = state.current === (steps.length-1) ? 'Finalizar' : 'Siguiente';

    prevBtn.onclick = () => { if (state.current>0) setState({ current: state.current-1 }); };
    nextBtn.onclick = () => {
      // si estamos en el paso de incidencias, preguntar antes de avanzar
      if (steps[state.current] && steps[state.current].id === 'incidencias') {
  showConfirmCalculate().then(async (choice) => {
          console.log('Confirm calculate choice:', choice);
          if (choice === 'yes') {
            let mod = modules['incidencias'];
            // si el módulo no está listo, intentar re-renderizar y esperar un momento para que se registre
            if (!mod || typeof mod.onCalculate !== 'function') {
              console.warn('Modulo incidencias no disponible aún, reintentando registro...');
              if (window.PCWizard && typeof window.PCWizard.render === 'function') try { window.PCWizard.render(); } catch(e){}
              await new Promise(r => setTimeout(r, 300));
              mod = modules['incidencias'];
            }
            if (mod && typeof mod.onCalculate === 'function') {
              try { await mod.onCalculate(); } catch(e){ console.error('onCalculate error', e); alert('Error al ejecutar el cálculo (revisa consola)'); }
            } else {
              console.error('onCalculate no encontrado en modulo incidencias', mod, window.PCIncidencias);
              alert('El cálculo de incidencias no está disponible. Revisa la consola para más detalles.');
            }
          }
          // NO avanzar automáticamente: se mostrará el resumen y el usuario decide qué hacer
          // Si quieres avanzar manualmente, usar el botón Siguiente nuevamente.
        });
        return;
      }

      if (state.current < steps.length-1) setState({ current: state.current+1 });
      else {
        // finalizar: permitir a cada módulo decidir si muestra un resumen
        const activeMod = modules[steps[state.current].module];
        if (activeMod && typeof activeMod.onFinish === 'function') activeMod.onFinish();
        alert('Wizard finalizado');
        localStorage.removeItem('pc_wizzard_state');
        setTimeout(()=> setState({ current: 0 }), 50);
      }
    };
  }

  // crea y muestra un modal de confirmación; retorna Promise con 'yes' o 'no'
  function showConfirmCalculate(){
    return new Promise((resolve)=>{
      // crear modal container si no existe
      let modalRoot = document.getElementById('pc_calc_modal');
      if (!modalRoot) {
        modalRoot = document.createElement('div');
        modalRoot.id = 'pc_calc_modal';
        modalRoot.innerHTML = `
          <div class="modal" tabindex="-1">
            <div class="modal-dialog modal-sm modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title">Calcular incidencias</h5></div>
                <div class="modal-body"><p>¿Deseas hacer el cálculo de incidencias para este periodo?</p></div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-sm btn-secondary" data-action="no">No</button>
                  <button type="button" class="btn btn-sm btn-primary" data-action="yes">Sí</button>
                </div>
              </div>
            </div>
          </div>
        `;
        document.body.appendChild(modalRoot);

        // attach listeners below (handled also en el branch donde modalRoot ya existe)
      }

      // siempre (re)adjuntar listeners: reemplazar botones por clones para limpiar handlers previos
      const noBtnOld = modalRoot.querySelector('[data-action="no"]');
      const yesBtnOld = modalRoot.querySelector('[data-action="yes"]');
      if (noBtnOld && noBtnOld.parentNode) {
        const noBtn = noBtnOld.cloneNode(true);
        noBtn.addEventListener('click', ()=>{ hideModal(modalRoot); resolve('no'); });
        noBtnOld.parentNode.replaceChild(noBtn, noBtnOld);
      }
      if (yesBtnOld && yesBtnOld.parentNode) {
        const yesBtn = yesBtnOld.cloneNode(true);
        yesBtn.addEventListener('click', ()=>{ hideModal(modalRoot); resolve('yes'); });
        yesBtnOld.parentNode.replaceChild(yesBtn, yesBtnOld);
      }

      // mostrar modal (clase show y backdrop)
      const modalEl = modalRoot.querySelector('.modal');
      modalEl.classList.add('show');
      modalEl.style.display = 'block';
      const backdrop = document.createElement('div'); backdrop.className = 'modal-backdrop fade show';
      backdrop.id = 'pc_calc_backdrop';
      document.body.appendChild(backdrop);
    });
  }

  function hideModal(root){
    const modalEl = root.querySelector('.modal');
    modalEl.classList.remove('show');
    modalEl.style.display = 'none';
    const bd = document.getElementById('pc_calc_backdrop'); if (bd) bd.remove();
  }

  // módulos por defecto (implementaciones mínimas)
  registerModule('incidencias', {
    render(container) {
      container.innerHTML = `
        <h6 class="mb-2">Incidencias</h6>
        <p class="text-muted mb-2">Registrar y revisar incidencias del colaborador.</p>
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
          <button id="pc_load_incidencias" class="btn btn-sm btn-outline-primary">Cargar incidencias</button>
        </div>
        <div id="pc_incidencias_list" class="mt-3"></div>
      `;
      container.querySelector('#pc_load_incidencias').addEventListener('click', ()=>{
        const list = container.querySelector('#pc_incidencias_list');
        list.innerHTML = '<ul class="list-group"><li class="list-group-item">Falta: 2025-09-01</li><li class="list-group-item">Retardo: 2025-09-03</li></ul>';
      });
    }
  });

  registerModule('descuentos', {
    render(container) {
      container.innerHTML = `
        <h6 class="mb-2">Descuentos</h6>
        <p class="text-muted mb-2">Agregar descuentos aplicables.</p>
        <div class="mb-2">
          <input id="pc_desc_name" class="form-control form-control-sm" placeholder="Descripción del descuento" />
        </div>
        <div class="mb-2 d-flex gap-2">
          <input id="pc_desc_amount" class="form-control form-control-sm" placeholder="Monto" />
          <button id="pc_add_desc" class="btn btn-sm btn-danger">Agregar</button>
        </div>
        <div id="pc_desc_list" class="mt-2"></div>
      `;
      container.querySelector('#pc_add_desc').addEventListener('click', ()=>{
        const name = container.querySelector('#pc_desc_name').value.trim();
        const amt = container.querySelector('#pc_desc_amount').value.trim();
        const list = container.querySelector('#pc_desc_list');
        if (!name) { alert('Describe el descuento'); return; }
        const item = document.createElement('div'); item.className='list-group-item'; item.textContent = `${name} — ${amt}`;
        list.appendChild(item);
        container.querySelector('#pc_desc_name').value = '';
        container.querySelector('#pc_desc_amount').value = '';
      });
    }
  });

  registerModule('bonos', {
    render(container) {
      container.innerHTML = `
        <h6 class="mb-2">Bonos</h6>
        <p class="text-muted mb-2">Agregar bonos o percepciones extras.</p>
        <div class="mb-2 d-flex gap-2">
          <input id="pc_bono_name" class="form-control form-control-sm" placeholder="Descripción" />
          <input id="pc_bono_amount" class="form-control form-control-sm" placeholder="Monto" />
          <button id="pc_add_bono" class="btn btn-sm btn-success">Agregar</button>
        </div>
        <div id="pc_bono_list" class="mt-2"></div>
      `;
      container.querySelector('#pc_add_bono').addEventListener('click', ()=>{
        const name = container.querySelector('#pc_bono_name').value.trim();
        const amt = container.querySelector('#pc_bono_amount').value.trim();
        if (!name) { alert('Describe el bono'); return; }
        const list = container.querySelector('#pc_bono_list');
        const item = document.createElement('div'); item.className='list-group-item'; item.textContent = `${name} — ${amt}`;
        list.appendChild(item);
        container.querySelector('#pc_bono_name').value = '';
        container.querySelector('#pc_bono_amount').value = '';
      });
    }
  });

  registerModule('sueldos', {
    render(container) {
      container.innerHTML = `
        <h6 class="mb-2">Sueldos</h6>
        <p class="text-muted mb-2">Resumen y cálculo final de sueldos.</p>
        <div id="pc_sueldos_summary">No hay datos cargados.</div>
      `;
    },
    onFinish() { console.log('Finalizando módulo sueldos'); }
  });

  // API pública mínima
  window.PCWizard = window.PCWizard || {};
  window.PCWizard.registerModule = registerModule;
  window.PCWizard.render = render;

  document.addEventListener('DOMContentLoaded', ()=>{ if (document.getElementById('pcWizzard')) render(); });

})();
