'use client';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Link from 'next/link';
import { IRootState } from '@/store';
import { toggleSidebar, toggleRTL } from '@/store/themeConfigSlice';
import Dropdown from '@/components/dropdown';
import IconMenu from '@/components/icon/icon-menu';
import IconCalendar from '@/components/icon/icon-calendar';
import IconEdit from '@/components/icon/icon-edit';
import IconChatNotification from '@/components/icon/icon-chat-notification';
import IconSearch from '@/components/icon/icon-search';
import IconXCircle from '@/components/icon/icon-x-circle';
import IconSun from '@/components/icon/icon-sun';
import IconMoon from '@/components/icon/icon-moon';
import IconLaptop from '@/components/icon/icon-laptop';
import IconMailDot from '@/components/icon/icon-mail-dot';
import IconArrowLeft from '@/components/icon/icon-arrow-left';
import IconInfoCircle from '@/components/icon/icon-info-circle';
import IconBellBing from '@/components/icon/icon-bell-bing';
import IconKey from '@/components/icon/Icon-Key';
import IconUser from '@/components/icon/icon-user';
import IconLogout from '@/components/icon/icon-logout';
import IconCaretsDown from '@/components/icon/icon-carets-down';
import { usePathname, useRouter } from 'next/navigation';
import { getTranslation } from '@/i18n';

const Header = () => {
    const pathname = usePathname();
    const dispatch = useDispatch();
    const router = useRouter();
    const { t } = getTranslation();

    const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);

    const [token, setToken] = useState("");
    const [userEmail, setUserEmail] = useState("")

    useEffect(() => {
        const Token: any = localStorage.getItem('token');
        const UserEmail: any = localStorage.getItem('user_email')
        setToken(Token);
        setUserEmail(UserEmail)
    }, []);

    const handleSignOut = async () => {
        localStorage.removeItem("token");
        localStorage.removeItem("user_email")
        localStorage.removeItem("paymentDetails")
        localStorage.removeItem("payment_session")
        localStorage.removeItem("userDetails")
        router.push('/login');
    };

    return (
        <header className="z-40 dark">
            <div className="shadow-sm">
                <div className="relative flex w-full items-center  bg-[#242424]  px-5 py-2.5 text-white border-b border-[#000]/60">

                    {/* Mobile Logo + Menu */}
                    <div className="horizontal-logo flex items-center justify-between lg:hidden">
                        <Link href="/" className="main-logo flex items-center">
                            <img className="inline w-8" src="/assets/images/logo_sb.png" alt="logo" />
                            <span className="hidden md:inline text-2xl font-semibold ml-2 text-white">Social Buddy</span>
                        </Link>

                        <button
                            type="button"
                            className="flex rounded-full bg-gray-700/40 p-2 hover:bg-gray-700/70"
                            onClick={() => dispatch(toggleSidebar())}
                        >
                            <IconMenu className="h-5 w-5 text-white" />
                        </button>
                    </div>

                    {/* Right Section */}
                    <div className="flex items-center ml-auto space-x-4">

                        {/* Profile Dropdown */}
                        <div className="dropdown flex shrink-0">
                            <Dropdown
                                offset={[0, 8]}
                                placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
                                btnClassName="relative group block"
                                button={
                                    // <img
                                    //     className="h-9 w-9 rounded-full object-cover border border-gray-700"
                                    //     src="/assets/images/user-profile.jpeg"
                                    //     alt="userProfile"
                                    // />
                                    <span title="Your Account Profile">
                                        <IconUser className="h-10 w-10 rounded-full object-cover border p-2 border-gray-700" />
                                    </span>
                                }
                            >
                                <ul className="w-[230px] bg-[#242424] text-white rounded-md overflow-hidden shadow-xl border border-gray-800">

                                    {/* Profile Header */}
                                    <li className="px-4 py-4 flex items-center border-b border-gray-700">
                                        <IconUser className='h-10 w-10' />
                                        <div className="pl-4">
                                            {/* <h4 className="text-base font-semibold">John Doe</h4> */}
                                            <span className="text-gray-400 text-sm">{userEmail ? userEmail : ""}</span>
                                        </div>
                                    </li>

                                    {/* Profile Page */}
                                    {/* <li>
                                        <Link href="/users/profile" className="dark:hover:text-white flex items-center !py-3">
                                            <IconUser className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                            Profile
                                        </Link>
                                    </li> */}


                                    <li className="border-t border-white-light dark:border-white-light/10">
                                        {token ? (
                                            <>
                                                {/* Change Password Button */}
                                                <Link
                                                    href="/change-password"
                                                    className="!py-3 flex items-center text-primary hover:text-blue-600"
                                                >
                                                    <IconKey className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                                    Change Password
                                                </Link>

                                                {/* Sign Out Button */}
                                                <button
                                                    type="button"
                                                    onClick={handleSignOut}
                                                    title="Securely sign out of Social Buddy"
                                                    className="!py-3 text-danger flex items-center w-full text-left"
                                                >
                                                    <IconLogout className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
                                                    Sign Out
                                                </button>
                                            </>
                                        ) : (
                                            <Link href="/login" className="!py-3 text-danger flex items-center">
                                                <IconLogout className="h-4.5 w-4.5 shrink-0 rotate-90 ltr:mr-2 rtl:ml-2" />
                                                Login
                                            </Link>
                                        )}
                                    </li>

                                </ul>
                            </Dropdown>
                        </div>

                    </div>
                </div>
            </div>
        </header>
    );
};

export default Header;