// bot-hero-demo.jsx — Demo del hero de la landing.
// Reproduce en loop los DOS mismos casos del prototipo del bot (SCENARIOS),
// para que la landing y el demo coincidan exactamente.
// Exporta: PhoneDemo ({ scale }).

function BotHeroChat() {
  const [msgs, setMsgs] = React.useState([]);
  const [typing, setTyping] = React.useState(false);
  const scrollRef = React.useRef(null);
  const runRef = React.useRef(0);

  React.useEffect(() => {
    const myRun = ++runRef.current;
    const alive = () => runRef.current === myRun;
    const order = (typeof SCENARIO_ORDER !== 'undefined') ? SCENARIO_ORDER : ['pendiente', 'pagado'];
    const wait = (ms) => new Promise(r => setTimeout(r, ms));
    (async () => {
      while (alive()) {
        for (const key of order) {
          if (!alive()) return;
          setMsgs([]);
          setTyping(false);
          await wait(550);
          if (!alive()) return;
          const scn = SCENARIOS[key];
          for (let i = 0; i < scn.msgs.length; i++) {
            const m = scn.msgs[i];
            if (!alive()) return;
            if (m.from === 'bot' && m.typing) {
              setTyping(true);
              await wait(m.typing);
              if (!alive()) return;
              setTyping(false);
            } else if (i > 0) {
              await wait(520);
              if (!alive()) return;
            }
            setMsgs(prev => [...prev, { ...m, id: myRun + '-' + key + '-' + i }]);
            await wait(260);
          }
          await wait(3400); // mantener el caso visible antes de cambiar
        }
      }
    })();
    return () => { runRef.current++; };
  }, []);

  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollTop = el.scrollHeight;
    const t = setTimeout(() => { el.scrollTop = el.scrollHeight; }, 60);
    return () => clearTimeout(t);
  }, [msgs, typing]);

  return (
    <div className="wa-chat" data-wamode="light">
      <WAHead />
      <div className="wa-scroll" ref={scrollRef}>
        <WAPill>HOY</WAPill>
        {msgs.map(m => <WAMessage key={m.id} msg={m} onButton={() => {}} name="Caro" />)}
        {typing && <WATyping />}
      </div>
      <div className="wa-composer-zone">
        <div className="wa-composer">
          <span className="wa-icon-btn">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
          </span>
          <div className="wa-input">Mensaje</div>
          <span className="wa-icon-btn" style={{ background: 'var(--green)', borderRadius: 999, width: 38, height: 38, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/></svg>
          </span>
        </div>
      </div>
    </div>
  );
}

function PhoneDemo({ scale = 0.72 }) {
  return (
    <div style={{ width: 402 * scale, height: 874 * scale, position: 'relative' }}>
      <div style={{ transform: `scale(${scale})`, transformOrigin: 'top left', position: 'absolute' }}>
        <IOSDevice>
          <div style={{ position: 'absolute', inset: 0 }}>
            <BotHeroChat />
          </div>
        </IOSDevice>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneDemo, BotHeroChat });