import { type FC } from 'react'
import { type CategoryTreeNode } from '../types/Types'
import CategoryBreadcrumb from './CategoryBreadcrumb'

type Props = {
    category: CategoryTreeNode | null
    categories: CategoryTreeNode[]
    onNavigate?: (categoryId: string) => void
    className?: string
}

const CategoryInfo: FC<Props> = ({
    category,
    categories,
    onNavigate,
    className = ''
}) => {
    if (!category) {
        return (
            <div className={`text-center py-12 text-gray-500 ${className}`}>
                <div className="mb-6">
                    <div className="w-20 h-20 bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl mx-auto mb-4 flex items-center justify-center">
                        <span className="text-3xl">📁</span>
                    </div>
                    <h3 className="text-lg font-semibold text-gray-600 mb-2">دسته‌ای انتخاب نشده است</h3>
                    <p className="text-sm text-gray-400">برای مشاهده جزئیات، دسته‌ای را انتخاب کنید</p>
                </div>
            </div>
        )
    }

    return (
        <div className={`bg-white rounded-2xl p-6 border border-gray-200 shadow-sm ${className}`}>
            {/* Breadcrumb */}
            <CategoryBreadcrumb
                category={category}
                categories={categories}
                onNavigate={onNavigate}
                className="mb-6 pb-4 border-b border-gray-100"
            />

            <div className="flex items-start gap-5">
                {/* آیکون دسته */}
                {category.icon && (
                    <div className="flex-shrink-0">
                        <img
                            src={category.icon}
                            alt={category.title_fa}
                            className="w-20 h-20 rounded-2xl object-cover border border-gray-200 shadow-sm"
                        />
                    </div>
                )}

                {/* اطلاعات دسته */}
                <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between mb-4">
                        <div>
                            <h3 className="text-xl font-bold text-gray-900 mb-1">
                                {category.title_fa}
                            </h3>
                            <p className="text-sm text-gray-500 font-medium">
                                {category.title_en}
                            </p>
                        </div>

                        {/* نشانگر نوع دسته */}
                        <div className="flex items-center gap-2">
                            <span className={`px-3 py-1.5 rounded-full text-xs font-medium ${category.leaf
                                ? 'bg-green-100 text-green-700 border border-green-200'
                                : 'bg-blue-100 text-blue-700 border border-blue-200'
                                }`}>
                                {category.leaf ? 'دسته نهایی' : 'دسته والد'}
                            </span>
                        </div>
                    </div>

                    {/* توضیحات */}
                    {category.description && (
                        <div className="mb-6">
                            <h4 className="text-sm font-semibold text-gray-700 mb-2">توضیحات</h4>
                            <p className="text-sm text-gray-600 leading-relaxed bg-gray-50 p-3 rounded-lg border border-gray-100">
                                {category.description}
                            </p>
                        </div>
                    )}

                    {/* آمار و اطلاعات */}
                    <div className="grid grid-cols-2 gap-4 mb-6">
                        {category.children.length > 0 && (
                            <div className="bg-blue-50 p-3 rounded-xl border border-blue-100">
                                <div className="text-xs text-blue-600 font-medium mb-1">زیردسته‌ها</div>
                                <div className="text-2xl font-bold text-blue-700">{category.children.length}</div>
                            </div>
                        )}

                        {category.theme && (
                            <div className="bg-purple-50 p-3 rounded-xl border border-purple-100">
                                <div className="text-xs text-purple-600 font-medium mb-1">تم</div>
                                <div className="text-sm font-semibold text-purple-700">{category.theme}</div>
                            </div>
                        )}
                    </div>

                    {/* متغیرها */}
                    {category.variants.length > 0 && (
                        <div className="mb-6">
                            <h4 className="text-sm font-semibold text-gray-700 mb-3">متغیرها</h4>
                            <div className="flex flex-wrap gap-2">
                                {category.variants.map((variant, index) => (
                                    <span
                                        key={index}
                                        className="bg-orange-100 text-orange-700 px-3 py-1.5 rounded-lg text-xs font-medium border border-orange-200"
                                    >
                                        {variant}
                                    </span>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* اطلاعات فنی */}
                    <div className="pt-4 border-t border-gray-100">
                        <div className="grid grid-cols-1 gap-2 text-xs text-gray-500">
                            <div className="flex items-center justify-between">
                                <span>شناسه:</span>
                                <span className="font-mono bg-gray-100 px-2 py-1 rounded text-gray-600">
                                    {category._id.slice(-8)}...
                                </span>
                            </div>
                            <div className="flex items-center justify-between">
                                <span>تاریخ ایجاد:</span>
                                <span className="font-medium">
                                    {new Date(category.createdAt).toLocaleDateString('fa-IR')}
                                </span>
                            </div>
                            <div className="flex items-center justify-between">
                                <span>آخرین بروزرسانی:</span>
                                <span className="font-medium">
                                    {new Date(category.updatedAt).toLocaleDateString('fa-IR')}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CategoryInfo
