// Unsubscribe.jsx — self-serve opt-out. POSTs to the Aineko dashboard
// unsubscribe endpoint, which writes suppression_list (honored by every
// sender). Makes the consent statement's "unsubscribe at any time" real.
const UNSUB_ENDPOINT = "https://aineko-dashboard.vercel.app/api/unsubscribe";

const ufield = {
  width: "100%",
  fontFamily: "var(--font-sans)",
  fontSize: 15,
  color: "var(--ink)",
  background: "var(--paper-white)",
  border: "1px solid var(--rule-2, #d2d8e4)",
  borderRadius: 2,
  padding: "11px 13px",
  marginTop: 6,
  boxSizing: "border-box",
};

function UnsubscribePage() {
  const [email, setEmail] = React.useState("");
  const [status, setStatus] = React.useState("idle"); // idle | sending | done | error

  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());

  async function onSubmit(e) {
    e.preventDefault();
    if (!emailOk || status === "sending") return;
    setStatus("sending");
    try {
      const res = await fetch(UNSUB_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim(), brand: "oipc" }),
      });
      setStatus(res.ok ? "done" : "error");
    } catch (err) {
      setStatus("error");
    }
  }

  return (
    <div>
      <SectionOpener
        section="Resource · Unsubscribe"
        version="v0.1"
        date="2026-06-25"
        title="Unsubscribe."
        standfirst="Enter your email to stop receiving Open IP Council updates. This takes effect immediately."
      />
      <div className="container section doc-narrow">
        {status === "done" ? (
          <div className="doc-callout">
            <div className="doc-callout-eyebrow">Done</div>
            <div className="doc-callout-body">
              {email} has been removed from the Open IP Council list. You will receive no further
              emails. If you change your mind, you can opt in again from any council page.
            </div>
          </div>
        ) : (
          <form onSubmit={onSubmit} style={{ maxWidth: 480 }}>
            <label style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--ink-2)" }} htmlFor="unsub-email">
              Email
            </label>
            <input id="unsub-email" style={ufield} type="email" required value={email}
                   onChange={(e) => setEmail(e.target.value)} placeholder="you@firm.com" />
            {status === "error" && (
              <p style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 10 }}>
                Something went wrong. Please email contact@openipcouncil.org and we will remove you.
              </p>
            )}
            <button className="btn btn-primary" type="submit" disabled={!emailOk || status === "sending"}
                    style={{ marginTop: 16, opacity: emailOk ? 1 : 0.5 }}>
              {status === "sending" ? "Removing…" : "Unsubscribe"}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}
window.UnsubscribePage = UnsubscribePage;