"use client";

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

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import Button from "@/components/common/button";
import { Post } from "@/types/blog/blogTypes";

type InsightsProps = {
  recentPosts: Post[];
};

function Insights({ recentPosts }: InsightsProps) {
  const router = useRouter();

  const tagDisplayNames: { [key: string]: string } = {
    "#client-news": "News",
    "#client-case-studies": "Case studies",
    "#client-how-to": "How to",
    "#client-industry-stories": "Industry stories",
    "#client-community-tips": "Community tips",
  };

  const handleOnPress = (slug: string) => {
    router.push(`${INTERNAL_PAGES.client.insights}/${slug}`);
  };

  const handleButtonClick = () => {
    router.push(INTERNAL_PAGES.client.insights);
  };

  const sortedPosts = useMemo(() => {
    if (!recentPosts) {
      return [];
    }

    return [...recentPosts].sort((a, b) => {
      const publishDateA = new Date(a.published_at);
      const publishDateB = new Date(b.published_at);

      return publishDateB.getTime() - publishDateA.getTime();
    });
  }, [recentPosts]);

  return (
    <section className="text-center px-4 md:px-0">
      <div className="flex flex-col items-center justify-center space-y-4 text-center">
        <span className="relative font-noto text-xl font-bold">
          Latest content from our team
          <span className="absolute -bottom-1 left-0 w-full h-1 bg-pfrBasicBlue opacity-40 dark:opacity-100"></span>
        </span>
        <h2 className="font-inter font-black text-3xl md:text-5xl lg:text-7xl">
          Our recent insights
        </h2>
        <p className="font-noto text-base md:text-2xl mt-4 mx-4 md:mx-24">
          Explore our latest articles, case studies and more.
        </p>
      </div>

      <div className="max-w-7xl p-8 mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:grid-rows-2 p-2">
          {sortedPosts.map((post, index) => {
            const bgImageStyle = {
              backgroundImage: `url(${post.feature_image})`,
              backgroundSize: "cover",
              backgroundPosition: "center",
              backgroundRepeat: "no-repeat",
            };

            return index === 0 ? (
              <Card
                key={`${post.title}-${index}`}
                disableAnimation
                isHoverable
                isPressable
                className="light shadow-none relative flex items-end justify-start w-full text-left bg-center bg-cover cursor-pointer h-96 md:col-span-2 lg:row-span-2 lg:h-full group rounded-lg hover:cursor-pointer hover:outline-offset-1 hover:outline-2 hover:outline-pfrBasicBlue/50 hover:dark:outline-pfrBasicBlue"
                style={bgImageStyle}
                onPress={() => handleOnPress(post.slug)}
              >
                <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-60 rounded-lg"></div>
                <CardHeader className="absolute top-0 left-0 right-0 flex items-center justify-between mt-1">
                  <Chip
                    classNames={{
                      content: "font-semibold",
                      base: "bg-midnightBlue text-white font-inter text-xs mt-1.5",
                    }}
                    size="sm"
                  >
                    {tagDisplayNames[post.tags[0].name]}
                  </Chip>
                </CardHeader>
                <CardBody className="absolute bottom-0 left-0 right-0 flex items-start ps-4">
                  <span className="ps-1 font-inter font-medium text-white text-base">
                    {post.title}
                  </span>
                </CardBody>
              </Card>
            ) : (
              <Card
                key={`${post.title}-${index}`}
                disableAnimation
                isHoverable
                isPressable
                className="light shadow-none relative flex items-end justify-start w-full text-left bg-center bg-cover cursor-pointer h-96 group rounded-lg hover:cursor-pointer hover:outline-offset-1 hover:outline-2 hover:outline-pfrBasicBlue/50 hover:dark:outline-pfrBasicBlue"
                style={bgImageStyle}
                onPress={() => handleOnPress(post.slug)}
              >
                <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-60 rounded-lg"></div>
                <CardHeader className="absolute top-0 left-0 right-0 flex items-center justify-between mt-1">
                  <Chip
                    classNames={{
                      content: "font-semibold",
                      base: "bg-midnightBlue text-white font-inter text-xs mt-1.5",
                    }}
                    size="sm"
                  >
                    {tagDisplayNames[post.tags[0].name]}
                  </Chip>
                </CardHeader>
                <CardBody className="absolute bottom-0 left-0 right-0 flex items-start ps-2">
                  <span className="ps-1 font-inter font-medium text-white text-base">
                    {post.title}
                  </span>
                </CardBody>
              </Card>
            );
          })}
        </div>
      </div>
      <Button
        btnLabel="Read all insights"
        className="w-48 sm:w-96 mt-12"
        customVariant="client"
        endContent={<FaChevronRight />}
        onClick={handleButtonClick}
      />
    </section>
  );
}

export default Insights;