const Home = () => {
    const { theme } = useContext(AppContext);
    const [posts, setPosts] = useState(mockPosts);
    const [postContent, setPostContent] = useState('');
    const [isPosting, setIsPosting] = useState(false);

    const handlePost = () => {
        if (!postContent.trim()) return;
        setIsPosting(true);
        setTimeout(() => {
            const newPost = {
                id: Date.now(),
                author: currentUser,
                time: 'Just now',
                content: postContent,
                likes: 0,
                comments: [],
                tags: [],
                isLiked: false,
                isSaved: false
            };
            setPosts([newPost, ...posts]);
            setPostContent('');
            setIsPosting(false);
        }, 600);
    };

    const toggleLike = (postId) => {
        setPosts(posts.map(post => {
            if (post.id === postId) {
                return {
                    ...post,
                    isLiked: !post.isLiked,
                    likes: post.isLiked ? post.likes - 1 : post.likes + 1
                };
            }
            return post;
        }));
    };

    const toggleSave = (postId) => {
        setPosts(posts.map(post => {
            if (post.id === postId) {
                return { ...post, isSaved: !post.isSaved };
            }
            return post;
        }));
    };

    return (
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <div className="lg:col-span-8 space-y-6">
                {/* Welcome Card - Premium Design */}
                <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary-600 via-primary-700 to-purple-800 text-white shadow-lg">
                    {/* Abstract background shapes */}
                    <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 rounded-full bg-white opacity-10 blur-3xl"></div>
                    <div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-purple-500 opacity-20 blur-3xl"></div>
                    
                    <div className="relative p-6 sm:p-8 z-10 flex flex-col sm:flex-row items-center sm:items-start justify-between gap-6">
                        <div className="text-center sm:text-left">
                            <h1 className="text-2xl sm:text-3xl font-bold mb-2">Welcome back, {currentUser.name.split(' ')[0]}! 👋</h1>
                            <p className="text-primary-100 max-w-lg mb-6">Build your network, find new opportunities, and stay connected with your professional community.</p>
                            
                            <div className="flex flex-wrap gap-3 justify-center sm:justify-start">
                                <Button variant="secondary" className="bg-white/10 hover:bg-white/20 text-white border-none shadow-none backdrop-blur-sm" size="sm" icon={<i data-lucide="briefcase" className="w-4 h-4"></i>}>Find Jobs</Button>
                                <Button variant="secondary" className="bg-white/10 hover:bg-white/20 text-white border-none shadow-none backdrop-blur-sm" size="sm" icon={<i data-lucide="users" className="w-4 h-4"></i>}>Join Communities</Button>
                                <Button variant="secondary" className="bg-white/10 hover:bg-white/20 text-white border-none shadow-none backdrop-blur-sm" size="sm" icon={<i data-lucide="calendar" className="w-4 h-4"></i>}>Attend Events</Button>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Quick Statistics */}
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    {[
                        { label: 'Connections', value: currentUser.connections, icon: 'users', color: 'text-blue-500', bg: 'bg-blue-100 dark:bg-blue-900/30' },
                        { label: 'Communities', value: '12', icon: 'hash', color: 'text-purple-500', bg: 'bg-purple-100 dark:bg-purple-900/30' },
                        { label: 'Opportunities', value: '5', icon: 'briefcase', color: 'text-emerald-500', bg: 'bg-emerald-100 dark:bg-emerald-900/30' },
                        { label: 'Profile Views', value: '128', icon: 'eye', color: 'text-orange-500', bg: 'bg-orange-100 dark:bg-orange-900/30' }
                    ].map((stat, i) => (
                        <Card key={i} className="p-4 flex flex-col items-center justify-center text-center hoverable">
                            <div className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 ${stat.bg} ${stat.color}`}>
                                <i data-lucide={stat.icon} className="w-5 h-5"></i>
                            </div>
                            <h4 className="text-xl font-bold text-gray-900 dark:text-white">{stat.value}</h4>
                            <p className="text-xs text-gray-500 dark:text-gray-400 font-medium">{stat.label}</p>
                        </Card>
                    ))}
                </div>

                {/* Create Post */}
                <Card className="p-5 border-t-4 border-t-primary-500">
                    <div className="flex gap-4">
                        <Avatar src={currentUser.avatar} alt="User" />
                        <div className="flex-1">
                            <textarea 
                                value={postContent}
                                onChange={(e) => setPostContent(e.target.value)}
                                placeholder="Share an update, ask a question, or post an opportunity..." 
                                className="w-full bg-gray-50 dark:bg-gray-900 border border-transparent dark:border-gray-800 rounded-xl px-4 py-3 text-sm focus:bg-white dark:focus:bg-gray-800 focus:ring-2 focus:ring-primary-500/20 focus:border-primary-300 dark:focus:border-primary-600 transition-all resize-none min-h-[80px]"
                            />
                            <div className="flex justify-between items-center mt-3">
                                <div className="flex gap-1 sm:gap-2">
                                    <button className="p-2 text-primary-500 hover:bg-primary-50 dark:hover:bg-primary-900/20 rounded-full transition-colors flex items-center gap-2" title="Image">
                                        <i data-lucide="image" className="w-5 h-5"></i>
                                        <span className="text-xs font-medium hidden sm:inline">Media</span>
                                    </button>
                                    <button className="p-2 text-emerald-500 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 rounded-full transition-colors flex items-center gap-2" title="Event">
                                        <i data-lucide="calendar" className="w-5 h-5"></i>
                                        <span className="text-xs font-medium hidden sm:inline">Event</span>
                                    </button>
                                    <button className="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-full transition-colors flex items-center gap-2" title="Poll">
                                        <i data-lucide="bar-chart-2" className="w-5 h-5"></i>
                                        <span className="text-xs font-medium hidden sm:inline">Poll</span>
                                    </button>
                                </div>
                                <Button 
                                    variant="primary" 
                                    className="py-1.5 px-6 rounded-full" 
                                    onClick={handlePost}
                                    disabled={!postContent.trim() || isPosting}
                                >
                                    {isPosting ? 'Posting...' : 'Post'}
                                </Button>
                            </div>
                        </div>
                    </div>
                </Card>

                {/* Feed */}
                <div className="space-y-4">
                    <div className="flex items-center justify-between mb-2">
                        <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                            <i data-lucide="activity" className="w-5 h-5 mr-2 text-primary-500"></i>
                            Recent Activity
                        </h2>
                        <div className="flex gap-2">
                            <select className="bg-transparent text-sm text-gray-500 dark:text-gray-400 focus:outline-none">
                                <option>Sort by: Top</option>
                                <option>Sort by: Recent</option>
                            </select>
                        </div>
                    </div>

                    {posts.map(post => (
                        <Card key={post.id} className="p-0 overflow-visible">
                            <div className="p-5">
                                <div className="flex justify-between items-start mb-4">
                                    <div className="flex gap-3 items-center group cursor-pointer">
                                        <Avatar src={post.author.avatar} alt={post.author.name} className="ring-2 ring-transparent group-hover:ring-primary-100 dark:group-hover:ring-primary-900/30 transition-all" />
                                        <div>
                                            <h4 className="font-semibold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">{post.author.name}</h4>
                                            <p className="text-xs text-gray-500 dark:text-gray-400">{post.author.role} • {post.time}</p>
                                        </div>
                                    </div>
                                    <button className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                        <i data-lucide="more-horizontal" className="w-5 h-5"></i>
                                    </button>
                                </div>
                                
                                <p className="text-gray-800 dark:text-gray-200 text-sm mb-4 leading-relaxed whitespace-pre-line">{post.content}</p>
                                
                                {post.image && (
                                    <div className="mb-4 -mx-5 px-5">
                                        <img src={post.image} alt="Post attachment" className="w-full h-auto rounded-xl object-cover max-h-96 border border-gray-100 dark:border-gray-800" />
                                    </div>
                                )}

                                {post.tags && post.tags.length > 0 && (
                                    <div className="flex flex-wrap gap-2 mb-4">
                                        {post.tags.map(tag => (
                                            <Badge key={tag} variant="gray" className="hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors">#{tag}</Badge>
                                        ))}
                                    </div>
                                )}
                            </div>
                            
                            <div className="px-5 py-3 border-t border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/20 flex items-center justify-between">
                                <div className="flex gap-1 sm:gap-4 text-gray-500 dark:text-gray-400">
                                    <button 
                                        onClick={() => toggleLike(post.id)}
                                        className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg transition-all text-sm font-medium ${post.isLiked ? 'text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20' : 'hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200'}`}
                                    >
                                        <i data-lucide="heart" className={`w-5 h-5 ${post.isLiked ? 'fill-current' : ''}`}></i>
                                        <span className="hidden sm:inline">{post.likes}</span>
                                    </button>
                                    <button className="flex items-center justify-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200 text-sm font-medium">
                                        <i data-lucide="message-circle" className="w-5 h-5"></i>
                                        <span className="hidden sm:inline">{post.comments?.length || 0}</span>
                                    </button>
                                </div>
                                <div className="flex gap-1 sm:gap-4 text-gray-500 dark:text-gray-400">
                                    <button 
                                        onClick={() => toggleSave(post.id)}
                                        className={`flex items-center justify-center gap-2 px-3 py-2 rounded-lg transition-all text-sm font-medium ${post.isSaved ? 'text-primary-600 dark:text-primary-400' : 'hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200'}`}
                                    >
                                        <i data-lucide="bookmark" className={`w-5 h-5 ${post.isSaved ? 'fill-current text-primary-500' : ''}`}></i>
                                    </button>
                                    <button className="flex items-center justify-center gap-2 px-3 py-2 rounded-lg transition-all hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-200 text-sm font-medium">
                                        <i data-lucide="share-2" className="w-5 h-5"></i>
                                        <span className="hidden sm:inline">Share</span>
                                    </button>
                                </div>
                            </div>
                        </Card>
                    ))}
                </div>
            </div>

            {/* Right Sidebar Widgets */}
            <div className="lg:col-span-4 space-y-6 hidden lg:block">
                <Card className="p-5 border-t-4 border-t-indigo-400">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="font-semibold text-gray-900 dark:text-white">People to Follow</h3>
                        <i data-lucide="users" className="w-5 h-5 text-gray-400"></i>
                    </div>
                    <div className="space-y-4">
                        {mockPeople.slice(0,3).map(person => (
                            <div key={person.id} className="flex items-start justify-between group">
                                <div className="flex items-start gap-3 overflow-hidden cursor-pointer">
                                    <Avatar src={person.avatar} alt={person.name} />
                                    <div className="truncate">
                                        <p className="text-sm font-semibold text-gray-900 dark:text-white group-hover:text-primary-600 transition-colors truncate">{person.name}</p>
                                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{person.role}</p>
                                        <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{person.mutual} mutual connections</p>
                                    </div>
                                </div>
                                <button className="text-primary-600 bg-primary-50 dark:bg-primary-900/20 p-2 hover:bg-primary-100 dark:hover:bg-primary-900/40 rounded-full transition-colors shrink-0">
                                    <i data-lucide="user-plus" className="w-4 h-4"></i>
                                </button>
                            </div>
                        ))}
                    </div>
                    <Button variant="ghost" className="w-full mt-4 text-xs font-semibold" fullWidth>View all recommendations</Button>
                </Card>

                <Card className="p-5 border-t-4 border-t-emerald-400">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="font-semibold text-gray-900 dark:text-white">Upcoming Events</h3>
                        <i data-lucide="calendar" className="w-5 h-5 text-gray-400"></i>
                    </div>
                    <div className="space-y-4">
                        {mockEvents.map(event => (
                            <div key={event.id} className="flex gap-3 group cursor-pointer">
                                <div className="bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 rounded-xl p-2 text-center min-w-[56px] h-fit border border-emerald-100 dark:border-emerald-800">
                                    <div className="text-[10px] font-bold uppercase tracking-wider">{event.date.split(' ')[0]}</div>
                                    <div className="text-lg font-bold leading-none my-0.5">{event.date.split(' ')[1].replace(',', '')}</div>
                                </div>
                                <div className="flex-1 overflow-hidden">
                                    <p className="text-sm font-semibold text-gray-900 dark:text-white group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors line-clamp-2 leading-tight">{event.title}</p>
                                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">{event.time}</p>
                                    <div className="flex -space-x-2 mt-2">
                                        {[1,2,3].map(i => (
                                            <img key={i} className="w-5 h-5 rounded-full border-2 border-white dark:border-surface-dark z-10" src={`https://i.pravatar.cc/150?img=${i+10}`} alt="Attendee" />
                                        ))}
                                        <div className="w-5 h-5 rounded-full border-2 border-white dark:border-surface-dark bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-[8px] font-bold text-gray-600 dark:text-gray-300 z-0">
                                            +{event.attendees > 99 ? '99' : event.attendees}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                    <Button variant="ghost" className="w-full mt-4 text-xs font-semibold" fullWidth>Discover more events</Button>
                </Card>
                
                <Card className="p-5 border-t-4 border-t-blue-400">
                    <div className="flex items-center justify-between mb-4">
                        <h3 className="font-semibold text-gray-900 dark:text-white">Top Opportunities</h3>
                        <i data-lucide="briefcase" className="w-5 h-5 text-gray-400"></i>
                    </div>
                    <div className="space-y-4">
                        {mockOpportunities.slice(0, 3).map(opp => (
                            <div key={opp.id} className="flex gap-3 group cursor-pointer">
                                <Avatar src={opp.logo} alt={opp.org} className="rounded-lg ring-1 ring-gray-200 dark:ring-gray-700" />
                                <div className="flex-1 overflow-hidden">
                                    <p className="text-sm font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate">{opp.title}</p>
                                    <p className="text-xs text-gray-600 dark:text-gray-400 truncate">{opp.org}</p>
                                    <p className="text-[10px] text-gray-400 dark:text-gray-500 mt-0.5">{opp.location} • {opp.type}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                    <Button variant="ghost" className="w-full mt-4 text-xs font-semibold" fullWidth>View all jobs</Button>
                </Card>
            </div>
        </div>
    );
};