import { Metadata } from "next";

import CreateNewAccount from "@/components/pages/participant/sign-up/create-new-account";
import LeftSectionImageHeadline from "@/components/common/left-section-image-headline";
import { ALLOWED_COUNTRY_CALLING_CODES } from "@/constants/allowed-countries";
import { WORLD_COUNTRY_LIST } from "@/constants/countries";
import { loadParticipantSignupContent } from "@/lib/participant-signup-ghost-content";

export const metadata: Metadata = {
  title: "Create new account",
  description:
    "Join People for Research to access the latest paid research and testing opportunities in the UK and overseas. Create a free account to get started today.",
  openGraph: {
    title: "Create new account",
    description:
      "Join People for Research to access the latest paid research and testing opportunities in the UK and overseas. Create a free account to get started today.",
    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",
    title: "Create new account",
    images: "/global-assets/pfr-logo-og-participant.svg",
    description:
      "Join People for Research to access the latest paid research and testing opportunities in the UK and overseas. Create a free account to get started today.",
  },
};

export const revalidate = 60;

// Note for the future: The signup process might be triggered from different marketing campaigns or sources, with or without a job ID reference.
// In order to preserve the query parameters through the signup flow, we need to capture them at the entry point (this page)
// and then append them to the subsequent steps in the flow. This way, any relevant information from the original source is retained throughout the user's journey.

export default async function Signup({
  searchParams,
}: {
  searchParams: {
    country: string;
    countryCode: string;
  };
}) {
  const content = await loadParticipantSignupContent();
  const { countryCode } = searchParams;
  const isAllowedToSignup = ALLOWED_COUNTRY_CALLING_CODES.some(
    (allowedCountry) => allowedCountry.code === countryCode,
  );
  const countryInfo = WORLD_COUNTRY_LIST.find((x) => x.code === countryCode);
  const countryName = countryInfo?.name || "Unknown";
  const countryCallingCode = countryInfo?.countryCode || "";

  return (
    <div className="flex flex-col xl:flex-row bg-participant-light dark:bg-[#383934]">
      <LeftSectionImageHeadline isSignup />
      <CreateNewAccount
        hero={content.hero}
        isSignupBlocked={!isAllowedToSignup}
        userCountry={countryName}
        userCountryCode={countryCallingCode}
      />
    </div>
  );
}