(function() {
    const Film = window.createIcon('Film');
    const Users = window.createIcon('Users');
    const ShoppingBag = window.createIcon('ShoppingBag');
    const PlusCircle = window.createIcon('PlusCircle');
    const LayoutDashboard = window.createIcon('LayoutDashboard'); // Ganti Ticket jadi Dashboard Icon untuk akses Console

    const PublicNav = () => {
        const { activeTab, navigateTo, hasRole } = window.useApp();

        // Helper untuk styling tombol aktif
        const btnClass = (isActive) => 
            `relative p-3 rounded-2xl transition-all duration-300 flex flex-col items-center justify-center gap-1
             ${isActive 
                ? 'text-white -translate-y-2' 
                : 'text-gray-400 hover:text-white hover:bg-white/5'}`;

        // Helper untuk background tombol aktif (warna beda tiap tab)
        const bgClass = (tab) => {
            if (activeTab !== tab) return '';
            if (tab === 'home') return 'bg-purple-600 shadow-lg shadow-purple-600/40';
            if (tab === 'collab') return 'bg-blue-600 shadow-lg shadow-blue-600/40';
            if (tab === 'market') return 'bg-orange-500 shadow-lg shadow-orange-500/40';
            if (tab === 'console') return 'bg-teal-600 shadow-lg shadow-teal-600/40';
            return '';
        };

        return (
            <div className="fixed bottom-6 left-0 right-0 z-40 px-4 flex justify-center pointer-events-none">
                <div className="w-full max-w-md pointer-events-auto bg-[#1e1e2e]/80 backdrop-blur-xl border border-white/10 rounded-3xl p-2 shadow-[0_10px_40px_rgba(0,0,0,0.5)] flex justify-between items-center px-4">
                    
                    {/* Home Tab */}
                    <button onClick={() => navigateTo('home', '/')} className={`${btnClass(activeTab === 'home')} ${bgClass('home')}`}>
                        <Film className="h-5 w-5" />
                        {activeTab === 'home' && <span className="w-1 h-1 bg-white rounded-full mt-1"></span>}
                    </button>
                    
                    {/* Collab Tab */}
                    <button onClick={() => navigateTo('collab', '/collab')} className={`${btnClass(activeTab === 'collab')} ${bgClass('collab')}`}>
                        <Users className="h-5 w-5" />
                    </button>

                    {/* Center Floating Action Button (Upload/Post) */}
                    <button 
                        onClick={() => window.useApp().showToast("Fitur Upload segera hadir!", "info")}
                        className="bg-gradient-to-r from-orange-500 to-pink-500 text-white p-4 rounded-full -mt-12 shadow-lg shadow-orange-500/30 border-[6px] border-[#0f0f1a] transform hover:scale-105 transition active:scale-95 group"
                    >
                        <PlusCircle className="h-6 w-6 group-hover:rotate-90 transition duration-300" />
                    </button>

                    {/* Market Tab */}
                    <button onClick={() => navigateTo('market', '/market')} className={`${btnClass(activeTab === 'market')} ${bgClass('market')}`}>
                        <ShoppingBag className="h-5 w-5" />
                    </button>

                    {/* Console/Dashboard Tab (Hanya muncul jika punya akses) */}
                    {hasRole('cff_access_console') ? (
                        <button onClick={() => navigateTo('console', '/console')} className={`${btnClass(activeTab === 'console')} ${bgClass('console')}`}>
                            <LayoutDashboard className="h-5 w-5" />
                        </button>
                    ) : (
                        // Placeholder jika tidak punya akses (opsional)
                        <div className="w-10"></div>
                    )}

                </div>
            </div>
        );
    };

    window.PublicNav = PublicNav;
})();