"use client";

import { Card, CardHeader, CardBody, Progress } from "@nextui-org/react";
import { FaAngleRight } from "react-icons/fa6";
import Image from "next/image";

import Button from "@/components/common/button";
import { formatIncentives } from "@/utils/format-incentive";
import { Options } from "@/types/options/options-data-types";
import { Opportunity } from "@/types/opportunities/opportunity-types";
import { deleteCampaignSession } from "@/lib/campaigns-session";

type CampaignThanksForApplyingProps = {
  isExpiredOrNotFound: boolean;
  currencyOptions: Options;
  listOfOpps: Opportunity[];
};

function CampaignThanksForApplying({
  isExpiredOrNotFound,
  listOfOpps,
  currencyOptions,
}: CampaignThanksForApplyingProps) {
  const visualIndicator =
    "bg-gradient-to-r from-participant-cerulean from-60% to-green-500";
  const currentStep = isExpiredOrNotFound ? 2 : 3;
  const totalSteps = isExpiredOrNotFound ? 2 : 3;
  const totalCompletion = Math.floor((currentStep / totalSteps) * 100);

  const handleClick = () => {
    // given cookies are server-side, we redirect the user to the login page and delete the campaign session there.
    deleteCampaignSession();
  };

  return (
    <div className="flex items-center justify-center p-0 sm:p-10 m-auto relative">
      <div className="w-full max-w-4xl mx-0 sm:mx-4 lg:mx-16 relative">
        <Card className="shadow border-0 p-4 sm:p-6 md:p-8 lg:p-10 rounded-none sm:rounded-3xl  text-gray-900 dark:text-gray-100">
          <div className="py-4 pb-2 px-2">
            <Progress
              showValueLabel
              aria-label={`${totalCompletion}% of your journey is complete`}
              classNames={{
                label:
                  "text-xs sm:text-sm font-bold text-gray-900 dark:text-gray-100 tracking-tight font-inter",
                indicator: visualIndicator,
                value:
                  "text-xs sm:text-sm font-bold text-gray-900 dark:text-gray-100 tracking-tight font-inter",
              }}
              label={`Your PFR journey: Step ${currentStep} of ${totalSteps}`}
              maxValue={100}
              minValue={1}
              value={totalCompletion}
            />
          </div>
          <CardHeader className="text-center flex flex-col pt-6 sm:pt-8 px-2 sm:px-6">
            <h1 className="text-xl sm:text-3xl lg:text-4xl font-black mb-3 font-inter leading-tight">
              Thanks for applying!
            </h1>
            <p className="text-black dark:text-gray-300 text-sm sm:text-base px-2 sm:px-0 mb-3">
              If your experience and profile match the study, we&apos;ll be in
              touch to discuss the next steps.
            </p>
            <h2 className="text-base font-bold my-3 font-inter">
              Explore more opportunities
            </h2>
            <p className="text-black dark:text-gray-300 text-sm sm:text-base px-2 sm:px-0">
              If you don&apos;t hear back from us this time, don&apos;t worry!
              We add new research opportunities every single day. We look
              forward to receiving your next application.
            </p>
          </CardHeader>
          <CardBody className="px-2 sm:px-6">
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-1">
              {listOfOpps.map((opportunity, index) => {
                const { title, thumbnail, incentives } = opportunity;

                return (
                  <Card
                    key={index}
                    disableAnimation
                    className="shadow-none rounded-lg light"
                    isHoverable={false}
                    isPressable={false}
                  >
                    <CardBody className="p-0 h-[250px] w-full relative">
                      <Image
                        alt={`Image for ${title}`}
                        className="object-cover rounded-none shadow-none w-full h-[250px]"
                        height={400}
                        src={
                          thumbnail
                            ? `data:image/png;base64,${thumbnail}`
                            : "/images/default-thumbnail.png"
                        }
                        width={400}
                      />
                      <div className="absolute inset-0 bg-gradient-to-b from-gray-500 to-black opacity-50 z-10"></div>
                      <div className="absolute bottom-0 left-0 right-0 flex flex-col items-start z-20 py-3 sm:py-4">
                        <div className="inline-block ps-3 sm:ps-4">
                          <span className="font-inter font-extrabold text-lg sm:text-xl xl:text-start text-white">
                            {formatIncentives(incentives, currencyOptions)}
                          </span>
                          <span className="text-white text-xs font-medium ps-1">
                            {incentives.length > 1 && (
                              <>
                                <span className="inline sm:hidden">+</span>
                                <span className="hidden sm:inline">
                                  + other currencies
                                </span>
                              </>
                            )}
                          </span>
                        </div>
                        <p className="font-medium text-sm mt-1 text-white px-3 line-clamp-2">
                          {title}
                        </p>
                      </div>
                    </CardBody>
                  </Card>
                );
              })}
            </div>
            <Button
              fullWidth
              btnLabel="Login and explore more opportunities"
              className="mt-6 sm:mt-8"
              customVariant="primary"
              endContent={<FaAngleRight />}
              onClick={handleClick}
            />
          </CardBody>
          <div className="flex flex-col justify-center text-black dark:text-white overflow-visible p-3">
            <p className="text-xs text-muted-foreground text-center leading-relaxed px-2 sm:px-0">
              The opportunities above are just a small sample of our total
              offer. If you&apos;d like to get involved, use the button to
              login, browse and apply.
            </p>
          </div>
        </Card>
      </div>
    </div>
  );
}

export default CampaignThanksForApplying;