Magent/frontend/app/newsletter-subscription/page.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { getApiBase } from "../lib/auth";
import BrandingLogo from "../ui/BrandingLogo";
import "../email-recaps/recaps.css";

type LinkAction = { action: "confirm" | "unsubscribe"; token: string };

export default function NewsletterLinkPage() {
  const [link, setLink] = useState<LinkAction | null>(null);
  const [state, setState] = useState("loading");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const currentLink = useRef<LinkAction | null>(null);

  useEffect(() => {
    let controller: AbortController | null = null;
    const checkLink = () => {
      controller?.abort();
      const abort = new AbortController();
      controller = abort;
      setError("");
      setState("loading");
      setLink(null);
      setBusy(false);
      currentLink.current = null;
      // Fragments stay out of web-server access logs and referrers. Opening the link only checks it.
      const params = new URLSearchParams(window.location.hash.slice(1));
      const action = params.get("action");
      const token = params.get("token") || "";
      if ((action !== "confirm" && action !== "unsubscribe") || !/^[A-Za-z0-9_-]{40,100}$/.test(token)) {
        setError("This email link is incomplete. Open Profile to manage your newsletters.");
        setState("error");
        return;
      }
      const payload = { action, token } as LinkAction;
      currentLink.current = payload;
      setLink(payload);
      void fetch(`${getApiBase()}/newsletter-subscription/check`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
        signal: abort.signal,
        credentials: "omit",
      })
        .then(async (response) => {
          const result = await response.json().catch(() => ({}));
          if (!response.ok)
            throw new Error(
              typeof result.detail === "string"
                ? result.detail
                : "Could not check this email link. Please open it again.",
            );
          if (!abort.signal.aborted) setState(result.state);
        })
        .catch((err: Error) => {
          if (!abort.signal.aborted) {
            setError(err.message);
            setState("error");
          }
        });
    };
    checkLink();
    window.addEventListener("hashchange", checkLink);
    return () => {
      currentLink.current = null;
      controller?.abort();
      window.removeEventListener("hashchange", checkLink);
    };
  }, []);

  const apply = async () => {
    if (!link || busy) return;
    const payload = link;
    setBusy(true);
    setError("");
    try {
      const response = await fetch(`${getApiBase()}/newsletter-subscription/confirm`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
        credentials: "omit",
      });
      const result = await response.json().catch(() => ({}));
      if (currentLink.current !== payload) return;
      if (!response.ok)
        throw new Error(
          typeof result.detail === "string" ? result.detail : "Could not update your preference. Please try again.",
        );
      setState(result.state);
      window.history.replaceState(null, "", "/newsletter-subscription");
    } catch (err) {
      if (currentLink.current === payload)
        setError(err instanceof Error ? err.message : "Could not update your preference.");
    } finally {
      if (currentLink.current === payload) setBusy(false);
    }
  };

  const done = state === "enabled" || state === "off";
  return (
    <main className="recap-link-page">
      <a className="recap-brand" href="/login">
        <BrandingLogo className="brand-logo" />
        <span>Magent</span>
      </a>
      <section className="account-panel">
        <span className="recap-eyebrow">Grizzlyflix newsletters</span>
        <h1>
          {state === "enabled"
            ? "You’re on the list."
            : state === "off"
              ? "Newsletters are turned off."
              : state === "loading"
                ? "Checking your email link"
                : state === "error"
                  ? "This link needs another look"
                  : link?.action === "unsubscribe"
                    ? "Unsubscribe from newsletters?"
                    : "Your next watch starts here."}
        </h1>
        <p>
          {state === "enabled"
            ? "Your email is confirmed. You’ll receive your personal viewing recap when the monthly schedule runs."
            : state === "off"
              ? "You won’t receive further monthly recaps. You can turn them back on in Profile."
              : state === "ready" && link?.action === "unsubscribe"
                ? "This turns off new-arrival newsletters. Your personal monthly recaps are managed separately."
                : state === "ready"
                  ? "Confirm to receive new movies, TV updates and featured picks, with posters and links to watch."
                  : ""}
        </p>
        {error && (
          <p className="account-notice is-error" role="alert">
            {error}
          </p>
        )}
        {state === "ready" && (
          <button type="button" className="account-primary" disabled={busy} onClick={() => void apply()}>
            {busy
              ? "Updating…"
              : link?.action === "unsubscribe"
                ? "Unsubscribe from newsletters"
                : "Confirm newsletter subscription"}
          </button>
        )}
        {(done || state === "error") && (
          <a className="recap-text-link" href="/profile#newsletters">
            Manage email preferences ↗
          </a>
        )}
        {state === "loading" && <p role="status">One moment…</p>}
      </section>
    </main>
  );
}