"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { FaUserPlus } from "react-icons/fa6";
import { FaListAlt } from "react-icons/fa";
import { useTheme } from "next-themes";
import { FcMoneyTransfer, FcIdea, FcFactory, FcLike } from "react-icons/fc";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import EighthImage from "@/public/participant/explore-engage/hero/8.webp";
import NinthImage from "@/public/participant/explore-engage/hero/9.webp";
import TenthImage from "@/public/participant/explore-engage/hero/10.webp";
import HeroOne from "@/public/participant/hero-images/hero-1.webp";
import HeroTwo from "@/public/participant/hero-images/hero-2.webp";
import HeroThree from "@/public/participant/hero-images/hero-3.webp";
import HeroFour from "@/public/participant/hero-images/hero-4.webp";
import HeroFive from "@/public/participant/hero-images/hero-5.webp";
import HeroSix from "@/public/participant/hero-images/hero-6.webp";
import HeroSeven from "@/public/participant/hero-images/hero-7.webp";
import HeroEight from "@/public/participant/hero-images/hero-8.webp";
import HeroNine from "@/public/participant/hero-images/hero-9.webp";
import HeroTen from "@/public/participant/hero-images/hero-10.webp";
import InitialHeroSvg from "@/components/pages/participant/home/partials/initial-hero-svg";
import PillButton from "@/components/pages/participant/home/partials/hero-pills";
import type { ParticipantHomeContent } from "@/lib/participant-home-ghost-content";

type InitialHeroProps = {
  isLoggedIn?: boolean;
  content: ParticipantHomeContent["hero"];
};

function InitialHero({ isLoggedIn = false, content }: InitialHeroProps) {
  const router = useRouter();
  const { theme } = useTheme();
  const listOfImages = [
    HeroOne,
    HeroTwo,
    HeroThree,
    HeroFour,
    HeroFive,
    HeroSix,
    HeroSeven,
    HeroEight,
    HeroNine,
    HeroTen,
  ];

  const randomImage =
    listOfImages[Math.floor(Math.random() * listOfImages.length)];

  const colorToUse = theme === "dark" ? "#7FD6CB" : "#F7A58F";

  const handleBecomePersonClick = (isLoggedIn: boolean) => {
    router.push(
      isLoggedIn
        ? INTERNAL_PAGES.participant.profile.main
        : INTERNAL_PAGES.participant.signup.main,
    );
  };

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

  const icons = {
    card: <FcMoneyTransfer size={24} />,
    lightbulb: <FcIdea size={24} />,
    building: <FcFactory size={24} />,
    star: <FcLike size={24} />,
  };

  return (
    <div className="bg-participant-light dark:bg-participant-dark p-6 lg:p-12">
      <section className="bg-gray-200/70 dark:bg-[#383934] w-full rounded-3xl grid grid-cols-1 lg:grid-cols-2 max-w-[100rem] mx-auto">
        <header className="lg:ps-20 lg:pt-20 lg:pb-20 flex flex-col p-8 lg:p-0">
          <h1 className="font-inter font-black text-4xl sm:text-5xl lg:text-7xl text-black dark:text-white text-center lg:text-start">
            {content.title}
          </h1>
          <h2 className="mt-6 text-sm lg:text-lg mx-4 lg:mx-0 leading-6 text-gray-800 dark:text-gray-200 text-center lg:text-start">
            {content.lead}
          </h2>
          <div className="flex flex-col lg:flex-row items-center space-x-2 mt-8 py-4 lg:py-0">
            <div className="flex -space-x-1">
              <Image
                unoptimized
                alt=""
                className="inline-block h-8 w-8 rounded-full ring-2 ring-participant-bittersweet dark:ring-participant-cerulean object-cover"
                height={32}
                quality={50}
                src={EighthImage.src}
                width={32}
              />
              <Image
                unoptimized
                alt=""
                className="inline-block h-8 w-8 rounded-full ring-2 ring-participant-bittersweet dark:ring-participant-cerulean object-cover"
                height={32}
                quality={50}
                src={NinthImage.src}
                width={32}
              />
              <Image
                unoptimized
                alt=""
                className="inline-block h-8 w-8 rounded-full ring-2 ring-participant-bittersweet dark:ring-participant-cerulean object-cover"
                height={32}
                quality={50}
                src={TenthImage.src}
                width={32}
              />
            </div>
            <span className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 font-medium font-noto lg:ms-3 py-2 lg:py-0 text-center lg:text-start">
              {content.communityProof}
            </span>
          </div>
          <div className="flex flex-col space-y-4 lg:space-y-0 lg:flex-row lg:pt-12 lg:space-x-4 lg:pe-28">
            <Button
              fullWidth
              btnLabel={isLoggedIn ? "Update my profile" : "Join our community"}
              customVariant="primary"
              endContent={<FaUserPlus />}
              onClick={() => handleBecomePersonClick(isLoggedIn)}
            />
            <Button
              fullWidth
              btnLabel="Explore current opportunities"
              customVariant="transparent"
              endContent={<FaListAlt />}
              onClick={() => handleExploreOpportunitiesClick()}
            />
          </div>
        </header>
        <div className="hidden lg:relative lg:flex lg:justify-center lg:items-center">
          <div className="relative z-10 w-full lg:w-[500px] p-4">
            <InitialHeroSvg
              image={randomImage.src}
              mode={theme as "light" | "dark"}
            />
          </div>
          <div className="absolute top-0 left-0 right-0 bottom-0 z-20 flex justify-center items-center">
            <div className="absolute top-36 left-24 xxl:left-32 xl:block hidden">
              <PillButton
                color={colorToUse}
                icon={icons.card}
                text="Get rewarded"
              />
            </div>
            <div className="absolute top-48 right-14 xxl:right-20 xl:block hidden">
              <PillButton
                color={colorToUse}
                icon={icons.lightbulb}
                text="Share insights"
              />
            </div>
            <div className="absolute bottom-24 left-20 xxl:left-28 xl:block hidden">
              <PillButton
                color={colorToUse}
                icon={icons.building}
                text="Global brands"
              />
            </div>
            <div className="absolute bottom-40 right-8 xxl:right-12 xl:block hidden">
              <PillButton
                color={colorToUse}
                icon={icons.star}
                text="Drive impact"
              />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default InitialHero;