"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { FaChevronRight, FaRegLightbulb, FaStar } from "react-icons/fa6";
import { Card, CardBody, Chip } from "@nextui-org/react";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import PFRDefaultLogo from "@/components/common/sprites/pfr-default-logo-sprite";
import { cookieSignupCleanup } from "@/services/participant/signup/utils";
import { Opportunity } from "@/types/opportunities/opportunity-types";
import NextSteps from "@/components/pages/participant/sign-up/common/next-steps";

type ThanksForJoiningProps = {
  firstName: string;
  userEmail: string;
  oppTitle?: string;
  jobIdRef?: number;
  recommendedOpportunities: Opportunity[];
};

function ThanksForJoining({
  firstName,
  userEmail,
  oppTitle,
  jobIdRef,
  recommendedOpportunities,
}: ThanksForJoiningProps) {
  const router = useRouter();

  const welcomeSentence = firstName
    ? `Welcome, ${firstName}!`
    : "Welcome to People for Research!";

  const handleGoToProfilePage = async () => {
    cookieSignupCleanup();
    router.push(`${INTERNAL_PAGES.participant.login}?email=${userEmail}`);
  };

  const handleGoToOpportunityReference = async () => {
    cookieSignupCleanup();
    router.push(
      `${INTERNAL_PAGES.participant.login}?email=${userEmail}&jobIdRef=${jobIdRef}`,
    );
  };

  const onClickCard = async (oppId: number) => {
    cookieSignupCleanup();

    router.push(
      `${INTERNAL_PAGES.participant.login}?email=${userEmail}&jobIdRef=${oppId}`,
    );
  };

  return (
    <div className="xl:w-7/12 relative bg-white xl:pt-0 pt-12 text-black">
      <div className="bg-participant-bittersweet dark:bg-participant-cerulean absolute xl:hidden top-0 w-full h-2" />
      <main
        className="flex flex-col ms-8 me-8 sm:ms-16 sm:me-12 md:me-12 lg:me-24 pb-8"
        id="main-content"
      >
        <>
          <div className="hidden xl:flex items-center justify-center">
            <PFRDefaultLogo height={100} width={100} />
          </div>
          <div className="flex flex-col space-y-1">
            <h1 className="font-inter text-2xl font-black text-center">
              {welcomeSentence}
            </h1>
            <h2 className="font-noto text-base font-bold tracking-tight text-center">
              Your account has been created successfully.
            </h2>
            <h3 className="font-noto text-base tracking-tight text-center py-2">
              {jobIdRef
                ? "You're just one step away from taking part in your first research opportunity."
                : "You are now part of the People for Research community."}
            </h3>
          </div>

          {jobIdRef ? (
            // for users that have selected an opportunity to apply.
            <div className="space-y-4 my-6">
              <div className="bg-gray-50 p-6 rounded-xl">
                <div className="flex items-start gap-4">
                  <div className="rounded-full bg-saffron dark:bg-tiffany-blue p-2">
                    <FaStar className="size-6" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <h3 className="font-inter font-bold">
                        Research opportunity
                      </h3>
                      <Chip
                        classNames={{
                          content: "font-semibold py-1",
                          base: "bg-saffron dark:bg-tiffany-blue text-black font-inter font-extrabold text-xs",
                        }}
                      >
                        Ready to apply
                      </Chip>
                    </div>
                    <p className="font-noto text-gray-700 mb-4 text-sm">
                      Complete your application for:
                    </p>
                    <div className="bg-white/50 p-4 rounded-lg mb-6 border border-gray-200">
                      <p className="text-sm font-medium">{oppTitle}</p>
                    </div>
                    <Button
                      fullWidth
                      btnLabel="Login and apply"
                      className="sm:ml-auto"
                      customVariant="black"
                      endContent={<FaChevronRight />}
                      onClick={handleGoToOpportunityReference}
                    />
                  </div>
                </div>
              </div>
            </div>
          ) : (
            // users who have not selected an opportunity and are just joining regularly.
            <div className="space-y-4 my-4">
              <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 bg-gray-50 p-4 rounded-lg">
                <FaRegLightbulb className="size-8" />
                <div>
                  <p className="font-noto text-sm text-center sm:text-left">
                    Complete your profile to help us match you with the perfect
                    research opportunities. The more we know about you, the
                    better we can connect you with relevant studies.
                  </p>
                </div>
              </div>
              <Button
                fullWidth
                btnLabel="Complete my profile"
                customVariant="black"
                endContent={<FaChevronRight />}
                onClick={handleGoToProfilePage}
              />
            </div>
          )}

          <div className="pt-4">
            <h3 className="font-inter text-xl font-black pb-2 text-center tracking-tight">
              Research opportunities for you
            </h3>
            <p className="font-noto text-sm text-center pb-6">
              {jobIdRef
                ? "Maximize your chances - apply for multiple similar studies that may be of interest to you."
                : "While you complete your profile, check out these exciting research opportunities."}
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              {recommendedOpportunities.map((opportunity, index) => (
                <Card
                  key={index}
                  disableAnimation
                  isHoverable
                  isPressable
                  className="shadow-none rounded-lg light hover:opacity-90 hover:outline-offset-1 hover:outline-2 hover:cursor-pointer"
                  onPress={() => onClickCard(opportunity.jobId)}
                >
                  <CardBody className="p-0 h-[250px] w-full relative">
                    <Image
                      alt={`Image for ${opportunity.title}`}
                      className="object-cover rounded-none shadow-none w-full h-[250px]"
                      height={400}
                      src={
                        opportunity.thumbnail
                          ? `data:image/png;base64,${opportunity.thumbnail}`
                          : "/images/default-thumbnail.png"
                      }
                      width={400}
                    />
                    <div className="absolute inset-0 bg-gradient-to-b from-gray-500 to-black opacity-40 z-10"></div>
                    <div className="absolute bottom-0 left-0 right-0 flex items-start z-20 py-4">
                      <p className="font-bold text-sm mt-1 text-white leading-5 px-4">
                        {opportunity.title}
                      </p>
                    </div>
                  </CardBody>
                </Card>
              ))}
            </div>
          </div>
        </>
        <NextSteps />
      </main>
    </div>
  );
}

export default ThanksForJoining;