import React from "react";
import Image from "next/image";
import Button from "../components/common/Button";
import ArrowIcon from "./icons/ArrowIcon";
import HomeBanner from "./HomeBanner";
import { useLocale, useTranslations } from "next-intl";
import { Advertisement } from "../../types/advertisements";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
import { mapAdsToSlides } from "@/lib/utils/mapAdsToSlides";

interface Props {
  middleBanners: {
    large: Advertisement[];
    top: Advertisement[];
    bottom: Advertisement[];
  };
}

function HomeBannerSection({ middleBanners }: Props) {
  const t = useTranslations();
  const locale = useLocale();
  const TOP_FALLBACK_SLIDES = [
    {
      id: "fallback-top-1",
      category: "Furniture",
      title: t("dashboard.home_appliance"),
      subtitle: "",
      description: t("dashboard.fabric"),
      buttonLabel: t("shop_now"),
      image: "/chairs.webp",
      url: "/",
    },
    {
      id: "fallback-top-2",
      category: "Furniture",
      title: t("dashboard.home_appliance"),
      subtitle: "",
      description: t("dashboard.fabric"),
      buttonLabel: t("shop_now"),
      image: "/chairs.webp",
      url: "/",
    },
  ];

  const BOTTOM_FALLBACK_SLIDES = [
    {
      id: "fallback-bottom-1",
      category: "Furniture",
      title: t("dashboard.pro"),
      subtitle: "",
      description: t("dashboard.rupees"),
      buttonLabel: t("shop_now"),
      image: "/buds.webp",
      url: "/",
    },
    {
      id: "fallback-bottom-2",
      category: "Furniture",
      title: t("dashboard.pro"),
      subtitle: "",
      description: t("dashboard.rupees"),
      buttonLabel: t("shop_now"),
      image: "/buds.webp",
      url: "/",
    },
  ];


  const topSlides =
    middleBanners.top?.length > 0
      ? mapAdsToSlides(middleBanners.top, locale as "en" | "ar",t)
      : TOP_FALLBACK_SLIDES;
  const bottomSlides =
    middleBanners.bottom.length > 0
      ? mapAdsToSlides(middleBanners.bottom, locale as "en" | "ar",t)
      : BOTTOM_FALLBACK_SLIDES;


  return (
    <section className="homebanner px-6">
      <div className="max-w-w1660 mx-auto">
        <div className="flex flex-col xl:flex-row gap-6">
          <div className="w-full xl:w-4/6">
            {/* Large */}
            <HomeBanner ads={middleBanners.large} />
          </div>
          <div className="flex flex-col md:flex-row xl:flex-col gap-6 w-full xl:w-[calc(calc(100%-24px)-66.666667%)]">
            {/* Top */} 
            <Swiper
              className="custom-pagination custom-pagination-top w-full h-full"
              modules={[Pagination, Autoplay]}
              spaceBetween={0}
              slidesPerView={1}
              pagination={{ clickable: true }}
              autoplay={{ delay: 50000 }}
              loop
              dir="ltr"
            >
              {topSlides.map((ad:any) => (
                <SwiperSlide key={ad.id} className="!h-full">
                  <div className="bg-primary800 h-full text-white rounded-md p-5 flex flex-col gap-6 sm:gap-0 sm:flex-row sm:items-center sm:justify-between w-full xl:w-full max-lg:pb-10 max-md:min-h-[220px]">
                    <div className="sm:max-w-full max-sm:w-full rtl:text-left w-[calc(100%-160px)]">
                      <p className="text-xs uppercase tracking-wide text-primary100 mb-1 line-clamp-1">
                        {ad.title}
                      </p>

                      <h3 className="text-lg md:text-2xl font-semibold line-clamp-3"
                        dangerouslySetInnerHTML={{ __html: ad?.description}}
                       />
                      <Button
                        label={ad.buttonLabel}
                        variant="primary"
                        href={ad.url}
                        icon={<ArrowIcon />}
                        className="mt-5 inline-flex"
                      />
                    </div>

                    <div className="relative self-end w-40 max-sm:w-full">
                      <Image
                        src={ad.image}
                        alt={ad.title}
                        width={407}
                        height={127}
                        className="object-contain"
                        priority
                      />
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>


            {/* Bottom */}
            <Swiper
              className="custom-pagination custom-pagination-bottom w-full h-full"
              modules={[Pagination, Autoplay]}
              slidesPerView={1}
              spaceBetween={16}
              pagination={{ clickable: true }}
              autoplay={{ delay: 50000 }}
              loop
              dir="ltr"
            >
              {bottomSlides.map((ad:any) => (
                <SwiperSlide key={ad.id} className="!h-full">
                  <div className="bg-neutrals100 xl:h-full text-white rounded-md p-5 gap-5 flex items-center w-full dark:bg-card min-h-[220px] max-lg:pb-10 max-lg:min-h-[240px] max-md:min-h-[220px]">
                    <div className="relative w-32 h-32 sm:w-40 sm:h-40">
                      <Image
                        src={ad.image}
                        alt={ad.title}
                        fill
                        className="object-contain"
                        priority
                      />
                    </div>

                    <div className="w-[calc(100%-160px)] rtl:text-right">
                      <h3 className="text-neutrals800 text-lg md:text-2xl font-semibold mb-3 dark:text-white line-clamp-2">
                        {ad?.title}
                      </h3>

                      <p className="text-primary400 text-base sm:text-lg font-semibold line-clamp-2"
                        dangerouslySetInnerHTML={{ __html: ad?.description }}
                       />

                      <Button
                        label={ad.buttonLabel}
                        variant="secondary"
                        href={ad.url}
                        icon={<ArrowIcon />}
                        className="mt-5 inline-flex"
                      />
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>

          </div>
        </div>
      </div>
    </section>
  );
}

export default HomeBannerSection;