/* Wand Presents VIP newsletter — shared form, full page, and entry popup. */
const { useState: useStateNL, useEffect: useEffectNL } = React;
const { WandLogo: WandLogoNL } = window;

function NewsletterForm({ onSuccess }) {
  const [f, setF] = useStateNL({ firstName: '', lastName: '', email: '', consent: false });
  const [status, setStatus] = useStateNL('idle'); // idle | sending | ok
  const [err, setErr] = useStateNL('');
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    if (!f.firstName.trim()) { setErr('Please enter your first name.'); return; }
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) { setErr('Please enter a valid email address.'); return; }
    if (!f.consent) { setErr('Please check the box to agree.'); return; }
    setStatus('sending');
    try {
      const r = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(f),
      });
      const d = await r.json().catch(() => ({}));
      if (r.ok && d.ok) { setStatus('ok'); onSuccess && onSuccess(); }
      else { setStatus('idle'); setErr(d.error || 'Something went wrong — please try again.'); }
    } catch (e2) { setStatus('idle'); setErr('Network error — please try again.'); }
  };

  if (status === 'ok') {
    return (
      <div className="nl-success">
        <div className="nl-success-check">&#10003;</div>
        <div className="nl-success-title">You're on the list!</div>
        <div className="nl-success-sub">Watch your inbox for upcoming shows, ticket releases and special offers.</div>
      </div>
    );
  }

  return (
    <form className="nl-form" onSubmit={submit} noValidate>
      <label className="nl-label" htmlFor="nl-fn">First Name <span className="nl-req">*</span></label>
      <input id="nl-fn" className="nl-input" value={f.firstName} onChange={(e) => set('firstName', e.target.value)} placeholder="First Name" autoComplete="given-name" />
      <label className="nl-label" htmlFor="nl-ln">Last Name</label>
      <input id="nl-ln" className="nl-input" value={f.lastName} onChange={(e) => set('lastName', e.target.value)} placeholder="Last Name" autoComplete="family-name" />
      <label className="nl-label" htmlFor="nl-em">Email <span className="nl-req">*</span></label>
      <input id="nl-em" className="nl-input" type="email" inputMode="email" value={f.email} onChange={(e) => set('email', e.target.value)} placeholder="you@example.com" autoComplete="email" />
      <label className="nl-consent">
        <input type="checkbox" checked={f.consent} onChange={(e) => set('consent', e.target.checked)} />
        <span>By signing up, you agree to receive emails from Wand Presents about upcoming shows, ticket releases and special offers. You may unsubscribe at any time. <a href="#/privacy">Privacy Policy</a> <span className="nl-req">*</span></span>
      </label>
      {err ? <div className="nl-err">{err}</div> : null}
      <button type="submit" className="btn btn-primary nl-submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Submitting…' : 'Submit'}
      </button>
    </form>
  );
}

function NewsletterPage() {
  return (
    <section className="nl-page">
      <div className="nl-page-inner">
        <div className="nl-page-logo"><WandLogoNL height={68} /></div>
        <div className="nl-eyebrow">VIP Newsletter</div>
        <h1 className="nl-h1">Be the First to Know</h1>
        <p className="nl-lead">Join the Wand Presents VIP list for early access to new shows, ticket releases, and special offers in The Villages.</p>
        <div className="nl-card"><NewsletterForm /></div>
      </div>
    </section>
  );
}

function NewsletterPopup() {
  const [open, setOpen] = useStateNL(false);
  useEffectNL(() => {
    let seen = false;
    try { seen = localStorage.getItem('wp_nl_seen') === '1'; } catch (e) {}
    const onNl = () => (window.location.hash || '').toLowerCase().indexOf('newsletter') >= 0;
    if (seen || onNl()) return;
    const t = setTimeout(() => { if (!onNl()) setOpen(true); }, 1600);
    return () => clearTimeout(t);
  }, []);
  const dismiss = () => {
    setOpen(false);
    try { localStorage.setItem('wp_nl_seen', '1'); } catch (e) {}
  };
  useEffectNL(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') dismiss(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);
  if (!open) return null;
  return (
    <div className="nl-overlay" role="dialog" aria-modal="true" aria-label="Join the Wand Presents newsletter" onClick={dismiss}>
      <div className="nl-modal" onClick={(e) => e.stopPropagation()}>
        <button className="nl-close" onClick={dismiss} aria-label="Close">&times;</button>
        <div className="nl-modal-logo"><WandLogoNL height={48} /></div>
        <h2 className="nl-modal-title">Be the First to Know</h2>
        <p className="nl-modal-sub">Join the Wand Presents VIP Newsletter for early access to new shows, tickets and special offers.</p>
        <NewsletterForm onSuccess={() => { try { localStorage.setItem('wp_nl_seen', '1'); } catch (e) {} }} />
      </div>
    </div>
  );
}

Object.assign(window, { NewsletterForm, NewsletterPage, NewsletterPopup });