/* FriendlyPhotons — Marketing site UI kit · Contact Us modal.
   Reuses the .wl-* modal styles (backdrop, fields, submit, success) for visual
   consistency with the Get Early Access modal. */

const CONTACT_CONFIG = {
  // Parallel to /api/waitlist. ⚠ WIRE-UP: confirm this endpoint + payload with Replit
  // (the waitlist endpoint is authoritative; this one is assumed by convention).
  apiUrl: "https://app.friendlyphotons.ai/api/contact",
  turnstileSiteKey: "0x4AAAAAADNo7TE_fd0LJFDF",
  liveHosts: ["friendlyphotons.ai", "www.friendlyphotons.ai"]
};

function ContactModal({ open, onClose }) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [subject, setSubject] = React.useState("");
  const [message, setMessage] = React.useState("");
  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. Pattern shared with waitlist-modal.jsx.txt.
  React.useEffect(() => {
    if (!open || !CONTACT_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: CONTACT_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 = CONTACT_CONFIG.liveHosts.indexOf(window.location.hostname) !== -1;
  const valid = name.trim().length > 0 && /.+@.+\..+/.test(email) && message.trim().length >= 10;

  const submit = (e) => {
    e.preventDefault();
    if (!valid || loading) return;
    setErr("");
    const payload = { name: name.trim(), email: email.trim(), message: message.trim() };
    if (subject) payload.subject = subject;
    if (hp) payload.website = hp; // honeypot — server rejects if filled
    if (window.turnstile && CONTACT_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 || !CONTACT_CONFIG.apiUrl) { setDone(true); return; }
    setLoading(true);
    fetch(CONTACT_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; }
        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 && CONTACT_CONFIG.turnstileSiteKey && turnstileIdRef.current) { try { window.turnstile.reset(turnstileIdRef.current); } catch (_) {} }
      })
      .catch(() => { setLoading(false); setErr("Network error — please check your connection and try again."); });
  };

  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 in touch.</h2>
            <p className="wl-intro">Questions, partnerships, press, or feedback on the data — we read every message.</p>

            <div className="wl-field">
              <label htmlFor="ct-name">Name</label>
              <input id="ct-name" type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Your name" autoComplete="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="ct-email">Email</label>
              <input id="ct-email" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com" autoComplete="email" />
            </div>
            <div className="wl-field">
              <label htmlFor="ct-subject">Topic <span className="wl-opt">(optional)</span></label>
              <select id="ct-subject" className="wl-select" value={subject} onChange={e => setSubject(e.target.value)}>
                <option value="">Select one…</option>
                <option value="general">General question</option>
                <option value="contributing">Contributing &amp; meters</option>
                <option value="data">Data &amp; methodology</option>
                <option value="partnership">Partnership</option>
                <option value="press">Press &amp; media</option>
                <option value="bug">Report a problem</option>
                <option value="other">Other</option>
              </select>
            </div>
            <div className="wl-field">
              <label htmlFor="ct-message">Message</label>
              <textarea id="ct-message" className="wl-textarea" maxLength={1000} value={message} onChange={e => setMessage(e.target.value)} placeholder="How can we help?"></textarea>
              <div className="wl-counter">{message.length} / 1000</div>
            </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…" : "Send message"}</button>
            <p className="wl-fineprint">We'll reply to the email you provide. We won't add you to any list.</p>
          </form>
        ) : (
          <div className="wl-success active">
            <img className="wl-success-photy" src="assets/photy.png" alt="Photy" />
            <h2>Message sent.</h2>
            <p>Thanks for reaching out — we'll get back to you at the email you provided. Talk soon.</p>
            <button className="wl-close-btn" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.ContactModal = ContactModal;