"use client";
import Image from "next/image";
import React, { useState, useEffect, useContext } from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import Link from "next/link";
import axios from "axios";
import { backendUrl } from "@/utils/axios";
import slugify from "slugify";
import ProductContext from "@/app/contexts/productContext";

const DEFAULT_IMAGE = "/sidhi-mala/Designer_30.png";

const FaqCard = ({ params }) => {
  const { products } = useContext(ProductContext); // ✅ get products
  const [faq, setFaq] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchFaq = async () => {
      try {
        if (!products || products.length === 0) {
          console.log("❌ Products not loaded yet.");
          return;
        }

        // 1️⃣ Collect all unique subcategories from products
        const subcategories = products.map((p) => p.product_subcategory);

        // 2️⃣ Find subcategory by slug
        const matchedSub = subcategories.find(
          (sub) =>
            slugify(sub?.subcategory_name || "", { lower: true }) ===
            params.subcategory
        );

        console.log("✅ Matched Subcategory for FAQ:", matchedSub);

        if (!matchedSub) {
          console.warn("⚠️ No subcategory found for slug:", params.subcategory);
          setError("Subcategory not found");
          setLoading(false);
          return;
        }

        // 3️⃣ Fetch FAQs using subcategory ID
        const url = `${backendUrl}/products/faq/${matchedSub.category}/`;
        console.log("📡 Fetching FAQ from:", url);

        const faqRes = await axios.get(url);

        console.log("📥 Full FAQ Response:", faqRes);
        console.log("✅ FAQ Data:", faqRes.data);

        setFaq(faqRes.data);
      } catch (err) {
        console.error("❌ FAQ Fetch Error:", err);
        if (err.response) {
          console.error("⚠️ Response Status:", err.response.status);
          console.error("⚠️ Response Data:", err.response.data);
        }
        setError("Failed to fetch FAQs. Please try again later.");
      } finally {
        setLoading(false);
      }
    };

    fetchFaq();
  }, [products, params.subcategory]);

  if (loading)
    return <p className="text-center text-xl mt-10">Loading FAQs...</p>;
  if (error) return <p className="text-center text-red-600 mt-10">{error}</p>;
  if (!faq || faq.length === 0)
    return <p className="text-center text-xl mt-10">No FAQs available.</p>;

  const hasImage = faq.some((item) => item.image !== null);
  const imageToShow = hasImage
    ? `${backendUrl}${faq.find((item) => item.image !== null).image}`
    : DEFAULT_IMAGE;

  return (
    <div className="min-h-screen sm:block hidden bg-[#FFFFFF]">
      <h1 className="sm:pt-14 pb-8 font-serif mt-4 sm:text-6xl text-2xl text-zinc-800 text-center">
        Frequently Asked Questions
      </h1>
      <div className="min-h-[80%] flex">
        <Image
          src={imageToShow}
          height={600}
          width={400}
          alt="FAQ Image"
          className="h-[550px] w-[550px] ml-14"
        />
        <div className="flex-1 p-8">
          {faq.map((item, index) => (
            <Accordion type="single" collapsible className="w-full" key={index}>
              <AccordionItem value={item.question}>
                <AccordionTrigger className="text-xl mb-5 font-semibold text-zinc-900 hover:no-underline">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="text-zinc-700">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          ))}
        </div>
      </div>
      <div className="h-[30vh] sm:block hidden m-9">
        <h2 className="my-6 text-2xl font-semibold w-[350px]">
          Quick Answers to Some Frequently Asked Questions.
        </h2>
        <Link href={"/pages/contact"}>
          <button className="px-4 py-4 border font-semibold border-black">
            Get Support
          </button>
        </Link>
      </div>
    </div>
  );
};

export default FaqCard;