'use client'
import Input from '@/components/Input'
import MenuItem from '@/components/MenuItem'
import { Separator } from '@/components/ui/separator'
import { DocumentText, Home, Profile, HambergerMenu, InfoCircle, Messages1 } from 'iconsax-react'
import { FC, Fragment, useEffect, useState } from 'react'
import Menu from './components/Menu'
import { useSharedStore } from './store/sharedStore'
import { getToken } from '@/config/func'
import Account from './components/Account'
import Cart from './components/Cart'
import Image from 'next/image'

const Header: FC = () => {

    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
    const { setIsLogin } = useSharedStore()

    const handleSetIsLogin = async () => {
        const token = await getToken()
        setIsLogin(token ? true : false)
    }

    useEffect(() => {
        handleSetIsLogin()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <Fragment>
            <div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full'>
                {/* بخش بالایی هدر */}
                <div className='flex items-center justify-between px-3 sm:px-4 md:px-6 py-3 sm:py-4'>
                    {/* منوی همبرگری موبایل */}
                    <div className='md:hidden'>
                        <button
                            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                            className='p-2 rounded-lg hover:bg-gray-50'
                        >
                            <HambergerMenu size={24} color='#333333' />
                        </button>
                    </div>

                    <div className='flex gap-2 sm:gap-4 md:gap-[30px] items-center flex-1 md:flex-none'>
                        <div>
                            <Image
                                src='/images/logo.png'
                                alt='logo'
                                width={100}
                                height={100}
                                className='max-w-[100px] w-[100px] max-h-[40px] object-contain'
                            />
                        </div>
                        <Input
                            className='hidden md:block w-[300px] lg:w-[500px]'
                            variant='search'
                            placeholder='جستجو'
                        />
                    </div>

                    <div className='flex items-center gap-1 sm:gap-2 md:gap-6'>
                        <div>
                            <Account />
                        </div>

                        <div className='md:hidden'>
                            <Profile size={24} color='#333333' />
                        </div>

                        <Separator className='hidden md:block' style={{ height: 25 }} orientation='vertical' />

                        <Cart />
                    </div>
                </div>

                {/* نوار جستجو موبایل */}
                <div className='md:hidden px-3 sm:px-4 pb-3 sm:pb-4'>
                    <Input
                        className='w-full'
                        variant='search'
                        placeholder='جستجو'
                    />
                </div>

                {/* بخش پایینی هدر - فقط دسکتاپ */}
                <div className='hidden md:flex mt-2 text-sm px-6 pb-4 items-center gap-7'>
                    <Menu />
                    <Separator style={{ height: 20 }} orientation='vertical' />

                    <MenuItem
                        icon={<Home size={20} color='#333333' />}
                        title="صفحه نخست"
                        href="/"
                    />
                    <MenuItem
                        icon={<DocumentText size={20} color='#333333' />}
                        title="مجله"
                        href="/blogs"
                    />
                    <MenuItem
                        icon={<DocumentText size={20} color='#333333' />}
                        title="پیگیری سفارشات"
                        href="/profile/orders"
                        requiresLogin={true}
                    />

                    <MenuItem
                        icon={<InfoCircle size={18} color='#333333' />}
                        title="درباره ما"
                        href="/about"
                    />

                    <MenuItem
                        icon={<Messages1 size={18} color='#333333' />}
                        title="تماس با ما"
                        href="/contact"
                    />
                </div>

                {/* منوی موبایل */}
                {isMobileMenuOpen && (
                    <div className='md:hidden bg-white border-t border-gray-100'>
                        <div className='px-4 py-4 space-y-4'>
                            <div className='flex items-center gap-3 py-3 border-b border-gray-100'>
                                <Profile size={20} color='#333333' />
                                <span className='text-sm text-gray-800'>حساب کاربری</span>
                            </div>

                            <div className='space-y-3'>
                                <MenuItem
                                    icon={<Home size={20} />}
                                    title="صفحه نخست"
                                    href="/"
                                    className="py-2 hover:bg-gray-50 rounded-lg px-2"
                                />
                                <MenuItem
                                    icon={<DocumentText size={20} />}
                                    title="مجله"
                                    href="/blogs"
                                    className="py-2 hover:bg-gray-50 rounded-lg px-2"
                                />
                                <MenuItem
                                    icon={<DocumentText size={20} />}
                                    title="پیگیری سفارشات"
                                    href="/profile/orders"
                                    requiresLogin={true}
                                    className="py-2 hover:bg-gray-50 rounded-lg px-2"
                                />
                            </div>

                            <div className='pt-4 border-t border-gray-100'>
                                <Menu />
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* فضای خالی برای جبران ارتفاع fixed header */}
            <div className={`${isMobileMenuOpen ? 'h-[280px] sm:h-[260px] md:h-[120px]' : 'h-[120px] sm:h-[120px] md:h-[120px]'}`}></div>
        </Fragment>
    )
}

export default Header