import { useGetProfile } from '@/app/profile/hooks/useProfileData'
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { PRIMARY_COLOR } from '@/config/const'
import { removeToken, removeRefreshToken } from '@/config/func'
import { User, Heart, MessageText, Logout, SmsNotification, Profile } from 'iconsax-react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'

const Account = () => {

    const { data: profile, isSuccess } = useGetProfile()
    const router = useRouter()

    const handleLogout = async () => {
        await removeToken()
        await removeRefreshToken()
        router.push('/auth')
    }

    const menuItems = [
        {
            id: 'profile',
            title: 'پروفایل کاربری',
            icon: User,
            href: '/profile',
            isActive: false
        },
        {
            id: 'favorites',
            title: 'علاقه‌مندی‌ها',
            icon: Heart,
            href: '/profile/favorite'
        },
        {
            id: 'comments',
            title: 'نظرات من',
            icon: SmsNotification,
            href: '/profile/comments'
        },
        {
            id: 'chat',
            title: 'گفتگو',
            icon: MessageText,
            href: '/profile/chat'
        },
        {
            id: 'logout',
            title: 'خروج از حساب',
            icon: Logout,
            onClick: handleLogout
        }
    ]

    return (
        <Popover>

            <PopoverTrigger asChild>

                <div className='hidden md:flex h-10 border border-border py-3 cursor-pointer px-4 rounded-[12px] items-center gap-2.5'>
                    <Profile size={20} color='#333333' />
                    <div className='text-sm text-[#333333] '>{profile?.results?.info?.fullName ? profile?.results?.info?.fullName : 'حساب کاربری'}</div>
                </div>
            </PopoverTrigger>
            {
                isSuccess && (
                    <PopoverContent className="w-[200px] z-[9999] p-0" style={{ left: 4 }}>
                        <div className="py-2">
                            {menuItems.map((item) => {
                                const IconComponent = item.icon

                                if (item.id === 'logout') {
                                    return (
                                        <button
                                            key={item.id}
                                            onClick={item.onClick}
                                            className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors w-full text-right text-gray-700"
                                        >
                                            <IconComponent
                                                size={20}
                                                variant="Outline"
                                                color="#666"
                                                className="text-gray-700"
                                            />
                                            <span className="text-sm font-medium">{item.title}</span>
                                        </button>
                                    )
                                }

                                return (
                                    <Link
                                        key={item.id}
                                        href={item.href || '#'}
                                        className={`flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors ${item.isActive ? 'text-primary' : 'text-gray-700'
                                            }`}
                                    >
                                        <IconComponent
                                            size={20}
                                            variant="Outline"
                                            color={item.isActive ? PRIMARY_COLOR : '#666'}
                                            className={item.isActive ? 'text-primary' : 'text-gray-700'}
                                        />
                                        <span className="text-sm font-medium">{item.title}</span>
                                    </Link>
                                )
                            })}
                        </div>
                    </PopoverContent>
                )
            }
        </Popover>
    )
}

export default Account