import { type FC } from 'react'
import { Folder2, FolderOpen, DocumentText, Layer } from 'iconsax-react'
import { type CategoryTreeNode } from '../types/Types'

type Props = {
    categories: CategoryTreeNode[]
    className?: string
}

const CategorySummary: FC<Props> = ({ categories, className = '' }) => {
    // محاسبه آمار
    const getStats = () => {
        let totalCategories = 0
        let parentCategories = 0
        let leafCategories = 0
        let maxDepth = 0

        const traverse = (cats: CategoryTreeNode[], depth: number = 0) => {
            cats.forEach(cat => {
                totalCategories++
                maxDepth = Math.max(maxDepth, depth)

                if (cat.children.length > 0) {
                    parentCategories++
                    traverse(cat.children, depth + 1)
                } else {
                    leafCategories++
                }
            })
        }

        traverse(categories)
        return { totalCategories, parentCategories, leafCategories, maxDepth }
    }

    const stats = getStats()

    const summaryItems = [
        {
            icon: <Layer size={24} className="text-blue-500" />,
            title: 'کل دسته‌ها',
            value: stats.totalCategories,
            color: 'bg-blue-50 text-blue-700'
        },
        {
            icon: <FolderOpen size={24} className="text-green-500" />,
            title: 'دسته‌های والد',
            value: stats.parentCategories,
            color: 'bg-green-50 text-green-700'
        },
        {
            icon: <DocumentText size={24} className="text-purple-500" />,
            title: 'دسته‌های نهایی',
            value: stats.leafCategories,
            color: 'bg-purple-50 text-purple-700'
        },
        {
            icon: <Folder2 size={24} className="text-orange-500" />,
            title: 'عمیق‌ترین سطح',
            value: stats.maxDepth + 1,
            color: 'bg-orange-50 text-orange-700'
        }
    ]

    return (
        <div className={`grid grid-cols-2 lg:grid-cols-4 gap-4 ${className}`}>
            {summaryItems.map((item, index) => (
                <div key={index} className="bg-white rounded-2.5 p-4 border border-gray-200">
                    <div className="flex items-center gap-3">
                        <div className="flex-shrink-0">
                            {item.icon}
                        </div>
                        <div className="min-w-0 flex-1">
                            <p className="text-sm text-gray-600 mb-1">{item.title}</p>
                            <p className={`text-2xl font-bold ${item.color}`}>
                                {item.value}
                            </p>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )
}

export default CategorySummary
