import { searchProducts, getImageUrl } from "@/lib/api";
// import { ProductCard } from "@/components/ui/product-card";
import { Pagination } from "@/components/ui/pagination";
import { Suspense } from "react";
import SearchBar from "@/components/search-bar";
import Banner from "@/components/banner";
import { AllProductCard } from "./_components/all-product-card";

interface PageProps {
  searchParams: { search?: string; page?: string };
}

export default async function SearchPage({ searchParams }: PageProps) {
  const query = searchParams.search || "";
  const currentPage = Number(searchParams.page) || 1;

  let productsData;
  let error = null;

  try {
    productsData = query
      ? await searchProducts(query, currentPage)
      : { data: [], current_page: 1, last_page: 1, total: 0 };
  } catch (e) {
    error = "Failed to fetch search results. Please try again.";
    productsData = { data: [], current_page: 1, last_page: 1, total: 0 };
    console.log(e);
  }

  return (
    <div className="bg-white">
      <Banner imageSrc="/images/2.webp" height={400}>
        <div className="text-center text-white w-[600px]">
          <h1 className="text-5xl font-bold mb-4">Search Products</h1>

          <div className="max-w-4xl mx-auto">
            <SearchBar
              variant="large"
              placeholder="Search by product name, description, or category..."
            />
          </div>
        </div>
      </Banner>

      <section id="search-results" className="py-16 text-black">
        <div className="container max-w-7xl mx-auto px-4">
          <Suspense fallback={<p>Loading search results...</p>}>
            {error ? (
              <div className="text-center text-red-600 py-8">{error}</div>
            ) : query ? (
              <>
                <h2 className="text-2xl font-bold mb-8">
                  {productsData.data.length === 0
                    ? `No results found for "${query}"`
                    : `Search results for "${query}" (${productsData.total} ${
                        productsData.total === 1 ? "result" : "results"
                      })`}
                </h2>

                {productsData.data.length > 0 ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    {productsData.data.map((product) => (
                      // <ProductCard
                      //   key={product.id}
                      //   id={product.id.toString()}
                      //   title={product.name}
                      //   description={product.short_description}
                      //   image={getImageUrl(product.image)}
                      //   category={product.category?.name as string}
                      // />
                      <AllProductCard
                        key={product.id}
                        product={product}
                        imageUrl={getImageUrl(product.image)}
                      />
                    ))}
                  </div>
                ) : (
                  <div className="text-center py-12">
                    <p className="text-gray-600 mb-6">
                      We couldn&apos;t find any products matching your search.
                    </p>
                    <p className="text-gray-600">
                      Try using different keywords or browse our{" "}
                      <a
                        href="/products/all"
                        className="text-red-600 hover:underline"
                      >
                        product catalog
                      </a>
                      .
                    </p>
                  </div>
                )}

                {productsData.last_page > 1 && (
                  <div className="mt-12">
                    <Pagination
                      currentPage={productsData.current_page}
                      totalPages={productsData.last_page}
                      onPageChange={() => {}} // This will be handled by the Next.js router
                    />
                  </div>
                )}
              </>
            ) : (
              <div className="text-center py-12">
                <p className="text-gray-600 mb-6">
                  Enter a search term above to find products.
                </p>
                <p className="text-gray-600">
                  Or browse our{" "}
                  <a
                    href="/products/all"
                    className="text-red-600 hover:underline"
                  >
                    product catalog
                  </a>
                  .
                </p>
              </div>
            )}
          </Suspense>
        </div>
      </section>
    </div>
  );
}