const Events = () => {
    const [searchQuery, setSearchQuery] = useState('');
    const [activeTab, setActiveTab] = useState('Upcoming');
    const [eventsList, setEventsList] = useState(mockEvents);
    const tabs = ['Upcoming', 'Recommended', 'My Events', 'Past Events'];

    const toggleRSVP = (id) => {
        setEventsList(eventsList.map(e => {
            if (e.id === id) {
                const newStatus = e.rsvp === 'none' ? 'going' : (e.rsvp === 'going' ? 'maybe' : 'none');
                return { ...e, rsvp: newStatus };
            }
            return e;
        }));
    };

    const getRSVPButtonText = (status) => {
        if (status === 'going') return 'Going';
        if (status === 'maybe') return 'Maybe';
        return 'RSVP';
    };

    const getRSVPButtonVariant = (status) => {
        if (status === 'going') return 'primary';
        if (status === 'maybe') return 'secondary';
        return 'outline';
    };

    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">Events</h1>
                    <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">Discover networking events, conferences, and meetups</p>
                </div>
                <div className="flex gap-2 w-full sm:w-auto">
                    <Button variant="primary" icon={<i data-lucide="plus" className="w-4 h-4"></i>}>
                        <span className="hidden sm:inline">Create Event</span>
                        <span className="sm:hidden">Create</span>
                    </Button>
                </div>
            </div>

            <div className="bg-white dark:bg-surface-dark p-4 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 mb-6 flex flex-col md:flex-row gap-4">
                <Input 
                    placeholder="Search events by title, organizer, or keyword..." 
                    icon={<i data-lucide="search" className="w-5 h-5"></i>}
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="flex-1"
                />
                <div className="flex gap-2">
                    <Input 
                        placeholder="Location" 
                        icon={<i data-lucide="map-pin" className="w-5 h-5"></i>}
                        className="w-full md:w-48"
                    />
                    <Button variant="outline" className="px-4" icon={<i data-lucide="sliders" className="w-5 h-5" />}>
                        <span className="hidden md:inline">Filters</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 pb-1">
                {tabs.map(tab => (
                    <Tab key={tab} active={activeTab === tab} onClick={() => setActiveTab(tab)}>
                        {tab}
                    </Tab>
                ))}
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                {eventsList.map(event => (
                    <Card key={event.id} className="flex flex-col hoverable group overflow-hidden">
                        <div className="relative h-48 w-full">
                            <img src={event.image} alt={event.title} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                            <div className="absolute top-3 left-3 bg-white/90 dark:bg-surface-dark/90 backdrop-blur text-gray-900 dark:text-white rounded-lg p-2 text-center min-w-[56px] shadow-sm">
                                <div className="text-[10px] font-bold uppercase tracking-wider text-primary-600 dark:text-primary-400">{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="absolute top-3 right-3 flex gap-2">
                                <button className="p-2 bg-white/90 dark:bg-surface-dark/90 backdrop-blur rounded-full text-gray-600 dark:text-gray-300 hover:text-primary-600 shadow-sm transition-colors">
                                    <i data-lucide="bookmark" className="w-4 h-4"></i>
                                </button>
                                <button className="p-2 bg-white/90 dark:bg-surface-dark/90 backdrop-blur rounded-full text-gray-600 dark:text-gray-300 hover:text-primary-600 shadow-sm transition-colors">
                                    <i data-lucide="share-2" className="w-4 h-4"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div className="p-5 flex-1 flex flex-col">
                            <Badge variant="indigo" className="w-fit mb-3">{event.category}</Badge>
                            <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 mb-2 line-clamp-2">{event.title}</h3>
                            <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-4">By {event.organizer}</p>
                            
                            <div className="flex flex-col gap-2 mb-6 mt-auto">
                                <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                                    <i data-lucide="clock" className="w-4 h-4 mr-3 text-primary-500"></i>
                                    {event.date} • {event.time}
                                </div>
                                <div className="flex items-center text-sm text-gray-500 dark:text-gray-400">
                                    <i data-lucide="map-pin" className="w-4 h-4 mr-3 text-primary-500"></i>
                                    {event.location}
                                </div>
                                <div className="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-2">
                                    <div className="flex -space-x-2 mr-3">
                                        {[1,2,3].map(i => (
                                            <img key={i} className="w-6 h-6 rounded-full border-2 border-white dark:border-surface-dark z-10" src={`https://i.pravatar.cc/150?img=${i+40}`} alt="Attendee" />
                                        ))}
                                    </div>
                                    <span className="font-medium text-gray-700 dark:text-gray-300">{event.attendees.toLocaleString()}</span>&nbsp;attendees
                                </div>
                            </div>
                            
                            <Button 
                                variant={getRSVPButtonVariant(event.rsvp)} 
                                fullWidth
                                onClick={() => toggleRSVP(event.id)}
                                icon={event.rsvp === 'going' ? <i data-lucide="check-circle" className="w-4 h-4"></i> : null}
                            >
                                {getRSVPButtonText(event.rsvp)}
                            </Button>
                        </div>
                    </Card>
                ))}
            </div>
        </div>
    );
};