"use client";

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

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { Opportunity } from "@/types/opportunities/opportunity-types";

type OpportunityExpiredProps = {
  title: string;
  relatedOpportunities?: Opportunity[];
};

function OpportunityExpired({
  title,
  relatedOpportunities = [],
}: OpportunityExpiredProps) {
  const router = useRouter();

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

  return (
    <div className="flex flex-col items-center justify-center text-center space-y-4 py-24 bg-participant-light dark:bg-participant-dark">
      <div className="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex items-center justify-center">
        <FaClock className="text-2xl" />
      </div>

      <h1 className="font-inter font-black text-4xl">
        You just missed this one
      </h1>

      <p className="font-noto max-w-md">
        <span className="font-semibold">{title}</span> is no longer accepting
        applications - but there are plenty of other opportunities waiting for
        you.
      </p>

      <div className="flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-3">
        <Button
          btnLabel="Browse all opportunities"
          customVariant="primary"
          startContent={<FaChevronLeft />}
          onClick={() =>
            router.push(INTERNAL_PAGES.participant.opportunities.main)
          }
        />
        <Button
          btnLabel="Go to homepage"
          customVariant="transparent"
          startContent={<FaHouse />}
          onClick={() => router.push(INTERNAL_PAGES.participant.homepage)}
        />
      </div>

      {relatedOpportunities.length > 0 && (
        <>
          <div className="flex items-center gap-4 w-full max-w-4xl px-4 xl:px-0">
            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
            <span className="text-xs text-gray-400 whitespace-nowrap">
              Similar opportunities
            </span>
            <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700" />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 w-full max-w-4xl px-4 xl:px-0">
            {relatedOpportunities.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 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>
  );
}

export default OpportunityExpired;