// chat.jsx — Animated CHAT WEB mockup for LUE landing page hero.
// Neutral web-chat aesthetic: white header, purple "L" mark, online badge,
// light body. No WhatsApp green, no read-ticks, no call/camera/menu icons,
// no audio/photo input. The IA only handles text.

const { useState, useEffect, useRef } = React;

// Inline icon helpers
const ICN = {
  send: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>,
};

// One scripted conversation in the store's web chat:
// customer → LUE → product card → contact capture (name, number, email)
const HERO_SCRIPT = [
  { who: "in", text: "oii, vc tem aquela blusa roxa estampada P?", t: "10:42" },
  { typing: true, dur: 900 },
  { who: "out", text: "Oii! 💜 Tenho sim. A Blusa Cropped Lilac sai por R$ 79 e tem em P, M e G.", t: "10:42" },
  { who: "out", card: { title: "Blusa Cropped Lilac", sub: "P · M · G · GG", price: "R$ 79,00" }, t: "10:42" },
  { who: "in", text: "ah amei! quero sim", t: "10:43" },
  { who: "out", text: "Que ótimo! 😊 Me passa seu nome, número e email que nosso time já entra em contato pra fechar.", t: "10:43" },
  { who: "in", text: "Marina, 11 98842-1109, marina@email.com", t: "10:43" },
  { typing: true, dur: 700 },
  { who: "out", text: "Anotado, Marina! Em breve nosso time fala com você ✨", t: "10:43" },
];

function ChatHeader() {
  return (
    <div className="chat-head wa">
      <div className="ava">L</div>
      <div className="who">
        <b>LUE · Atelier da Bia</b>
        <span className="on"><i/>online</span>
      </div>
      <span className="wa-badge">WhatsApp</span>
    </div>
  );
}

function Bubble({ msg }) {
  if (msg.card) {
    return (
      <div className={`bubble ${msg.who} card`}>
        <div className="cardimg">
          <svg width="100%" height="100%" viewBox="0 0 200 140" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0}}>
            <defs>
              <pattern id="p1" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(35)">
                <rect width="20" height="20" fill="transparent"/>
                <circle cx="6" cy="6" r="2" fill="rgba(124,58,237,.35)"/>
                <path d="M0 14 L20 14" stroke="rgba(124,58,237,.18)" strokeWidth="1.5"/>
              </pattern>
            </defs>
            <rect width="200" height="140" fill="url(#p1)"/>
          </svg>
        </div>
        <div className="cardbody">
          <b>{msg.card.title}</b>
          <span>{msg.card.sub}</span>
          <span className="cardprice">{msg.card.price}</span>
          <div className="meta">{msg.t}</div>
        </div>
      </div>
    );
  }
  return (
    <div className={`bubble ${msg.who}`}>
      {msg.text}
      <span className="meta">{msg.t}</span>
    </div>
  );
}

function HeroChatMockup() {
  const [shown, setShown] = useState([]);
  const [typing, setTyping] = useState(false);
  const bodyRef = useRef(null);
  const idxRef = useRef(0);

  useEffect(() => {
    let timer;
    const advance = () => {
      const i = idxRef.current;
      if (i >= HERO_SCRIPT.length) {
        // loop after pause
        timer = setTimeout(() => {
          idxRef.current = 0;
          setShown([]);
          setTyping(false);
          advance();
        }, 4500);
        return;
      }
      const step = HERO_SCRIPT[i];
      idxRef.current = i + 1;
      if (step.typing) {
        setTyping(true);
        timer = setTimeout(() => {
          setTyping(false);
          advance();
        }, step.dur || 900);
      } else {
        setShown(prev => [...prev, step]);
        timer = setTimeout(advance, step.who === 'in' ? 1200 : 1500);
      }
    };
    timer = setTimeout(advance, 600);
    return () => clearTimeout(timer);
  }, []);

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

  return (
    <div className="phone" aria-label="Mockup do chat web: LUE atendendo um cliente">
      <div className="phone-notch"/>
      <div className="phone-screen chatweb wa">
        <ChatHeader/>
        <div className="chat-body" ref={bodyRef}>
          {shown.map((m, i) => <Bubble key={i} msg={m}/>)}
          {typing && (
            <div className="typing"><span/><span/><span/></div>
          )}
        </div>
        <div className="chat-input">
          <div className="pill">Mensagem…</div>
          <div className="sendbtn">{ICN.send}</div>
        </div>
      </div>
    </div>
  );
}

// Static mini chat for inline section use
function MiniChat({ messages }) {
  return (
    <div className="mini-chat">
      {messages.map((m, i) => <Bubble key={i} msg={m}/>)}
    </div>
  );
}

Object.assign(window, { HeroChatMockup, MiniChat, Bubble, ICN });