// diagnostico-teaser.jsx
// Mini diagnóstico — 3 questions + a teaser result screen.
// Renders as a backdrop overlay (absolute-positioned) inside the artboard
// so the user can feel the flow without leaving the landing.

const TEASER_QUESTIONS = [
  {
    id: "etapa",
    label: "Pregunta 1 de 3 · Etapa",
    q: "¿Dónde estás parado hoy con tu empresa?",
    options: [
      "Apenas empezando, todo lo hago yo",
      "Ya tengo equipo, pero falta orden",
      "Operación estable, busco crecer",
      "En crecimiento fuerte, necesito profesionalizar",
    ],
  },
  {
    id: "dolor",
    label: "Pregunta 2 de 3 · Lo que más duele",
    q: "Si pudieras resolver una cosa esta semana, ¿cuál sería?",
    options: [
      "Tener claridad de mis números reales",
      "Que mi equipo no me necesite para todo",
      "Conseguir clientes más grandes",
      "Dejar de operar y empezar a dirigir",
    ],
  },
  {
    id: "ambicion",
    label: "Pregunta 3 de 3 · A dónde vas",
    q: "¿Qué te gustaría poder decir de tu negocio en 12 meses?",
    options: [
      "Que está más ordenado y predecible",
      "Que ya facturo el doble",
      "Que estoy certificado y puedo competir",
      "Que ya no depende de mí para operar",
    ],
  },
];

function DiagnosticoTeaser({ variant, accentClass, onClose }) {
  const [step, setStep] = React.useState(0); // 0..2 questions, 3 result
  const [answers, setAnswers] = React.useState({});
  const total = TEASER_QUESTIONS.length;
  const isResult = step >= total;

  const progress = isResult ? 1 : (step / total);

  const select = (qid, opt) => {
    setAnswers((a) => ({ ...a, [qid]: opt }));
    // auto-advance after a beat
    setTimeout(() => setStep((s) => s + 1), 220);
  };

  return (
    <div className="vig-teaser-backdrop" onClick={onClose}>
      <div className="vig-teaser" onClick={(e) => e.stopPropagation()}>
        <div className="vig-teaser__head">
          <span className="vig-teaser__title">Diagnóstico Vig-ia · Versión rápida</span>
          <button className="vig-teaser__close" onClick={onClose} aria-label="Cerrar">
            <Icons.close />
          </button>
        </div>
        <div className="vig-teaser__progress">
          <i style={{ width: (progress * 100) + "%" }} />
        </div>

        {!isResult ? (
          <TeaserQuestion
            data={TEASER_QUESTIONS[step]}
            selected={answers[TEASER_QUESTIONS[step].id]}
            onSelect={(opt) => select(TEASER_QUESTIONS[step].id, opt)}
            step={step}
            total={total}
            onBack={step > 0 ? () => setStep(step - 1) : null}
          />
        ) : (
          <TeaserResult
            answers={answers}
            accentClass={accentClass}
            onRestart={() => { setAnswers({}); setStep(0); }}
            onClose={onClose}
          />
        )}
      </div>
    </div>
  );
}

function TeaserQuestion({ data, selected, onSelect, step, total, onBack }) {
  return (
    <div className="vig-teaser__body">
      <div className="vig-teaser__step-label">{data.label}</div>
      <h3 className="vig-teaser__question">{data.q}</h3>
      <div className="vig-teaser__options">
        {data.options.map((opt) => (
          <button
            key={opt}
            className="vig-teaser__opt"
            data-selected={selected === opt}
            onClick={() => onSelect(opt)}
          >
            <span className="vig-teaser__opt-mark" />
            <span>{opt}</span>
          </button>
        ))}
      </div>
      <div className="vig-teaser__foot">
        {onBack ? (
          <button className="vig-btn vig-btn--ghost vig-btn--sm" onClick={onBack}>
            ← Atrás
          </button>
        ) : <span />}
        <span className="vig-teaser__count">{step + 1} / {total}</span>
      </div>
    </div>
  );
}

function TeaserResult({ answers, accentClass, onRestart, onClose }) {
  // Build a friendly score based on how "advanced" the answers are
  // (option index 0..3 → weight 30, 50, 70, 85; then averaged + small jitter)
  const stageMap = [30, 52, 70, 84];
  const idx = TEASER_QUESTIONS.map((q) => {
    const a = answers[q.id];
    const i = q.options.indexOf(a);
    return i >= 0 ? stageMap[i] : 50;
  });
  const score = Math.round(idx.reduce((s, v) => s + v, 0) / idx.length);
  const stage = score < 45
    ? "En arranque"
    : score < 65
    ? "En profesionalización"
    : score < 80
    ? "En crecimiento"
    : "Lista para escalar";

  const recos = [
    "Ordenar tus procesos administrativos clave",
    "Visibilidad financiera con reportes simples",
    "Sentar las bases para una certificación",
  ];

  // Animate the bar from 0 → score
  const [drawn, setDrawn] = React.useState(0);
  React.useEffect(() => { const t = setTimeout(() => setDrawn(score), 80); return () => clearTimeout(t); }, [score]);

  return (
    <div className="vig-teaser__body">
      <div className="vig-teaser__step-label">Tu resultado preliminar</div>
      <h3 className="vig-teaser__result-title">Buen punto de arranque para tu empresa.</h3>
      <p className="vig-teaser__result-lead">
        Esto es solo una vista rápida. El diagnóstico completo (25 preguntas, 5 min) te da una ruta detallada y un equipo de consultoría listo para acompañarte.
      </p>

      <div className="vig-teaser__score-wrap">
        <div className="vig-teaser__score-row">
          <span>
            <span className="vig-teaser__score-num">{score}</span>
            <span className="vig-teaser__score-of">/100</span>
          </span>
          <span className="vig-teaser__score-tag">Etapa: {stage}</span>
        </div>
        <div className="vig-teaser__score-bar"><i style={{ width: drawn + "%" }} /></div>
      </div>

      <div style={{
        display: "flex", flexDirection: "column", gap: 8,
        marginBottom: 20,
        fontFamily: 'var(--vig-font-body)', fontSize: 14, color: 'var(--vig-ink-600)'
      }}>
        <strong style={{
          fontFamily: 'var(--vig-font-display)',
          fontWeight: 700, fontSize: 13,
          textTransform: 'uppercase', letterSpacing: '.08em',
          color: 'var(--vig-ink-400)', marginBottom: 4
        }}>Lo que probablemente sigue para ti</strong>
        {recos.map((r) => (
          <div key={r} style={{ display: "flex", alignItems: "flex-start", gap: 10, lineHeight: 1.45 }}>
            <span style={{
              flex: "0 0 auto", marginTop: 2,
              width: 18, height: 18, borderRadius: 99,
              background: 'var(--vig-cyan-100)',
              color: 'var(--vig-blue-700)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
            }}>
              <Icons.check />
            </span>
            <span>{r}</span>
          </div>
        ))}
      </div>

      <div className="vig-teaser__cta-row">
        <button className={"vig-btn " + accentClass}>
          Continuar al diagnóstico completo <Icons.arrowRight />
        </button>
        <button className="vig-btn vig-btn--ghost" onClick={onRestart}>Volver a empezar</button>
      </div>
    </div>
  );
}

Object.assign(window, { DiagnosticoTeaser });