document.addEventListener("DOMContentLoaded", () => {
  const pasos = document.querySelectorAll(".form-step");
  const btnAnterior = document.getElementById("btnAnterior");
  const btnSiguiente = document.getElementById("btnSiguiente");
  const btnEnviar = document.getElementById("btnEnviar");
  const form = document.getElementById("formBeca");
  const mensaje = document.getElementById("mensajeValidacion");
  const confirmacion = document.getElementById("confirmacion");
  let pasoActual = 0;

  // Función para guardar datos en localStorage y notificar cambios
  function guardarDatosEnTiempoReal() {
    const datos = {};
    new FormData(form).forEach((v, k) => (datos[k] = v));
    localStorage.setItem("solicitudBeca", JSON.stringify(datos));
    
    // Notificar cambio
    window.dispatchEvent(new CustomEvent('solicitudBecaActualizada', { detail: datos }));
  }

  function mostrarPaso(index) {
    pasos.forEach((p, i) => {
      if (i === index) {
        p.classList.add("active");
        p.style.display = "block";
      } else {
        p.classList.remove("active");
        p.style.display = "none";
      }
    });
    btnAnterior.style.display = index === 0 ? "none" : "inline-flex";
    btnSiguiente.style.display = index === pasos.length - 1 ? "none" : "inline-flex";
    btnEnviar.style.display = index === pasos.length - 1 ? "inline-flex" : "none";
    mensaje.style.display = "none";
    mensaje.textContent = "";
  }

  function validarPaso(index) {
    const inputs = pasos[index].querySelectorAll("input[required], select[required], textarea[required]");
    for (let input of inputs) {
      if (!input.value.trim()) {
        const labelText = input.previousElementSibling?.textContent || input.name;
        mensaje.innerHTML = `<div style="display: flex; gap: 12px; align-items: center;">
          <span style="font-size: 20px;">⚠️</span>
          <div>
            <h4 style="margin: 0; margin-bottom: 4px; color: var(--text-primary);">Campo incompleto</h4>
            <p style="margin: 0; font-size: 14px;">Faltó completar: <strong>${labelText}</strong></p>
          </div>
        </div>`;
        mensaje.style.display = "block";
        input.focus();
        return false;
      }
    }
    return true;
  }

  btnSiguiente.addEventListener("click", () => {
    if (validarPaso(pasoActual)) {
      pasoActual++;
      mostrarPaso(pasoActual);
      guardarDatosEnTiempoReal();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  });

  btnAnterior.addEventListener("click", () => {
    pasoActual--;
    mostrarPaso(pasoActual);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });

  // --------------------------------------------------------------------
  // 🔥🔥🔥 AGREGADO: FUNCIÓN PARA ARMAR LA SOLICITUD COMPLETA
  // --------------------------------------------------------------------
  function armarSolicitudCompleta() {
    const d = {};
    new FormData(form).forEach((v, k) => (d[k] = v));

    return {
      datos_personales: {
        primer_apellido: d.primer_apellido,
        segundo_apellido: d.segundo_apellido,
        nombre: d.nombre,
        cedula: d.cedula,
        fecha_nacimiento: d.fecha_nacimiento,
        estado_civil: d.estado_civil,
        genero: d.genero,
        correo: d.correo,
        telefono: d.telefono,
        provincia: d.provincia,
        canton: d.canton,
        distrito: d.distrito,
        direccion: d.direccion
      },
      academica: {
        colegio: d.colegio,
        tipo_institucion: d.tipo_institucion,
        beca_colegio: d.beca_colegio,
        institucion_beca: d.institucion_beca,
        monto_beca: d.monto_beca,
        posee_titulo: d.posee_titulo,
        grado_aprobado: d.grado_aprobado
      },
      vivienda: {
        area: d.area,
        condicion_vivienda: d.condicion_vivienda,
        medio_adquisicion: d.medio_adquisicion
      },
      economica: {
        ingreso_total: d.ingreso_total,
        egreso_total: d.egreso_total,
        desc_ingresos: d.desc_ingresos,
        desc_gastos: d.desc_gastos
      },
      declaracion: {
        firma: d.firma,
        fecha_firma: d.fecha_firma
      }
    };
  }

  // --------------------------------------------------------------------
  // 🔥🔥🔥 AGREGADO: FUNCIÓN PARA ENVIAR AL BACKEND
  // --------------------------------------------------------------------
  async function enviarSolicitudBackend() {
    const token = localStorage.getItem("token");
    const payload = armarSolicitudCompleta();

    try {
      const resp = await fetch("http://localhost:3000/api/solicitud/completa", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + token
        },
        body: JSON.stringify(payload)
      });

      const data = await resp.json();
      console.log("Respuesta backend:", data);

      if (!resp.ok) {
        alert("❌ Error: " + data.message);
        return false;
      }

      return true;

    } catch (err) {
      console.error(err);
      alert("❌ Error al conectar con el servidor.");
      return false;
    }
  }

  // --------------------------------------------------------------------
  // 🔥🔥🔥 SUBMIT ACTUALIZADO (NO SE MODIFICA TU DISEÑO)
  // --------------------------------------------------------------------
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    if (!validarPaso(pasoActual)) return;

    guardarDatosEnTiempoReal();

    // 1) Enviar al backend
    const ok = await enviarSolicitudBackend();

    if (!ok) return;

    // 2) Mantener tu pantalla de confirmación
    const formContainer = form.closest('.card-body');
    formContainer.innerHTML = `
      <div id="confirmacion" class="alert-info" 
           style="margin: 0; padding: 24px; border-radius: 8px; border-left: 4px solid var(--success);">
        <h4 style="color: var(--success); margin: 0 0 12px 0; font-size: 18px;">
          ✅ Solicitud enviada correctamente
        </h4>
        <p style="color: var(--text-secondary); font-size: 14px; margin: 0;">
          Sus datos han sido almacenados temporalmente en su navegador y enviados al sistema.
        </p>
      </div>`;
  });

  // Escuchar cambios
  const allInputs = form.querySelectorAll("input, select, textarea");
  allInputs.forEach((input) => {
    input.addEventListener("change", guardarDatosEnTiempoReal);
  });

  mostrarPaso(pasoActual);
});
