/* =====================================================================
   steps.jsx — los 7 pasos del wizard. Cada paso lee/escribe el store
   vía props. StepShell estandariza encabezado y ritmo vertical.
   ===================================================================== */
const C = window.Cotizador;

/* Encabezado de paso */
function StepShell({ step, title, subtitle, children }) {
  return (
    <div style={{ animation: "cotz-step 320ms var(--ease-out)" }}>
      <Eyebrow style={{ marginBottom: 10 }}>Paso {step} de 7</Eyebrow>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: 30, lineHeight: "38px", letterSpacing: "-0.02em", fontWeight: 600, color: "var(--navy-900)", margin: 0 }}>{title}</h2>
      {subtitle && <p style={{ marginTop: 10, fontSize: 16, lineHeight: "24px", color: "var(--fg-tertiary)", maxWidth: 560 }}>{subtitle}</p>}
      <div style={{ marginTop: 28 }}>{children}</div>
    </div>
  );
}

/* Sub-pregunta dentro de un paso (label + tooltip opcional + control) */
function SubQuestion({ label, tip, tipLabel, children, hint }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
        <span style={{ fontSize: 15, fontWeight: 600, color: "var(--navy-900)" }}>{label}</span>
        {tip && <Tooltip text={tip} label={tipLabel} />}
      </div>
      {children}
      {hint && <div style={{ marginTop: 8, fontSize: 12.5, color: "var(--fg-muted)" }}>{hint}</div>}
    </div>
  );
}

const grid2 = { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 14 };

/* ---------------------------------------------------------------- PASO 1 */
function Step1({ state, setField, density }) {
  const icons = { landing: "panel-top", sales: "shopping-cart", funnel: "filter" };
  const tips = {
    funnel: "Un embudo guía al visitante por una secuencia de páginas (captación → oferta → checkout → upsell) midiendo la conversión en cada paso.",
  };
  function choose(type) {
    if (state.projectType === type) return;
    // cambiar tipo invalida escala y plataforma dependientes
    setField({ projectType: type, scale: null, platform: null, recommendChosen: false, platformConfirmed: false });
  }
  return (
    <StepShell step={1} title="¿Qué tipo de proyecto necesitas?" subtitle="Elige el formato que mejor describe lo que quieres construir. Esto define todo el resto.">
      <div role="radiogroup" aria-label="Tipo de proyecto" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {Object.keys(C.PROJECT_TYPES).map(key => {
          const pt = C.PROJECT_TYPES[key];
          return (
            <div key={key} style={{ position: "relative" }}>
              <OptionCard
                selected={state.projectType === key}
                onClick={() => choose(key)}
                icon={icons[key]}
                title={pt.label}
                desc={pt.desc}
                density={density}
              />
              {tips[key] && (
                <span style={{ position: "absolute", top: density === "comfy" ? 26 : 22, right: 56 }}>
                  <Tooltip text={tips[key]} label={"Qué es un " + pt.label} />
                </span>
              )}
            </div>
          );
        })}
      </div>
    </StepShell>
  );
}

/* ---------------------------------------------------------------- PASO 2 */
function Step2({ state, setField, density, openContact }) {
  const scales = C.SCALES[state.projectType] || [];
  const noun = state.projectType === "sales" ? "tu catálogo" : state.projectType === "funnel" ? "tus embudos" : "tu landing";
  return (
    <StepShell step={2} title={"¿Qué tan grande es " + noun + "?"} subtitle="A mayor alcance, más trabajo de diseño y desarrollo. Puedes cambiarlo después sin perder lo demás.">
      <div role="radiogroup" aria-label="Escala del proyecto" style={grid2}>
        {scales.map(s => (
          <OptionCard
            key={s.value}
            selected={state.scale === s.value}
            onClick={() => { if (s.contact) { openContact(); } else { setField("scale", s.value); } }}
            title={s.label}
            desc={s.desc}
            badge={s.contact ? "Hablemos" : null}
            tone={s.contact ? "accent" : null}
            density={density}
          />
        ))}
      </div>
    </StepShell>
  );
}

