"use client";

import Link from "next/link";
import React, { useContext } from "react";
import { backendUrl } from "@/utils/axios";
import Image from "next/image";
import { useCurrency } from "@/app/contexts/currencyContext";
import ProductContext from "@/app/contexts/productContext";
import slugify from "slugify";

export default function ExploreSiddhaMala({ params }) {
  const { products, category } = useContext(ProductContext);
  console.log("URL param:", params.subcategory);
  //console.log("Products ", products);
  const { formatPrice, isLoading } = useCurrency();

  const filteredProducts = products?.filter(
    (product) =>
      slugify(product.product_subcategory?.subcategory_name, {
        lower: true,
      }) === params.subcategory
  );

  console.log("subcategory product are :", filteredProducts);

  const selectedCategory =
    filteredProducts?.length > 0
      ? filteredProducts[0].product_subcategory
      : { category_name: "" };

  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-4">
        <h2 className="text-4xl font-bold text-center text-gray-800 mb-12">
          Explore{" "}
          {selectedCategory ? selectedCategory.category_name : "Products"}
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
          {filteredProducts?.map((product) => {
            // ✅ generate slug for debugging
            const slug = `${slugify(product.product_name, { lower: true })}-${
              product.id
            }`;
            console.log("Generated slug for product:", slug);

            return (
              <div
                key={product.id}
                className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
              >
                <Link href={`/products/${slug}`}>
                  <div className="relative w-full h-64 bg-gray-200">
                    <Image
                      src={`${backendUrl}${product?.images[0]?.image}`}
                      alt={product.product_name}
                      layout="fill"
                      objectFit="cover"
                      className="rounded-t-lg"
                    />
                  </div>
                </Link>
                <div className="p-5">
                  <h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">
                    {product.product_name}
                  </h3>
                  {product.variants?.length > 0 ? (
                    <p className="text-lg font-bold text-green-600">
                      {isLoading
                        ? "Loading..."
                        : formatPrice(
                            Math.min(
                              ...product.variants.map(
                                (variant) => variant.price
                              )
                            )
                          )}
                    </p>
                  ) : (
                    <p className="text-md font-medium text-gray-500">
                      Price on request
                    </p>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}