"use client";

import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "@/store/store";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Pagination, Autoplay } from "swiper/modules";
import { useRouter } from "next/navigation";
import { getValidImage } from "@/lib/utils";

interface HomePageBannerProps {
  type?: string;
}

const HomePageBanner: React.FC<HomePageBannerProps> = ({ type = "food" }) => {
  const router = useRouter();

  const selectedAddress = useSelector(
    (state: RootState) => state.user.profile.selectedAddress
  );

  const [bannerList, setBannerList] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  const getBanners = async () => {
    try {
      setLoading(true);
      const params = new URLSearchParams({
        type: type,
      });

      if (selectedAddress?.lat && selectedAddress?.long) {
        params.append("lat", String(selectedAddress.lat));
        params.append("long", String(selectedAddress.long));
      }

      const res = await apis.Banner.getHomePageBanner(params.toString());
      const banners = res?.banners || res?.data?.banners || res?.data || (Array.isArray(res) ? res : []);
      setBannerList(Array.isArray(banners) ? banners : []);
    } catch (error) {
      console.error("Error fetching homepage banners:", error);
      setBannerList([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getBanners();
  }, [type, selectedAddress]);

  if (!loading && bannerList.length === 0) {
    return null;
  }

  return (
    <div className="max-w-7xl mx-auto my-6 px-4 sm:px-6 lg:px-8">
      {loading ? (
        <div className="w-full h-[180px] sm:h-[250px] md:h-[300px] lg:h-[350px] bg-gray-200 rounded-2xl animate-pulse" />
      ) : (
        <Swiper
          slidesPerView={1}
          spaceBetween={16}
          pagination={{ clickable: true }}
          autoplay={{ delay: 4000, disableOnInteraction: false }}
          modules={[Pagination, Autoplay]}
          className="w-full h-[180px] sm:h-[250px] md:h-[300px] lg:h-[350px] rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
        >
          {bannerList.map((banner) => {
            const restaurantId =
              typeof banner?.restaurant_id === "object"
                ? banner?.restaurant_id?._id
                : banner?.restaurant_id;

            const bannerType = banner?.type || type;
            const targetUrl = restaurantId
              ? bannerType !== "food"
                ? `/grocery/${restaurantId}?type=${bannerType}`
                : `/restaurant?id=${restaurantId}`
              : null;

            const imageUrl = getValidImage(banner?.banner_url);

            return (
              <SwiperSlide key={banner._id}>
                <div
                  className={`relative w-full h-[180px] sm:h-[250px] md:h-[300px] lg:h-[350px] rounded-2xl overflow-hidden ${
                    targetUrl ? "cursor-pointer group" : ""
                  }`}
                  onClick={() => {
                    if (targetUrl) {
                      const bannerId = banner?._id || banner?.id;
                      if (bannerId) {
                        apis.Banner.trackBannerView(bannerId).catch((error: any) => {
                          console.error("Error tracking banner view:", error);
                        });
                      }
                      router.push(targetUrl);
                    }
                  }}
                >
                  <img
                    src={imageUrl}
                    alt={banner?.title || "Home Banner"}
                    className="object-cover w-full h-full rounded-2xl group-hover:scale-[1.02] transition-transform duration-500"
                  />

                  {(banner?.title || banner?.description) && (
                    <div className="absolute inset-0 bg-gradient-to-r from-black/70 via-black/30 to-transparent flex items-center px-6 sm:px-12 md:px-16">
                      <div className="max-w-[85%] sm:max-w-[60%]">
                        {banner?.title && (
                          <h3 className="text-white text-xl sm:text-3xl md:text-4xl font-bold tracking-tight drop-shadow-md">
                            {banner.title}
                          </h3>
                        )}
                        {banner?.description && (
                          <p className="text-gray-200 text-xs sm:text-sm md:text-base mt-2 line-clamp-2 drop-shadow">
                            {banner.description}
                          </p>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              </SwiperSlide>
            );
          })}
        </Swiper>
      )}
    </div>
  );
};

export default HomePageBanner;