"use client";

import { useEffect, useState } from "react";
import TopOffers from "@/components/offer";
import Brands from "@/components/brands";
import ProductList from "@/components/product-list";
import { useParams, usePathname } from "next/navigation";
import axios from "@/utils/axios-config";
import Image from "next/image";
import Product from "@/components/product/product";
import { useLocale, useTranslations } from "next-intl";
import ProductSkeleton from "@/components/skeletons/skeleton";
import NoItem from "@/components/no-items";
import { Pagination } from "antd";

type offer = {
  id: number;
  title: string;
  image: string;
  free_quantity: number;
  discount_value: number;
  buy_quantity: number;
  discount_type: string;
  type: number;
};
export interface DataType {
  offers: offer[];
  title?: string;
}

type product = {
  id: number;
  image: string;
  name: string;
  sub_category_id: number;
  brand_name: string;
  requires_prescription: number;
  price: string;
  offer_id: null;
  offer_price: string;
  offer_title: string;
  is_favourite: number;
  is_cart: number;
};
function Offers() {
  const [featuredProducts, setFeaturedProducts] = useState<any>([]);

  const { id } = useParams();
  const t = useTranslations();
  const [offerProducts, setOfferProducts] = useState<product[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const pathName = usePathname();
  const locale = useLocale();
  const [pagination, setPagination] = useState({
    pageSize: 24,
    totalCount: 0,
    currentPage: 0,
  });

  useEffect(() => {
    const fetchFeaturedProductsData = async () => {
      try {
        const response = await axios.get("/featured");
        //  console.log(response?.data?.data);
        const data = await response?.data?.data;
        setFeaturedProducts([...data]);
      } catch (err) {}
    };
    fetchFeaturedProductsData();
  }, []);

  /////
  useEffect(() => {
    const fetchOfferProductsData = async () => {
      const params: { [key: string]: string | number } = {};
      if (typeof pagination.currentPage === "number") {
        params.skip = pagination.currentPage * pagination.pageSize;
        params.take = pagination.pageSize;
      }
      try {
        setLoading(true);
        const response = await axios.get(
          `/product-offers?skip=${params?.skip}&take=${params?.take}`
        );
       // console.log("response offer products:", response);
        const products = response?.data?.data || response?.data?.data || [];
        setPagination((current) => ({
          ...current,
          totalCount: response?.data?.count,
        }));

        setOfferProducts(products);
       //// console.log("setOfferProducts:", products);
      } catch (err) {
        setError("Failed to fetch offers.");
        if (err instanceof Error) {
          // dispatch(fetchOffersFailure(err.message));
        } else {
          //dispatch(fetchOffersFailure("An unknown error occurred."));
        }
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
 window.scrollTo(0, 250);
    fetchOfferProductsData();
  }, [pagination?.currentPage, pagination?.pageSize]);

  return (
    <div className="  pt-[10px]">
      <TopOffers />

      {/* <Brands showPagination={false} pageSize={12} /> */}
      {/*offers products*/}
      <div className="container pt-[5px] px-4 mx-auto lg:max-w-[1300px]">
        <div className="">
          <h2 className="text-white bg-primary px-2 w-fit mb-2 rounded-sm bg-opacity-50 text-[14px]  sm:text-[16px]  font-bold ">
            {t("offers-products")}
          </h2>
          {loading ? (
            <ProductSkeleton />
          ) : offerProducts.length === 0 ? (
            //  <NoItem />
             <div className="w-full flex flex-col items-center justify-center text-center p-4 my-5">
                 <div className="w-64 h-auto">
                    <Image
                      src={"/images/no-items.png"}
                      alt={t("No offers Found")}
                      width={365}
                      height={275}
                      className="object-contain"
                    />
                  </div>
            
                  {/* Message */}
                  <p className="text-lg font-semibold text-gray-600 mt-2">
                    {t("No offers Found")}
                  </p>
                </div>
          ) : (
            // <div className="flex flex-wrap justify-stretch max-[667px]:justify-center gap-5">
            <div className="grid grid-cols-1 min-[430px]:grid-cols-2 min-[640px]:grid-cols-3 min-[990px]:grid-cols-4 min-[1080px]:grid-cols-5 min-[1350px]:grid-cols-6 min-[1825px]:grid-cols-7 gap-x-3 gap-y-[50px]"> 
            <Product products={offerProducts} />
            </div>
            // </div>
          )}
        </div>

        {offerProducts?.length > 0 && (
          <Pagination
            //defaultCurrent={1}
            total={pagination.totalCount}
            current={pagination.currentPage + 1}
            pageSize={pagination.pageSize}
            showSizeChanger
            pageSizeOptions={[10, 24, 50, 100]}
            onChange={(page, pageSize) => {
              setPagination((current) => ({
                ...current,
                pageSize,
                currentPage: page - 1,
              }));
            }}
            className={locale === "ar" ? "rtl-pagination" : ""}
          />
        )}

        <div className="relative w-full aspect-[1240/323]   my-[50px]">
          <Image
            src="/images/brands-img.png"
            alt="brands"
            fill
            //sizes="100vw"
            //className="object-cover"
            loading="lazy"
          />
        </div>
      </div>
      {/* <ProductList title={t("Picked For You")} products={featuredProducts} /> */}
    </div>
  );
}

export default Offers;