const { useState, useEffect, useRef } = React;

const Navbar = ({ activePage = 'home' }) => {
    const [isExpanded, setIsExpanded] = useState(true);
    const [isGrey, setIsGrey] = useState(false);
    const [isHovered, setIsHovered] = useState(false);
    const hoverTimerRef = useRef(null);
    const [hash, setHash] = useState(() => (typeof window !== 'undefined' ? window.location.hash : ''));

    useEffect(() => {
        const syncHash = () => setHash(window.location.hash);
        window.addEventListener('hashchange', syncHash);
        window.addEventListener('load', syncHash);
        return () => {
            window.removeEventListener('hashchange', syncHash);
            window.removeEventListener('load', syncHash);
        };
    }, []);

    useEffect(() => {
        const mq = window.matchMedia('(min-width: 768px)');

        let collapseTimer;
        let colorTimer;

        const syncCollapse = () => {
            if (collapseTimer) clearTimeout(collapseTimer);
            if (mq.matches) {
                collapseTimer = setTimeout(() => setIsExpanded(false), 2000);
            } else {
                setIsExpanded(true);
            }
        };

        const syncGrey = () => {
            if (colorTimer) clearTimeout(colorTimer);
            if (!mq.matches) {
                setIsGrey(false);
                return;
            }
            colorTimer = setTimeout(() => setIsGrey(true), 2800);
        };

        const onViewportChange = () => {
            syncCollapse();
            syncGrey();
        };

        onViewportChange();
        mq.addEventListener('change', onViewportChange);

        return () => {
            if (collapseTimer) clearTimeout(collapseTimer);
            if (colorTimer) clearTimeout(colorTimer);
            mq.removeEventListener('change', onViewportChange);
        };
    }, []);

    const handleMouseEnter = () => {
        setIsHovered(true);
        if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
        hoverTimerRef.current = setTimeout(() => {
            setIsGrey(false);
        }, 800);
    };

    const handleMouseLeave = () => {
        setIsHovered(false);
        if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
        hoverTimerRef.current = setTimeout(() => {
            if (typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches) {
                setIsGrey(true);
            }
        }, 800);
    };

    const onHomePage = activePage === 'home';
    const isWork = activePage === 'work';
    const isStudio = activePage === 'studio';
    const CONTACT_EMAIL = 'sedemoasis@gmail.com';

    const linkClass = (active) => {
        if (active) {
            return isGrey && !isHovered
                ? 'text-black font-medium'
                : 'text-white font-medium';
        }
        return isGrey && !isHovered ? 'text-black/40 hover:text-black' : 'text-white/40 hover:text-white';
    };

    return (
        <div className="fixed top-[max(1.5rem,env(safe-area-inset-top,0px)+0.5rem)] sm:top-12 left-0 w-full z-50 flex justify-center px-3 sm:px-6 pointer-events-none">
            <nav 
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
                className={`group pointer-events-auto max-w-[calc(100vw-1.5rem)] sm:max-w-none px-4 sm:px-6 py-3 sm:py-4 rounded-lg flex items-center shadow-none transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] hover:scale-[1.02] 
                    ${isGrey && !isHovered ? 'bg-transparent border border-black/[0.07]' : 'bg-black border border-white/5'}`}
            >
                <a
                    href="index.html"
                    aria-current={onHomePage ? 'page' : undefined}
                    className={`flex items-center shrink-0 cursor-pointer select-none transition-opacity hover:opacity-70 ${onHomePage ? '' : 'opacity-75'}`}
                >
                    <img src={isGrey && !isHovered ? "logo_b.svg" : "logo_w.svg"} alt="Sedem Oasis Logo" className="h-3.5 w-auto pointer-events-none" draggable={false} />
                    <span className={`text-[10px] align-top ml-1.5 font-medium pointer-events-none ${isGrey && !isHovered ? 'text-black opacity-60' : 'text-white opacity-60'}`}>®</span>
                </a>
                
                <div className={`flex items-center overflow-hidden transition-[max-width,opacity] duration-1000 ease-in-out ${isExpanded || isHovered ? 'max-w-[min(100vw-8rem,600px)] sm:max-w-[600px] opacity-100' : 'max-w-0 opacity-0'}`}>
                    <div className={`h-3 w-px ml-3 sm:ml-6 mr-4 sm:mr-8 shrink-0 opacity-40 ${isGrey && !isHovered ? 'bg-black/20' : 'bg-white/20'}`}></div>
                    <div className={`flex space-x-4 sm:space-x-8 text-[13px] sm:text-[16px] font-medium tracking-wide whitespace-nowrap pr-1 sm:pr-2`}>
                        <a
                            href="allworks.html"
                            aria-current={isWork ? 'page' : undefined}
                            className={`transition-colors duration-500 ${linkClass(isWork)}`}
                        >
                            work
                        </a>
                        <a
                            href="studio.html"
                            aria-current={isStudio ? 'page' : undefined}
                            className={`transition-colors duration-500 ${linkClass(isStudio)}`}
                        >
                            studio
                        </a>
                        <a
                            href={`mailto:${CONTACT_EMAIL}`}
                            className={`transition-colors duration-500 ${linkClass(false)}`}
                        >
                            contact
                        </a>
                    </div>
                </div>
            </nav>
        </div>
    );
};

window.Navbar = Navbar;