"use client";

import { useLocale, useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import bannerImage from "../../public/adimg.webp";
import bannerImageDark from "../../public/adimg-dark.webp";
import bannerProduct from "../../public/banner-product.png";
import Button from "./common/Button";
import Image from "next/image";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { Advertisement } from "../../types/advertisements";
import { getImageUrl } from "@/hooks/useImageUrl";
import { useRouter } from "next/navigation";
import { mapAdsToSlides } from "@/lib/utils/mapAdsToSlides";


// export const mapAdsToSlides = (ads: Advertisement[], locale: "en" | "ar") => {
//   return ads.map((ad) => ({
//     id: ad.id,
//     category: "Featured",
//     title: ad.title[locale] ?? "",
//     subtitle: "",
//     description: ad.description[locale] ?? "",
//     buttonLabel: "View Now",
//     image: getImageUrl(ad.banner?.[locale].url) ?? bannerProduct,
//     url: ad.url,
//   }));
// };

export default function FooterBanner({ ads }: { ads: Advertisement[] | null }) {
  const t = useTranslations();
  const [isDark, setIsDark] = useState(false);
  const locale = useLocale();
  const router = useRouter();
const FALLBACK_SLIDES = [
  {
    id: "fallback-1",
    category: t("watch"),
    title: t("sell_watch"),
    subtitle: t("millions_of_buyers"),
    description:t("sell_watch_desc"),
    buttonLabel: t("post_a_listing"),
    image: bannerProduct,
    url: "/listing/create",
  },
];

  useEffect(() => {
    const checkDarkMode = () => {
      setIsDark(document.documentElement.classList.contains("dark"));
    };

    checkDarkMode();

    const observer = new MutationObserver(checkDarkMode);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });

    return () => observer.disconnect();
  }, []);

  if (ads === null) {
    return null;
  }

  const bannerSlides =
    ads.length > 0
      ? mapAdsToSlides(ads, locale as "en" | "ar",t)
      : FALLBACK_SLIDES;

  return (
    <div className="pt-5 pb-7.5 px-6 max-md:pb-4 FooterBanner">
      <div className="max-w-w1660 mx-auto">
        <div
          className="relative w-full bg-cover bg-top overflow-hidden rounded-lg transition-all duration-300 max-lg:bg-left"
          style={{
            backgroundImage: `url(${
              isDark ? bannerImageDark.src : bannerImage.src
            })`,
          }}
        >
          <div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-transparent dark:from-darkbg/60 dark:via-darkbg/30 dark:to-transparent"></div>
          <Swiper
            className="custom-pagenation h-full"
            modules={[Navigation, Pagination, Autoplay]}
            spaceBetween={0}
            slidesPerView={1}
            pagination={{
              clickable: true,
              dynamicBullets: true,
            }}
            navigation={false}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            loop={true}
            speed={800}
            dir="ltr"
          >
            {bannerSlides.map((slide) => (
              <SwiperSlide key={slide.id} className="!h-auto">
                <div className="relative z-10 grid grid-cols-2 items-center p-6 lg:p-7 max-lg:grid-cols-1 gap-5 rtl:grid-flow-row-dense">
                  <div className="text-white max-w-[700px] order-1 rtl:order-2 rtl:text-right">
                    <div>
                      <p className="text-white font-semibold text-sm mb-2.5 flex items-center gap-2 rtl:justify-end">
                        <span className="inline-block w-6 h-0.5 bg-white"></span>
                        {slide.category}
                      </p>
                      <h1 className="font-semibold text-4xl max-md:text-2xl max-lg:text-3xl line-clamp-3">
                        {slide.title} <br />
                        <span>{slide.subtitle}</span>
                      </h1>
                      <p className="mt-5 text-base line-clamp-2 max-md:mt-3"
                        dangerouslySetInnerHTML={{ __html: slide?.description }}
                       />
                       
                      <Button
                        onClick={() => {
                          router.push(slide.url);
                        }}
                        className="mt-10 md:mt-10 bg-white !text-black hover:!text-white max-md:mt-7 dark:!text-white rtl:ml-auto rtl:mr-0"
                        variant="secondary"
                        label={slide.buttonLabel}
                      />
                    </div>
                  </div>
                  <div className="banner-product text-center pl-20 max-lg:pl-0 order-2 rtl:order-1 rtl:pr-20 rtl:max-lg:pr-0">
                    <Image
                      src={slide.image}
                      alt={`${slide.category} Banner`}
                      width={500}
                      height={300}
                      className="max-w-[300px] m-auto text-center h-auto object-cover max-md:max-w-[200px]"
                    />
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </div>
    </div>
  );
}