import { useStore } from '../hooks/useStore';
import { Link } from 'react-router-dom';

import viewAll from '../assets/view-all.gif';

function Category() {
    const { dataCategory } = useStore();

    // Group categories
    const parents = dataCategory.filter((item) => item.level === 0 && item.isActive);

    // Helper to get children for a parent
    const getChildren = (parentId) => {
        return dataCategory.filter((item) => item.parentId === parentId && item.isActive);
    };

    return (
        <div className="py-8 container mx-auto px-4">
            {parents.map((parent) => {
                const children = getChildren(parent._id);
                // Chỉ lấy những category con còn nick available
                const availableChildren = children.filter((child) => (child.productCount || 0) > 0);

                // Ẩn luôn cả section cha nếu không có con nào còn hàng
                if (availableChildren.length === 0) return null;

                return (
                    <div key={parent._id} className="mb-12 last:mb-0">
                        <div className="text-center mb-6">
                            <h2 className="text-2xl md:text-3xl font-bold text-orange-500 uppercase inline-block border-b-4 border-orange-500 pb-2">
                                KHO ACC {parent.nameCategory}
                            </h2>
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                            {availableChildren.map((child) => (
                                <div
                                    key={child._id}
                                    className="rounded-lg bg-white dark:bg-black-500 border border-orange-500 hover:shadow-sm hover:shadow-primary-400 border-image-card"
                                >
                                    <div className="relative aspect-[16/9] overflow-hidden">
                                        <img
                                            src={
                                                child.image
                                                    ? `${child.image}`
                                                    : 'https://placehold.co/600x400?text=No+Image'
                                            }
                                            alt={child.nameCategory}
                                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 rounded-lg"
                                        />
                                    </div>

                                    <div className="p-4 flex flex-col items-center gap-2 flex-grow">
                                        <h3 className="text-lg font-bold text-gray-800 text-center uppercase">
                                            {child.nameCategory}
                                        </h3>

                                        <div className="text-sm font-semibold">
                                            Còn{' '}
                                            <span className="text-red-600 font-bold">{child.productCount || 0}</span>{' '}
                                            Nick
                                        </div>
                                    </div>

                                    <div className="px-4 pb-4 mt-auto">
                                        <Link to={`/tai-khoan/${child.slug}`} className="flex justify-center">
                                            <img src={viewAll} alt="" />
                                        </Link>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                );
            })}
        </div>
    );
}

export default Category;
