const People = () => {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState('Recommended');
    const [peopleList, setPeopleList] = useState(mockPeople);
    const tabs = ['Recommended', 'Connections', 'Alumni', 'Local'];

    const toggleConnection = (id) => {
        setPeopleList(peopleList.map(p => {
            if (p.id === id) {
                const nextStatus = p.status === 'none' ? 'pending' : (p.status === 'pending' ? 'none' : 'connected');
                return { ...p, status: nextStatus };
            }
            return p;
        }));
    };

    const getConnectButtonText = (status) => {
        if (status === 'connected') return 'Connected';
        if (status === 'pending') return 'Pending';
        return 'Connect';
    };

    const getConnectButtonVariant = (status) => {
        if (status === 'connected') return 'outline';
        if (status === 'pending') return 'secondary';
        return 'primary';
    };

    const getConnectButtonIcon = (status) => {
        if (status === 'connected') return <i data-lucide="check" className="w-4 h-4"></i>;
        if (status === 'pending') return <i data-lucide="clock" className="w-4 h-4"></i>;
        return <i data-lucide="user-plus" className="w-4 h-4"></i>;
    };

    return (
        <div className="space-y-6 pb-8">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-2">
                <div>
                    <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Network</h1>
                    <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">Manage and grow your professional connections</p>
                </div>
                <div className="flex gap-2 w-full sm:w-auto">
                    <Input 
                        placeholder="Search people..." 
                        icon={<i data-lucide="search" className="w-4 h-4"></i>}
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="w-full sm:w-64"
                    />
                    <Button variant="outline" icon={<i data-lucide="filter" className="w-4 h-4" />}>
                        <span className="hidden sm:inline">Filter</span>
                    </Button>
                </div>
            </div>
            
            <div className="flex gap-2 border-b border-gray-200 dark:border-gray-800 mb-6 overflow-x-auto no-scrollbar">
                {tabs.map(tab => (
                    <Tab key={tab} active={activeTab === tab} onClick={() => setActiveTab(tab)}>
                        {tab} {tab === 'Connections' && <span className="ml-1 text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded-full">{currentUser.connections}</span>}
                    </Tab>
                ))}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                {peopleList.map(person => (
                    <Card key={person.id} className="flex flex-col hoverable group">
                        <div className="relative h-20 bg-gradient-to-r from-primary-400 to-purple-500 rounded-t-xl">
                            {/* Abstract pattern or simple gradient */}
                        </div>
                        <div className="p-6 pt-0 flex-1 text-center relative flex flex-col items-center">
                            <div className="absolute -top-12">
                                <Avatar src={person.avatar} alt={person.name} size="2xl" border className="bg-white dark:bg-surface-dark group-hover:scale-105 transition-transform duration-300" />
                            </div>
                            
                            <div className="mt-24 w-full">
                                <h3 className="font-bold text-gray-900 dark:text-white text-lg group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">{person.name}</h3>
                                <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">{person.role}</p>
                                <p className="text-xs text-gray-400 dark:text-gray-500 mb-4 flex items-center justify-center bg-gray-50 dark:bg-gray-800/50 inline-flex px-3 py-1 rounded-full">
                                    <i data-lucide="map-pin" className="w-3 h-3 mr-1"></i> {person.location}
                                </p>
                                <div className="flex flex-wrap justify-center gap-1.5 mb-4">
                                    {person.skills.slice(0, 3).map(skill => (
                                        <Badge key={skill} variant="gray" className="group-hover:bg-primary-50 dark:group-hover:bg-primary-900/20 group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors">{skill}</Badge>
                                    ))}
                                </div>
                                <div className="flex items-center justify-center gap-2 mb-2">
                                    <div className="flex -space-x-2">
                                        {[1,2].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+20}`} alt="Connection" />
                                        ))}
                                    </div>
                                    <p className="text-xs text-gray-500 dark:text-gray-400">{person.mutual} mutual connections</p>
                                </div>
                            </div>
                        </div>
                        <div className="border-t border-gray-100 dark:border-gray-800 p-4 bg-gray-50/50 dark:bg-gray-900/20 flex gap-3">
                            <Button 
                                variant={getConnectButtonVariant(person.status)} 
                                className="flex-1 text-sm py-2"
                                onClick={() => toggleConnection(person.id)}
                                icon={getConnectButtonIcon(person.status)}
                            >
                                {getConnectButtonText(person.status)}
                            </Button>
                            <Button variant="outline" className="flex-1 text-sm py-2" icon={<i data-lucide="message-square" className="w-4 h-4"></i>}>Message</Button>
                        </div>
                    </Card>
                ))}
            </div>
            
            {peopleList.length === 0 && (
                <EmptyState 
                    icon={<i data-lucide="users" className="w-8 h-8"></i>}
                    title="No people found"
                    description="Try adjusting your search or filters to find more connections."
                    action={<Button variant="primary">Clear Filters</Button>}
                />
            )}
        </div>
    );
};