// ============================================================
// AMOR & ROMA — Diagnóstico interactivo
// 5 preguntas máx., con lógica condicional real:
//  - La pregunta 3 cambia según la respuesta de la pregunta 1.
//  - Si el usuario llega con contexto (?interes=redes o ?plan=premium
//    desde Servicios/Planes), se preselecciona y se saltea esa pregunta.
//  - El resultado combina las 5 respuestas en una recomendación de
//    servicio + plan sugerido.
// ============================================================
(function () {
  "use strict";

  const form = document.getElementById("diagnostico");
  if (!form) return;

  /* ---------- Contexto heredado desde otras páginas ---------- */
  const params = new URLSearchParams(window.location.search);
  const preInteres = params.get("interes"); // ej: redes, web, marca, automatizacion, captacion, varias
  const prePlan = params.get("plan"); // ej: esencial, impulso, premium, elite

  const state = {
    necesidad: preInteres || null,
    etapa: null,
    desafio: null,
    objetivo: null,
    madurez: null,
    planPrevio: prePlan || null,
  };

  /* ---------- Banco de preguntas ---------- */
  const desafiosPorNecesidad = {
    marca: [
      ["identidad-debil", "Mi identidad no refleja el valor real de mi negocio"],
      ["sin-relato", "No sé cómo comunicar lo que hago de forma consistente"],
      ["rediseno", "Necesito un rediseño completo, lo actual ya no funciona"],
    ],
    presencia: [
      ["redes-sin-resultado", "Tengo redes, pero no generan resultados"],
      ["sin-web", "No tengo una web propia"],
      ["inconsistencia", "Todo se ve desordenado o inconsistente entre canales"],
    ],
    contenido: [
      ["sin-tiempo", "No tengo tiempo para crear contenido de forma constante"],
      ["sin-estrategia", "No sé qué contenido realmente funciona"],
      ["calidad", "Necesito subir la calidad de producción"],
    ],
    web: [
      ["sin-web-propia", "No tengo web propia todavía"],
      ["no-convierte", "Tengo web, pero no convierte visitas en clientes"],
      ["ecommerce", "Necesito catálogo o e-commerce"],
    ],
    captacion: [
      ["pocos-leads", "No estoy generando suficientes oportunidades"],
      ["procesos-manuales", "Pierdo oportunidades por procesos manuales"],
      ["necesito-ads", "Necesito publicidad paga para atraer clientes"],
    ],
    automatizacion: [
      ["todo-manual", "Respondo consultas manualmente y no llego a todo"],
      ["sin-seguimiento", "Pierdo leads por falta de seguimiento"],
      ["integracion", "Necesito integrar WhatsApp, redes y CRM"],
    ],
    varias: [
      ["desde-cero", "Necesito ordenar todo desde cero"],
      ["piezas-sueltas", "Tengo piezas sueltas que no están integradas"],
      ["ecosistema", "Quiero un ecosistema digital completo"],
    ],
  };

  const necesidadLabels = {
    marca: "Marca",
    presencia: "Presencia digital",
    contenido: "Contenido",
    web: "Web",
    captacion: "Captación de clientes",
    automatizacion: "Automatización",
    varias: "Varias cosas",
  };

  /* ---------- Elementos del DOM ---------- */
  const steps = Array.from(form.querySelectorAll(".diag-step"));
  const progressWrap = form.querySelector(".diag-progress");
  const resultBox = document.getElementById("diag-result");
  const captureBox = document.getElementById("diag-capture");

  let order = ["necesidad", "etapa", "desafio", "objetivo", "madurez"];
  if (preInteres && necesidadLabels[preInteres]) {
    order = order.filter((k) => k !== "necesidad");
  }
  let currentIndex = 0;

  function buildProgress() {
    progressWrap.innerHTML = "";
    order.forEach(() => {
      const span = document.createElement("span");
      progressWrap.appendChild(span);
    });
  }

  function updateProgress() {
    Array.from(progressWrap.children).forEach((span, i) => {
      span.dataset.state = i < currentIndex ? "done" : i === currentIndex ? "active" : "";
    });
  }

  function renderDesafioOptions() {
    const target = form.querySelector('[data-step="desafio"] .diag-options');
    const necesidad = state.necesidad || "varias";
    const options = desafiosPorNecesidad[necesidad] || desafiosPorNecesidad.varias;
    target.innerHTML = "";
    options.forEach(([value, label]) => {
      const btn = document.createElement("button");
      btn.type = "button";
      btn.className = "diag-option";
      btn.dataset.field = "desafio";
      btn.dataset.value = value;
      btn.setAttribute("aria-pressed", "false");
      btn.textContent = label;
      target.appendChild(btn);
    });
    attachOptionHandlers(target);
  }

  function attachOptionHandlers(scope) {
    scope.querySelectorAll(".diag-option").forEach((btn) => {
      btn.addEventListener("click", () => {
        scope.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
        btn.setAttribute("aria-pressed", "true");
        state[btn.dataset.field] = btn.dataset.value;
        setTimeout(goNext, 220);
      });
    });
  }

  function showStep(key) {
    steps.forEach((s) => s.classList.toggle("active", s.dataset.step === key));
    if (key === "desafio") renderDesafioOptions();
    updateProgress();
  }

  function goNext() {
    if (currentIndex < order.length - 1) {
      currentIndex++;
      showStep(order[currentIndex]);
    } else {
      showResult();
    }
  }

  function goBack() {
    if (currentIndex > 0) {
      currentIndex--;
      showStep(order[currentIndex]);
    }
  }

  form.querySelectorAll("[data-action='back']").forEach((btn) => btn.addEventListener("click", goBack));

  // Handlers for static (non-dynamic) option steps
  form.querySelectorAll('.diag-step[data-step]').forEach((stepEl) => {
    if (stepEl.dataset.step === "desafio") return; // built dynamically
    attachOptionHandlers(stepEl);
  });

  /* ---------- Motor de recomendación ---------- */
  const solucionPorNecesidad = {
    marca: "Branding & Identidad",
    presencia: "Redes Sociales & Contenido + Desarrollo Web",
    contenido: "Redes Sociales & Contenido",
    web: "Desarrollo Web",
    captacion: "Paid Media + Automatizaciones",
    automatizacion: "Automatizaciones",
    varias: "Solución Integral (Branding + Web + Redes)",
  };

  function planSugerido() {
    const etapaScore = { comenzando: 0, validando: 1, creciendo: 2, consolidado: 3 };
    const madurezScore = { nula: 0, basica: 1, intermedia: 2, avanzada: 3 };
    const e = etapaScore[state.etapa] ?? 1;
    const m = madurezScore[state.madurez] ?? 1;
    const score = Math.round((e + m) / 2);
    const plan = ["esencial", "impulso", "premium", "elite"][Math.min(score, 3)];
    return plan;
  }

  const planLabels = { esencial: "Plan Esencial", impulso: "Plan Impulso", premium: "Plan Premium", elite: "Plan Élite" };

  function showResult() {
    steps.forEach((s) => s.classList.remove("active"));
    progressWrap.querySelectorAll("span").forEach((s) => (s.dataset.state = "done"));

    const necesidadKey = state.necesidad || "varias";
    const solucion = solucionPorNecesidad[necesidadKey];
    const plan = state.planPrevio && planLabels[state.planPrevio] ? state.planPrevio : planSugerido();

    resultBox.innerHTML = `
      <p class="eyebrow">Nuestra recomendación</p>
      <h4>Te conviene priorizar: ${solucion}</h4>
      <p font-body; <p style="margin-top:1rem;">Situación actual: negocio en etapa "${etapaLabel(state.etapa)}", con una presencia digital ${madurezLabel(state.madurez)}, buscando ${objetivoLabel(state.objetivo)}.</p>
      <p style="margin-top:0.5rem;"><strong>Próximo paso recomendado:</strong> ${planLabels[plan]} ${state.planPrevio ? "— ya veníamos conversando sobre este plan" : ""}.</p>
      <p style="margin-top:1rem; color:var(--text-soft); font-size:0.8rem;">Esto es una orientación inicial, no un diagnóstico definitivo, lo afinamos juntos en una conversación.</p>
    `;
    resultBox.hidden = false;
    captureBox.hidden = false;
    document.getElementById("diag-plan-hidden").value = plan;
    document.getElementById("diag-solucion-hidden").value = solucion;
    resultBox.scrollIntoView({ behavior: "smooth", block: "start" });
  }

  function showReview() {
  // Oculta resultado y captura
  resultBox.hidden = true;
  captureBox.hidden = true;
  
  // Muestra todos los pasos
  steps.forEach((s) => {
    s.classList.add("active");
    // Marca la opción seleccionada en cada paso
    const field = s.dataset.step;
    if (state[field]) {
      s.querySelectorAll(".diag-option").forEach((btn) => {
        const isSelected = btn.dataset.value === state[field];
        btn.setAttribute("aria-pressed", isSelected ? "true" : "false");
        if (isSelected) btn.style.outline = "2px solid var(--accent, #c9a96e)";
      });
    }
  });
  
  // Oculta progreso y muestra botón para volver al resultado
  progressWrap.style.display = "none";
  const backToResult = document.createElement("button");
  backToResult.type = "button";
  backToResult.className = "btn-secondary";
  backToResult.textContent = "← Volver al resultado";
  backToResult.addEventListener("click", () => {
    progressWrap.style.display = "flex";
    steps.forEach((s) => s.classList.remove("active"));
    resultBox.hidden = false;
    captureBox.hidden = false;
    backToResult.remove();
  });
  form.appendChild(backToResult);
  }

  function etapaLabel(v) {
    return { comenzando: "recién empezando", validando: "validando", creciendo: "en crecimiento", consolidado: "consolidado" }[v] || "sin definir";
  }
  function madurezLabel(v) {
    return { nula: "nula", basica: "básica", intermedia: "intermedia", avanzada: "avanzada" }[v] || "sin definir";
  }
  function objetivoLabel(v) {
    return {
      vender: "vender más",
      profesionalizar: "profesionalizar su imagen",
      clientes: "generar más clientes",
      tiempo: "ahorrar tiempo con procesos",
      referente: "posicionarse como referente",
    }[v] || "crecer";
  }

  form.querySelector("[data-action='restart']")?.addEventListener("click", () => {
    currentIndex = 0;
    state.desafio = state.objetivo = state.madurez = state.etapa = null;
    if (!preInteres) state.necesidad = null;
    form.querySelectorAll(".diag-option").forEach((b) => b.setAttribute("aria-pressed", "false"));
    resultBox.hidden = true;
    captureBox.hidden = true;
    showStep(order[0]);
  });

  const finalForm = document.getElementById("diag-lead-form");
  if (finalForm) {
    finalForm.addEventListener("submit", (e) => {
      e.preventDefault();
      const confirmBox = document.getElementById("diag-confirmation");
      finalForm.hidden = true;
      confirmBox.classList.add("show");
    });
  }

  /* ---------- Inicio ---------- */
  buildProgress();
  if (preInteres && necesidadLabels[preInteres]) {
    const banner = document.getElementById("diag-context-banner");
    if (banner) {
      banner.hidden = false;
      banner.textContent = `Ya sabemos que tu interés inicial es "${necesidadLabels[preInteres]}" — seguimos desde ahí.`;
    }
  }
  showStep(order[0]);
})();