import { useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { FreeMode, Pagination, Navigation } from "swiper/modules";
import ProductCard from "./ProductCard";
import { useMediaQuery } from "react-responsive";
import Link from "next/link";
import { useTranslations } from 'next-intl';
import Image from "next/image";
import { IoLocationOutline } from "react-icons/io5";

interface ProductSectionProps {
  title: string;
  viewMoreUrl?: string;
  items: any[];
  is_view_more?: any;
  isFeatured?: boolean;
  category?: string;
}

export default function ProductSection({
  title,
  is_view_more,
  viewMoreUrl,
  items,
  isFeatured = false,
  category,
}: ProductSectionProps) {
  const prevRef = useRef(null);
  const nextRef = useRef(null);
  const t = useTranslations();
  const isDesktop = useMediaQuery({ minWidth: 1536 });
  const isLeptop = useMediaQuery({ minWidth: 1280, maxWidth: 1536 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1279 });

  let visibleItems;
  if (isDesktop) {
    visibleItems = items.slice(0, 6);
  } else if (isLeptop) {
    visibleItems = items.slice(0, 5);
  } else if (isTablet) {
    visibleItems = items.slice(0, 4);
  } else {
    visibleItems = items.slice(0, 4); // mobile
  }


  const getViewMoreUrl = () => {
    if (category && category.trim()) {
      if (category === 'fresh-recommendations') {
        return `/products?category=${encodeURIComponent(category.trim())}`
      }
      return `/filters/products?category=${encodeURIComponent(category.trim())}`;
    }
    return "/products";
  };


  return (
    <section className={`dark:bg-background ${isFeatured ? 'bg-gray-50 dark:bg-card' : ''}`}>
      <div className="max-w-w1660 mx-auto relative">
        {is_view_more ? (
          <>
            <div className="flex justify-between items-center mb-5">
              <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
                {title}
              </h2>
              <div className="slider-arrow flex gap-1">
                <button
                  ref={prevRef}
                  className="group bg-white p-2 h-11 w-11 rounded-lg border border-neutrals90 hover:shadow-headerShadow dark:bg-darkbg dark:border-darkborder rtl:rotate-180 max-sm:w-10 max-sm:h-10"
                  aria-label="prev"
                >
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M14.7054 17.2946C15.0947 16.9053 15.095 16.2743 14.7062 15.8846L11.5348 12.7063C11.1453 12.316 11.1453 11.684 11.5348 11.2937L14.7062 8.11538C15.095 7.72569 15.0947 7.09466 14.7054 6.70538C14.3158 6.31581 13.6842 6.31581 13.2946 6.70538L8.70711 11.2929C8.31658 11.6834 8.31658 12.3166 8.70711 12.7071L13.2946 17.2946C13.6842 17.6842 14.3158 17.6842 14.7054 17.2946Z"
                      fill="#64748B"
                      className="transition-colors duration-200 group-hover:fill-primary500 dark:group-hover:fill-white"
                    />
                  </svg>
                </button>

                <button
                  ref={nextRef}
                  className="group bg-white p-2 h-11 w-11 rounded-lg border border-neutrals90 hover:shadow-headerShadow dark:bg-darkbg dark:border-darkborder rtl:rotate-180 max-sm:w-10 max-sm:h-10"
                  aria-label="next"
                >
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M9.29446 17.2946C8.90519 16.9053 8.90484 16.2743 9.29369 15.8846L12.465 12.7063C12.8545 12.316 12.8545 11.684 12.465 11.2937L9.29369 8.11538C8.90484 7.72569 8.90519 7.09466 9.29446 6.70538C9.68403 6.31581 10.3157 6.31581 10.7052 6.70538L15.2927 11.2929C15.6833 11.6834 15.6833 12.3166 15.2927 12.7071L10.7052 17.2946C10.3157 17.6842 9.68403 17.6842 9.29446 17.2946Z"
                      fill="#64748B"
                      className="transition-colors duration-200 group-hover:fill-primary500 dark:group-hover:fill-white"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div className="pb-2">
              <Swiper
                spaceBetween={20}
                // dir="auto"
                modules={[FreeMode, Pagination, Navigation]}
                freeMode={true}
                navigation={{
                  prevEl: prevRef.current,
                  nextEl: nextRef.current,
                }}
                onBeforeInit={(swiper: any) => {
                  swiper.params.navigation.prevEl = prevRef.current;
                  swiper.params.navigation.nextEl = nextRef.current;
                }}
                breakpoints={{
                  320: { slidesPerView: 1 },
                  500: { slidesPerView: 2 },
                  768: { slidesPerView: 3 },
                  991: { slidesPerView: 4 },
                  1200: { slidesPerView: 5 },
                  1540: { slidesPerView: 6 },
                }}
              >
                {items.map((item) => (
                  <SwiperSlide key={item.id} className="pb-8 !h-auto">
                    <ProductCard {...item} />
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>
          </>
        ) : (
          <>
            <div className="flex justify-between items-center border-b border-neutrals100 pb-2.5 mb-5 dark:border-darkborder max-md:mb-4">
              <h2 className="text-base font-semibold text-neutrals800 dark:text-white">
                {title}
              </h2>
              {viewMoreUrl && <Link
                href={getViewMoreUrl()}

                className="text-sm font-semibold text-primary500 dark:text-primary400"
              >
                {t("product_section.view_more")}
              </Link>}
            </div>
            <div className="card-outer grid grid-cols-3 xl:grid-cols-5 2xl:grid-cols-6 gap-5 pb-10 sm-pb-8 max-lg:grid-cols-3 max-md:grid-cols-2 max-[600px]:grid-cols-1 max-md:pb-6 max-lg:pb-7">
              {visibleItems.map((item) => (
                <ProductCard {...item} key={item.id} />
              ))}
            </div>
          </>
        )}
      </div>
    </section>
  );
}