"use client";

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

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;
};

export default function OfferDetail() {
  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(() => {
    if (!id) return; // Prevent API call if id is not available

    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 {
        const response = await axios.get(`/offers/${id}`, { params });

        const rawProducts =
          response?.data?.data?.products || response?.data?.data || [];
        const products = Array.isArray(rawProducts)
          ? rawProducts
          : Object.values(rawProducts);
        setPagination((current) => ({
          ...current,
          totalCount: response?.data?.data?.count_products,
        }));

        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);
      }
    };

    fetchOfferProductsData();
  }, [id, pagination?.currentPage, pagination?.pageSize]);

  // if (!id) return <p>Loading...</p>;
   

  return (
    <div className=" pt-[2rem] p-6">
      <div className="">
        {loading ? (
          <ProductSkeleton />
        ) : offerProducts.length === 0 ? (
          <NoItem />
        ) : (
          <div className="flex flex-wrap justify-center max-[667px]:justify-center gap-5">
            <Product products={offerProducts} />
          </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-[1080/381] sm:aspect-[1080/281]   my-[50px]">
        <Image
          src="/images/brands-img.png"
          alt="brands"
          fill
          //sizes="100vw"
          //className="object-cover"
          loading="lazy"
        />
      </div>
    </div>
  );
}
function dispatch(arg0: { type: string; payload: string }) {
  throw new Error("Function not implemented.");
}