"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { FaHome } from "react-icons/fa";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { GDPR_EMAIL, SUPPORT_EMAIL } from "@/constants/signup-form-constants";
import Alert from "@/components/common/alert";
import Button from "@/components/common/button";

type UnsubscribeAreaProps = { isSuccessful: boolean };

function UnsubscribeArea({ isSuccessful }: UnsubscribeAreaProps) {
  const router = useRouter();

  return (
    <div className="bg-white text-black p-8 rounded-md m-8 sm:m-20 lg:m-auto mt-4 lg:w-1/2 lg:h-1/2 lg:mt-12 mb-12">
      <h1 className="font-inter font-black text-3xl text-center">
        Unsubscribe
      </h1>
      <p className="py-4 text-center sm:text-start">
        We&apos;re sorry to hear that you no longer want to receive updates
        about paid research opportunities. You have been unsubscribed from all
        our mailing lists and text messages. However, you can still log into
        your account and apply via our website by visiting the Opportunities
        page. Please allow up to 7 days for the unsubscribe process to take
        effect due to pre-scheduled emails.
      </p>
      <p className="text-center sm:text-start">
        If you would like to close your account, please log in to your account,
        go to <span className="font-bold">My profile ▸ Account settings</span>,
        and select the <span className="font-bold">Close my account</span>{" "}
        option at the bottom of the page. Please note that this action will
        permanently remove your access to apply for research opportunities on
        our website.
      </p>
      <p className="text-center sm:text-start mt-4">
        If you wish to request the permanent deletion of your personal data,
        please email us at{" "}
        <Link
          className="underline underline-offset-2 decoration-dotted cursor-pointer font-semibold"
          href={`mailto:${GDPR_EMAIL}`}
        >
          <span>{GDPR_EMAIL}</span>
        </Link>
        .
      </p>
      <div className="mt-6">
        {isSuccessful && (
          <Alert
            message="You have successfully unsubscribed."
            title="Success"
            variant="success"
          />
        )}
        {!isSuccessful && (
          <Alert
            showSupportEmail
            message="There was an issue with your unsubscribe request. Please try again later. If the problem persists, contact our support team at "
            title="Error"
            variant="error"
          />
        )}
      </div>
      {isSuccessful && (
        <>
          <h2 className="font-inter font-black text-lg text-center py-6">
            Did you unsubscribe by mistake?
          </h2>
          <p className="text-center sm:text-start">
            Email our{" "}
            <Link
              className="underline underline-offset-2 decoration-dotted cursor-pointer font-semibold"
              href={`mailto:${SUPPORT_EMAIL}`}
            >
              support team
            </Link>{" "}
            to reinstate your subscription. We&apos;re sorry to see you go, but
            if you have any further questions about your data, how we use it, or
            how to unsubscribe, please refer to our{" "}
            <Link
              className="underline underline-offset-2 decoration-dotted cursor-pointer font-semibold"
              href={INTERNAL_PAGES.participant.howItWorks.homepage}
            >
              Common Questions
            </Link>{" "}
            or review our{" "}
            <Link
              className="underline underline-offset-2 decoration-dotted cursor-pointer font-semibold"
              href={INTERNAL_PAGES.participant.howItWorks.policies}
            >
              Privacy Policies
            </Link>
            .
          </p>
          <Button
            fullWidth
            btnLabel="Participant homepage"
            className="mt-6"
            customVariant="primary"
            endContent={<FaHome />}
            onClick={() => router.push(INTERNAL_PAGES.participant.homepage)}
          />
        </>
      )}
    </div>
  );
}

export default UnsubscribeArea;