// app.jsx — Diagnóstico multi-step flow
const { useState, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C0623A",
  "display": "Archivo",
  "radius": "suave",
  "transition": "slide"
}/*EDITMODE-END*/;

const RADII = { recto: ["4px", "3px"], suave: ["14px", "9px"], redondo: ["22px", "16px"] };

const STEP_META = [
  { n: "01", label: "Empresa", sub: "Identidad" },
  { n: "02", label: "Presencia digital", sub: "Canales" },
  { n: "03", label: "Operación", sub: "Ventas" },
  { n: "04", label: "Stack actual", sub: "Herramientas" },
  { n: "05", label: "Problema", sub: "Dolor" },
];

const CANALES = ["Referidos", "Redes sociales", "Google", "Llamadas en frío", "Campañas pagadas", "Ferias / eventos", "Punto físico"];
const STACK = ["WhatsApp Business", "CRM (HubSpot, Pipedrive, etc.)", "Catálogo digital", "Campañas Meta/Google", "Automatización (n8n, Zapier)", "E-commerce / pagos online", "Excel / hojas de cálculo", "ERP / sistema interno", "Bot / chatbot IA", "Nada todavía"];
const PROBLEMAS = ["Ventas bajas", "Seguimiento a prospectos", "Imagen / marca débil", "Falta de contenido", "Procesos manuales", "No tengo claridad de datos"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [step, setStep] = useState(0);      // 0..4, then 'analyze', 'report'
  const [phase, setPhase] = useState("form"); // form | analyze | report
  const [data, setData] = useState({ canales: [], stack: [] });
  const [errors, setErrors] = useState({});
  const dir = useRef(1);

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const E = (k) => errors[k];

  const STEPS = [
    {
      eyebrow: "Paso 01 · Identidad de tu empresa",
      title: "Empecemos por lo básico",
      required: ["empresa", "sector", "ciudad", "anios"],
      render: () => (
        <div className="grid2">
          <Field label="Nombre de la empresa" required error={E("empresa")} span2>
            <TextInput value={data.empresa} onChange={(v) => set("empresa", v)} placeholder="Ej. Fibra de Vidrio MX" />
          </Field>
          <Field label="Giro / sector" required error={E("sector")}>
            <TextInput value={data.sector} onChange={(v) => set("sector", v)} placeholder="Manufactura, eventos, dental…" />
          </Field>
          <Field label="Ciudad / país" required error={E("ciudad")}>
            <TextInput value={data.ciudad} onChange={(v) => set("ciudad", v)} placeholder="Ciudad de México, MX" />
          </Field>
          <Field label="Años operando" required error={E("anios")} span2>
            <Select value={data.anios} onChange={(v) => set("anios", v)}
              options={["Menos de 1 año", "1 – 3 años", "3 – 7 años", "7 – 15 años", "Más de 15 años"]} />
          </Field>
        </div>
      ),
    },
    {
      eyebrow: "Paso 02 · ¿Dónde te encuentran hoy?",
      title: "Tu presencia digital",
      required: [],
      render: () => (
        <div className="grid2">
          <Field label="Página web (URL completa)" hint="Déjalo vacío si no tienes" span2>
            <TextInput value={data.web} onChange={(v) => set("web", v)} placeholder="https://…" />
          </Field>
          <Field label="Instagram">
            <TextInput value={data.instagram} onChange={(v) => set("instagram", v)} placeholder="@usuario o URL" />
          </Field>
          <Field label="Facebook">
            <TextInput value={data.facebook} onChange={(v) => set("facebook", v)} placeholder="@página o URL" />
          </Field>
          <Field label="TikTok / LinkedIn / otros" span2>
            <TextInput value={data.otros} onChange={(v) => set("otros", v)} placeholder="Otros canales activos" />
          </Field>
          <Field label="¿Tienes ficha de Google Business?" span2>
            <RadioGroup value={data.gbusiness} onChange={(v) => set("gbusiness", v)}
              options={["Sí, activa", "No tengo", "No estoy seguro"]} />
          </Field>
        </div>
      ),
    },
    {
      eyebrow: "Paso 03 · ¿Qué vendes y cómo?",
      title: "Cómo opera tu negocio",
      required: ["vende"],
      render: () => (
        <div>
          <Field label="¿Qué vendes? (producto / servicio principal)" required error={E("vende")}>
            <TextArea value={data.vende} onChange={(v) => set("vende", v)} placeholder="Describe brevemente…" />
          </Field>
          <Field label="¿Cómo consigues clientes hoy?" hint="Marca todo lo que aplica">
            <ChipMulti value={data.canales} onChange={(v) => set("canales", v)} options={CANALES} />
          </Field>
          <Field label="¿Cuántos prospectos nuevos te llegan al mes (aprox)?" required error={E("prospectos")}>
            <Select value={data.prospectos} onChange={(v) => set("prospectos", v)}
              options={["Menos de 10", "10 – 30", "30 – 80", "80 – 200", "Más de 200", "No lo sé"]} />
          </Field>
        </div>
      ),
    },
    {
      eyebrow: "Paso 04 · Herramientas que ya usas",
      title: "Tu stack actual",
      required: [],
      render: () => (
        <div>
          <Field label="Marca todo lo que aplica">
            <ChipMulti value={data.stack} onChange={(v) => set("stack", v)} options={STACK} />
          </Field>
        </div>
      ),
    },
    {
      eyebrow: "Paso 05 · ¿Qué te duele más hoy?",
      title: "El problema, en tus palabras",
      required: ["problema_pri", "nombre", "whatsapp"],
      render: () => (
        <div>
          <Field label="Principal problema" required error={E("problema_pri")}>
            <ChipSingle value={data.problema_pri} onChange={(v) => set("problema_pri", v)} options={PROBLEMAS} />
          </Field>
          <Field label="Cuéntame en 1-2 líneas el problema con tus palabras">
            <TextArea value={data.problema_txt} onChange={(v) => set("problema_txt", v)}
              placeholder="Ej. Recibo muchos mensajes pero pocos clientes terminan comprando…" />
          </Field>
          <div className="grid2" style={{ marginTop: 4 }}>
            <Field label="Tu nombre" required error={E("nombre")}>
              <TextInput value={data.nombre} onChange={(v) => set("nombre", v)} placeholder="Tu nombre" />
            </Field>
            <Field label="WhatsApp con LADA" required error={E("whatsapp")}>
              <TextInput value={data.whatsapp} onChange={(v) => set("whatsapp", v)} placeholder="+52 …" type="tel" />
            </Field>
          </div>
        </div>
      ),
    },
  ];

  const cur = STEPS[step];

  const validate = () => {
    const errs = {};
    cur.required.forEach((k) => {
      const v = data[k];
      if (!v || (Array.isArray(v) && v.length === 0) || String(v).trim() === "") errs[k] = "Campo requerido";
    });
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const next = () => {
    if (!validate()) return;
    if (step < STEPS.length - 1) {
      dir.current = 1;
      setStep(step + 1);
      setErrors({});
    } else {
      setPhase("analyze");
    }
  };
  const back = () => {
    if (step > 0) { dir.current = -1; setStep(step - 1); setErrors({}); }
  };
  const goto = (i) => {
    if (i <= step) { dir.current = i < step ? -1 : 1; setStep(i); setErrors({}); }
  };
  const restart = () => { setPhase("form"); setStep(0); };

  const rootStyle = {
    "--accent": t.accent,
    "--radius": RADII[t.radius][0],
    "--radius-sm": RADII[t.radius][1],
    fontFamily: `"${t.display}", system-ui, sans-serif`,
  };
  const modeClass = t.transition === "fade" ? "fade-mode" : t.transition === "none" ? "none-mode" : "";

  return (
    <div className="stage" style={rootStyle}>
      <div className={"shell " + modeClass} style={{ "--slide-dir": dir.current }}>
        {/* LEFT — brand + stepper */}
        <aside className="brand">
          <div className="lockup"><span className="glyph">⚯</span> Diagnóstico</div>
          <div className="brand-head">
            <h1>Diagnóstico<span className="dot">.</span></h1>
            <p className="lede">Análisis automatizado con IA de tu presencia digital, operación y oportunidades. Responde 5 pasos y recibe en minutos un reporte con áreas críticas, riesgos y planes recomendados.</p>
            <div className="stepper">
              {STEP_META.map((m, i) => (
                <button key={m.n} type="button" disabled={i > step}
                  className={"step-item" + (i === step && phase === "form" ? " active" : "") + (i < step || phase !== "form" ? " done" : "")}
                  onClick={() => phase === "form" && goto(i)}>
                  <span className="step-num">{(i < step || phase !== "form") ? "✓" : m.n}</span>
                  <span>
                    <span className="step-label">{m.label}</span>
                  </span>
                </button>
              ))}
            </div>
          </div>
          <div className="brand-foot">Diagnosticamos antes de proponer.<br />La tecnología sin contexto es ruido caro.</div>
        </aside>

        {/* RIGHT — form / analyze / report */}
        <section className="form">
          {phase === "form" && (
            <React.Fragment>
              <div className="form-top">
                <span className="eyebrow">{cur.eyebrow}</span>
                <span className="count mono"><b>{String(step + 1).padStart(2, "0")}</b> / 05</span>
              </div>
              <div className="progress"><div className="progress-bar" style={{ width: ((step + 1) / 5 * 100) + "%" }}></div></div>
              <div className="form-body">
                <div className="slide" key={step}>
                  <h2 className="q-title">{cur.title}</h2>
                  {cur.render()}
                </div>
              </div>
              <div className="form-nav">
                {step > 0 && <button className="btn btn-ghost" onClick={back}>← Atrás</button>}
                <button className="btn btn-primary" onClick={next}>
                  {step < STEPS.length - 1 ? "Siguiente →" : <span>Analizar con IA <span aria-hidden="true">⚯</span></span>}
                </button>
              </div>
            </React.Fragment>
          )}
          {phase === "analyze" && <Analyzing onDone={() => setPhase("report")} />}
          {phase === "report" && <Report data={data} onRestart={restart} />}
        </section>
      </div>

      <TweaksPanel>
        <TweakSection label="Color" />
        <TweakColor label="Acento" value={t.accent}
          options={["#C0623A", "#2E7A4E", "#9C4F2D", "#7CA8FF", "#1B1A16"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Tipografía" />
        <TweakSelect label="Display" value={t.display}
          options={["Space Grotesk", "Sora", "Instrument Sans", "DM Sans"]}
          onChange={(v) => setTweak("display", v)} />
        <TweakSection label="Forma & movimiento" />
        <TweakRadio label="Esquinas" value={t.radius}
          options={["recto", "suave", "redondo"]}
          onChange={(v) => setTweak("radius", v)} />
        <TweakRadio label="Transición" value={t.transition}
          options={["slide", "fade", "none"]}
          onChange={(v) => setTweak("transition", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);