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

import { getOpportunitiesNotLoggedIn } from "@/services/opportunities";
import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import PFRSamLogo from "@/components/common/sprites/pfr-sam-logo-sprite";
import { Opportunity } from "@/types/opportunities/opportunity-types";
import { truncateText } from "@/utils/text-utils";
import { PROFESSIONAL_JOB_TOPIC_IDS } from "@/constants/professional-job-topics";

const fetchOpportunities = async () => {
  const sort: { colId: string; sort: "desc" | "asc" } = {
    colId: "publishDate",
    sort: "desc",
  };

  const filterModel = {
    researchTopic: PROFESSIONAL_JOB_TOPIC_IDS,
  };

  const itemsPerPage = 3;
  const currentPage = 1;

  const opportunities = await getOpportunitiesNotLoggedIn(
    itemsPerPage,
    currentPage,
    sort,
    filterModel,
  );

  return opportunities;
};

function LatestOpportunities() {
  const router = useRouter();
  const { data, isLoading, error } = useSWR(
    "opportunities",
    fetchOpportunities,
  );

  const opportunities = data?.data || [];

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

  return (
    <div className="bg-b2b-light dark:bg-b2b-dark px-4 md:px-8">
      <h2 className="text-5xl font-black mb-4 text-center mx-auto py-12 max-w-3xl">
        Latest opportunities tailor made for a professional like you.
      </h2>
      {isLoading && (
        <div className="flex flex-col items-center justify-center">
          <PFRSamLogo animate width={50} />
          <span className="text-sm">
            Loading our most recent research opportunities...
          </span>
        </div>
      )}
      {error && (
        <div className="flex flex-col items-center justify-center">
          <span className="text-sm text-red-500">
            Failed to load opportunities. Please try again later.
          </span>
        </div>
      )}
      {data && (
        <div className="grid grid-rows-3 gap-4 max-w-5xl mx-auto">
          {opportunities.map((opportunity: Opportunity) => (
            <Card key={opportunity.jobId} className="shadow-none rounded-lg">
              <CardBody className="grid grid-cols-5 items-center bg-white dark:bg-[#18181a] p-6">
                <p className="font-bold col-span-3">
                  {opportunity.title.length > 75
                    ? truncateText(opportunity.title, 75)
                    : opportunity.title}
                </p>
                <p className="text-sm font-medium text-gray-500 dark:text-white/70 col-span-1">
                  {opportunity.location}
                </p>
                <div className="col-span-1 flex justify-end">
                  <FaChevronRight
                    className="cursor-pointer text-black dark:text-white"
                    onClick={() => handleOnClick(opportunity.jobId)}
                  />
                </div>
              </CardBody>
            </Card>
          ))}
        </div>
      )}
      <div className="text-center py-12">
        <Button
          btnLabel="View all opportunities"
          className="w-72"
          customVariant="b2b"
          endContent={<FaChevronRight />}
          onClick={() =>
            router.push(INTERNAL_PAGES.participant.opportunities.main)
          }
        />
      </div>
    </div>
  );
}

export default LatestOpportunities;