'use client'
import MenuItem from '@/components/MenuItem'
import { Separator } from '@/components/ui/separator'
import { DocumentText, Home, InfoCircle, Messages1 } from 'iconsax-react'
import { FC, Fragment, useEffect } 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'
import Link from 'next/link'
import MobileSearch from './components/MobileSearch'
import DesktopSearch from './components/DesktopSearch'

const Header: FC = () => {

    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='md:hidden flex items-center justify-between relative'>
                    <Link href='/' className='px-4 py-4'>
                        <Image
                            src='/images/logo.png'
                            alt='logo'
                            width={120}
                            height={50}
                            className='max-w-[120px] w-[100px] max-h-[50px] object-contain'
                        />
                    </Link>
                    <MobileSearch />
                </div>

                {/* دسکتاپ: هدر کامل */}
                <div className='hidden md:flex items-center justify-between px-6 py-4'>
                    <div className='flex gap-[30px] items-center'>
                        <Link href='/'>
                            <Image
                                src='/images/logo.png'
                                alt='logo'
                                width={100}
                                height={100}
                                className='max-w-[100px] w-[100px] max-h-[40px] object-contain'
                            />
                        </Link>
                        <DesktopSearch />
                    </div>

                    <div className='flex items-center gap-6'>
                        <div>
                            <Account />
                        </div>

                        <Separator style={{ height: 25 }} orientation='vertical' />

                        <Cart />
                    </div>
                </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='h-[72px] md:h-[120px]'></div>
        </Fragment>
    )
}

export default Header