// NAXUS — Wizard form (3 pasos + confirmación)

const { useState } = React;

const INDUSTRIES = [
  "E-commerce", "Servicios profesionales", "Salud", "Educación",
  "Inmobiliaria", "Restaurantes / hostelería", "Manufactura", "Tecnología",
  "Marketing / agencia", "Finanzas", "Otro"
];

const PROBLEM_TAGS = [
  "Atención al cliente saturada",
  "Procesos manuales repetitivos",
  "Pérdida de leads",
  "Falta de seguimiento",
  "Datos desordenados",
  "Integración entre apps",
  "Generación de contenido",
  "Reportes manuales",
];

const BUDGETS = [
  "< $500 USD/mes",
  "$500 – $1,500",
  "$1,500 – $5,000",
  "$5,000+",
  "Aún no lo sé",
];

const URGENCIES = [
  { id: "asap",     label: "Ya, ayer",            sub: "Lo necesito esta semana" },
  { id: "month",    label: "Este mes",            sub: "En 1–4 semanas" },
  { id: "quarter",  label: "Próximos 3 meses",    sub: "Estoy planeando" },
  { id: "explore",  label: "Solo exploro",        sub: "Quiero entender opciones" },
];

const initialData = {
  problem_tags: [],
  problem_desc: "",
  industry: "",
  business_size: "",
  current_pain: "",
  budget: "",
  urgency: "",
  name: "",
  email: "",
  phone: "",
  company: "",
};

function Field({ label, children, full }) {
  return (
    <div className={"field " + (full ? "full" : "")}>
      <label>{label}</label>
      {children}
    </div>
  );
}

