const Discover = () => {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeFilter, setActiveFilter] = useState('All');
    const [communities, setCommunities] = useState(mockCommunities);
    const [people, setPeople] = useState(mockPeople);
    const [opportunities, setOpportunities] = useState(mockOpportunities);

    const filters = ['All', 'People', 'Opportunities', 'Communities', 'Events', 'Projects'];
    const topics = ['Designers', 'React Developers', 'Startups', 'Remote Jobs', 'Product Management', 'AI', 'Data Science'];

    const toggleJoin = (id) => {
        setCommunities(communities.map(c => c.id === id ? { ...c, isJoined: !c.isJoined } : c));
    };

    const toggleFollow = (id) => {
        setPeople(people.map(p => p.id === id ? { ...p, status: p.status === 'connected' ? 'none' : 'connected' } : p));
    };

    const toggleSave = (id) => {
        setOpportunities(opportunities.map(o => o.id === id ? { ...o, isSaved: !o.isSaved } : o));
    };

    return (
        <div className="space-y-8 pb-8">
            {/* Header & Search */}
            <div className="text-center py-10 bg-gradient-to-b from-primary-50 dark:from-primary-900/10 to-transparent rounded-3xl -mx-4 px-4 sm:mx-0">
                <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Discover the Network</h1>
                <p className="text-gray-500 dark:text-gray-400 mb-8 max-w-2xl mx-auto">Find the right people, opportunities, and communities to accelerate your professional growth.</p>
                
                <div className="max-w-2xl mx-auto relative mb-6">
                    <Input 
                        icon={<i data-lucide="search" className="w-5 h-5"></i>}
                        placeholder="Search for people, opportunities, communities..." 
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="py-4 text-base shadow-sm"
                    />
                </div>
                
                <div className="flex justify-center gap-2 flex-wrap max-w-3xl mx-auto">
                    {topics.map(term => (
                        <Badge key={term} variant="indigo" className="cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-900/50 px-3 py-1.5 text-sm transition-colors border border-primary-200 dark:border-primary-800">
                            {term}
                        </Badge>
                    ))}
                </div>
            </div>

            {/* Filters */}
            <div className="flex overflow-x-auto no-scrollbar gap-2 pb-2 border-b border-gray-200 dark:border-gray-800">
                {filters.map(filter => (
                    <Tab 
                        key={filter} 
                        active={activeFilter === filter} 
                        onClick={() => setActiveFilter(filter)}
                    >
                        {filter}
                    </Tab>
                ))}
            </div>

            {/* Trending Communities */}
            {(activeFilter === 'All' || activeFilter === 'Communities') && (
                <section>
                    <div className="flex justify-between items-end mb-4">
                        <h2 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                            <i data-lucide="trending-up" className="w-5 h-5 text-primary-500"></i>
                            Trending Communities
                        </h2>
                        <a href="#" className="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">See all</a>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {communities.slice(0, 3).map(comm => (
                            <Card key={comm.id} className="p-5 flex flex-col h-full hoverable">
                                <div className="flex items-start gap-4 mb-4">
                                    <Avatar src={comm.logo} alt={comm.name} size="lg" className="ring-1 ring-gray-200 dark:ring-gray-700 shadow-sm" />
                                    <div className="flex-1">
                                        <h3 className="font-bold text-gray-900 dark:text-white truncate">{comm.name}</h3>
                                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{comm.members.toLocaleString()} members</p>
                                    </div>
                                </div>
                                <p className="text-sm text-gray-600 dark:text-gray-300 mb-6 flex-1 line-clamp-2">{comm.description}</p>
                                <Button 
                                    variant={comm.isJoined ? 'outline' : 'primary'} 
                                    fullWidth 
                                    onClick={() => toggleJoin(comm.id)}
                                >
                                    {comm.isJoined ? 'Joined' : 'Join Community'}
                                </Button>
                            </Card>
                        ))}
                    </div>
                </section>
            )}
            
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Top Opportunities */}
                {(activeFilter === 'All' || activeFilter === 'Opportunities') && (
                    <section>
                        <div className="flex justify-between items-end mb-4">
                            <h2 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                <i data-lucide="briefcase" className="w-5 h-5 text-emerald-500"></i>
                                Top Opportunities
                            </h2>
                            <a href="#" className="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">See all</a>
                        </div>
                        <div className="space-y-4">
                            {opportunities.slice(0, 3).map(opp => (
                                <Card key={opp.id} className="p-5 hoverable group">
                                    <div className="flex justify-between items-start gap-4">
                                        <div className="flex gap-4">
                                            <Avatar src={opp.logo} alt={opp.org} className="rounded-xl ring-1 ring-gray-200 dark:ring-gray-700 shadow-sm" />
                                            <div>
                                                <h3 className="font-semibold text-gray-900 dark:text-white group-hover:text-emerald-600 transition-colors">{opp.title}</h3>
                                                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{opp.org}</p>
                                                <div className="flex items-center gap-2 mt-2">
                                                    <Badge variant="gray">{opp.location}</Badge>
                                                    <Badge variant="emerald">{opp.type}</Badge>
                                                </div>
                                            </div>
                                        </div>
                                        <button 
                                            onClick={() => toggleSave(opp.id)}
                                            className={`p-2 rounded-full transition-colors ${opp.isSaved ? 'text-primary-500 bg-primary-50 dark:bg-primary-900/20' : 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'}`}
                                        >
                                            <i data-lucide="bookmark" className={`w-5 h-5 ${opp.isSaved ? 'fill-current' : ''}`}></i>
                                        </button>
                                    </div>
                                </Card>
                            ))}
                        </div>
                    </section>
                )}

                {/* People to Follow */}
                {(activeFilter === 'All' || activeFilter === 'People') && (
                    <section>
                        <div className="flex justify-between items-end mb-4">
                            <h2 className="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                                <i data-lucide="users" className="w-5 h-5 text-blue-500"></i>
                                People to Follow
                            </h2>
                            <a href="#" className="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">See all</a>
                        </div>
                        <div className="space-y-4">
                            {people.slice(0, 3).map(person => (
                                <Card key={person.id} className="p-5 hoverable">
                                    <div className="flex items-center justify-between gap-4">
                                        <div className="flex items-center gap-4">
                                            <Avatar src={person.avatar} alt={person.name} size="lg" className="ring-2 ring-white dark:ring-surface-dark shadow-sm" />
                                            <div>
                                                <p className="font-bold text-gray-900 dark:text-white hover:text-primary-600 transition-colors cursor-pointer">{person.name}</p>
                                                <p className="text-sm text-gray-600 dark:text-gray-400 mt-0.5">{person.role}</p>
                                                <p className="text-xs text-gray-400 mt-1 flex items-center">
                                                    <i data-lucide="link" className="w-3 h-3 mr-1"></i> {person.mutual} mutual connections
                                                </p>
                                            </div>
                                        </div>
                                        <Button 
                                            variant={person.status === 'connected' ? 'outline' : 'secondary'} 
                                            size="sm"
                                            onClick={() => toggleFollow(person.id)}
                                            icon={<i data-lucide={person.status === 'connected' ? "check" : "user-plus"} className="w-4 h-4"></i>}
                                        >
                                            {person.status === 'connected' ? 'Following' : 'Follow'}
                                        </Button>
                                    </div>
                                </Card>
                            ))}
                        </div>
                    </section>
                )}
            </div>
        </div>
    );
};