// WhatsApp-style chat mockup with typed animations

const ChatBubble = ({ side, text, time, check, style }) => (
  <div className={`chat-row ${side}`} style={style}>
    <div className={`chat-bubble ${side}`}>
      <div>{text}</div>
      <div className="chat-meta">
        {time}
        {side === "out" && check && <span className="chat-check">✓✓</span>}
      </div>
    </div>
  </div>
);

const ChatTyping = () => (
  <div className="chat-row in">
    <div className="chat-typing"><span></span><span></span><span></span></div>
  </div>
);

// A scripted animated chat. Accepts a `script` prop — array of steps
// { side: "in"|"out", text, time, check?, typingBefore?: ms }
function AnimatedChat({ name = "La Casa de Café", status = "Asistente · en línea", avatar = "☕", script, loop = true, badge }) {
  const [step, setStep] = React.useState(0);
  const [typing, setTyping] = React.useState(false);
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    if (!script || script.length === 0) return;
    let timers = [];

    const advance = (idx) => {
      if (idx >= script.length) {
        if (loop) {
          timers.push(setTimeout(() => {
            setStep(0);
            setTyping(false);
            advance(0);
          }, 2600));
        }
        return;
      }
      const next = script[idx];
      if (next.typingBefore) {
        setTyping(true);
        timers.push(setTimeout(() => {
          setTyping(false);
          setStep(idx + 1);
          advance(idx + 1);
        }, next.typingBefore));
      } else {
        timers.push(setTimeout(() => {
          setStep(idx + 1);
          advance(idx + 1);
        }, next.delay || 900));
      }
    };

    advance(0);
    return () => { timers.forEach(clearTimeout); };
  }, [script, loop]);

  React.useEffect(() => {
    if (bodyRef.current) {
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
    }
  }, [step, typing]);

  const visible = script.slice(0, step);

  return (
    <div className="chat-frame">
      <div className="chat-header">
        <div className="chat-avatar">{avatar}</div>
        <div style={{ lineHeight: 1.2, minWidth: 0, flex: 1 }}>
          <div className="chat-name-text">{name}</div>
          <div className="chat-status-text">{status}</div>
        </div>
        <div className="chat-header-icons">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
        </div>
      </div>

      <div className="chat-body" ref={bodyRef}>
        {visible.map((m, i) => (
          <ChatBubble key={i} side={m.side} text={m.text} time={m.time} check={m.check} />
        ))}
        {typing && <ChatTyping />}
      </div>

      <div className="chat-footer">
        <div className="chat-input">Escribí un mensaje…</div>
        <div className="chat-send">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4 20-7z"/></svg>
        </div>
      </div>

      {badge && (
        <div className="hero-chat-badge">
          <span className="live-dot"></span>
          {badge}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AnimatedChat, ChatBubble, ChatTyping });