function ChipGroup({ options, selected, onToggle, multi = false }) {
  return (
    <div className="chips">
      {options.map((opt) => {
        const value = typeof opt === "string" ? opt : opt.id;
        const label = typeof opt === "string" ? opt : opt.label;
        const sub = typeof opt === "string" ? null : opt.sub;
        const isOn = multi ? selected.includes(value) : selected === value;
        return (
          <button
            key={value}
            type="button"
            className={"chip" + (isOn ? " selected" : "")}
            onClick={() => onToggle(value)}
            style={sub ? { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2, padding: "12px 18px" } : null}
          >
            <span>{label}</span>
            {sub && <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.04em" }}>{sub}</span>}
          </button>
        );
      })}
    </div>
  );
}

function Wizard({ destinationEmail = "hola@naxus.tech" }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState(initialData);
  const [submitted, setSubmitted] = useState(false);

  const totalSteps = 3;

  const update = (key, value) => setData((d) => ({ ...d, [key]: value }));

  const toggleTag = (tag) => {
    setData((d) => ({
      ...d,
      problem_tags: d.problem_tags.includes(tag)
        ? d.problem_tags.filter((t) => t !== tag)
        : [...d.problem_tags, tag],
    }));
  };

  const canAdvance = () => {
    if (step === 0) return data.problem_tags.length > 0 || data.problem_desc.trim().length > 8;
    if (step === 1) return data.urgency && data.budget;
    if (step === 2) return data.name.trim() && data.email.trim() && data.phone.trim();
    return true;
  };

  const submit = (e) => {
    e?.preventDefault();
    // Build mailto fallback — destination email goes here
    const subject = encodeURIComponent(`Nuevo lead naxus: ${data.name} (${data.company || "sin empresa"})`);
    const body = encodeURIComponent(
      `Nuevo prospecto desde naxus.tech\n\n` +
      `── CONTACTO ──\n` +
      `Nombre: ${data.name}\n` +
      `Email: ${data.email}\n` +
      `Teléfono / WhatsApp: ${data.phone}\n` +
      `Empresa: ${data.company || "—"}\n` +
      `Industria: ${data.industry || "—"}\n\n` +
      `── PROBLEMA ──\n` +
      `Áreas: ${data.problem_tags.join(", ") || "—"}\n` +
      `Descripción:\n${data.problem_desc || "—"}\n\n` +
      `── IMPACTO ──\n` +
      `Dolor actual: ${data.current_pain || "—"}\n` +
      `Presupuesto: ${data.budget}\n` +
      `Urgencia: ${data.urgency}\n`
    );
    // In production: POST to backend / Formspree / Resend.
    // For now we open mailto so the lead lands in your inbox.
    try {
      window.location.href = `mailto:${destinationEmail}?subject=${subject}&body=${body}`;
    } catch (_) {}
    console.log("[naxus lead]", data);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="wizard">
        <div className="wizard-success step-fade">
          <div className="ok-icon">{window.Icon.check}</div>
          <h3>Recibimos tu solicitud</h3>
          <p>
            Gracias <strong style={{ color: "var(--fg)" }}>{data.name.split(" ")[0]}</strong>. En menos de
            24 horas te contactamos por WhatsApp o correo con un diagnóstico inicial gratuito
            y un plan de automatización a medida.
          </p>
          <button
            className="btn btn-ghost"
            onClick={() => { setSubmitted(false); setStep(0); setData(initialData); }}
          >
            Enviar otra consulta
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="wizard">
      <div className="wizard-progress">
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            className={"pip " + (i === step ? "active" : i < step ? "done" : "")}
          />
        ))}
      </div>

      {step === 0 && (
        <div className="step-fade">
          <div className="wizard-step-label">Paso 01 / 03 — El problema</div>
          <h3 className="wizard-step-title">¿Qué te está quitando el sueño?</h3>
          <p className="wizard-step-sub">
            Marca todo lo que aplique y cuéntanos brevemente. La IA puede automatizar
            casi cualquier proceso repetitivo — empezamos por entender el tuyo.
          </p>

          <Field label="Áreas que te duelen" full>
            <ChipGroup options={PROBLEM_TAGS} selected={data.problem_tags} onToggle={toggleTag} multi />
          </Field>

          <div style={{ height: 24 }} />

          <div className="wizard-fields">
            <Field label="Describe el problema en tus palabras" full>
              <textarea
                placeholder="Ej. Mis vendedores pierden 4 horas al día respondiendo las mismas preguntas por WhatsApp…"
                value={data.problem_desc}
                onChange={(e) => update("problem_desc", e.target.value)}
              />
            </Field>
            <Field label="Industria">
              <select value={data.industry} onChange={(e) => update("industry", e.target.value)}>
                <option value="">Selecciona…</option>
                {INDUSTRIES.map((i) => <option key={i} value={i}>{i}</option>)}
              </select>
            </Field>
            <Field label="Tamaño del negocio">
              <select value={data.business_size} onChange={(e) => update("business_size", e.target.value)}>
                <option value="">Selecciona…</option>
                <option>Solo yo / freelance</option>
                <option>2 – 10 personas</option>
                <option>11 – 50 personas</option>
                <option>50+ personas</option>
              </select>
            </Field>
          </div>
        </div>
      )}

      {step === 1 && (
        <div className="step-fade">
          <div className="wizard-step-label">Paso 02 / 03 — El impacto</div>
          <h3 className="wizard-step-title">¿Cuánto te cuesta no resolverlo?</h3>
          <p className="wizard-step-sub">
            Esto nos ayuda a priorizar la solución correcta. Sin presión —
            puedes elegir "aún no lo sé" si estás explorando.
          </p>

          <Field label="Presupuesto mensual estimado" full>
            <ChipGroup
              options={BUDGETS}
              selected={data.budget}
              onToggle={(v) => update("budget", v)}
            />
          </Field>

          <div style={{ height: 24 }} />

          <Field label="¿Cuándo lo necesitas?" full>
            <ChipGroup
              options={URGENCIES}
              selected={data.urgency}
              onToggle={(v) => update("urgency", v)}
            />
          </Field>

          <div style={{ height: 24 }} />

          <Field label="¿Has intentado solucionarlo antes? (opcional)" full>
            <textarea
              placeholder="Ej. Probamos contratar más personal, pero el costo se nos disparó…"
              value={data.current_pain}
              onChange={(e) => update("current_pain", e.target.value)}
            />
          </Field>
        </div>
      )}

      {step === 2 && (
        <div className="step-fade">
          <div className="wizard-step-label">Paso 03 / 03 — Contacto</div>
          <h3 className="wizard-step-title">¿A dónde te enviamos la propuesta?</h3>
          <p className="wizard-step-sub">
            Te respondemos en menos de 24 horas con un diagnóstico personalizado.
            No spam — solo el camino más corto para automatizar tu negocio.
          </p>

          <div className="wizard-fields">
            <Field label="Nombre completo *">
              <input
                type="text"
                placeholder="María García"
                value={data.name}
                onChange={(e) => update("name", e.target.value)}
              />
            </Field>
            <Field label="Correo *">
              <input
                type="email"
                placeholder="maria@empresa.com"
                value={data.email}
                onChange={(e) => update("email", e.target.value)}
              />
            </Field>
            <Field label="Teléfono / WhatsApp *">
              <input
                type="tel"
                placeholder="+52 555 123 4567"
                value={data.phone}
                onChange={(e) => update("phone", e.target.value)}
              />
            </Field>
            <Field label="Nombre de la empresa">
              <input
                type="text"
                placeholder="(opcional)"
                value={data.company}
                onChange={(e) => update("company", e.target.value)}
              />
            </Field>
          </div>

          <div style={{
            marginTop: 24,
            padding: "14px 16px",
            background: "var(--bg-2)",
            border: "1px solid var(--line)",
            borderRadius: 12,
            fontSize: 13,
            color: "var(--fg-dim)",
            display: "flex",
            gap: 12,
            alignItems: "flex-start",
          }}>
            <div style={{
              width: 6, height: 6, borderRadius: "50%",
              background: "var(--cyan)", boxShadow: "0 0 8px var(--cyan)",
              marginTop: 7, flexShrink: 0,
            }}/>
            <span>
              Al enviar aceptas que naxus te contacte por correo o WhatsApp.
              No compartimos tus datos con terceros — punto.
            </span>
          </div>
        </div>
      )}

      <div className="wizard-actions">
        <button
          type="button"
          className="wizard-back"
          disabled={step === 0}
          onClick={() => setStep((s) => Math.max(0, s - 1))}
        >
          ← Atrás
        </button>

        {step < totalSteps - 1 ? (
          <button
            type="button"
            className="btn btn-primary"
            disabled={!canAdvance()}
            onClick={() => canAdvance() && setStep((s) => s + 1)}
            style={!canAdvance() ? { opacity: 0.4, cursor: "not-allowed" } : null}
          >
            Continuar {window.Icon.arrow}
          </button>
        ) : (
          <button
            type="button"
            className="btn btn-primary"
            disabled={!canAdvance()}
            onClick={submit}
            style={!canAdvance() ? { opacity: 0.4, cursor: "not-allowed" } : null}
          >
            Enviar solicitud {window.Icon.arrow}
          </button>
        )}
      </div>
    </div>
  );
}

window.Wizard = Wizard;