// ui_kits/website/Newsletter.jsx

const newsStyles = {
  section: {
    background: 'var(--brand-cream)',
    padding: '80px 0',
  },
  inner: {
    maxWidth: 900, margin: '0 auto', padding: '0 32px',
    textAlign: 'center',
  },
  panel: {
    background: '#fff',
    border: '1px solid var(--color-divider)',
    borderRadius: 20,
    padding: '56px 48px',
    boxShadow: '0 6px 18px rgba(31,79,64,0.06)',
    position: 'relative', overflow: 'hidden',
  },
  leaf: {
    position: 'absolute', right: -20, top: -20, fontSize: 200,
    opacity: 0.05, color: 'var(--brand-leaf)', pointerEvents: 'none',
  },
  form: {
    display: 'flex', gap: 8, maxWidth: 480, margin: '28px auto 0',
  },
  input: {
    flex: 1, padding: '14px 16px',
    fontFamily: 'var(--font-sans)', fontSize: 15,
    border: '1px solid var(--color-divider)', borderRadius: 10,
    outline: 'none',
  },
};

// Render an i18n string that contains a single <a>...</a> token by splitting
// on the tag and inserting a real React anchor. Keeps translators able to
// move the link's position within the sentence without escaping HTML.
function withLink(template, hrefProps = {}) {
  const m = template.match(/^(.*?)<a>(.*?)<\/a>(.*)$/);
  if (!m) return template;
  const [, before, linkText, after] = m;
  return (
    <React.Fragment>
      {before}<a style={{ color: 'inherit' }} {...hrefProps}>{linkText}</a>{after}
    </React.Fragment>
  );
}

function Newsletter() {
  const tr = useT();
  const lang = React.useContext(LangContext);
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    if (submitting) return;
    setErrorMsg('');
    setSubmitting(true);

    const endpoint = window.NEWSLETTER_ENDPOINT;

    // If no endpoint configured (dev / preview), just show the success state
    if (!endpoint) {
      console.info('[newsletter] No NEWSLETTER_ENDPOINT set — skipping POST. See backend/newsletter.gs for setup.');
      setSent(true);
      setSubmitting(false);
      return;
    }

    try {
      // Use FormData so the request is a "simple" CORS request — no
      // preflight needed, which is what Google Apps Script web apps want.
      const formData = new FormData();
      formData.append('email', email);
      formData.append('language', lang || 'es');
      formData.append('source', 'website-newsletter');
      formData.append('userAgent', navigator.userAgent || '');

      const res = await fetch(endpoint, { method: 'POST', body: formData });
      const data = await res.json().catch(() => ({ ok: res.ok }));

      if (data.ok) {
        setSent(true);
      } else {
        setErrorMsg(
          data.error === 'invalid_email'
            ? (lang === 'en' ? 'Please enter a valid email address.' : 'Por favor introduce un correo válido.')
            : (lang === 'en' ? 'Something went wrong. Please try again.' : 'Algo salió mal. Inténtalo de nuevo.')
        );
      }
    } catch (err) {
      console.warn('[newsletter] submit failed:', err);
      setErrorMsg(lang === 'en'
        ? 'Network error. Please try again.'
        : 'Error de conexión. Inténtalo de nuevo.');
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <section style={newsStyles.section}>
      <div style={newsStyles.inner}>
        <div style={newsStyles.panel}>
          <div className="eyebrow">{tr('news.eyebrow')}</div>
          <h2 className="section-title" style={{ marginTop: 8 }}>
            {tr('news.title.a')} <em style={{ fontFamily: 'var(--font-serif)' }}>{tr('news.title.b')}</em>
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 16, color: 'var(--color-fg-muted)', maxWidth: '52ch', margin: '14px auto 0' }}>
            {tr('news.body')}
          </p>
          {sent ? (
            <div style={{ marginTop: 28, padding: 14, background: 'var(--wbu-color-green-500)', color: 'var(--wbu-color-green-0)', borderRadius: 10, fontFamily: 'var(--font-sans)' }}>
              {tr('news.success')}
            </div>
          ) : (
            <React.Fragment>
              <form style={newsStyles.form} onSubmit={handleSubmit}>
                <input
                  type="email" placeholder={tr('news.placeholder')}
                  value={email} onChange={(e) => setEmail(e.target.value)}
                  style={newsStyles.input} required
                  disabled={submitting}
                />
                <button className="btn btn--primary" type="submit" disabled={submitting}>
                  {submitting ? (lang === 'en' ? 'Sending…' : 'Enviando…') : tr('news.submit')}
                </button>
              </form>
              {errorMsg && (
                <div style={{ marginTop: 12, fontFamily: 'var(--font-sans)', fontSize: 13, color: '#B33A3A' }}>
                  {errorMsg}
                </div>
              )}
            </React.Fragment>
          )}
          <div style={{ marginTop: 14, fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--color-fg-subtle)' }}>
            {withLink(tr('news.privacy'))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Newsletter = Newsletter;