"use client";

import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
import { useQuery } from "@tanstack/react-query";
import ProductCard from "./productCard";
import { useCategory } from "@/zustand/useCategory";
import { useFilter } from "@/lib/filter-zustand";
import { useMemo, useState, useEffect } from "react";
import { useProductPageInfo } from "@/zustand/useProduct";
import { useSubCategory } from "@/zustand/useSubCategory";
import { useTranslations } from "next-intl";
import PaginationLite from "@/components/paginationUI";
import { useCatalog } from "@/zustand/useCatalog";

export default function MainProduct() {
  const t = useTranslations();
  const category = useCategory((s) => s.category);
  const subCategory = useSubCategory((s) => s.subCategory);
  const filter = useFilter((s) => s.filter);
  const getFiltersByType = useFilter((s) => s.getFiltersByType);
  const setProduct = useProductPageInfo((s) => s.setProducts);

  const parentID = useCatalog((state) => state.parentID);

  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    setCurrentPage(1);
  }, [parentID]);

  // ── Filter params ────────────────────────────────────────────────────────
  const queryParams = useMemo(() => {
    const catalog = getFiltersByType("catalog");
    const size = getFiltersByType("size");
    const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
    const sizeParams = size.map((i) => `size=${i.id}`).join("&");
    const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
    setCurrentPage(1);
    return allParams ? `&${allParams}` : "";
  }, [filter]);

  // ── Request URL ──────────────────────────────────────────────────────────
  const requestLink = useMemo(() => {
    const baseLink = category.have_sub_category
      ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
      : parentID
        ? endPoints.product.byCatalogSection({ id: parentID, currentPage })
        : endPoints.product.byCategory({ id: category.id, currentPage });

    return `${baseLink}${queryParams}`;
  }, [
    category.id,
    category.have_sub_category,
    subCategory.id,
    currentPage,
    parentID,
    queryParams,
  ]);

  // ── Query ────────────────────────────────────────────────────────────────
  const { data, isLoading, error } = useQuery({
    queryKey: [
      "products",
      category.id,
      category.have_sub_category,
      subCategory.id,
      parentID,
      queryParams,
      currentPage,
    ],
    queryFn: () => httpClient(requestLink),
    placeholderData: (prev) => prev, // no flicker on pagination
    select: (res) => ({
      results: res?.data?.data?.results ?? [],
      totalPages: res?.data?.data?.total_pages ?? 1,
    }),
  });

  const results = data?.results ?? [];
  const totalPages = data?.totalPages ?? 1;

  // ── Render states ────────────────────────────────────────────────────────
  if (isLoading && !data) {
    return (
      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
        {[1, 2, 3].map((i) => (
          <div key={i} className="h-96 bg-gray-800 animate-pulse rounded-2xl" />
        ))}
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-center text-red-500 py-10">{t("loadingError")}</div>
    );
  }

  if (!results.length) {
    return (
      <div className="text-center text-gray-400 py-10">
        {t("productsNotFound")}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div
        className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${
          isLoading ? "opacity-50 pointer-events-none" : "opacity-100"
        }`}
      >
        {results.map((item: any) => (
          <ProductCard
            key={item.id}
            getProduct={() => setProduct(item)}
            title={item.name}
            image={item?.images?.[0]?.image || ""}
            slug="special_product"
          />
        ))}
      </div>

      {totalPages > 1 && (
        <PaginationLite
          currentPage={currentPage}
          totalPages={totalPages}
          onChange={(p) => setCurrentPage(p)}
        />
      )}
    </div>
  );
}