var _Link_BN = ReactRouterDOM.Link;

/**
 * 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');

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

    var NavItem = function (props) {
        var isActive = 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>
        );
    };

    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 to="/" icon="home" label="Home" tab="home" />

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

                {/* 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 to="/scans" icon="reorder" label="Scans" tab="scans" />
                <NavItem to="/reports" icon="finance" label="Reports" tab="reports" />
            </div>
        </nav>
    );
};

window.BottomNav = BottomNav;