/* global React */
const { useState: useStateExit, useEffect: useEffectExit } = React;

function ExitIntentModal({ wa }) {
  const [open, setOpen] = useStateExit(false);
  const [sent, setSent] = useStateExit(false);
  const [form, setForm] = useStateExit({ name: "", phone: "" });
  const fired = React.useRef(false);

  useEffectExit(() => {
    // Don't re-show within 24h after dismiss
    const dismissed = localStorage.getItem("ath_exit_dismissed");
    if (dismissed && Date.now() - parseInt(dismissed, 10) < 24 * 60 * 60 * 1000) {
      fired.current = true;
    }
  }, []);

  useEffectExit(() => {
    const trigger = () => {
      if (fired.current) return;
      fired.current = true;
      setOpen(true);
      window.__pixel?.("ViewContent", { content_name: "ExitIntentPopup" });
    };

    // Desktop: mouseleave from top of viewport
    const onMouseLeave = (e) => {
      if (e.clientY <= 0 && !fired.current) trigger();
    };

    // Mobile: scroll-up intent after >30s on page, or 50% scroll
    let scrolledHalf = false;
    let timer = setTimeout(() => {
      // After 35s on the page, if user is past mid-page, trigger
      const scrollPct = (window.scrollY + window.innerHeight) / document.documentElement.scrollHeight;
      if (scrollPct > 0.4 && !fired.current) trigger();
    }, 35000);

    let lastY = window.scrollY;
    const onScroll = () => {
      const y = window.scrollY;
      const pct = (y + window.innerHeight) / document.documentElement.scrollHeight;
      if (pct > 0.55) scrolledHalf = true;
      // rapid scroll up on mobile near top = exit intent
      if (scrolledHalf && y < 200 && lastY - y > 60 && window.innerWidth < 760 && !fired.current) {
        trigger();
      }
      lastY = y;
    };

    document.addEventListener("mouseleave", onMouseLeave);
    window.addEventListener("scroll", onScroll, { passive: true });

    return () => {
      document.removeEventListener("mouseleave", onMouseLeave);
      window.removeEventListener("scroll", onScroll);
      clearTimeout(timer);
    };
  }, []);

  // Lock body scroll when modal open
  useEffectExit(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  // Escape to close
  useEffectExit(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") close(); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  const close = () => {
    setOpen(false);
    localStorage.setItem("ath_exit_dismissed", String(Date.now()));
  };

  const submit = (e) => {
    e.preventDefault();
    if (!form.name.trim() || !form.phone.trim()) return;

    // Track lead
    window.__pixel?.("Lead", {
      content_name: "ExitIntentPopup",
      source: "popup",
      value: 197,
      currency: "BRL",
    });

    // Send to Google Sheets (via Apps Script Web App).
    // Replace SHEETS_WEBAPP_URL in app.jsx with your deployed URL.
    if (typeof window.__sendToSheet === "function") {
      window.__sendToSheet({
        nome: form.name,
        whatsapp: form.phone,
        origem: "exit-intent-popup",
        page: window.location.href,
      });
    }

    setSent(true);

    // Build pre-filled WhatsApp message with their info
    const msg = encodeURIComponent(
      `Oi! Sou ${form.name}. Vim pela landing page e quero minha prévia. Meu WhatsApp para contato: ${form.phone}`
    );
    const wa_url = `https://api.whatsapp.com/send?phone=5547933838849&text=${msg}`;

    // After 1.2s, open WhatsApp in new tab
    setTimeout(() => {
      window.open(wa_url, "_blank");
    }, 1200);

    localStorage.setItem("ath_exit_dismissed", String(Date.now()));
  };

  return (
    <>
      <div className={`modal-backdrop ${open ? "open" : ""}`} onClick={close} />
      <div className={`modal ${open ? "open" : ""}`} role="dialog" aria-modal="true" aria-hidden={!open}>
        {!sent ? (
          <>
            <div className="modal-head">
              <button className="modal-close" onClick={close} aria-label="Fechar">×</button>
              <span className="badge">
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
                Antes de sair
              </span>
              <h3>
                Espera. Antes de fechar, <em>recebe um exemplo real.</em>
              </h3>
              <p>
                Deixa seu nome e WhatsApp. A gente envia <b style={{ color: "var(--ink)" }}>3 exemplos de landing pages</b> entregues do seu segmento — sem compromisso, sem script de vendedor.
              </p>
            </div>
            <div className="modal-body">
              <form onSubmit={submit} className="field-group">
                <div className="field-input">
                  <label htmlFor="exit-name">Seu nome</label>
                  <input
                    id="exit-name"
                    type="text"
                    autoComplete="name"
                    placeholder="Como te chamamos?"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    required
                  />
                </div>
                <div className="field-input">
                  <label htmlFor="exit-phone">WhatsApp</label>
                  <input
                    id="exit-phone"
                    type="tel"
                    autoComplete="tel"
                    placeholder="(47) 9 9999-9999"
                    value={form.phone}
                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
                    required
                  />
                </div>
                <button type="submit" className="cta">
                  <span>Quero receber os exemplos</span>
                  <span className="arrow" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <line x1="5" y1="12" x2="19" y2="12" />
                      <polyline points="12 5 19 12 12 19" />
                    </svg>
                  </span>
                </button>
                <div className="modal-foot">
                  <span className="dot" />
                  <span>100% seguro. Não enviamos spam. Respondemos em até 1h.</span>
                </div>
              </form>
            </div>
          </>
        ) : (
          <div className="modal-body modal-success">
            <button className="modal-close" onClick={close} aria-label="Fechar">×</button>
            <span className="check">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12" />
              </svg>
            </span>
            <h4>Pronto, {form.name.split(" ")[0]}!</h4>
            <p>Abrindo o WhatsApp pra você agora. Já tem nosso contato salvo aí.</p>
          </div>
        )}
      </div>
    </>
  );
}

Object.assign(window, { ExitIntentModal });