import Banner from "@/components/banner";
import { ProductCard } from "@/components/ui/product-card";
import { fetchProductSubcategory, getImageUrl } from "@/lib/api";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ChevronRight } from "lucide-react";

interface PageProps {
  params: { subcategoryId: string };
}

export default async function SubcategoryPage({ params }: PageProps) {
  const subcategoryId = params.subcategoryId;

  try {
    const subcategoryData = await fetchProductSubcategory(subcategoryId);

    if (!subcategoryData) {
      return notFound();
    }

    const { category, products } = subcategoryData;

    return (
      <>
        <Banner imageSrc={getImageUrl(subcategoryData.banner)} height={400}>
          <div className="text-center text-white">
            <h1 className="text-5xl font-bold mb-4">{subcategoryData.name}</h1>
          </div>
        </Banner>

        <section
          id="products-section"
          className="py-16 text-black px-4 md:px-8"
        >
          <div className="container max-w-7xl mx-auto">
            <h2 className="text-3xl font-bold mb-2">Products</h2>
            <div className="flex  gap-2 mb-8">
              <Link
                href="/products"
                className="hover:underline transition-all duration-300"
              >
                Products
              </Link>
              <ChevronRight className="h-4 w-4" />
              <Link
                href={`/products/category/${category.id}`}
                className="hover:underline transition-all duration-300"
              >
                {category.name}
              </Link>
              <ChevronRight className="h-4 w-4" />
              <span>{subcategoryData.name}</span>
            </div>
            {products && products.length > 0 ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                {products.map((product) => (
                  <ProductCard
                    key={product.id}
                    id={product.id.toString()}
                    title={product.name}
                    description={product.short_description}
                    image={getImageUrl(product.image)}
                    category={subcategoryId}
                  />
                ))}
              </div>
            ) : (
              <div className="text-center py-16">
                <p className="text-gray-500 text-lg">
                  No products found in this category.
                </p>
                <Link
                  href={`/products/category/${category.id}`}
                  className="mt-4 inline-block bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg transition-colors"
                >
                  Back to {category.name}
                </Link>
              </div>
            )}
          </div>
        </section>
      </>
    );
  } catch (error) {
    console.log(error);
    return notFound();
  }
}