"use client";
import { useEffect, useState, useCallback, useMemo } from "react";
import { useSearchParams } from "next/navigation";
import { AWS_CDN_URL } from "@/utils/staticValues";
import HorizontalDropdownScroller from "../components/common/HorizontalDropdownScroller";
import Image from "next/image";
import Link from "next/link";

interface ProductFilter {
  id: string;
  name: string;
  options: Option[];
  main_item_image: {
    image_url: string;
  };
  design_house: {
    name: string;
  };
  product_name: string;
  price: string;
}

interface SearchResult {
  id: string;
  name: string;
  image: string;
  slug_url: string;
  design_house: string;
  product_name: string;
  price: string;
}

interface Option {
  value: string;
  label: string;
  checked: boolean;
}

export default function CategoryClient() {
  const searchParams = useSearchParams();
  const query = searchParams.get("q");

  const [clearSignal, setClearSignal] = useState(false);
  const [filterOption, setFilterOption] = useState<ProductFilter[]>([]);
  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  // Transform ProductFilter to Item format for HorizontalDropdownScroller
  const transformedFilters = useMemo(() => {
    return filterOption.map((filter, index) => ({
      id: index + 1,
      label: filter.name,
      name: filter.name,
      value: filter.name,
      options: filter.options || [],
    }));
  }, [filterOption]);

  useEffect(() => {
    getPoroudctList();
  }, []);

  const searchProducts = useCallback(async () => {
    setIsLoading(true);
    try {
      // Build query parameters object from all search params
      const queryParams: Record<string, string> = {};

      // Add all search parameters to the query object
      const currentSearchParams = new URLSearchParams(window.location.search);
      currentSearchParams.forEach((value, key) => {
        // Decode URI components to handle encoded characters like %2C (comma)
        queryParams[key] = decodeURIComponent(value);
      });

      // Make API call with all query parameters
      const url = new URL("/api/search", window.location.origin);
      Object.keys(queryParams).forEach((key) => {
        url.searchParams.append(key, queryParams[key]);
      });

      const response = await fetch(url.toString());
      const data = await response.json();

      setSearchResults(data.data?.result || []);
    } catch (error) {
      console.error("Error searching products:", error);
      setSearchResults([]);
    } finally {
      setIsLoading(false);
    }
  }, []);

  // Watch for any changes in search parameters with debouncing
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      const hasSearchParams = Array.from(searchParams.entries()).length > 0;
      console.log(
        "Search params changed:",
        Object.fromEntries(searchParams.entries()),
      );

      // Always call the API, whether there are search params or not
      console.log("Triggering search");
      searchProducts();
    }, 300); // Increased debounce delay to better handle rapid URL changes

    return () => clearTimeout(timeoutId);
  }, [searchParams, searchProducts]);

  async function getPoroudctList() {
    try {
      const response = await fetch(`/api/search/filter`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });

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

      const data = await response.json();

      setFilterOption(data.data?.filter_option);

      return data; // Return the data if needed
    } catch (error) {
      console.error("Error fetching category list:", error);
    }
  }

  const handleApplyFilters = () => {
    // Force refresh search with current parameters
    searchProducts();
  };

  return (
    <div className="mob-noise relative flex flex-col py-12">
      <div className="mob-noise sticky top-12 z-10 bg-gray-100 pt-4 pb-2">
        <div className="flex w-full flex-col">
          <div className="flex flex-col items-center justify-center">
            <HorizontalDropdownScroller
              items={transformedFilters}
              showLabels={false}
              showPrevArrow={false}
              showNextArrow={false}
              clearSignal={clearSignal}
            />
          </div>
          <div className="wrapper">
            <div className="flex flex-row items-center justify-between align-middle">
              <div className="flex flex-col">
                <div>
                  {query && (
                    <div className="text-md/4 font-bogart">
                      <span className="">{searchResults.length}</span> result
                      {searchResults.length !== 1 ? "s" : ""} for{" "}
                      <span className="capitalize">{query}</span>
                    </div>
                  )}
                </div>
                <div>
                  {/* Display active filters */}
                  {Array.from(searchParams.entries()).filter(
                    ([key]) => key !== "q",
                  ).length > 0 && (
                    <div className="text-sm text-gray-700">
                      Applied filters:{" "}
                      {Array.from(searchParams.entries())
                        .filter(([key]) => key !== "q")
                        .map(
                          ([key, value]) =>
                            `${key}: ${decodeURIComponent(value)}`,
                        )
                        .join(" | ")}
                    </div>
                  )}
                </div>
              </div>
              <div className="flex flex-row items-center justify-center gap-4 md:gap-8">
                {/* <button className="btn-link" onClick={handleApplyFilters}>
                  Apply Filters
                </button> */}
                <button
                  className="btn-link"
                  onClick={() => setClearSignal((prev) => !prev)}
                >
                  Clear All
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="wrapper pt-4 pb-25">
        <div className="flex flex-col items-center justify-center">
          {isLoading ? (
            <div className="text-center">Loading search results...</div>
          ) : searchResults.length > 0 ? (
            <>
              {/* <div className="mb-4 text-lg font-medium">
                Found {searchResults.length} result{searchResults.length !== 1 ? 's' : ''}
              </div> */}
              <div className="grid grid-cols-2 gap-4 md:grid-cols-3 md:gap-16 lg:grid-cols-4 xl:grid-cols-5">
                {searchResults.map((product, index) => (
                  <Link
                    key={product.id}
                    href={`/${product.slug_url}`}
                    className="flex flex-col"
                  >
                    <Image
                      src={`${AWS_CDN_URL}/${product.image}`}
                      alt={product.product_name}
                      width={600}
                      height={1000}
                      className="img-responsive"
                    />
                    <p className="flex pt-2 text-xs tracking-wider uppercase">
                      {product.design_house}
                    </p>
                    <div className="mb-5 flex flex-col justify-between pt-4">
                      <p className="font-bogart">${product.price}</p>
                      <p className="pr-2 text-sm/4 capitalize">
                        {product.product_name}
                      </p>
                    </div>
                  </Link>
                ))}
              </div>
            </>
          ) : !isLoading ? (
            <div className="text-center">No results found</div>
          ) : null}
        </div>
      </div>
    </div>
  );
}