var _useState = React.useState;
var _useEffect = React.useEffect;
var _useRef = React.useRef;
var _useCallback = React.useCallback;

/**
 * HeaderMenu — Dropdown navigation menu.
 *
 * When SUBSCRIPTIONS is enabled:
 *   - Signed in:  shows identity header (avatar + name + email) + Sign Out
 *   - Signed out: shows Sign In / Sign Up CTA at the bottom
 *
 * When SUBSCRIPTIONS is disabled: plain nav list only.
 */
var HEADER_MENU_ITEMS = [
    { icon: 'home',            label: 'Home',             route: '/' },
    { icon: 'add_a_photo',     label: 'Scan for Mould',   route: '/analysis' },
    { icon: 'reorder',         label: 'Scan History',     route: '/scans' },
    { icon: 'finance',         label: 'Reports',          route: '/reports' },
    { icon: 'nest_multi_room', label: 'Location Details', route: '/location-details' },
    { icon: 'menu_book',       label: 'Mould FAQ',        route: '/faq' },
    { icon: 'school',          label: 'Mould Edu',        route: '/edu' },
    { icon: 'support_agent',   label: 'Find a Specialist', route: '/specialists' },
    { icon: 'info',            label: 'About Us',         route: '/about' },
    { icon: 'shield',          label: 'Privacy & Terms',  route: '/privacy' },
];

var HeaderMenu = function (props) {
    var isOpen  = props.isOpen;
    var onClose = props.onClose;

    var navigate = ReactRouterDOM.useNavigate();
    var menuRef  = _useRef(null);
    var auth     = useClerkAuth();
    var subscriptionsEnabled = useFeatureFlag('SUBSCRIPTIONS');

    // Close on outside click
    _useEffect(function () {
        if (!isOpen) return;
        var handleClick = function (e) {
            if (menuRef.current && !menuRef.current.contains(e.target)) {
                onClose();
            }
        };
        document.addEventListener('mousedown', handleClick);
        return function () { document.removeEventListener('mousedown', handleClick); };
    }, [isOpen, onClose]);

    var handleNav = _useCallback(function (route) {
        onClose();
        navigate(route);
    }, [onClose, navigate]);

    if (!isOpen) return null;

    // Derive display name / email / initials for identity header
    var user         = auth.user;
    var displayName  = user ? ([user.firstName, user.lastName].filter(Boolean).join(' ') || user.username || 'My Account') : '';
    var displayEmail = user && user.primaryEmailAddress ? user.primaryEmailAddress.emailAddress : '';
    var initials     = null;
    if (user) {
        var parts = [user.firstName, user.lastName].filter(Boolean);
        if (parts.length > 0) {
            initials = parts.map(function (n) { return n[0].toUpperCase(); }).join('');
        }
    }

    return (
        <div
            ref={menuRef}
            className="absolute top-full right-0 mt-2 w-64 bg-surface rounded-2xl shadow-soft border border-stone-100/50 py-2 z-[100] overflow-hidden"
        >
            {/* Identity header — signed in only */}
            {subscriptionsEnabled && auth.isSignedIn && user && (
                <div className="flex items-center gap-3 px-4 py-3 mb-1 border-b border-stone-100/50">
                    <div className="relative shrink-0">
                        <div className="w-9 h-9 rounded-full overflow-hidden bg-background-light ring-2 ring-primary/20 flex items-center justify-center">
                            {user.imageUrl ? (
                                <img
                                    src={user.imageUrl}
                                    alt={displayName}
                                    className="w-full h-full object-cover"
                                    referrerPolicy="no-referrer"
                                />
                            ) : initials ? (
                                <span className="text-xs font-black text-forest">{initials}</span>
                            ) : (
                                <span className="material-symbols-outlined text-forest text-base">person</span>
                            )}
                        </div>
                        <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-primary rounded-full border-2 border-surface"></span>
                    </div>
                    <div className="flex-1 min-w-0">
                        <p className="text-sm font-extrabold text-forest truncate">{displayName}</p>
                        {displayEmail && (
                            <p className="text-[11px] font-medium text-muted truncate">{displayEmail}</p>
                        )}
                    </div>
                </div>
            )}

            {/* Nav items */}
            {HEADER_MENU_ITEMS.map(function (item) {
                return (
                    <button
                        key={item.route}
                        onClick={function () { handleNav(item.route); }}
                        className="group w-full flex items-center gap-3 px-4 py-3 text-left btn-nature hover:bg-forest transition-all duration-200"
                    >
                        <span className="material-symbols-outlined text-[20px] text-forest/60 group-hover:text-primary transition-colors">{item.icon}</span>
                        <span className="text-sm font-bold text-forest group-hover:text-white transition-colors">{item.label}</span>
                    </button>
                );
            })}

            {/* Auth action — SUBSCRIPTIONS flag only */}
            {subscriptionsEnabled && (
                <div className="border-t border-stone-100/50 mt-1 pt-1">
                    {auth.isSignedIn ? (
                        <button
                            onClick={function () { onClose(); auth.signOut(); }}
                            className="group w-full flex items-center gap-3 px-4 py-3 text-left btn-nature hover:bg-forest transition-all duration-200"
                        >
                            <span className="material-symbols-outlined text-[20px] text-forest/60 group-hover:text-primary transition-colors">logout</span>
                            <span className="text-sm font-bold text-forest group-hover:text-white transition-colors">Sign Out</span>
                        </button>
                    ) : (
                        <button
                            onClick={function () { onClose(); auth.openSignIn(); }}
                            className="group w-full flex items-center gap-3 px-4 py-3 text-left btn-nature hover:bg-forest transition-all duration-200"
                        >
                            <span className="material-symbols-outlined text-[20px] text-primary group-hover:text-primary transition-colors">login</span>
                            <span className="text-sm font-bold text-primary group-hover:text-white transition-colors">Sign In / Sign Up</span>
                        </button>
                    )}
                </div>
            )}
        </div>
    );
};

window.HeaderMenu = HeaderMenu;