var _Link_BN = ReactRouterDOM.Link;

/**
 * _NavItem_BN — one tab in the bottom nav.
 *
 * Declared at module scope on purpose. It used to live inside BottomNav's body,
 * which gave it a fresh function identity on every render; React compares
 * element types by identity, so it saw a different component at that position
 * each time and destroyed + rebuilt the whole subtree instead of updating it.
 * Measured before the fix: 0 of 4 anchors and 0 of 4 icon spans survived a tab
 * tap. Since BottomNav re-renders on every route change (useLocation), that was
 * a full teardown of 12 DOM nodes per navigation — including the icon spans,
 * whose ligature text has to be re-shaped by the font on each new node.
 *
 * Keep it out here. Moving it back inside silently restores the teardown.
 */
var _NavItem_BN = function (props) {
    var isActive = props.activeTab === props.tab;
    return (
        <_Link_BN
            to={props.to}
            className={'flex flex-col items-center gap-1 transition-all btn-nature ' + (isActive ? 'text-forest' : 'text-sage/60 hover:text-forest/70')}
        >
            <span
                className="material-symbols-outlined text-2xl"
                style={{ fontVariationSettings: isActive ? "'FILL' 1" : "" }}
            >{props.icon}</span>
            <span className="text-[9px] font-black uppercase tracking-tighter">{props.label}</span>
        </_Link_BN>
    );
};

/**
 * BottomNav — Floating island navigation bar.
 * Active state derived from current route via useLocation.
 * Design: frosted glass pill with central elevated FAB.
 *
 * MANAGE_PROPERTY flag:
 *   true  — Location tab links to /location-details
 *   false — Location tab replaced by Specialists (/specialists)
 */
var BottomNav = function () {
    var navigate = ReactRouterDOM.useNavigate();
    var location = ReactRouterDOM.useLocation();
    var path = location.pathname;
    var manageProperty = useFeatureFlag('MANAGE_PROPERTY');

    // Routes that render without the nav. This replaces Layout's old `hideNav`
    // prop: the nav is now mounted once in App rather than per page, so it has
    // to decide its own visibility. Add a path here to hide the nav on it.
    if (BottomNav.HIDDEN_ROUTES.indexOf(path) !== -1) return null;

    var activeTab =
        path === '/' ? 'home' :
        path === '/location-details' ? 'location-details' :
        path === '/specialists' ? 'specialists' :
        path === '/scans' ? 'scans' :
        path === '/reports' ? 'reports' :
        '';

    return (
        <nav className="fixed bottom-4 left-1/2 -translate-x-1/2 w-[90%] max-w-[380px] z-50">
            <div className="nav-island h-20 rounded-full flex items-center justify-around px-2 shadow-2xl">
                <_NavItem_BN to="/" icon="home" label="Home" tab="home" activeTab={activeTab} />

                {manageProperty
                    ? <_NavItem_BN to="/location-details" icon="nest_multi_room" label="Location" tab="location-details" activeTab={activeTab} />
                    : <_NavItem_BN to="/specialists" icon="support_agent" label="Specialists" tab="specialists" activeTab={activeTab} />
                }

                {/* Central FAB */}
                <div className="relative -translate-y-6">
                    <div className="absolute inset-0 bg-primary/20 rounded-full blur-xl animate-pulse"></div>
                    <button
                        onClick={function () { navigate('/analysis'); }}
                        className="relative w-16 h-16 bg-forest text-white rounded-full flex items-center justify-center shadow-xl border-[6px] border-background-light btn-nature"
                    >
                        <span className="material-symbols-outlined text-3xl">add_a_photo</span>
                    </button>
                </div>

                <_NavItem_BN to="/scans" icon="reorder" label="Scans" tab="scans" activeTab={activeTab} />
                <_NavItem_BN to="/reports" icon="finance" label="Reports" tab="reports" activeTab={activeTab} />
            </div>
        </nav>
    );
};

/**
 * Routes rendered without the bottom nav. Previously expressed as
 * `<Layout hideNav={true}>` in MissMouldChat — the chat view needs the full
 * height for its composer, and the nav would overlap the input.
 */
BottomNav.HIDDEN_ROUTES = ['/miss-mould'];

window.BottomNav = BottomNav;