const Notifications = () => {
    const { notifications, setNotifications } = useContext(AppContext);
    const [activeFilter, setActiveFilter] = useState('All');
    
    const filters = ['All', 'Unread', 'Mentions', 'Connections'];

    const getIcon = (type) => {
        switch(type) {
            case 'mention': return <i data-lucide="at-sign" className="w-4 h-4 text-primary-500"></i>;
            case 'connection': return <i data-lucide="user-plus" className="w-4 h-4 text-emerald-500"></i>;
            case 'opportunity': return <i data-lucide="briefcase" className="w-4 h-4 text-blue-500"></i>;
            default: return <i data-lucide="bell" className="w-4 h-4 text-gray-500"></i>;
        }
    };

    const markAllRead = () => {
        setNotifications(notifications.map(n => ({ ...n, unread: false })));
    };

    const markAsRead = (id) => {
        setNotifications(notifications.map(n => n.id === id ? { ...n, unread: false } : n));
    };
    
    const deleteNotification = (id) => {
        setNotifications(notifications.filter(n => n.id !== id));
    };

    const filteredNotifications = notifications.filter(n => {
        if (activeFilter === 'All') return true;
        if (activeFilter === 'Unread') return n.unread;
        if (activeFilter === 'Mentions') return n.type === 'mention';
        if (activeFilter === 'Connections') return n.type === 'connection';
        return true;
    });

    return (
        <div className="max-w-3xl mx-auto 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">Notifications</h1>
                    <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">Stay updated on your network's activity</p>
                </div>
                <div className="flex gap-2 w-full sm:w-auto">
                    <Button variant="outline" icon={<i data-lucide="check-check" className="w-4 h-4"></i>} onClick={markAllRead}>
                        Mark all as read
                    </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">
                {filters.map(filter => (
                    <Tab key={filter} active={activeFilter === filter} onClick={() => setActiveFilter(filter)}>
                        {filter}
                    </Tab>
                ))}
            </div>

            <div className="bg-white dark:bg-surface-dark rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden">
                {filteredNotifications.length > 0 ? (
                    <div className="divide-y divide-gray-100 dark:divide-gray-800/50">
                        {filteredNotifications.map(notification => (
                            <div 
                                key={notification.id} 
                                className={`p-4 sm:p-5 flex gap-4 transition-colors group cursor-pointer ${notification.unread ? 'bg-primary-50/50 dark:bg-primary-900/10' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}`}
                                onClick={() => markAsRead(notification.id)}
                            >
                                <div className="relative shrink-0">
                                    <Avatar src={notification.avatar} alt="Notification" size="lg" />
                                    <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-white dark:bg-surface-dark rounded-full flex items-center justify-center shadow-sm border border-gray-100 dark:border-gray-800">
                                        {getIcon(notification.type)}
                                    </div>
                                </div>
                                
                                <div className="flex-1 min-w-0">
                                    <p className={`text-sm md:text-base text-gray-800 dark:text-gray-200 ${notification.unread ? 'font-semibold' : ''}`}>
                                        {notification.message}
                                    </p>
                                    <p className={`text-xs mt-1 ${notification.unread ? 'text-primary-600 dark:text-primary-400 font-medium' : 'text-gray-500 dark:text-gray-400'}`}>
                                        {notification.time}
                                    </p>
                                </div>

                                <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                                    <button 
                                        className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-colors"
                                        onClick={(e) => { e.stopPropagation(); deleteNotification(notification.id); }}
                                    >
                                        <i data-lucide="trash-2" className="w-4 h-4"></i>
                                    </button>
                                </div>
                                {notification.unread && (
                                    <div className="w-2 h-2 rounded-full bg-primary-600 self-center shrink-0"></div>
                                )}
                            </div>
                        ))}
                    </div>
                ) : (
                    <EmptyState 
                        icon={<i data-lucide="bell-off" className="w-8 h-8"></i>}
                        title="No notifications"
                        description="You're all caught up! Check back later for new updates."
                    />
                )}
            </div>
        </div>
    );
};