/* FriendlyPhotons — Marketing site UI kit · Get Early Access modal (single-flow signup). */

const WL_CONFIG = {
  // Live backend (Replit, shipped 2026-06-17). CORS allowlisted for friendlyphotons.ai.
  apiUrl: "https://app.friendlyphotons.ai/api/waitlist",
  // Cloudflare Turnstile site key — WIRE-UP: set this (Mitch/Replit). Empty = widget skipped.
  turnstileSiteKey: "0x4AAAAAADNo7TE_fd0LJFDF",
  // Real POST fires only on these hosts; elsewhere (preview) it runs in demo mode.
  liveHosts: ["friendlyphotons.ai", "www.friendlyphotons.ai"]
};

function WaitlistModal({ open, onClose }) {
  const [first, setFirst] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [contributor, setContributor] = React.useState(false);
  const [phone, setPhone] = React.useState("");
  const [sms, setSms] = React.useState(false);
  const [why, setWhy] = React.useState("");
  const [hear, setHear] = React.useState("");
  const [consent, setConsent] = React.useState(false);
  const [hp, setHp] = React.useState("");
  const [done, setDone] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const turnstileRef = React.useRef(null);
  const turnstileIdRef = React.useRef(null);

  // Explicit Turnstile render — conditional-mount modal misses Cloudflare's
  // one-shot auto-scan. Render on open with retry for async-defer script load;
  // cleanup on close. (Pattern from 2026-06-18 waitlist sprint, restored here
  // after CD's v5 bundle regressed the inline implicit version.)
  React.useEffect(() => {
    if (!open || !WL_CONFIG.turnstileSiteKey) return;
    let cancelled = false;
    const tryRender = () => {
      if (cancelled || turnstileIdRef.current) return;
      if (window.turnstile && turnstileRef.current) {
        try {
          turnstileIdRef.current = window.turnstile.render(turnstileRef.current, {
            sitekey: WL_CONFIG.turnstileSiteKey,
          });
        } catch (_) {}
      } else {
        setTimeout(tryRender, 100);
      }
    };
    tryRender();
    return () => {
      cancelled = true;
      if (turnstileIdRef.current && window.turnstile) {
        try { window.turnstile.remove(turnstileIdRef.current); } catch (_) {}
        turnstileIdRef.current = null;
      }
    };
  }, [open]);

  React.useEffect(() => {
    if (open) { setDone(false); setErr(""); setLoading(false); }
  }, [open]);
  if (!open) return null;

  const isLive = WL_CONFIG.liveHosts.indexOf(window.location.hostname) !== -1;
  const phoneOk = (() => { const d = phone.replace(/\D/g, ""); return d.length >= 10 && d.length <= 15; })();
  const valid = first.trim().length > 0 && /.+@.+\..+/.test(email) && consent && (!contributor || (phoneOk && sms));

  const submit = (e) => {
    e.preventDefault();
    if (!valid || loading) return;
    setErr("");
    const payload = { firstName: first.trim(), email: email.trim(), consent: consent, hasMeter: contributor };
    if (contributor) { payload.phone = phone.trim(); payload.smsConsent = sms; }
    if (why.trim()) payload.signupNotes = why.trim();
    if (hear) payload.referralSource = hear;
    if (hp) payload.website = hp; // honeypot — server rejects if filled
    if (window.turnstile && WL_CONFIG.turnstileSiteKey && turnstileIdRef.current) {
      try { const tok = window.turnstile.getResponse(turnstileIdRef.current); if (tok) payload.captchaToken = tok; } catch (_) {}
    }
    // Demo mode (off the live domain): show the flow without a real POST.
    if (!isLive || !WL_CONFIG.apiUrl) { setDone(true); return; }
    setLoading(true);
    fetch(WL_CONFIG.apiUrl, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) })
      .then((res) => res.json().catch(() => ({})).then((body) => ({ status: res.status, ok: res.ok, body })))
      .then((r) => {
        if (r.ok) { setDone(true); return; } // any 2xx (incl. duplicate) -> same success
        setLoading(false);
        if (r.status === 429) setErr("Too many attempts — please try again in a moment.");
        else setErr((r.body && r.body.error) || "Something went wrong. Please try again.");
        if (window.turnstile && WL_CONFIG.turnstileSiteKey && turnstileIdRef.current) { try { window.turnstile.reset(turnstileIdRef.current); } catch (_) {} }
      })
      .catch(() => { setLoading(false); setErr("Network error — please check your connection and try again."); });
  };

  const Check = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
  );

  return (
    <div className="wl-backdrop open" onClick={(e) => { if (e.target.classList.contains("wl-backdrop")) onClose(); }}>
      <div className="wl-modal">
        <button className="wl-close" onClick={onClose} aria-label="Close">✕</button>
        {!done ? (
          <form className="wl-wrap" onSubmit={submit}>
            <h2>Get early access.</h2>
            <p className="wl-intro">Map the invisible. Browse the dataset, contribute readings, or both — no meter required.</p>

            <div className="wl-field">
              <label htmlFor="wl-first">First name</label>
              <input id="wl-first" type="text" value={first} onChange={e => setFirst(e.target.value)} placeholder="Your first name" autoComplete="given-name" />
            </div>
            <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true" value={hp} onChange={e => setHp(e.target.value)} style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", opacity: 0 }} />
            <div className="wl-field">
              <label htmlFor="wl-email">Email</label>
              <input id="wl-email" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com" autoComplete="email" />
            </div>

            <div className={"wl-contrib" + (contributor ? " on" : "")} role="checkbox" aria-checked={contributor} tabIndex={0}
              onClick={() => setContributor(v => !v)}
              onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); setContributor(v => !v); } }}>
              <span className="wl-cbox"><Check /></span>
              <span className="wl-contrib-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#a67318" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg></span>
              <span className="wl-contrib-txt">I own an EMF meter and want to contribute</span>
            </div>
            <p className="wl-proof">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" /></svg>
              <span>Most users explore without a meter — contributing is optional.</span>
            </p>

            {contributor && (
              <div className="wl-reveal">
                <div className="wl-field" style={{ marginBottom: 0 }}>
                  <label htmlFor="wl-phone">Mobile number <span className="wl-opt">— for reading verification</span></label>
                  <input id="wl-phone" type="tel" value={phone} onChange={e => setPhone(e.target.value)} placeholder="(555) 123-4567" autoComplete="tel" />
                </div>
                <div className={"wl-sms" + (sms ? " on" : "")} role="checkbox" aria-checked={sms} tabIndex={0}
                  onClick={() => setSms(v => !v)}
                  onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); setSms(v => !v); } }}>
                  <span className="wl-cbox"><Check /></span>
                  <span className="wl-sms-txt">Text me about contributing. Message &amp; data rates may apply; reply STOP to opt out.</span>
                </div>
              </div>
            )}

            <div className="wl-field">
              <label htmlFor="wl-why">What brought you here? <span className="wl-opt">(optional)</span></label>
              <textarea id="wl-why" className="wl-textarea" maxLength={500} value={why} onChange={e => setWhy(e.target.value)} placeholder="A place you're curious about, a concern, a project…"></textarea>
              <div className="wl-counter">{why.length} / 500</div>
            </div>
            <div className="wl-field">
              <label htmlFor="wl-hear">How did you hear about us? <span className="wl-opt">(optional)</span></label>
              <select id="wl-hear" className="wl-select" value={hear} onChange={e => setHear(e.target.value)}>
                <option value="">Select one…</option>
                <option value="search">Search engine</option>
                <option value="social">Social media</option>
                <option value="friend">Friend or family</option>
                <option value="article">News or article</option>
                <option value="podcast">Podcast</option>
                <option value="other">Other</option>
              </select>
            </div>

            <div className={"wl-consent" + (consent ? " on" : "")} role="checkbox" aria-checked={consent} tabIndex={0}
              onClick={(e) => { if (e.target.tagName === "A") return; setConsent(v => !v); }}
              onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); setConsent(v => !v); } }}>
              <span className="wl-cbox"><Check /></span>
              <span className="wl-consent-txt">I agree to the <a href="#">End User License Agreement</a> and <a href="/privacy.html" target="_blank" rel="noopener noreferrer">Privacy Policy</a>, and that FriendlyPhotons can email me about early access.</span>
            </div>

            <div ref={turnstileRef} style={{ margin: "16px 0", display: "flex", justifyContent: "center", minHeight: "65px" }}></div>

            {err && <p className="wl-error show">{err}</p>}
            <button type="submit" className="wl-submit" disabled={!valid || loading}>{loading ? "Sending…" : "Get early access"}</button>
            <p className="wl-fineprint">No spam. We email you once, when it's your turn.</p>
          </form>
        ) : (
          <div className="wl-success active">
            <img className="wl-success-photy" src="assets/photy.png" alt="Photy" />
            <h2>You're on the list.</h2>
            <p>We'll email you the moment your early access is ready. Until then — the invisible world is waiting to be seen.</p>
            <button className="wl-close-btn" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.WaitlistModal = WaitlistModal;