// NotificationCenter.jsx - Admin Notification System
const { useState, useEffect } = React;

function NotificationCenter({ enrollments, onMarkAsRead, onClearAll }) {
    const [isOpen, setIsOpen] = useState(false);
    const [hasNewNotifications, setHasNewNotifications] = useState(false);

    const unreadCount = enrollments.filter(e => !e.read).length;

    useEffect(() => {
        if (unreadCount > 0) {
            setHasNewNotifications(true);
            // Play notification sound (optional)
            // new Audio('/notification.mp3').play().catch(() => {});
        }
    }, [enrollments.length]);

    const formatTime = (timestamp) => {
        const date = new Date(timestamp);
        const now = new Date();
        const diff = now - date;

        if (diff < 60000) return 'Just now';
        if (diff < 3600000) return `${Math.floor(diff / 60000)} min ago`;
        if (diff < 86400000) return `${Math.floor(diff / 3600000)} hours ago`;
        return date.toLocaleDateString();
    };

    return (
        <div className="relative">
            {/* Notification Bell */}
            <button
                onClick={() => {
                    setIsOpen(!isOpen);
                    setHasNewNotifications(false);
                }}
                className="relative p-2 hover:bg-gray-100 rounded-full transition-colors"
            >
                <svg className="w-6 h-6 text-charcoal" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                </svg>

                {/* Unread Badge */}
                {unreadCount > 0 && (
                    <span className={`absolute -top-1 -right-1 bg-crimson text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center ${hasNewNotifications ? 'animate-pulse' : ''}`}>
                        {unreadCount > 9 ? '9+' : unreadCount}
                    </span>
                )}
            </button>

            {/* Notification Dropdown */}
            {isOpen && (
                <>
                    {/* Backdrop */}
                    <div
                        className="fixed inset-0 z-40"
                        onClick={() => setIsOpen(false)}
                    />

                    {/* Panel */}
                    <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-white rounded-xl shadow-2xl border border-gray-100 z-50 overflow-hidden">
                        {/* Header */}
                        <div className="p-4 border-b border-gray-100 bg-cream">
                            <div className="flex items-center justify-between">
                                <h3 className="font-serif font-semibold text-charcoal">
                                    Enrollment Notifications
                                </h3>
                                {enrollments.length > 0 && (
                                    <button
                                        onClick={onClearAll}
                                        className="text-xs text-gray-500 hover:text-crimson transition-colors"
                                    >
                                        Clear All
                                    </button>
                                )}
                            </div>
                        </div>

                        {/* Notifications List */}
                        <div className="max-h-96 overflow-y-auto">
                            {enrollments.length === 0 ? (
                                <div className="p-8 text-center">
                                    <svg className="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                                    </svg>
                                    <p className="text-gray-500">No new enrollments</p>
                                </div>
                            ) : (
                                <div className="divide-y divide-gray-50">
                                    {enrollments.slice().reverse().map((enrollment) => (
                                        <div
                                            key={enrollment.id}
                                            className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer ${
                                                !enrollment.read ? 'bg-crimson/5 border-l-4 border-l-crimson' : ''
                                            }`}
                                            onClick={() => onMarkAsRead && onMarkAsRead(enrollment.id)}
                                        >
                                            <div className="flex gap-3">
                                                {/* Avatar */}
                                                <div className="flex-shrink-0">
                                                    <div className="w-10 h-10 rounded-full bg-crimson flex items-center justify-center text-white font-semibold">
                                                        {enrollment.name?.charAt(0)?.toUpperCase() || 'S'}
                                                    </div>
                                                </div>

                                                {/* Content */}
                                                <div className="flex-1 min-w-0">
                                                    <p className="text-sm font-medium text-charcoal truncate">
                                                        {enrollment.name}
                                                    </p>
                                                    <p className="text-sm text-gray-600 truncate">
                                                        Enrolled in: {enrollment.classItem?.title || 'General Enrollment'}
                                                    </p>
                                                    <div className="flex items-center gap-2 mt-1">
                                                        <span className="text-xs text-gray-400">
                                                            {formatTime(enrollment.id)}
                                                        </span>
                                                        <span className="text-xs text-gray-400">•</span>
                                                        <span className="text-xs text-crimson">
                                                            {enrollment.experience}
                                                        </span>
                                                    </div>
                                                </div>

                                                {/* New Badge */}
                                                {!enrollment.read && (
                                                    <span className="flex-shrink-0">
                                                        <span className="inline-block w-2 h-2 bg-crimson rounded-full"></span>
                                                    </span>
                                                )}
                                            </div>

                                            {/* Contact Info */}
                                            <div className="mt-2 flex gap-4 text-xs">
                                                <a
                                                    href={`mailto:${enrollment.email}`}
                                                    onClick={(e) => e.stopPropagation()}
                                                    className="text-blue-600 hover:underline flex items-center gap-1"
                                                >
                                                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                                    </svg>
                                                    Email
                                                </a>
                                                <a
                                                    href={`tel:${enrollment.phone}`}
                                                    onClick={(e) => e.stopPropagation()}
                                                    className="text-green-600 hover:underline flex items-center gap-1"
                                                >
                                                    <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                                    </svg>
                                                    Call
                                                </a>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>

                        {/* Footer */}
                        {enrollments.length > 0 && (
                            <div className="p-3 border-t border-gray-100 bg-gray-50">
                                <p className="text-xs text-gray-500 text-center">
                                    {enrollments.length} total enrollment{enrollments.length !== 1 ? 's' : ''}
                                </p>
                            </div>
                        )}
                    </div>
                </>
            )}
        </div>
    );
}

window.NotificationCenter = NotificationCenter;