/* ChatBubble - WhatsApp FAB + 4-second auto-teaser.
   Replace WA_NUMBER with the real number (digits only, include country code). */

function ChatBubble({ open, setOpen }) {
  const WA_NUMBER = "971541771709"; // +971 54 177 1709
  const WA_MSG    = "Hi, I need help choosing a REPs UAE course";
  const WA_URL    = `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(WA_MSG)}`;

  /* teaser visibility - auto-pops after 4s, dismissed state persists per session */
  const [showTeaser, setShowTeaser] = React.useState(false);
  const wasDismissed = React.useRef(false);

  React.useEffect(() => {
    try { wasDismissed.current = sessionStorage.getItem("wa-teaser") === "off"; } catch(_) {}
    if (wasDismissed.current) return;
    const t = setTimeout(() => setShowTeaser(true), 4000);
    return () => clearTimeout(t);
  }, []);

  /* any existing "Ask the guide" / onOpenChat call now routes to WhatsApp */
  const prevOpen = React.useRef(false);
  React.useEffect(() => {
    if (open && !prevOpen.current) {
      window.open(WA_URL, "_blank", "noopener");
      setOpen(false);
    }
    prevOpen.current = open;
  }, [open]);

  const openWA = () => window.open(WA_URL, "_blank", "noopener");

  const dismiss = (e) => {
    e && e.stopPropagation();
    setShowTeaser(false);
    wasDismissed.current = true;
    try { sessionStorage.setItem("wa-teaser", "off"); } catch(_) {}
  };

  return (
    <div style={{ position:"fixed", right:24, bottom:24, zIndex:50, display:"flex", flexDirection:"column", alignItems:"flex-end", gap:10 }}>

      {/* ── Teaser bubble ── */}
      {showTeaser && (
        <div
          onClick={openWA}
          role="button"
          style={{ background:"#fff", border:"1.5px solid var(--tr-line)", borderRadius:14, padding:"13px 16px 12px", boxShadow:"var(--tr-shadow-lg)", maxWidth:220, cursor:"pointer", position:"relative", animation:"waBubble 0.44s cubic-bezier(0.34,1.56,0.64,1) both" }}
        >
          {/* dismiss X */}
          <button
            onClick={dismiss}
            aria-label="Dismiss"
            style={{ position:"absolute", top:7, right:7, background:"none", border:"none", color:"var(--tr-fg-faint)", cursor:"pointer", lineHeight:0, padding:4, borderRadius:4 }}
          >
            <Icon name="x" size={14}/>
          </button>

          {/* avatar + message */}
          <div style={{ display:"flex", gap:9, alignItems:"flex-start", marginBottom:8 }}>
            <div style={{ width:34, height:34, borderRadius:9, background:"#25D366", display:"flex", alignItems:"center", justifyContent:"center", flexShrink:0 }}>
              <Icon name="whatsapp" size={19} style={{ color:"#fff" }}/>
            </div>
            <div>
              <div style={{ fontSize:13, fontWeight:700, color:"var(--tr-ink)", lineHeight:1.3, paddingRight:14 }}>Not sure which course?</div>
              <div style={{ fontSize:12.5, color:"var(--tr-fg-2)", marginTop:2, lineHeight:1.4 }}>Chat with us on WhatsApp</div>
            </div>
          </div>

          {/* reply time */}
          <div style={{ fontSize:11.5, color:"var(--tr-fg-muted)", display:"flex", alignItems:"center", gap:5 }}>
            <span style={{ width:7, height:7, borderRadius:"50%", background:"#25D366", display:"inline-block" }}></span>
            Usually replies in ~5 min
          </div>
        </div>
      )}

      {/* ── WhatsApp FAB ── */}
      <button
        onClick={openWA}
        aria-label="Chat on WhatsApp"
        style={{ width:60, height:60, borderRadius:"50%", background:"#25D366", border:"none", boxShadow:"0 4px 20px rgba(37,211,102,0.45), var(--tr-shadow-md)", display:"flex", alignItems:"center", justifyContent:"center", color:"#fff", cursor:"pointer", transition:"transform 220ms var(--tr-ease-spring)" }}
        onMouseEnter={e => e.currentTarget.style.transform="scale(1.08)"}
        onMouseLeave={e => e.currentTarget.style.transform="scale(1)"}
        onMouseDown={e  => e.currentTarget.style.transform="scale(0.92)"}
        onMouseUp={e    => e.currentTarget.style.transform="scale(1.08)"}
      >
        <Icon name="whatsapp" size={28}/>
      </button>

      {/* keyframe - scoped inside component */}
      <style>{`
        @keyframes waBubble {
          from { opacity:0; transform:translateY(10px) scale(0.94); transform-origin:bottom right; }
          to   { opacity:1; transform:none; }
        }
        @media (prefers-reduced-motion: reduce) {
          @keyframes waBubble { from { opacity:0; } to { opacity:1; } }
        }
      `}</style>
    </div>
  );
}

window.ChatBubble = ChatBubble;