Kuma/src/modules/marketing/ui/views/unsubscribe-view.tsx

"use client";

import { useState, useTransition } from "react";
import Link from "next/link";
import { MailX, CheckCircle2 } from "lucide-react";
import { Button } from "@/src/components/ui/button";
import { unsubscribeWithToken } from "../../actions/consent-actions";

interface UnsubscribeViewProps {
  /** null = Link ungültig oder Studio gelöscht */
  token: string | null;
  studioName: string | null;
}

const UnsubscribeView = ({ token, studioName }: UnsubscribeViewProps) => {
  const [done, setDone] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();

  const unsubscribe = () => {
    if (!token) return;
    setError(null);
    startTransition(async () => {
      const result = await unsubscribeWithToken(token);
      if (result.success) setDone(true);
      else setError(result.error);
    });
  };

  return (
    <main className="flex min-h-dvh items-center justify-center px-4 py-10">
      <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 sm:p-8">
        {!token ? (
          <>
            <MailX className="size-8 text-gray-400" />
            <h1 className="mt-4 text-xl font-semibold text-gray-900">Link ungültig</h1>
            <p className="mt-2 text-sm text-gray-600">
              Dieser Abmeldelink ist ungültig oder abgelaufen. Wenn Sie ein Kundenkonto haben,
              können Sie E-Mails von Studios auch in Ihren{" "}
              <Link href="/settings/marketing" className="underline">
                Einstellungen
              </Link>{" "}
              abbestellen.
            </p>
          </>
        ) : done ? (
          <>
            <CheckCircle2 className="size-8 text-green-600" />
            <h1 className="mt-4 text-xl font-semibold text-gray-900">Sie sind abgemeldet</h1>
            <p className="mt-2 text-sm text-gray-600">
              Sie erhalten keine Angebote und Glückwünsche mehr von {studioName}. Buchungs- und
              Zahlungsbestätigungen bekommen Sie weiterhin.
            </p>
          </>
        ) : (
          <>
            <MailX className="size-8 text-gray-400" />
            <h1 className="mt-4 text-xl font-semibold text-gray-900">E-Mails abbestellen</h1>
            <p className="mt-2 text-sm text-gray-600">
              Möchten Sie keine Angebote und Glückwünsche mehr von <b>{studioName}</b> per E-Mail
              erhalten? Buchungs- und Zahlungsbestätigungen bekommen Sie weiterhin.
            </p>
            {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
            <Button onClick={unsubscribe} disabled={isPending} className="mt-6 w-full">
              {isPending ? "Wird abgemeldet…" : "Abmelden"}
            </Button>
          </>
        )}
      </div>
    </main>
  );
};

export default UnsubscribeView;