const NavigationItem = ({ icon, label, active, onClick, badge, collapsed }) => (
    <button 
        onClick={onClick}
        title={collapsed ? label : undefined}
        className={`w-full flex items-center ${collapsed ? 'justify-center px-0' : 'px-3'} py-2.5 rounded-lg mb-1 transition-all duration-200 group relative ${active ? 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 font-medium' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'}`}
    >
        <div className={`${collapsed ? '' : 'mr-3'} ${active ? 'text-primary-600 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300'}`}>
            {icon}
        </div>
        {!collapsed && (
            <span className="flex-1 text-left">{label}</span>
        )}
        {!collapsed && badge && (
            <span className="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full ml-auto">
                {badge}
            </span>
        )}
        {collapsed && badge && (
            <span className="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 border-2 border-white dark:border-surface-dark rounded-full"></span>
        )}
    </button>
);

const Sidebar = ({ currentView, setView, collapsed, setCollapsed }) => {
    const navItemsMain = [
        { id: 'home', label: 'Home', icon: <i data-lucide="home" className="w-5 h-5"></i> },
        { id: 'discover', label: 'Discover', icon: <i data-lucide="compass" className="w-5 h-5"></i> },
        { id: 'people', label: 'People', icon: <i data-lucide="users" className="w-5 h-5"></i> },
        { id: 'opportunities', label: 'Opportunities', icon: <i data-lucide="briefcase" className="w-5 h-5"></i> },
        { id: 'events', label: 'Events', icon: <i data-lucide="calendar" className="w-5 h-5"></i> },
        { id: 'communities', label: 'Communities', icon: <i data-lucide="hash" className="w-5 h-5"></i> },
        { id: 'projects', label: 'Projects', icon: <i data-lucide="folder-git-2" className="w-5 h-5"></i> },
    ];
    
    const navItemsPersonal = [
        { id: 'messages', label: 'Messages', icon: <i data-lucide="message-square" className="w-5 h-5"></i>, badge: '3' },
        { id: 'notifications', label: 'Notifications', icon: <i data-lucide="bell" className="w-5 h-5"></i>, badge: '5' },
        { id: 'saved', label: 'Saved', icon: <i data-lucide="bookmark" className="w-5 h-5"></i> },
        { id: 'profile', label: 'Profile', icon: <i data-lucide="user" className="w-5 h-5"></i> },
    ];

    return (
        <aside className={`${collapsed ? 'w-20' : 'w-64'} bg-white dark:bg-surface-dark border-r border-gray-200 dark:border-gray-800 h-screen sticky top-0 hidden md:flex flex-col transition-all duration-300 z-20`}>
            <div className={`p-4 flex items-center ${collapsed ? 'justify-center' : 'justify-between'} border-b border-gray-100 dark:border-gray-800 h-16`}>
                <div className="flex items-center cursor-pointer" onClick={() => setView('home')}>
                    <div className="bg-primary-600 text-white p-1.5 rounded-lg">
                        <i data-lucide="layers" className="w-5 h-5"></i>
                    </div>
                    {!collapsed && (
                        <span className="ml-2 text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-purple-600">
                            Nexus
                        </span>
                    )}
                </div>
                {!collapsed && (
                    <button onClick={() => setCollapsed(true)} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
                        <i data-lucide="panel-left-close" className="w-5 h-5"></i>
                    </button>
                )}
            </div>
            
            <div className="flex-1 overflow-y-auto p-3 no-scrollbar flex flex-col items-center w-full">
                {collapsed && (
                    <button onClick={() => setCollapsed(false)} className="mb-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 p-2">
                        <i data-lucide="panel-left-open" className="w-5 h-5"></i>
                    </button>
                )}
                
                {!collapsed && <div className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2 mt-2 px-3 w-full text-left">Main</div>}
                
                {navItemsMain.map(item => (
                    <NavigationItem 
                        key={item.id} 
                        icon={item.icon} 
                        label={item.label} 
                        active={currentView === item.id} 
                        onClick={() => setView(item.id)}
                        collapsed={collapsed}
                    />
                ))}
                
                {!collapsed && <div className="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2 mt-6 px-3 w-full text-left">Personal</div>}
                {collapsed && <div className="w-8 border-t border-gray-200 dark:border-gray-700 my-4"></div>}
                
                {navItemsPersonal.map(item => (
                    <NavigationItem 
                        key={item.id} 
                        icon={item.icon} 
                        label={item.label} 
                        active={currentView === item.id} 
                        onClick={() => setView(item.id)}
                        badge={item.badge}
                        collapsed={collapsed}
                    />
                ))}
            </div>

            <div className="p-4 border-t border-gray-200 dark:border-gray-800">
                <div className={`flex items-center cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg ${collapsed ? 'justify-center p-0' : 'p-2'}`} onClick={() => setView('profile')}>
                    <Avatar src={currentUser.avatar} alt="Current User" size={collapsed ? 'sm' : 'md'} />
                    {!collapsed && (
                        <div className="ml-3 overflow-hidden flex-1">
                            <p className="text-sm font-medium text-gray-900 dark:text-white truncate">{currentUser.name}</p>
                            <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{currentUser.role}</p>
                        </div>
                    )}
                </div>
            </div>
        </aside>
    );
};

const Header = ({ currentView, setView }) => {
    const { theme, toggleTheme } = useContext(AppContext);
    
    return (
        <header className="bg-white/80 dark:bg-surface-dark/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 h-16 flex items-center justify-between px-4 sticky top-0 z-10">
            <div className="flex items-center flex-1">
                <button className="md:hidden p-2 text-gray-500 dark:text-gray-400 mr-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
                    <i data-lucide="menu" className="w-6 h-6"></i>
                </button>
                <div className="relative w-full max-w-md hidden sm:block">
                    <i data-lucide="search" className="w-4 h-4 text-gray-400 dark:text-gray-500 absolute left-3 top-1/2 transform -translate-y-1/2"></i>
                    <input 
                        type="text" 
                        placeholder="Search people, jobs, events..." 
                        className="w-full pl-9 pr-4 py-2 bg-gray-100 dark:bg-gray-900 border border-transparent dark:border-gray-700 rounded-full text-sm text-gray-900 dark:text-gray-100 focus:bg-white dark:focus:bg-gray-800 focus:border-primary-300 dark:focus:border-primary-500 focus:ring-2 focus:ring-primary-100 dark:focus:ring-primary-500/20 transition-all outline-none"
                    />
                </div>
            </div>
            
            <div className="flex items-center space-x-2 md:space-x-3">
                <button onClick={toggleTheme} className="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors">
                    {theme === 'dark' ? <i data-lucide="sun" className="w-5 h-5"></i> : <i data-lucide="moon" className="w-5 h-5"></i>}
                </button>
                
                <button className="sm:hidden p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full">
                    <i data-lucide="search" className="w-5 h-5"></i>
                </button>
                
                <Button variant="primary" className="hidden sm:flex" icon={<i data-lucide="plus" className="w-4 h-4"></i>}>
                    Create
                </Button>
                
                <button onClick={() => setView('messages')} className="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full relative">
                    <i data-lucide="message-square" className="w-5 h-5"></i>
                    <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 border-2 border-white dark:border-surface-dark rounded-full"></span>
                </button>
                
                <button onClick={() => setView('notifications')} className="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full relative">
                    <i data-lucide="bell" className="w-5 h-5"></i>
                    <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 border-2 border-white dark:border-surface-dark rounded-full"></span>
                </button>
            </div>
        </header>
    );
};

const Layout = ({ children, currentView, setView }) => {
    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
    
    useEffect(() => {
        if (window.lucide) {
            window.lucide.createIcons();
        }
    }, [currentView, children, sidebarCollapsed]);

    return (
        <div className="flex h-screen overflow-hidden bg-background-light dark:bg-background-dark text-gray-900 dark:text-gray-100 transition-colors duration-200">
            <Sidebar currentView={currentView} setView={setView} collapsed={sidebarCollapsed} setCollapsed={setSidebarCollapsed} />
            <div className="flex-1 flex flex-col overflow-hidden">
                <Header currentView={currentView} setView={setView} />
                <main className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
                    <div className="max-w-6xl mx-auto pb-20 md:pb-0">
                        {children}
                    </div>
                </main>
            </div>
            {/* Mobile Bottom Nav */}
            <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-surface-dark border-t border-gray-200 dark:border-gray-800 flex justify-around p-2 pb-safe z-50">
                {[
                    { id: 'home', icon: 'home' },
                    { id: 'discover', icon: 'compass' },
                    { id: 'opportunities', icon: 'briefcase' },
                    { id: 'messages', icon: 'message-square' },
                    { id: 'profile', icon: 'user' }
                ].map(item => (
                    <button 
                        key={item.id}
                        onClick={() => setView(item.id)}
                        className={`p-2 rounded-lg flex flex-col items-center transition-colors ${currentView === item.id ? 'text-primary-600 dark:text-primary-400' : 'text-gray-500 dark:text-gray-400'}`}
                    >
                        <i data-lucide={item.icon} className="w-6 h-6"></i>
                    </button>
                ))}
            </div>
        </div>
    );
};