"use client";

import React, { useState, useEffect, useContext } from "react";
import { backendUrl } from "@/utils/axios";
import axios from "axios";
import Image from "next/image";
import { motion } from "framer-motion";
import slugify from "slugify";
import ProductContext from "@/app/contexts/productContext";

const cleanHTML = (html) => {
  if (!html) return "";
  return html.replace(/style="[^"]*color:[^;]*;?"/gi, "");
};

const SubcategoryHero = ({ params }) => {
  const { products, category } = useContext(ProductContext);
  console.log("SubcategoryHero mounted. Params:", params);
  const [selectedSubcategory, setSelectedSubcategory] = useState(null);

  useEffect(() => {
    if (products?.length > 0) {
      const match = products
        .map((p) => p.product_subcategory)
        .find(
          (sub) =>
            slugify(sub?.subcategory_name || "", { lower: true }) ===
            params.subcategory
        );

      console.log("Matched from products:", match);
      setSelectedSubcategory(match || null);
    }
  }, [products, params.subcategory]);

  // Fallbacks
  const fallbackImage = "/placeholder-image.jpg";
  const fallbackDescription =
    "Explore our curated collection of spiritual items designed to enhance your journey of self-discovery and inner peace.";
  const fallbackCategoryName = "Spiritual Essentials";

  return (
    <section className="relative min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex mt-3 justify-center">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          {/* Hero Image */}
          <div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
            <Image
              src={
                selectedSubcategory?.image
                  ? `${backendUrl}${selectedSubcategory.image}`
                  : fallbackImage
              }
              alt={
                selectedSubcategory?.subcategory_name || "Category Background"
              }
              fill
              style={{ objectFit: "cover" }}
              quality={100}
              priority
            />
          </div>

          {/* Hero Text */}
          <div className="text-start flex justify-start flex-col h-full">
            <motion.h1
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-2xl md:text-3xl font-bold text-black mb-4"
            >
              {selectedSubcategory?.subcategory_name || fallbackCategoryName}
            </motion.h1>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="text-black text-sm md:text-base"
              dangerouslySetInnerHTML={{
                __html: cleanHTML(
                  selectedSubcategory?.description || fallbackDescription
                ),
              }}
            />
          </div>
        </div>
      </div>
    </section>
  );
};

export default SubcategoryHero;