/* ---------------------------------------------------------------- PASO 3 */
function Step3({ state, setField, density }) {
  const order = ["recommend", "wordpress-elementor", "wordpress-woo", "shopify", "webflow", "framer", "nextjs-react", "php-laravel", "clickfunnels-systeme", "carrd"];
  const rec = (state.recommendChosen || state.platform) ? C.recommendPlatform(state.projectType, state.scale) : null;

  function pickPlatform(key) {
    if (key === "recommend") {
      setField({ recommendChosen: true, platform: null, platformConfirmed: false });
    } else {
      setField({ platform: key, recommendChosen: false, platformConfirmed: true });
    }
  }
  function confirmRec() {
    const r = C.recommendPlatform(state.projectType, state.scale);
    setField({ platform: r.platform, platformConfirmed: true });
  }

  const recPlatformLabel = rec ? C.PLATFORMS[rec.platform].label : "";

  return (
    <StepShell step={3} title="¿Sobre qué plataforma la construimos?" subtitle="Cada plataforma tiene un costo y un tiempo distinto. Si no estás seguro, deja que te recomendemos.">
      <div role="radiogroup" aria-label="Plataforma" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(248px, 1fr))", gap: 12 }}>
        {order.map(key => {
          const pl = C.PLATFORMS[key];
          const isRecommendCard = key === "recommend";
          const selected = isRecommendCard ? state.recommendChosen : (state.platform === key && !state.recommendChosen);
          return (
            <OptionCard
              key={key}
              selected={selected}
              onClick={() => pickPlatform(key)}
              icon={isRecommendCard ? "sparkles" : null}
              title={pl.label}
              desc={pl.desc}
              tone={isRecommendCard ? "accent" : null}
              badge={isRecommendCard ? "Sugerido" : null}
              density={density}
            />
          );
        })}
      </div>

      {/* Panel de recomendación */}
      {state.recommendChosen && rec && (
        <div style={{
          marginTop: 18, padding: "20px 22px", borderRadius: "var(--radius-lg)",
          background: "var(--accent-50)", border: "1.5px solid var(--accent-300)",
          display: "flex", gap: 16, alignItems: "flex-start", animation: "cotz-step 240ms var(--ease-out)",
        }}>
          <span style={{ flex: "none", width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--accent-500)", color: "var(--navy-900)", display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="wand-2" size={20} />
          </span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent-700)" }}>Nuestra recomendación</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 600, color: "var(--navy-900)", marginTop: 4, letterSpacing: "-0.01em" }}>{recPlatformLabel}</div>
            <p style={{ marginTop: 6, fontSize: 14, lineHeight: "21px", color: "var(--fg-secondary)" }}>{rec.reason}</p>
            <div style={{ marginTop: 14, display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
              <button type="button" className="cotz-btn cotz-btn-primary" onClick={confirmRec}>
                {state.platformConfirmed ? "Plataforma confirmada ✓" : "Usar " + recPlatformLabel + " →"}
              </button>
              <button type="button" className="cotz-btn cotz-btn-ghost" onClick={() => setField({ recommendChosen: false, platform: null, platformConfirmed: false })}>
                Prefiero elegir yo
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Hosting / licencia */}
      {(state.platformConfirmed || (state.platform && !state.recommendChosen)) && (
        <div style={{ marginTop: 28, paddingTop: 28, borderTop: "1px solid var(--border-default)", animation: "cotz-step 240ms var(--ease-out)" }}>
          <SubQuestion
            label="¿El hosting / licencia queda a tu nombre o al de Sell-U?"
            tip="El hosting es donde 'vive' tu sitio en internet. A tu nombre = tú eres dueño y pagas las renovaciones. A nombre de Sell-U = nosotros lo administramos por ti."
            tipLabel="Qué es el hosting"
          >
            <div style={grid2}>
              <OptionCard
                selected={state.hostingOwnership === "client"}
                onClick={() => setField("hostingOwnership", "client")}
                icon="user-round"
                title="A mi nombre"
                desc="Tú eres el dueño. Setup +$80 USD."
                density={density}
              />
              <OptionCard
                selected={state.hostingOwnership === "sell-u"}
                onClick={() => setField("hostingOwnership", "sell-u")}
                icon="building-2"
                title="A nombre de Sell-U"
                desc="Nosotros lo administramos por ti."
                density={density}
              />
            </div>
          </SubQuestion>
        </div>
      )}
    </StepShell>
  );
}

/* ---------------------------------------------------------------- PASO 4 */
function Step4({ state, setNested }) {
  const cs = state.currentStatus;
  return (
    <StepShell step={4} title="¿Cómo estás hoy?" subtitle="Esto nos dice cuánto hay que construir desde cero y qué podemos reutilizar.">
      <SubQuestion label="¿Tienes página web hoy?">
        <CompactChoice
          name="Página web actual"
          value={cs.hasWebsite}
          onChange={(v) => setNested("currentStatus", "hasWebsite", v)}
          options={[
            { value: "no", label: "No" },
            { value: "migrate", label: "Sí, quiero migrar" },
            { value: "redesign", label: "Sí, quiero rediseñar" },
          ]}
        />
      </SubQuestion>

      <SubQuestion
        label="¿Tienes dominio?"
        tip="El dominio es la dirección de tu sitio (ej. tunegocio.com). Si no tienes, lo registramos por ti."
        tipLabel="Qué es un dominio"
      >
        <CompactChoice
          name="Dominio"
          value={cs.hasDomain}
          onChange={(v) => setNested("currentStatus", "hasDomain", v)}
          options={[
            { value: "yes", label: "Sí, lo tengo" },
            { value: "no", label: "No" },
            { value: "unknown", label: "No sé dónde está" },
          ]}
        />
      </SubQuestion>

      <SubQuestion label="¿Tienes hosting activo?">
        <CompactChoice
          name="Hosting"
          value={cs.hasHosting === null ? null : (cs.hasHosting ? "yes" : "no")}
          onChange={(v) => setNested("currentStatus", "hasHosting", v === "yes")}
          options={[
            { value: "yes", label: "Sí" },
            { value: "no", label: "No" },
          ]}
        />
      </SubQuestion>

      <SubQuestion label="¿Tienes branding (logo + colores)?">
        <CompactChoice
          name="Branding"
          value={cs.hasBranding}
          onChange={(v) => setNested("currentStatus", "hasBranding", v)}
          options={[
            { value: "no", label: "No" },
            { value: "partial", label: "Parcial" },
            { value: "complete", label: "Completo" },
          ]}
        />
      </SubQuestion>
    </StepShell>
  );
}

/* ---------------------------------------------------------------- PASO 5 */
function Step5({ state, setNested }) {
  const co = state.content;
  return (
    <StepShell step={5} title="¿Qué contenido ya tienes?" subtitle="El contenido es clave: si lo produces tú, ahorras; si lo hacemos nosotros, sumamos costo y días.">
      <SubQuestion label="Fotos de producto">
        <CompactChoice
          name="Fotos"
          value={co.productPhotos}
          onChange={(v) => setNested("content", "productPhotos", v)}
          options={[
            { value: "none", label: "Ninguna" },
            { value: "some", label: "Algunas" },
            { value: "all-pro", label: "Todas profesionales" },
          ]}
        />
      </SubQuestion>

      <SubQuestion label="Textos / copy">
        <CompactChoice
          name="Copy"
          value={co.copy}
          onChange={(v) => setNested("content", "copy", v)}
          options={[
            { value: "client", label: "Yo los doy" },
            { value: "sell-u", label: "Quiero que ustedes los escriban" },
          ]}
        />
      </SubQuestion>

      <SubQuestion label="Videos">
        <CompactChoice
          name="Videos"
          value={co.videos}
          onChange={(v) => setNested("content", "videos", v)}
          options={[
            { value: "none", label: "Ninguno" },
            { value: "has", label: "Tengo" },
            { value: "needs-production", label: "Necesito producción" },
          ]}
        />
      </SubQuestion>

      <SubQuestion label="Idiomas" hint="Cada idioma adicional suma un 20% sobre el precio base y algo de tiempo.">
        <CompactChoice
          name="Idiomas"
          value={co.languages}
          onChange={(v) => setNested("content", "languages", v)}
          options={[
            { value: 1, label: "1" },
            { value: 2, label: "2" },
            { value: 3, label: "3+" },
          ]}
        />
      </SubQuestion>
    </StepShell>
  );
}

/* ---------------------------------------------------------------- PASO 6 */
function Step6({ state, toggleInArray, density }) {
  const tips = {
    crm: "Un CRM organiza tus contactos y automatiza correos (ej. HubSpot, Mailchimp). Útil para dar seguimiento a clientes potenciales.",
    analytics: "El Pixel de Meta y GA4 miden quién visita tu sitio y qué hace, para optimizar tu publicidad. 'Server-side' lo hace más preciso.",
  };
  return (
    <StepShell step={6} title="¿Qué integraciones necesitas?" subtitle="Elige todas las que apliquen. Cada integración suma $70 USD. Puedes dejarlo vacío.">
      <div role="group" aria-label="Integraciones" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 12 }}>
        {C.INTEGRATIONS.map(ig => (
          <div key={ig.value} style={{ position: "relative" }}>
            <CheckCard
              checked={(state.integrations || []).includes(ig.value)}
              onClick={() => toggleInArray("integrations", ig.value)}
              title={ig.label}
              desc={ig.desc}
              density={density}
            />
            {tips[ig.value] && (
              <span style={{ position: "absolute", top: 16, right: 16 }}>
                <Tooltip text={tips[ig.value]} label={"Qué es " + ig.label} />
              </span>
            )}
          </div>
        ))}
      </div>
    </StepShell>
  );
}

/* ---------------------------------------------------------------- PASO 7 */
function Step7({ state, setField, density }) {
  return (
    <StepShell step={7} title="¿Quieres soporte después de la entrega?" subtitle="Acompañamiento opcional una vez tu sitio esté en línea. Puedes empezar solo con la entrega.">
      <div role="radiogroup" aria-label="Soporte post-entrega" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {C.SUPPORT_OPTIONS.map(opt => (
          <OptionCard
            key={opt.value}
            selected={state.support === opt.value}
            onClick={() => setField("support", opt.value)}
            title={opt.label}
            desc={opt.desc}
            badge={opt.price === 0 ? "Incluido" : "+" + C.fmtUSD(opt.price)}
            density={density}
          />
        ))}
      </div>
    </StepShell>
  );
}

Object.assign(window, { StepShell, SubQuestion, Step1, Step2, Step3, Step4, Step5, Step6, Step7 });