"use client";
import { TextLink } from "@/app/components/button";
import { useParams, useSearchParams } from "next/navigation";
import { Suspense, lazy, useEffect, useState } from "react";
const FabricDetailHero = lazy(
  () => import("@/app/components/fabric/fabricDetailHero"),
);
const FabricDetailInfoBlocks = lazy(
  () => import("@/app/components/fabric/fabricDetailInfoBlocks"),
);
const FabricProducts = lazy(
  () => import("@/app/components/fabric/fabricProducts"),
);
const FabricSection = lazy(
  () => import("@/app/components/fabric/fabricSection"),
);
const KnowTheMaterial = lazy(
  () => import("@/app/components/fabric/knowTheMaterial"),
);

interface FabricFamily {
  id?: number;
  name?: string;
  slug?: string;
}

interface FabricDetailsProps {
  params: { slug: string };
  initialData: any;
}

export default function FabricDetails({ params: pageParams, initialData }: FabricDetailsProps) {
  // Only render after the component is mounted on the client
  const [mounted, setMounted] = useState(false);
  const [fabricList, setFabricList] = useState(initialData?.data?.fabric || []);
  const [featureTags, setFeatureTags] = useState(initialData?.data?.tag || []);
  const [products, setProducts] = useState(initialData?.data?.products || []);
  //const [fabricFamily, setFabricFamily] = useState({});
  const [fabricFamily, setFabricFamily] = useState<FabricFamily | null>(initialData?.data?.family || null);
  const [search, setSearch] = useState("");
  const params = useParams();
  const searchParams = useSearchParams();

  const gsmFilter = searchParams.get("gsm");
  const finishedFilter = searchParams.get("finished");
  const ideaForFilter = searchParams.get("ideaFor");
  const colorFilter = searchParams.get("color");
  const hasFilterClick = searchParams.get("hasFilterClick");
  const q = searchParams.get("q");

  const slug = pageParams.slug;

  // Sync search string from URL
  useEffect(() => {
    function handleUrlChange() {
      setSearch(window.location.search);
    }

    window.addEventListener("popstate", handleUrlChange);
    handleUrlChange();

    return () => {
      window.removeEventListener("popstate", handleUrlChange);
    };
  }, []);

  useEffect(() => {
    setMounted(true);
  }, [slug]);

  useEffect(() => {
   
    if (!slug) return;
    
    // If no filters applied, use initial data from server
    const hasAnyFilter = gsmFilter || finishedFilter || ideaForFilter || colorFilter || q || hasFilterClick;
    
    if (!hasAnyFilter) {
      setFabricList(initialData?.data?.fabric || []);
      setFabricFamily(initialData?.data?.family || null);
      setFeatureTags(initialData?.data?.tag || []);
      setProducts(initialData?.data?.products || []);
      return;
    }
    
    async function getProductList() {
      try {
        // Build query parameters
        const queryParams = new URLSearchParams();
        if (gsmFilter) queryParams.append('gsm', gsmFilter);
        if (finishedFilter) queryParams.append('finished', finishedFilter);
        if (ideaForFilter) queryParams.append('ideaFor', ideaForFilter);
        if (colorFilter) queryParams.append('color', colorFilter);
        if (q) queryParams.append('q', q);
        if (hasFilterClick) queryParams.append('hasFilterClick', hasFilterClick);

        // Use cached API route instead of direct external API call
        const response = await fetch(
          `/api/fabrics/${slug}?${queryParams.toString()}`,
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
            },
            cache: 'force-cache',
            next: { revalidate: 900 }, // 15 minutes
          },
        );

        if (!response.ok) {
          throw new Error(`Error: ${response.status} - ${response.statusText}`);
        }

        const data = await response.json();
        setFabricList(data.data?.fabric || []);
        setFabricFamily(data.data?.family || {});
        setFeatureTags(data.data?.tag || []);
        setProducts(data.data?.products || []);
      } catch (error) {
        console.error("Error fetching category list:", error);
      }
    }

    getProductList();
  }, [
    slug,
    gsmFilter,
    finishedFilter,
    ideaForFilter,
    hasFilterClick,
    colorFilter,
    q,
    initialData,
  ]);


  if (!mounted) return null;


  const fabricFamilyName = fabricFamily?.name;
  const fabricFamilyId = fabricFamily?.id;


  return (
    <div className="mob-noise flex flex-col gap-20 py-12 md:gap-25">
      <div className="relative overflow-hidden">
        <div className="absolute -top-[4%] -left-[10%] z-2 h-[88%] w-full -rotate-10 rounded-full bg-radial-[at_98%_50%] from-blue-300 via-green-400 to-yellow-300 to-90% opacity-75 blur-[80px]"></div>
        <div className="wrapper relative z-10">
          <div className="flex flex-col gap-4 py-4 md:gap-8">
            <Suspense>
              <FabricDetailHero fabricFamily={fabricFamily} />
            </Suspense>
            <Suspense>
              <FabricDetailInfoBlocks featureTags={featureTags} />
            </Suspense>
          </div>
        </div>
      </div>
      <Suspense>
        <FabricSection fabricList={fabricList} family={fabricFamily} />
      </Suspense>
      <div className="wrapper">
        <div className="flex flex-col gap-5">
          <div>
            <div className="mt-2 flex flex-row items-center justify-between">
              <h4 className="capitalize">Made using {fabricFamilyName}</h4>
              <TextLink
                id="link_fabric_products"
                href={`/category/?fabric=${fabricFamily?.slug}`}
                label="Explore more designs"
                color="gray"
              />
            </div>
          </div>
          <Suspense>
            <FabricProducts products={products} />
          </Suspense>
        </div>
      </div>
      <Suspense>
        <KnowTheMaterial family={fabricFamily} />
      </Suspense>
    </div>
  );
}