import React from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import { Container } from "react-bootstrap";

const PageBanner = ({ banners = [] }) => {
  const router = useRouter();

  // Function to generate breadcrumbs
  const generateBreadcrumbs = () => {
    const pathname = router.asPath;
    const pathSegments = pathname.split("/").filter((segment) => segment);
    const breadcrumbs = [];

    // BLOG DETAILS PAGE
    if (pathname.startsWith("/blog/")) {
      const postSlug = pathSegments[1] || "";
      const postTitle = postSlug
        .replace(/-/g, " ")
        .replace(/\b\w/g, (l) => l.toUpperCase());

      breadcrumbs.push({ name: "Knowledge", url: "/knowledge" });
      breadcrumbs.push({ name: "Blog", url: "/blog" });
      breadcrumbs.push({ name: postTitle, url: "", isLast: true });

      return breadcrumbs;
    }

    // CLIENT SERVICING PAGES
    if (pathname.includes("/client-servicings")) {
      const segmentNameMap = {
        "client-servicing": "Client Servicing",
        "virtual-finance-office": "Virtual Finance Office",
        "virtual-cfo": "Virtual CFO Services",
        "virtual-fc": "Virtual FC Services",
        "book-closures-audit": "Book Closure and Audit Support",
        "apc": "Accounting, Payroll & Compliance",
        "advisory-services": "Advisory Services",
        "transaction-advisory": "Transaction Advisory",
        "risk-advisory": "Risk Advisory",
        "business-advisory": "Business Advisory",
        "global-capability-centres": "GCC as a Service",
        "digital-transformation": "Digital Transformation",
        "empowering-finance-consultants": "Empowering Finance Consultants",
        "bespoke-services": "Bespoke Services",
        "cfo": "Virtual CFO Services",
        "ba": "Business Advisory",
        "ta": "Transaction Advisory",
        "ra": "Risk Advisory",
      };

      let currentPath = "";
      pathSegments.forEach((segment, index) => {
        currentPath += `/${segment}`;
        const displayName =
          segmentNameMap[segment] ||
          segment.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());

        breadcrumbs.push({
          name: displayName,
          url: currentPath,
          isLast: index === pathSegments.length - 1,
        });
      });

      return breadcrumbs;
    }

    // Default fallback
    return null;
  };

  const breadcrumbs = generateBreadcrumbs();

  return (
    <Swiper
      spaceBetween={30}
      autoplay={{
        delay: 5000,
        disableOnInteraction: true,
        pauseOnMouseEnter: true,
      }}
      modules={[Autoplay]}
      className="page-banner-swiper"
    >
      {banners.map((banner, index) => (
        <SwiperSlide key={index}>
          <div className="page-title-area">
            <div className="image-wrapper">
              <Image
                src={banner.imageSrc}
                alt={banner.pageTitle}
                fill
                style={{ objectFit: "fill" }}
                priority
                className="img-fluid postion-absolute"
              />
            </div>
            <Container fluid className="ps-md-5 pe-md-5">
              <div className="page-title-content">
                <h2>{banner.pageTitle}</h2>
                <ul>
                  {breadcrumbs ? (
                    breadcrumbs.map((breadcrumb, i) => (
                      <li key={i}>
                        {breadcrumb.isLast || !breadcrumb.url ? (
                          breadcrumb.name
                        ) : (
                          <Link href={breadcrumb.url}>{breadcrumb.name}</Link>
                        )}
                      </li>
                    ))
                  ) : (
                    <>
                      <li>
                        <Link href={banner.homePageUrl}>
                          {banner.homePageText}
                        </Link>
                      </li>
                      <li>{banner.activePageText}</li>
                    </>
                  )}
                </ul>
                <p className="pt-3 text-center">{banner.Description}</p>
              </div>
            </Container>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default PageBanner;