import { type FC, useEffect, useState } from 'react'
import Input from '@/components/Input'
import UserAvatar from '@/components/UserAvatar'
import { ArrowDown2, CloseCircle, HambergerMenu, Logout } from 'iconsax-react'
import { Link } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import Notifications from '@/pages/notification/Notification'
import { useSharedStore } from './store/useSharedStore'
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import SidebarItem from './SidebarItem'
import { t } from '@/locale'
import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
import { Paths } from '@/config/Paths'

const Header: FC = () => {

    const location = useLocation();
    const [popoverKey, setPopoverKey] = useState(0);
    const { setOpenSidebar, openSidebar } = useSharedStore()
    const { data } = useGetAdminMe()
    const admin = data?.data

    const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
    const roleTitle = admin?.role?.title || admin?.role?.name || ''

    useEffect(() => {
        setPopoverKey((prevKey) => prevKey + 1);
    }, [location.pathname]);

    return (
        <div className='fixed z-10 left-[var(--layout-frame)] right-[var(--layout-frame)] top-[var(--layout-frame)] flex h-[var(--layout-header-height)] items-center justify-between rounded-[32px] bg-white px-6 xl:left-auto xl:right-[calc(var(--layout-frame)+var(--layout-main-offset))] xl:h-[var(--layout-header-height-xl)] xl:w-[calc(100%-(var(--layout-frame)*2)-var(--layout-main-offset))]'>

            <div className='min-w-[270px] hidden xl:block'>
                <Input
                    variant='search'
                    placeholder={t('header.search')}
                />
            </div>
            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
                <HambergerMenu size={24} color='black' />
            </div>
            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
            <div className='flex xl:gap-6 gap-4 items-center'>
                {/* <Link to={Pages.services.other}>
                    <Element3 color='black' className='xl:size-[18px] size-[17px]' />
                </Link>
                <Link className='xl:hidden' to={Pages.wallet}>
                    <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                </Link>
                <Link className='hidden xl:block' to={Pages.wallet}> */}
                <Notifications />
                {admin && (
                    <Popover className="relative" key={popoverKey}>
                        <PopoverButton>
                            <div className='flex gap-2 items-center mt-2.5'>
                                <UserAvatar
                                    src={admin.avatarUrl}
                                    firstName={admin.firstName}
                                    lastName={admin.lastName}
                                    className='size-6'
                                    textClassName='text-xs'
                                />
                                <div className='xl:flex hidden gap-1 items-center'>
                                    <div className='flex flex-col items-start'>
                                        <div className='text-xs'>
                                            {displayName || String(admin.phone ?? '')}
                                        </div>
                                        {roleTitle && (
                                            <div className='text-[10px] text-description'>
                                                {roleTitle}
                                            </div>
                                        )}
                                    </div>
                                    <ArrowDown2 size={14} color='#8C90A3' />
                                </div>
                            </div>
                        </PopoverButton>

                        <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
                            <div className='absolute xl:hidden top-6 left-6'>
                                <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
                            </div>
                            <Link to={`${Paths.admin.update}${admin.id}`} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
                                <UserAvatar
                                    src={admin.avatarUrl}
                                    firstName={admin.firstName}
                                    lastName={admin.lastName}
                                    className='size-14'
                                    textClassName='text-lg'
                                />
                                <div>
                                    {displayName || String(admin.phone ?? '')}
                                </div>
                                {roleTitle && (
                                    <div className='text-description'>
                                        {roleTitle}
                                    </div>
                                )}
                                <div className='text-description'>
                                    {String(admin.phone ?? '')}
                                </div>
                            </Link>


                            <div className='px-6 -mt-[2px]'>
                                <SidebarItem
                                    icon={<Logout color={'black'} size={20} />}
                                    title={t('sidebar.logout')}
                                    isActive
                                    link={Paths.auth.login}
                                    isWithoutLine
                                    isLogout
                                    activeName=''
                                />
                            </div>
                        </PopoverPanel>
                    </Popover>
                )}
            </div>
        </div>
    )
}

export default Header