/* global React */
/* Newsletter-Signup-Streifen. Eigenes Formular im Nexentia-Design,
   Absenden serverseitig ueber /api/newsletter an HubSpot. Kein HubSpot-Script
   im Frontend, dadurch keine Third-Party-Cookies. */
const { useState: useStateNl } = React;

function NxNewsletter({ lang }) {
  const copy = window.NX_COPY[lang] || window.NX_COPY.de;
  const t = copy.newsletter || window.NX_COPY.de.newsletter;

  const [email, setEmail] = useStateNl("");
  const [consent, setConsent] = useStateNl(false);
  const [trap, setTrap] = useStateNl("");
  const [state, setState] = useStateNl("idle"); // idle | loading | ok | error
  const [message, setMessage] = useStateNl("");

  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.trim());
  const canSubmit = emailOk && consent && state !== "loading";

  async function onSubmit(e) {
    e.preventDefault();
    if (!canSubmit) return;
    setState("loading");
    setMessage("");
    try {
      const res = await fetch("/api/newsletter", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email: email.trim(),
          consent: true,
          website: trap,
          pageUri: window.location.href,
          pageName: document.title,
        }),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setState("ok");
        setMessage(t.success);
        setEmail("");
        setConsent(false);
      } else {
        setState("error");
        setMessage(data.message || t.error);
      }
    } catch (err) {
      setState("error");
      setMessage(t.error);
    }
  }

  return (
    <section className="nx-newsletter" id="newsletter">
      <div className="nx-container nx-container--wide">
        <div className="nx-newsletter__inner">
          <div className="nx-newsletter__text">
            <p className="nx-eyebrow nx-newsletter__eyebrow">{t.eyebrow}</p>
            <h2 className="nx-newsletter__h">{t.headline}</h2>
            <p className="nx-newsletter__sub">{t.sub}</p>
          </div>

          {state === "ok" ? (
            <div className="nx-newsletter__done" role="status" aria-live="polite">
              <span className="nx-newsletter__done-mark" aria-hidden>✓</span>
              <span>{message}</span>
            </div>
          ) : (
            <form className="nx-newsletter__form" onSubmit={onSubmit} noValidate>
              <div className="nx-newsletter__row">
                <label className="nx-newsletter__label" htmlFor="nx-nl-email">
                  {t.emailLabel}
                </label>
                <input
                  id="nx-nl-email"
                  className="nx-newsletter__input"
                  type="email"
                  name="email"
                  autoComplete="email"
                  required
                  placeholder={t.emailPlaceholder}
                  value={email}
                  onChange={(ev) => setEmail(ev.target.value)}
                  aria-describedby="nx-nl-consent-text"
                />
                <button
                  className="nx-newsletter__btn"
                  type="submit"
                  disabled={!canSubmit}
                >
                  {state === "loading" ? t.sending : t.cta}
                </button>
              </div>

              {/* Honeypot gegen Bots. Fuer Menschen unsichtbar. */}
              <div className="nx-newsletter__trap" aria-hidden>
                <label htmlFor="nx-nl-website">Website</label>
                <input
                  id="nx-nl-website"
                  name="website"
                  type="text"
                  tabIndex={-1}
                  autoComplete="off"
                  value={trap}
                  onChange={(ev) => setTrap(ev.target.value)}
                />
              </div>

              <label className="nx-newsletter__consent">
                <input
                  type="checkbox"
                  checked={consent}
                  onChange={(ev) => setConsent(ev.target.checked)}
                  required
                />
                <span id="nx-nl-consent-text">
                  {t.consent}{" "}
                  <a href="/privacy" className="nx-newsletter__link">
                    {t.privacyLink}
                  </a>
                </span>
              </label>

              <p className="nx-newsletter__note">{t.note}</p>

              {state === "error" && (
                <p className="nx-newsletter__error" role="alert">
                  {message}
                </p>
              )}
            </form>
          )}
        </div>
      </div>
    </section>
  );
}
window.NxNewsletter = NxNewsletter;