import { Metadata } from "next";
import { cookies } from "next/headers";

import LeftSectionImageHeadline from "@/components/common/left-section-image-headline";
import ThanksForJoining from "@/components/pages/participant/sign-up/thanks-for-joining";
import {
  getOpportunitiesNotLoggedIn,
  getOpportunityById,
} from "@/services/opportunities";
import { decryptCookie } from "@/utils/cookie-utils";
import { CreateUserData } from "@/types/signup/user-signup-types";
import { COOKIE_SIGNUP_USER_DATA } from "@/constants/cookie-mapping";
import ThanksForJoiningCampaign from "@/components/pages/participant/sign-up/campaigns/thanks-for-joining-campaign";

export const metadata: Metadata = {
  title: "Thanks for joining | Signup",
};

export default async function ThanksForJoiningPage({
  searchParams,
}: {
  searchParams: Record<string, string>;
}) {
  const { jobIdRef, full_journey } = searchParams;
  const encUserData = cookies().get(COOKIE_SIGNUP_USER_DATA)?.value;
  const userData = encUserData && decryptCookie(encUserData);
  const parsedUserData = userData && JSON.parse(userData);
  const { firstName, email } = parsedUserData as CreateUserData;

  let jobTitle;

  if (jobIdRef) {
    const opportunity = await getOpportunityById(Number(jobIdRef));
    jobTitle = opportunity?.title;
  }

  const sort: { colId: string; sort: "desc" | "asc" } = {
    colId: "publishDate",
    sort: "desc",
  };
  const filterModel = {};
  const itemsPerPage = 4;

  const listOfOpps = await getOpportunitiesNotLoggedIn(
    itemsPerPage,
    1,
    sort,
    filterModel,
  );
  const opportunityList = listOfOpps.data || [];

  return (
    <div className="flex flex-col xl:flex-row bg-participant-light dark:bg-[#383934]">
      <LeftSectionImageHeadline isSignup />
      {full_journey === "true" && (
        <ThanksForJoiningCampaign firstName={firstName} oppTitle={jobTitle} />
      )}
      {full_journey !== "true" && (
        <ThanksForJoining
          firstName={firstName}
          jobIdRef={jobIdRef ? Number(jobIdRef) : undefined}
          oppTitle={jobTitle}
          recommendedOpportunities={opportunityList || []}
          userEmail={email}
        />
      )}
    </div>
  );
}