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

import ManualPhoneVerificationProcess from "@/components/pages/participant/profile/phone-verification/manual-phone-verification";
import { getProfileData } from "@/services/general-actions";
import { retrieveUserToken } from "@/lib/user-session";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { WORLD_COUNTRY_LIST } from "@/constants/countries";

export const metadata: Metadata = {
  title: "Phone verification | Profile",
};

export default async function ManualPhoneVerificationPage({
  searchParams,
}: {
  searchParams: {
    country: string;
    countryCode: string;
  };
}) {
  const userToken = await retrieveUserToken();

  if (!userToken) {
    redirect(INTERNAL_PAGES.participant.login);
  }

  const { countryCode } = searchParams;
  const countryInfo = WORLD_COUNTRY_LIST.find((x) => x.code === countryCode);
  const countryCallingCode = countryInfo?.countryCode || "";

  const participantData = await getProfileData(userToken);

  const phoneNumber = participantData.participant.phoneNumber;
  const isPhoneVerified = participantData.participant.isPhoneVerified;
  const userEmail = participantData.participant.email;
  const firstName = participantData.participant.firstName;

  return (
    <div className="flex flex-col min-h-screen bg-participant-light dark:bg-participant-dark light">
      <ManualPhoneVerificationProcess
        currentPhoneNumber={phoneNumber}
        isVerified={isPhoneVerified}
        userCountryCode={countryCallingCode}
        userEmail={userEmail}
        userFirstName={firstName}
      />
    </div>
  );
}