"use client";
import {
  Suspense,
  lazy,
  useEffect,
  useState,
  useRef,
  Key,
  useCallback,
} from "react";
import { useSearchParams, useRouter, usePathname } from "next/navigation";
import Image from "next/image";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/navigation";
import "swiper/css";
import { Navigation } from "swiper/modules";
import SwiperCore from "swiper";
import Cookies from "js-cookie";
import { AWS_CDN_URL } from "@/utils/staticValues";
import FabricFlipCard from "./fabricFlipCard";
const FabricFilters = lazy(
  () => import("@/app/components/fabric/fabricFilter"),
);

const getIdealIconsPath = (iconImg: string) => {
  const cleanedPath = iconImg.toLowerCase().replace(/[^a-z0-9]/g, "");
  return `/fabric/icon-ideal-${cleanedPath}.png`;
};

export default function FabricSection({
  fabricList,
  family,
}: {
  fabricList: any[];
  family: any;
}) {
  const [filterVisible, setFilterVisible] = useState<boolean>(false);
  const searchQueryString = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const showFilter = () => {
    setFilterVisible(true);
  };

  const toggleFilter = () => {
    setFilterVisible((prev) => !prev);
  };

  const hideFilter = () => {
    setFilterVisible(false);
  };

  const [flippedId, setFlippedId] = useState<number | null>(null);

  const handleFlip = (id: number) => {
    setFlippedId((prev) => (prev === id ? null : id));
  };

  //START CODE FOR SWIPER ---------------------------------

  const swiperRef = useRef<SwiperCore | null>(null);
  const [isBeginning, setIsBeginning] = useState(true);
  const [isEnd, setIsEnd] = useState(false);
  const [isClient, setIsClient] = useState(false);

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

  const handleSwiperInit = (swiper: SwiperCore) => {
    swiperRef.current = swiper;
    setIsBeginning(swiper.isBeginning);
    setIsEnd(swiper.isEnd);
  };

  const handleSlideChange = () => {
    const swiper = swiperRef.current;
    if (swiper) {
      setIsBeginning(swiper.isBeginning);
      setIsEnd(swiper.isEnd);
    }
  };
  const handleFabricCocreation = useCallback(
    async (fabric_id: any) => {
      try {
        // Use cached API route instead of direct external API call
        const response = await fetch(`/api/fabrics/co-creation/${fabric_id}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
          cache: "force-cache",
          next: { revalidate: 300 }, // 5 minutes
        });

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

        const result = await response.json();

        if (!result.success || !result.data) {
          throw new Error("Failed to create co-creation session");
        }

        sessionStorage.setItem("session_id", result.data.session_id);
        const token = Cookies.get("token");

        if (!token && typeof window !== "undefined") {
          router.push(
            `/auth/login?redirect=${encodeURIComponent(result.data.url)}`,
          );
        } else {
          window.location.href = result.data.url;
        }
      } catch (error) {
        console.error("Error creating fabric co-creation:", error);
      }
    },
    [router],
  );

  const baseStyle =
    "absolute flex items-center top-5 justify-center z-10 -translate-y-1/2 p-2 text-black transition";

  //END CODE FOR SWIPER ---------------------------------
  // --- UPDATED SEARCH INPUT HANDLER ---
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const query = e.target.value.trim();
    const params = new URLSearchParams(searchQueryString.toString());

    if (query.length >= 2) {
      params.set("q", query);
    } else {
      params.delete("q");
    }

    // Update URL without scrolling or reloading page
    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
  };

  return (
    <div>
      <div className="wrapper">
        <div className="relative flex flex-col gap-2">
          <div className="flex w-full flex-col">
            <h1>The {family?.name} archive</h1>
          </div>
          <div className="flex flex-col">
            <div className="sticky top-12 z-40">
              <div className="items-centern mob-noise relative z-20 flex flex-row justify-between bg-gray-100 py-4 align-middle">
                <form
                  className="flex flex-row items-center gap-2 border-b-1 py-2 align-middle"
                  onSubmit={(e) => e.preventDefault()}
                >
                  <span className="relative top-0.5">
                    <i className="icon-[iconamoon--search]"></i>
                  </span>
                  <input
                    type="search"
                    placeholder="Search"
                    defaultValue={searchQueryString.get("q") || ""}
                    onChange={handleSearchChange}
                  />
                </form>
                <div className="relative">
                  <div
                    className="flex cursor-pointer flex-row items-center gap-1 py-2 align-middle"
                    onClick={toggleFilter}
                  >
                    <span className="font-medium">Filter</span>{" "}
                    <i className="icon-[fluent--filter-16-filled]"></i>
                  </div>
                  {filterVisible && (
                    <div className="absolute right-0 w-80 border-1 bg-white p-8">
                      <div className="flex flex-col gap-2">
                        <div className="flex w-full flex-row items-center justify-between align-middle">
                          <div className="text-xs font-medium uppercase">
                            Filters
                          </div>
                          <div
                            onClick={hideFilter}
                            className="cursor-pointer py-2"
                          >
                            <span>
                              <i className="icon-[mi--close]"></i>
                            </span>
                          </div>
                        </div>
                        <div className="flex flex-col gap-4">
                          <Suspense fallback={<div>Loading filters...</div>}>
                            <FabricFilters
                              totalResults={
                                (fabricList && fabricList?.length) || 0
                              }
                            />
                          </Suspense>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="wrapper">
        <div className="flex flex-col gap-4">
          <div className="flex w-full flex-col">
            {fabricList.length === 0 ? (
              <div className="flex flex-col">
                <div className="mx-auto flex w-full flex-col items-center justify-center gap-1 py-20 text-center align-middle md:w-1/2">
                  <h4>Nothing here yet.</h4>
                  <p className="text-sm">
                    It looks like there are no results based on your current
                    selection. Try a different filter.
                  </p>
                </div>
              </div>
            ) : (
              isClient && (
                <Swiper
                  modules={[Navigation]}
                  navigation={{
                    nextEl: ".custom-next",
                    prevEl: ".custom-prev",
                  }}
                  slidesPerView="auto"
                  spaceBetween={10}
                  className="fabricCardSwiper"
                  onSwiper={handleSwiperInit}
                  onSlideChange={handleSlideChange}
                >
                  {fabricList &&
                    fabricList.length > 0 &&
                    fabricList.map((item, index) => (
                      <SwiperSlide
                        key={item.id}
                        virtualIndex={index}
                        style={{ width: "315px" }}
                        className="pt-"
                      >
                        <FabricFlipCard
                          id={item.id}
                          isFlipped={flippedId === item.id}
                          onClick={handleFlip}
                          front={
                            <div
                              title="Click to more details"
                              className="flex h-full w-full flex-col border-1 border-gray-950/25 bg-gray-100/50 hover:border-gray-950 hover:bg-gray-100"
                            >
                              <div className="flex w-full flex-col">
                                <div className="flex flex-col gap-2 border-b-1 border-gray-950/50 px-5 py-2">
                                  <div className="mt-3 line-clamp-2 flex h-10">
                                    <p className="font-bogart text-xl/5 font-medium">
                                      {item.fabric_display_name}
                                    </p>
                                  </div>
                                  <div className="grid grid-cols-3 items-start gap-1 align-top">
                                    <div className="flex flex-col">
                                      <span className="text-xs/4 font-light text-gray-800">
                                        GSM
                                      </span>
                                      <p className="text-xs/3 font-medium">
                                        {item.gsm}
                                      </p>
                                    </div>
                                    <div className="flex flex-col">
                                      <span className="line-clamp-2 text-xs/4 font-light text-gray-800">
                                        Finish
                                      </span>
                                      <p className="text-xs/3 font-medium">
                                        {item.finish}
                                      </p>
                                    </div>
                                    <div className="flex flex-row items-end justify-end gap-1 align-middle">
                                      {Array.isArray(item.ideal_for) &&
                                        item.ideal_for.length > 0 &&
                                        item.ideal_for
                                          .slice(0, 3)
                                          .map(
                                            (category: {
                                              name: Key | null | undefined;
                                              image: any;
                                            }) => {
                                              // Ensure category.name and category.image are always defined and stable
                                              if (
                                                !category?.name ||
                                                !category?.image
                                              )
                                                return null;
                                              return (
                                                <div
                                                  key={String(category.name)}
                                                  className="flex w-1/4 flex-col items-center justify-center align-middle"
                                                >
                                                  <Image
                                                    src={`${AWS_CDN_URL}/${category.image}`}
                                                    alt={`${String(category.name)} icon`}
                                                    width={256}
                                                    height={256}
                                                    className="img-responsive"
                                                    unoptimized
                                                  />
                                                </div>
                                              );
                                            },
                                          )}
                                    </div>
                                  </div>
                                </div>
                                <div className="flex flex-col p-5">
                                  <div className="border-1 border-gray-950/50">
                                    <Image
                                      loading="lazy"
                                      src={`${AWS_CDN_URL}/${item.fabric_image?.image}`}
                                      alt={
                                        item.fabric_image?.alt_text ||
                                        item.fabric_name
                                      }
                                      width={800}
                                      height={800}
                                      className="img-responsive"
                                    />
                                  </div>
                                </div>
                              </div>
                            </div>
                          }
                          back={
                            <div className="flex h-full w-full flex-col border-1 border-gray-950/50 bg-gray-100 hover:border-gray-950">
                              <div className="flex w-full flex-col">
                                <div className="flex flex-col px-5 py-3">
                                  <div className="line-clamp-2 flex h-14 pt-3">
                                    <p className="font-bogart text-xl/5 font-medium">
                                      {item.fabric_display_name}
                                    </p>
                                  </div>
                                  <div className="scroll-touch flex h-[290px] flex-col gap-2 overflow-hidden overflow-y-auto">
                                    <div className="flex flex-col gap-2 py-2">
                                      <div className="text-sm/4 font-light">
                                        {item.description}
                                      </div>
                                      <div className="mt-2">
                                        <div>
                                          <span className="text-xs/4 font-light text-gray-800">
                                            Ideal for
                                          </span>
                                        </div>
                                        <div className="flex w-full flex-wrap gap-5">
                                          {item.ideal_for.length > 0 &&
                                            item.ideal_for.map(
                                              (category: {
                                                name: Key | null | undefined;
                                                image: any;
                                              }) => (
                                                <div
                                                  key={String(category.name)}
                                                  className="flex w-1/6 flex-col items-center justify-center align-middle"
                                                >
                                                  <Image
                                                    src={`${AWS_CDN_URL}/${category.image}`}
                                                    alt={`${String(category.name)} icon`}
                                                    width={256}
                                                    height={256}
                                                    className="img-responsive"
                                                  />
                                                </div>
                                              ),
                                            )}
                                        </div>
                                      </div>
                                      <div className="grid grid-cols-2 gap-4">
                                        <div className="flex flex-col">
                                          <span className="text-xs/4 font-light text-gray-800">
                                            GSM
                                          </span>
                                          <p className="text-sm/4 font-medium">
                                            {item.gsm}
                                          </p>
                                        </div>
                                        <div className="flex flex-col">
                                          <span className="text-xs/4 font-light text-gray-800">
                                            Composition
                                          </span>
                                          <p className="text-sm/4 font-medium">
                                            {item.composition
                                              ? Object.entries(item.composition)
                                                  .map(
                                                    ([key, value]) =>
                                                      `${key}: ${value}`,
                                                  )
                                                  .join(", ")
                                              : ""}
                                          </p>
                                        </div>
                                        <div className="col-span-2 flex flex-col">
                                          <span className="text-xs/4 font-light text-gray-800">
                                            Finish
                                          </span>
                                          <p className="text-sm/4 font-medium">
                                            {item.finish}
                                          </p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div className="mt-5">
                                    <button
                                      type="button"
                                      className="btn-outline w-full"
                                      onClick={() =>
                                        handleFabricCocreation(item.id)
                                      }
                                    >
                                      Start co-creation
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          }
                        />
                      </SwiperSlide>
                    ))}
                </Swiper>
              )
            )}
          </div>
          {/* Prev Button */}
          <div className="relative mx-auto flex h-10 w-[88%] md:w-[20%]">
            <button
              className={`custom-prev left-0 ${baseStyle} ${
                isBeginning ? "cursor-not-allowed opacity-25" : "opacity-100"
              }`}
              disabled={isBeginning}
            >
              <i
                className="icon-[solar--arrow-left-broken]"
                style={{ width: 24, height: 24 }}
              />
            </button>

            {/* Next Button */}
            <button
              className={`custom-next right-0 ${baseStyle} ${
                isEnd ? "cursor-not-allowed opacity-25" : "opacity-100"
              }`}
              disabled={isEnd}
            >
              <i
                className="icon-[solar--arrow-right-broken]"
                style={{ width: 24, height: 24 }}
              />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}