"use client";

import { useRouter, useSearchParams } from "next/navigation";
import { FaChevronRight, FaStar } from "react-icons/fa6";
import { Chip } from "@nextui-org/react";
import { useState } from "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 { simplifiedLogin } from "@/services/participant/login/login-actions";
import NextSteps from "@/components/pages/participant/sign-up/common/next-steps";
import Alert from "@/components/common/alert";

type ThanksForJoiningCampaignProps = {
  firstName: string;
  oppTitle?: string;
};

// this is ONLY for users who signed up via a campaign link with full journey.
function ThanksForJoiningCampaign({
  firstName,
  oppTitle,
}: ThanksForJoiningCampaignProps) {
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const [hasError, setHasError] = useState(false);
  const router = useRouter();
  const searchParams = useSearchParams();
  const queryString = searchParams.toString();
  const jobId = searchParams.get("jobIdRef");

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

  const handleGoToSurvey = async () => {
    setIsLoggingIn(true);
    const response = await simplifiedLogin();

    if (response.success) {
      setIsLoggingIn(false);
      router.push(
        `${INTERNAL_PAGES.participant.opportunities.main}/${jobId}/survey?${queryString}`,
      );
    } else {
      setIsLoggingIn(false);
      setHasError(true);
    }
  };

  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">
              You are now part of the People for Research community.
            </h3>
          </div>

          <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={
                      isLoggingIn ? "Loading your survey..." : "Access survey"
                    }
                    className="sm:ml-auto"
                    customVariant="black"
                    endContent={isLoggingIn ? null : <FaChevronRight />}
                    isLoading={isLoggingIn}
                    onClick={handleGoToSurvey}
                  />
                </div>
              </div>
            </div>
          </div>
        </>
        {hasError && (
          <Alert
            showSupportEmail
            message="It seems like we're having some issues from our end. Please try again. If the issue persists, please contact us at "
            title="Error"
            variant="alert"
          />
        )}
        <NextSteps />
      </main>
    </div>
  );
}

export default ThanksForJoiningCampaign;