var _useNavigate = ReactRouterDOM.useNavigate;
var _useState_PH = React.useState;
var _useCallback_PH = React.useCallback;

/**
 * PageHeader — Reusable sticky header for all pages.
 *
 * Props:
 *   title        (string)  — Page title text
 *   showMenu     (bool)    — Show menu button on right (default: false)
 *   onMenuClick  (func)    — Custom handler for the menu button
 *   showBack     (bool)    — Show back arrow on left (default: true)
 *   titleClass   (string)  — Override title classes
 *   backColor    (string)  — Tailwind text color for back button (default: "text-forest")
 *   className    (string)  — Additional classes on the outer header
 *
 * Right slot behaviour (when showMenu=true):
 *   SUBSCRIPTIONS on + signed in  → AvatarButton → opens HeaderMenu
 *   SUBSCRIPTIONS on + signed out → "Sign in" text button → opens Clerk sign-in directly (no menu)
 *   SUBSCRIPTIONS off             → more_vert icon → opens HeaderMenu
 */
var PageHeader = function (props) {
    var title       = props.title;
    var showMenu    = props.showMenu || false;
    var showBack    = props.showBack !== undefined ? props.showBack : true;
    var onMenuClick = props.onMenuClick;
    var titleClass  = props.titleClass;
    var backColor   = props.backColor || 'text-forest';
    var className   = props.className || '';

    var navigate = _useNavigate();
    var auth     = useClerkAuth();

    var defaultTitleClass  = 'font-extrabold text-xl text-forest tracking-tight';
    var resolvedTitleClass = titleClass || defaultTitleClass;

    var menuState   = _useState_PH(false);
    var menuOpen    = menuState[0];
    var setMenuOpen = menuState[1];

    var toggleMenu = _useCallback_PH(function () {
        setMenuOpen(function (prev) { return !prev; });
    }, []);

    var closeMenu = _useCallback_PH(function () {
        setMenuOpen(false);
    }, []);

    var handleMenuButton = onMenuClick || toggleMenu;
    var subscriptionsEnabled = useFeatureFlag('SUBSCRIPTIONS');

    // Signed out with SUBSCRIPTIONS on — "Sign in" button only, no menu
    var isSignedOutGate = subscriptionsEnabled && !auth.isSignedIn;
    // Signed in or flag off — show full menu
    var useBuiltInMenu = showMenu && !onMenuClick && !isSignedOutGate;

    var renderRightSlot = function () {
        if (!showMenu) return <div className="size-10"></div>;

        // Signed out + SUBSCRIPTIONS on — single CTA, no dropdown
        if (isSignedOutGate) {
            return (
                <button
                    onClick={function () { AnalyticsService.signInInitiated({ trigger_location: 'header' }); auth.openSignIn(); }}
                    className="flex items-center gap-1.5 px-4 py-2 rounded-full bg-surface shadow-soft text-forest text-sm font-extrabold btn-nature hover:bg-forest hover:text-white transition-all duration-200"
                >
                    <span className="material-symbols-outlined text-base">login</span>
                    Sign in
                </button>
            );
        }

        // Signed in or SUBSCRIPTIONS off — avatar or menu icon + dropdown
        return (
            <div className="relative">
                {subscriptionsEnabled && auth.isSignedIn ? (
                    <AvatarButton onClick={handleMenuButton} />
                ) : (
                    <button
                        onClick={handleMenuButton}
                        className="flex items-center justify-center size-10 rounded-full bg-surface shadow-soft text-forest"
                    >
                        <span className="material-symbols-outlined">more_vert</span>
                    </button>
                )}
                {useBuiltInMenu && (
                    <HeaderMenu isOpen={menuOpen} onClose={closeMenu} />
                )}
            </div>
        );
    };

    return (
        <header className={'sticky rounded-full top-0 z-20 bg-background-light/80 backdrop-blur-md px-6 mr-6 ml-6 mt-4 pt-4 pb-4 ' + className}>
            <div className="flex items-center justify-between relative">
                {showBack ? (
                    <button
                        onClick={function () { navigate(-1); }}
                        className={'flex items-center justify-center size-10 rounded-full bg-surface shadow-soft ' + backColor}
                    >
                        <span className="material-symbols-outlined">arrow_back</span>
                    </button>
                ) : (
                    <div className="size-10"></div>
                )}

                <h1 className={resolvedTitleClass}>{title}</h1>

                {renderRightSlot()}
            </div>
        </header>
    );
};

window.PageHeader = PageHeader;