/* Mockup animado de conversación de WhatsApp para el hero */
const { useState: useStateChat, useEffect: useEffectChat, useRef: useRefChat } = React;

function ChatProductCard() {
  return (
    <div className="chat-product">
      <div className="chat-product__img" aria-hidden="true">
        <span>foto<br/>producto</span>
      </div>
      <div className="chat-product__info">
        <div className="chat-product__name">Campera Puffer — Verde</div>
        <div className="chat-product__price">$89.900</div>
        <div className="chat-product__tag">3 cuotas sin interés</div>
      </div>
    </div>
  );
}

function ChatLinkCard() {
  return (
    <div className="chat-link">
      <div className="chat-link__icon" aria-hidden="true">🛒</div>
      <div className="chat-link__body">
        <div className="chat-link__title">Finalizar compra</div>
        <div className="chat-link__url">tutienda.com/checkout</div>
      </div>
    </div>
  );
}

function TypingDots() {
  return (
    <div className="bubble bubble--bot bubble--typing">
      <span></span><span></span><span></span>
    </div>
  );
}

function WhatsAppMock() {
  const script = window.CONTENT.chat;
  const [visible, setVisible] = useStateChat([]);
  const [typing, setTyping] = useStateChat(false);
  const scroller = useRefChat(null);
  const timers = useRefChat([]);

  useEffectChat(() => {
    let cancelled = false;
    function clearTimers() {
      timers.current.forEach((t) => clearTimeout(t));
      timers.current = [];
    }
    function run() {
      clearTimers();
      setVisible([]);
      setTyping(false);
      let acc = 600;
      script.forEach((msg, i) => {
        if (msg.from === "bot") {
          timers.current.push(setTimeout(() => { if (!cancelled) setTyping(true); }, acc));
          acc += Math.min(msg.delay, 1200);
        }
        timers.current.push(setTimeout(() => {
          if (cancelled) return;
          setTyping(false);
          setVisible((v) => [...v, i]);
        }, acc));
        acc += msg.delay;
      });
      // reinicia el loop
      timers.current.push(setTimeout(() => { if (!cancelled) run(); }, acc + 3200));
    }
    run();
    return () => { cancelled = true; clearTimers(); };
  }, []);

  useEffectChat(() => {
    if (scroller.current) {
      scroller.current.scrollTop = scroller.current.scrollHeight;
    }
  }, [visible, typing]);

  return (
    <div className="phone">
      <div className="phone__screen">
        <div className="wa-header">
          <div className="wa-back" aria-hidden="true">‹</div>
          <div className="wa-avatar" aria-hidden="true">S</div>
          <div className="wa-meta">
            <div className="wa-name">
              SimplifAI
              <svg viewBox="0 0 24 24" className="wa-verified" aria-hidden="true"><path d="M12 2l2.4 1.8 3 .1 1 2.8 2.4 1.8-.9 2.9.9 2.9-2.4 1.8-1 2.8-3 .1L12 22l-2.4-1.8-3-.1-1-2.8L3.2 15.5l.9-2.9-.9-2.9L5.6 7.9l1-2.8 3-.1z" fill="currentColor"/><path d="M9 12.2l2 2 4-4.2" stroke="#fff" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <div className="wa-status">en línea</div>
          </div>
          <div className="wa-icons" aria-hidden="true">
            <span>📞</span><span>⋮</span>
          </div>
        </div>
        <div className="wa-body" ref={scroller}>
          <div className="wa-day">HOY</div>
          {visible.map((idx) => {
            const m = script[idx];
            return (
              <div key={idx} className={"bubble-row bubble-row--" + m.from}>
                <div className={"bubble bubble--" + m.from}>
                  {m.product && <ChatProductCard />}
                  {m.link && <ChatLinkCard />}
                  <span className="bubble__text">{m.text}</span>
                  <span className="bubble__time">
                    {m.from === "bot" ? "9:4" + (idx + 1) : "9:4" + (idx + 1)}
                    {m.from === "user" && <span className="bubble__ticks">✓✓</span>}
                  </span>
                </div>
              </div>
            );
          })}
          {typing && <TypingDots />}
        </div>
        <div className="wa-input">
          <div className="wa-input__field">Escribí un mensaje…</div>
          <div className="wa-input__send" aria-hidden="true">➤</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WhatsAppMock });