// Header.tsx
import { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { IRootState } from '../../store';
import { toggleSidebar } from '../../store/themeConfigSlice';
import { logout } from '../../store/authSlice';
import Dropdown from '../Dropdown';
import IconMenu from '../Icon/IconMenu';
import IconUser from '../Icon/IconUser';
import IconLogout from '../Icon/IconLogout';
import Profile1 from '../../assets/images/auth/user.png';
import MyProfile from '../../modals/MyProfile';
import api from '../../api/axios';
import config from '../../config';

const Header = () => {
    const location = useLocation();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const dropdownRef = useRef<any>(null);
    const themeConfig = useSelector((state: IRootState) => state.themeConfig);
    const authUser = useSelector((state: any) => state.auth.user);
    const [profileOpen, setProfileOpen] = useState(false);
    const [, forceUpdate] = useState({});

    useEffect(() => {
        const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
        if (selector) {
            selector.classList.add('active');
            const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
            for (let i = 0; i < all.length; i++) {
                all[0]?.classList.remove('active');
            }
            const ul: any = selector.closest('ul.sub-menu');
            if (ul) {
                let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
                if (ele) {
                    ele = ele[0];
                    setTimeout(() => {
                        ele?.classList.add('active');
                    });
                }
            }
        }
    }, [location]);

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

    const getImageUrl = (imagePath: string | null): string => {
        if (!imagePath) return Profile1;
        if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
            return imagePath;
        }
        return `${config.storageUrl}/${imagePath}`;
    };

    const handleSignOut = async () => {
        try {
            await api.post('/logout');
        } catch (error) {
            console.error('Logout error:', error);
        } finally {
            dispatch(logout());
            navigate('/login');
        }
    };

    // Handle profile update success
    const handleProfileUpdate = (updatedUser: any) => {
        // Force a re-render of the header to show updated image
        forceUpdate({});
    };

    // Get user data from Redux store
    const userName = authUser?.staff?.staff_name || authUser?.name || 'User';
    const userEmail = authUser?.staff?.staff_email || authUser?.email || 'user@email.com';
    const userImage = authUser?.staff?.staff_pic || null;

    return (
        <>
            <header className={`z-40 ${themeConfig.semidark && themeConfig.menu === 'horizontal' ? 'dark' : ''}`}>
                <div className="shadow-sm">
                    <div className="relative bg-white flex w-full items-center px-5 py-2.5 dark:bg-black">
                        <div className="horizontal-logo flex lg:hidden justify-between items-center ltr:mr-2 rtl:ml-2">
                            <Link to="/" className="main-logo flex items-center shrink-0">
                                <img className="w-10 ltr:-ml-1 rtl:-mr-1 inline" src="/assets/images/auth/fav_icon.png" alt="logo" />
                                <span className="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-medium align-middle hidden md:inline dark:text-white-light transition-all duration-300">Tesra</span>
                            </Link>
                            <button
                                type="button"
                                className="collapse-icon flex-none dark:text-[#d0d2d6] hover:text-primary dark:hover:text-primary flex lg:hidden ltr:ml-2 rtl:mr-2 p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
                                onClick={() => {
                                    dispatch(toggleSidebar());
                                }}
                            >
                                <IconMenu className="w-5 h-5" />
                            </button>
                        </div>
                        <div className="sm:flex-1 ltr:sm:ml-0 ltr:ml-auto sm:rtl:mr-0 rtl:mr-auto flex items-center justify-end space-x-1.5 lg:space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
                            <div className="dropdown shrink-0 flex">
                                <Dropdown
                                    offset={[0, 8]}
                                    ref={dropdownRef}
                                    placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
                                    btnClassName="relative group block"
                                    button={
                                        <img
                                            className="w-9 h-9 rounded-full border-2 border-secondary object-cover saturate-50 group-hover:saturate-100 transition-all duration-300"
                                            src={getImageUrl(userImage)}
                                            alt="userProfile"
                                            key={userImage} // Add key to force re-render on image change
                                        />
                                    }
                                >
                                    <ul className="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
                                        <li>
                                            <div className="flex items-center px-4 py-4">
                                                <img
                                                    className="rounded-full border-2 border-secondary w-10 h-10 object-cover"
                                                    src={getImageUrl(userImage)}
                                                    alt="userProfile"
                                                    key={userImage} // Add key to force re-render on image change
                                                />
                                                <div className="ltr:pl-4 rtl:pr-4 truncate">
                                                    <h4 className="text-base">
                                                        {userName}
                                                    </h4>
                                                    <button type="button" className="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white text-sm">
                                                        {userEmail}
                                                    </button>
                                                </div>
                                            </div>
                                        </li>
                                        <li
                                            className="hover:bg-rose-700 hover:text-white cursor-pointer"
                                            onMouseDown={(e) => {
                                                e.preventDefault();
                                                setProfileOpen(true);
                                            }}
                                        >
                                            <div className="flex gap-4 items-center px-3 py-2">
                                                <IconUser />
                                                <span className="text-base fw-semibold">
                                                    Profile
                                                </span>
                                            </div>
                                        </li>
                                        <li
                                            className="border-t border-white-light dark:border-white-light/10 hover:bg-rose-700 hover:text-white"
                                            onMouseDown={(e) => {
                                                e.preventDefault();
                                                dropdownRef.current?.close();
                                                handleSignOut();
                                            }}
                                        >
                                            <div className="flex gap-4 items-center px-3 py-2">
                                                <IconLogout/>
                                                <span className="text-base fw-semibold">Sign Out</span>
                                            </div>
                                        </li>
                                    </ul>
                                </Dropdown>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <MyProfile
                open={profileOpen}
                onClose={() => setProfileOpen(false)}
                onUpdateSuccess={handleProfileUpdate}
            />
        </>
    );
};

export default Header;