"use client";

import React, { useMemo } from "react";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import ProductCard from "@/components/ProductCard";
import useHome from "@/hooks/use-home";
import { BeatLoader } from "react-spinners";

interface RelatedProductsSectionProps {
    categoryIds?: number[];
    currentProductId: number;
    categoryName?: string; // Optional: category name to match products from same section
    className?: string;
}

import { useAppDispatch } from "@/store/hooks";
import { addToCart, setCartOpen } from "@/store/slices/cart-slice";
import { mapProductFromApi } from "@/lib/mappers/product-mapper";
import toast from "react-hot-toast";

export default function RelatedProductsSection({
    categoryIds = [],
    currentProductId,
    categoryName,
    className,
}: RelatedProductsSectionProps) {
    const dispatch = useAppDispatch();
    const t = useTranslations("product-details");
    const { data, loading } = useHome();

    const handleAddToCart = async (productId: number) => {
        try {
            await dispatch(addToCart({ productId, productQTY: 1 })).unwrap();
            toast.success("تمت الإضافة إلى السلة");
            dispatch(setCartOpen(true));
        } catch (error: any) {
            toast.error(error?.message || "Failed to add to cart");
            throw error;
        }
    };

    // Extract homeSections from data (same pattern as home page)
    const homeSections = data?._raw?.homeSections || data?.homeSections || [];

    // Get related products from the same category section
    const relatedProducts = useMemo(() => {
        if (!homeSections || homeSections.length === 0) return [];

        // Find products from category sections
        let allProducts: any[] = [];

        // Strategy 1: If categoryName is provided, find that specific section
        if (categoryName) {
            const matchingSection = homeSections.find(
                (section: any) =>
                    section.type === 'category' &&
                    (section.data?.categoryName === categoryName || section.label === categoryName)
            );
            if (matchingSection?.data?.productList) {
                allProducts = matchingSection.data.productList;
            }
        }

        // Strategy 2: Collect products from all category sections if no categoryName match
        if (allProducts.length === 0) {
            homeSections.forEach((section: any) => {
                if (section.type === 'category' && section.data?.productList && Array.isArray(section.data.productList)) {
                    allProducts = [...allProducts, ...section.data.productList];
                }
            });
        }

        // Filter out the current product and limit to 4
        return allProducts
            .filter((p: any) => {
                const productId = p.entityId || p.product_id || p.id;
                return productId !== currentProductId;
            })
            .slice(0, 4);
    }, [homeSections, currentProductId, categoryName]);

    if (loading) {
        return (
            <div className={cn("py-8 flex justify-center", className)}>
                <BeatLoader color="var(--color-primary)" size={12} />
            </div>
        );
    }

    if (relatedProducts.length === 0) {
        return null;
    }

    return (
        <div className={cn("py-8", className)}>
            {/* Section Title */}
            <h2 className="text-xl md:text-2xl font-bold text-[var(--color-black)] font-cairo mb-6">
                {t("related-products") || "منتجات ذات صلة"}
            </h2>

            {/* Products Grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
                {relatedProducts.map((rawProduct: any, index: number) => {
                    const product = mapProductFromApi(rawProduct);
                    return (
                        <ProductCard
                            key={product.id || index}
                            product={product}
                            onAddToCart={handleAddToCart}
                        />
                    );
                })}
            </div>
        </div>
    );
}