"use client";

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

import Button from "@/components/common/button";
import Breadcrumbs from "@/components/common/breadcrumbs";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import CTAThanksForApplying from "@/components/pages/participant/opportunities/partials/cta-thanks-for-applying";
import { Opportunity } from "@/types/opportunities/opportunity-types";

type AlreadyAppliedProps = {
  jobId: number;
  thumbnail: string;
  recommendedOpportunities: Opportunity[];
  userFirstName: string;
  altTextThumbnail?: string;
};

function AlreadyApplied({
  jobId,
  thumbnail,
  recommendedOpportunities,
  userFirstName,
  altTextThumbnail,
}: AlreadyAppliedProps) {
  const router = useRouter();

  const handleExploreOpportunitiesClick = () => {
    router.push(INTERNAL_PAGES.participant.opportunities.main);
  };

  const onClickCard = (oppId: number) => {
    router.push(`${INTERNAL_PAGES.participant.opportunities.main}/${oppId}`);
  };

  return (
    <div className="flex flex-col xl:flex-row bg-participant-light dark:bg-participant-dark">
      {/* Left side - job image */}
      {/* Desktop */}
      <div className="xl:flex justify-start hidden xl:w-1/3 relative">
        <div className="relative w-full overflow-hidden">
          <Image
            unoptimized
            alt={altTextThumbnail || ""}
            className="w-full h-full object-cover"
            height={5000}
            src={`data:image/png;base64,${thumbnail}`}
            width={5000}
          />
        </div>
      </div>
      {/* Mobile and tablet */}
      <div className="relative xl:hidden w-full">
        <div className="flex items-center justify-center w-full h-full relative">
          <Image
            alt={altTextThumbnail || ""}
            className="object-cover rounded shadow-none"
            height={1000}
            src={`data:image/png;base64,${thumbnail}`}
            width={1000}
          />
        </div>
      </div>

      <div className="w-full xl:w-2/3 pb-8 px-16 pt-4 xl:pt-0">
        <Breadcrumbs />
        <div className="space-y-4">
          <h1 className="font-inter font-black text-4xl tracking-tight">
            You&apos;ve already applied
          </h1>
          <p className="font-noto text-lg">
            Hi {userFirstName}, it looks like you&apos;ve already completed this
            questionnaire.
          </p>
          <h2 className="font-inter font-black text-xl tracking-tight">
            What&apos;s happening with your application?
          </h2>
          <div className="space-y-6 pb-6 font-noto">
            <p>
              Your application is currently being reviewed by our team.
              We&apos;ll be in touch via phone or email if you&apos;re selected
              to participate. Keep an eye on your inbox (and spam folder, just
              in case!).
            </p>
            <p>
              In the meantime, why not check out our other open research
              studies? From focus groups to paid surveys, there&apos;s something
              for everyone.
            </p>
          </div>
        </div>
        <Button
          fullWidth
          btnLabel="Explore more opportunities"
          customVariant="primary"
          endContent={<FaChevronRight className="size-3" />}
          onClick={handleExploreOpportunitiesClick}
        />
        <h4 className="font-inter font-black tracking-tight my-4">
          You might also be interested in:
        </h4>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
          {recommendedOpportunities.map((opportunity, index) => (
            <Card
              key={index}
              disableAnimation
              isHoverable
              isPressable
              className="shadow-none rounded-lg light hover:bg-white/80 hover:outline-offset-1 hover:outline-2 hover:outline-saffron hover:dark:outline-persian-green hover:cursor-pointer"
              onPress={() => onClickCard(opportunity.jobId)}
            >
              <CardBody className="p-0 h-[250px] lg:h-[400px] w-full relative">
                <Image
                  alt=""
                  className="object-cover rounded-none shadow-none w-full h-[250px] lg:h-[400px]"
                  height={400}
                  src={`data:image/png;base64,${opportunity.thumbnail}`}
                  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>
        <CTAThanksForApplying jobId={jobId} />
      </div>
    </div>
  );
}

export default AlreadyApplied;