import { Metadata } from "next";
import { redirect } from "next/navigation";

import UnsubscribeArea from "@/components/pages/participant/unsubscribe/unsubscribe-area";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { unsubscribeParticipant } from "@/services/participant/unsubscribe/unsubscribe-actions";

export const metadata: Metadata = {
  title: "Unsubscribe",
  description:
    "Manage your People for Research notifications and opt-out of emails and alerts about new research opportunities and updates.",
  openGraph: {
    title: "Unsubscribe",
    description:
      "Manage your People for Research notifications and opt-out of emails and alerts about new research opportunities and updates.",
    images: [
      {
        url: "/global-assets/pfr-logo-og-participant.svg",
        alt: "People for Research logo, featuring a person inside a circle, representing a focus on human-centered research and activities.",
        width: 200,
        height: 150,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    images: "/global-assets/pfr-logo-og-participant.svg",
    title: "Unsubscribe",
    description:
      "Manage your People for Research notifications and opt-out of emails and alerts about new research opportunities and updates.",
  },
};

export default async function Unsubscribe({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const unsubscribeId = (await searchParams).id;

  if (!unsubscribeId) {
    redirect(INTERNAL_PAGES.participant.homepage);
  }

  const response = await unsubscribeParticipant(unsubscribeId as string);
  const isSuccessful = response.success;

  return (
    <div className="flex flex-col min-h-screen bg-participant-light dark:bg-participant-dark">
      <main className="flex-grow m-12" id="main-content">
        <UnsubscribeArea isSuccessful={isSuccessful} />
      </main>
    </div>
  );
}