import React, { useState } from 'react';
import { useNotifications } from '../NotificationContext';

export const NotificationBell: React.FC = () => {
    const { notifications, unreadCount, markAsRead } = useNotifications();
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className="relative">
            <button
                className="p-2 rounded-full hover:bg-white/10 relative transition-colors"
                onClick={() => setIsOpen(!isOpen)}
            >
                <span className="text-xl">🔔</span>
                {unreadCount > 0 && (
                    <span className="absolute top-1 right-1 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center border-2 border-[#0f172a]">
                        {unreadCount}
                    </span>
                )}
            </button>

            {isOpen && (
                <div className="absolute right-0 mt-2 w-80 bg-[#1e293b] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-md">
                    <div className="p-4 border-b border-white/10 flex justify-between items-center">
                        <h3 className="font-semibold text-white">Notifications</h3>
                        <span className="text-xs text-slate-400">{unreadCount} unread</span>
                    </div>
                    <div className="max-height-[400px] overflow-y-auto">
                        {notifications.length === 0 ? (
                            <div className="p-8 text-center text-slate-500 italic">
                                No notifications yet
                            </div>
                        ) : (
                            notifications.map(n => (
                                <div
                                    key={n.id}
                                    className={`p-4 border-b border-white/5 hover:bg-white/5 cursor-pointer transition-colors ${!n.is_read ? 'bg-blue-500/5' : ''}`}
                                    onClick={() => markAsRead(n.id)}
                                >
                                    <div className="flex gap-3">
                                        <div className="text-lg">
                                            {n.type === 'assignment' ? '📋' : n.type === 'mention' ? '💬' : '🔔'}
                                        </div>
                                        <div className="flex-1 min-w-0">
                                            <p className={`text-sm ${!n.is_read ? 'text-white font-medium' : 'text-slate-300'}`}>
                                                {n.title}
                                            </p>
                                            <p className="text-xs text-slate-400 mt-1 truncate">
                                                {n.message}
                                            </p>
                                            <p className="text-[10px] text-slate-500 mt-1">
                                                {new Date(n.created_at).toLocaleString()}
                                            </p>
                                        </div>
                                        {!n.is_read && <div className="w-2 h-2 bg-blue-500 rounded-full mt-2" />}
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                </div>
            )}
        </div>
    );
};