// report.jsx — "Analizando con IA" sequence + final simulated report
const { useState: useStateR, useEffect: useEffectR } = React;

const SCAN_STEPS = [
  "Analizando dominio y SEO básico",
  "Revisando redes sociales y presencia",
  "Identificando stack operativo",
  "Detectando oportunidades de IA",
  "Construyendo reporte y recomendaciones",
];

function Analyzing({ onDone }) {
  const [active, setActive] = useStateR(0);
  useEffectR(() => {
    let i = 0;
    const tick = () => {
      i += 1;
      setActive(i);
      if (i <= SCAN_STEPS.length) {
        setTimeout(tick, i === SCAN_STEPS.length ? 900 : 760);
      } else {
        setTimeout(onDone, 350);
      }
    };
    const t = setTimeout(tick, 500);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="analyze">
      <div className="scan-badge">
        <span className="ring"></span>
        <span className="ring r2"></span>
        <span className="ring r3"></span>
        <span className="g">⚯</span>
      </div>
      <div className="scan-lines">
        {SCAN_STEPS.map((s, i) => {
          const revealed = i < active;              // has appeared
          const isDone = i < active - 1 || active > SCAN_STEPS.length; // finished
          const working = revealed && !isDone;       // currently scanning
          return (
            <div key={s} className={"scan-row" + (revealed ? " on" : "") + (isDone ? " done" : "")}>
              <span className="mk">{isDone ? "✓" : "→"}</span>
              <span>{s}…</span>
              {working && <span className="sp"></span>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ---- build a plausible diagnostic from the answers ----
function buildReport(data) {
  const areas = [];
  if (!data.web || !/^https?:\/\/|\./.test(data.web || "")) {
    areas.push({ t: "Sin web indexable", sev: "alta", d: "No detectamos un sitio activo. Pierdes captación orgánica y credibilidad ante prospectos que te buscan en Google." });
  } else {
    areas.push({ t: "SEO básico incompleto", sev: "media", d: "El dominio existe pero faltan señales de posicionamiento. Hay tráfico que no estás capturando." });
  }
  if (data.gbusiness !== "Sí, activa") {
    areas.push({ t: "Google Business sin activar", sev: "alta", d: "Sin ficha verificada eres invisible en búsquedas locales y mapas — el canal de mayor intención de compra." });
  }
  const canales = data.canales || [];
  if (canales.includes("Referidos") && canales.length <= 2) {
    areas.push({ t: "Dependencia de referidos", sev: "media", d: "Tu crecimiento depende de boca a boca: difícil de escalar y de predecir mes a mes." });
  }
  const stack = data.stack || [];
  if (stack.includes("Excel / hojas de cálculo") || stack.includes("Nada todavía") || !stack.includes("CRM (HubSpot, Pipedrive, etc.)")) {
    areas.push({ t: "Sin CRM real", sev: "alta", d: "Los prospectos viven en hojas y chats sueltos. Sin seguimiento sistemático, se enfrían y se pierden." });
  }
  if (!stack.includes("Automatización (n8n, Zapier)")) {
    areas.push({ t: "Procesos 100% manuales", sev: "media", d: "Tareas repetitivas consumen horas que deberían ir a vender. Automatizable de inmediato." });
  }
  while (areas.length < 4) {
    areas.push({ t: "Contenido inconsistente", sev: "baja", d: "Publicas sin cadencia ni narrativa. La marca no construye memoria en tu audiencia." });
  }
  const critical = areas.slice(0, 4);

  // maturity score: lower when more critical gaps
  const altas = critical.filter((a) => a.sev === "alta").length;
  const score = Math.max(28, 72 - altas * 13 - (stack.includes("Nada todavía") ? 8 : 0));

  const planes = [
    { t: "Cimientos digitales", d: "Ficha de Google Business, landing de captación y trazabilidad de prospectos en un CRM.", m: "Semana 1–2 · Base" },
    { t: "Seguimiento automatizado", d: "WhatsApp Business + flujos de respuesta y nutrición para que ningún prospecto se enfríe.", m: "Semana 3–5 · Conversión" },
    { t: "Motor de IA a medida", d: "Agente que califica, responde y agenda 24/7 conectado a tu operación real.", m: "Semana 6+ · Escala" },
  ];

  return { critical, score, planes };
}

function ScoreRing({ score }) {
  const r = 38, c = 2 * Math.PI * r;
  const off = c * (1 - score / 100);
  const color = score < 45 ? "#E5564B" : score < 65 ? "#E8B045" : "var(--accent)";
  return (
    <div className="rep-score">
      <svg width="88" height="88" viewBox="0 0 88 88">
        <circle cx="44" cy="44" r={r} fill="none" stroke="var(--border)" strokeWidth="6" />
        <circle cx="44" cy="44" r={r} fill="none" stroke={color} strokeWidth="6"
          strokeLinecap="round" strokeDasharray={c} strokeDashoffset={off}
          style={{ transition: "stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1)" }} />
      </svg>
      <div style={{ textAlign: "center" }}>
        <div className="val">{score}</div>
        <div className="lab">Índice</div>
      </div>
    </div>
  );
}

function Report({ data, onRestart }) {
  const { critical, score, planes } = React.useMemo(() => buildReport(data), [data]);
  const name = data.empresa || "tu empresa";
  return (
    <div className="report">
      <div className="rep-head">
        <ScoreRing score={score} />
        <div>
          <div className="eyebrow">Reporte de diagnóstico · IA</div>
          <h2>{name}</h2>
          <div className="sub">Madurez digital <b style={{color:"var(--text)"}}>{score < 45 ? "incipiente" : score < 65 ? "en desarrollo" : "sólida"}</b>. Detectamos {critical.filter(a=>a.sev==="alta").length} áreas críticas con impacto directo en captación y conversión.</div>
          <div className="tag-row">
            {data.sector && <span className="tag">{data.sector}</span>}
            {data.ciudad && <span className="tag">{data.ciudad}</span>}
            {data.anios && <span className="tag">{data.anios} operando</span>}
            {data.problema_pri && <span className="tag">Dolor · {data.problema_pri}</span>}
          </div>
        </div>
      </div>
      <div className="rep-body">
        <div className="rep-sec-title">Áreas críticas detectadas</div>
        <div className="rep-grid">
          {critical.map((a, i) => (
            <div key={i} className="rcard">
              <div className="rh">
                <span className="rt">{a.t}</span>
                <span className={"sev " + a.sev}>{a.sev}</span>
              </div>
              <p>{a.d}</p>
            </div>
          ))}
        </div>
        <div className="rep-sec-title">Plan recomendado</div>
        <div className="plans">
          {planes.map((p, i) => (
            <div key={i} className="plan">
              <span className="pn">{String(i + 1).padStart(2, "0")}</span>
              <div>
                <div className="pt">{p.t}</div>
                <div className="pd">{p.d}</div>
              </div>
              <span className="pm">{p.m}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="rep-foot">
        <div className="tagline">"Diagnosticamos antes de proponer. La tecnología sin contexto es ruido caro."</div>
        <button className="btn-wa" onClick={onRestart}>
          Recibir reporte por WhatsApp <span aria-hidden="true">⚯</span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { Analyzing, Report, buildReport });