'use client'
import { FC, useState } from 'react'
import { Profile, MessageText, ShoppingCart, HambergerMenu, Home } from 'iconsax-react'
import { useRouter, usePathname } from 'next/navigation'
import CategoryModal from './CategoryModal'
import { useSharedStore } from '@/share/store/sharedStore'
import { useLocalCart } from '@/app/product/hooks/useLocalCart'
import { useGetCart } from '@/app/cart/hooks/useCartData'
import { PRIMARY_COLOR } from '@/config/const'
import ChatbotWidget from '@/app/chatbot/components/ChatbotWidget'

const MobileBottomMenu: FC = () => {
    const router = useRouter()
    const pathname = usePathname()
    const [isCategoryModalOpen, setIsCategoryModalOpen] = useState(false)
    const [isChatbotOpen, setIsChatbotOpen] = useState(false)
    const { isLogin } = useSharedStore()

    // Get cart count based on login status
    const { data: cartData } = useGetCart()
    const { getLocalCartItemsCount } = useLocalCart()
    const cartCount = isLogin
        ? (cartData?.results?.cart?.items_count || 0)
        : getLocalCartItemsCount()

    const handleNavigation = (path: string) => {
        router.push(path)
    }

    const menuItems = [
        {
            icon: Profile,
            label: 'پروفایل',
            path: '/profile',
            onClick: () => handleNavigation(isLogin ? '/profile' : '/auth')
        },
        {
            icon: MessageText,
            label: 'چت',
            path: '/profile/chat',
            onClick: () => setIsChatbotOpen(true)
        },
        {
            icon: ShoppingCart,
            label: 'سبد خرید',
            path: '/cart',
            badge: cartCount,
            onClick: () => handleNavigation('/cart')
        },
        {
            icon: HambergerMenu,
            label: 'منو',
            path: '',
            onClick: () => setIsCategoryModalOpen(!isCategoryModalOpen)
        },
        {
            icon: Home,
            label: 'خانه',
            path: '/',
            onClick: () => handleNavigation('/')
        },
    ]

    return (
        <>
            {/* Mobile Bottom Menu */}
            <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50 md:hidden">
                <div className="flex items-center justify-around py-3 px-2">
                    {menuItems.map((item, index) => {
                        const IconComponent = item.icon
                        const isActive = item.path ? pathname === item.path : false

                        return (
                            <button
                                key={index}
                                onClick={item.onClick}
                                className={`flex flex-col items-center gap-1 p-2 min-w-0 flex-1 ${isActive ? 'text-primary' : 'text-gray-600'
                                    }`}
                            >
                                <div className="relative">
                                    <IconComponent
                                        size={24}
                                        color={isActive ? PRIMARY_COLOR : '#6b7280'}
                                    />
                                    {/* Badge for cart count */}
                                    {item.badge !== undefined && (
                                        <div className="absolute -top-1.5 -right-3 bg-primary text-white text-[10px] font-medium rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1 shadow-sm">
                                            {item.badge}
                                        </div>
                                    )}
                                </div>
                                <span className="text-xs text-center leading-tight">{item.label}</span>
                            </button>
                        )
                    })}
                </div>
            </div>

            {/* Category Modal */}
            <CategoryModal
                isOpen={isCategoryModalOpen}
                onClose={() => setIsCategoryModalOpen(false)}
            />

            {/* Chatbot Widget */}
            <ChatbotWidget
                isOpen={isChatbotOpen}
                onClose={() => setIsChatbotOpen(false)}
            />
        </>
    )
}

export default MobileBottomMenu