shop-front/src/components/CategoryModal.tsx

'use client'
import { FC, useState } from 'react'
import { ArrowLeft2 } from 'iconsax-react'
import { useRouter } from 'next/navigation'

type Props = {
    isOpen: boolean
    onClose: () => void
}

const CategoryModal: FC<Props> = ({ isOpen, onClose }) => {
    const router = useRouter()
    const [selectedMainCategory, setSelectedMainCategory] = useState<number>(0)
    const [expandedSubcategory, setExpandedSubcategory] = useState<string | null>(null)

    // Main categories for the left column
    const mainCategories = [
        { icon: '🏪', title: 'سوپر مارکت ارگانیک' },
        { icon: '🍞', title: 'خانه نان و شیرینی سالم' },
        { icon: '🍎', title: 'بوفه رژیم‌های خاص' },
        { icon: '💪', title: 'بوفه سبک زندگی' },
        { icon: '🌿', title: 'عطاری سلامت' },
        { icon: '🎁', title: 'بوفه هدایا و سوغات' }
    ]

    // Subcategories for each main category
    const categorySubcategories = {
        'سوپر مارکت ارگانیک': [
            { title: 'ارگانیک گواهی‌دار', hasChildren: false },
            { title: 'روغن های سالم', hasChildren: true },
            { title: 'چاشنی سلامت', hasChildren: true },
            { title: 'صبحانه سالم', hasChildren: false },
            { title: 'نوشیدنی سالم', hasChildren: false },
            { title: 'آرایشی', hasChildren: false },
            { title: 'بهداشتی', hasChildren: false },
            { title: 'تازه خوری', hasChildren: false },
            { title: 'حبوبات و غلات', hasChildren: false },
            { title: 'تنقلات', hasChildren: false },
            { title: 'چای و دمنوش', hasChildren: false },
            { title: 'قهوه', hasChildren: false },
            { title: 'قند و شکر', hasChildren: false }
        ],
        'خانه نان و شیرینی سالم': [
            { title: 'نان سنتی', hasChildren: false },
            { title: 'نان صنعتی', hasChildren: false },
            { title: 'شیرینی', hasChildren: false },
            { title: 'کیک و کلوچه', hasChildren: false }
        ],
        'بوفه رژیم‌های خاص': [
            { title: 'رژیم کتو', hasChildren: false },
            { title: 'رژیم وگان', hasChildren: false },
            { title: 'بدون گلوتن', hasChildren: false }
        ],
        'بوفه سبک زندگی': [
            { title: 'ورزشی', hasChildren: false },
            { title: 'لاغری', hasChildren: false },
            { title: 'سالمندان', hasChildren: false }
        ],
        'عطاری سلامت': [
            { title: 'گیاهان دارویی', hasChildren: false },
            { title: 'عسل طبیعی', hasChildren: false },
            { title: 'دمنوش', hasChildren: false }
        ],
        'بوفه هدایا و سوغات': [
            { title: 'هدایا', hasChildren: false },
            { title: 'سوغات', hasChildren: false },
            { title: 'بسته بندی ویژه', hasChildren: false }
        ]
    }

    // Third level subcategories (for items that expand)
    const thirdLevelCategories = {
        'روغن های سالم': [
            { icon: '🫒', title: 'روغن زیتون پیوست و مو' },
            { icon: '🌻', title: 'روغن ماساژ' },
            { icon: '🥥', title: 'روغن های خوراکی' }
        ],
        'چاشنی سلامت': [
            { icon: '🥒', title: 'ترشی' },
            { icon: '🥫', title: 'رب ها' },
            { icon: '🍯', title: 'سس ها' },
            { icon: '🥬', title: 'سبزیجات خشک' },
            { icon: '🌶️', title: 'ادویه' },
            { icon: '🍎', title: 'سرکه' },
            { icon: '🫒', title: 'زیتون' }
        ]
    }

    const handleMainCategoryClick = (index: number) => {
        setSelectedMainCategory(index)
        setExpandedSubcategory(null)
    }

    const handleSubcategoryClick = (subcategory: { title: string; hasChildren: boolean }) => {
        if (subcategory.hasChildren && thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories]) {
            setExpandedSubcategory(expandedSubcategory === subcategory.title ? null : subcategory.title)
        } else {
            router.push(`/products/${subcategory.title}`)
            onClose()
        }
    }

    if (!isOpen) return null

    const currentMainCategory = mainCategories[selectedMainCategory]
    const currentSubcategories = categorySubcategories[currentMainCategory.title as keyof typeof categorySubcategories] || []

    return (
        <div className="fixed top-[120px] left-0 right-0 bottom-0 bg-white z-40 md:hidden">
            <div className="flex h-full overflow-hidden">
                {/* Left Column - Main Categories */}
                <div className="w-28 bg-gray-100 overflow-y-auto">
                    <div className="p-2 space-y-2">
                        {mainCategories.map((category, index) => (
                            <div key={index}>
                                <div
                                    className={`flex flex-col items-center text-center p-2 cursor-pointer rounded-lg transition-colors ${index === selectedMainCategory ? 'bg-white shadow-sm' : 'hover:bg-gray-200'
                                        }`}
                                    onClick={() => handleMainCategoryClick(index)}
                                >
                                    <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center mb-1 shadow-sm">
                                        <span className="text-lg">{category.icon}</span>
                                    </div>
                                    <span className="text-xs text-gray-800 leading-tight text-center">
                                        {category.title}
                                    </span>
                                </div>
                                {index < mainCategories.length - 1 && (
                                    <div className="border-b border-gray-200 mx-1" />
                                )}
                            </div>
                        ))}
                    </div>
                </div>

                {/* Right Column - Subcategories */}
                <div className="flex-1 bg-white overflow-y-auto">
                    <div className="px-4 py-4">
                        {/* Special Categories */}
                        <div className="space-y-1 mb-4">
                            <div
                                className="py-3 cursor-pointer hover:bg-gray-50 transition-colors"
                                onClick={() => {
                                    router.push('/products')
                                    onClose()
                                }}
                            >
                                <span className="text-primary font-medium text-sm">همه محصولات سوپر مارکت ارگانیک</span>
                            </div>
                            <div
                                className="py-3 cursor-pointer hover:bg-gray-50 transition-colors"
                                onClick={() => {
                                    router.push('/products/organic')
                                    onClose()
                                }}
                            >
                                <span className="text-gray-800 font-medium text-sm">ارگانیک گواهی‌دار</span>
                            </div>
                        </div>

                        {/* Subcategories List */}
                        <div>
                            {currentSubcategories.map((subcategory, index) => (
                                <div key={index}>
                                    <div
                                        className="flex items-center justify-between py-3 cursor-pointer hover:bg-gray-50 transition-colors"
                                        onClick={() => handleSubcategoryClick(subcategory)}
                                    >
                                        <span className="text-gray-800 text-sm">{subcategory.title}</span>
                                        {subcategory.hasChildren && (
                                            <ArrowLeft2 size={16} color="#666" />
                                        )}
                                    </div>

                                    {/* Expanded third level categories */}
                                    {expandedSubcategory === subcategory.title && thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories] && (
                                        <div className="mt-2 mb-4 p-4 bg-gray-50 rounded-lg">
                                            <div className="text-sm text-primary mb-3 font-medium">
                                                همه محصولات {subcategory.title}
                                            </div>
                                            <div className="grid grid-cols-2 gap-4">
                                                {thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories].map((item, itemIndex) => (
                                                    <div
                                                        key={itemIndex}
                                                        className="flex flex-col items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
                                                        onClick={() => {
                                                            router.push(`/products/${item.title}`)
                                                            onClose()
                                                        }}
                                                    >
                                                        <div className="w-14 h-14 bg-white rounded-full flex items-center justify-center mb-3 border border-gray-200">
                                                            <span className="text-xl">{item.icon}</span>
                                                        </div>
                                                        <span className="text-sm text-gray-800 text-center leading-tight font-medium">
                                                            {item.title}
                                                        </span>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    )}

                                    {index < currentSubcategories.length - 1 && (
                                        <div className="border-b border-gray-100" />
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CategoryModal