// components/NotificationBell.js
"use client";

import { useState } from 'react';
import { useAuthStore } from '@/stores/authStore';
import { useNotifications } from '../hooks/useNotifications';
import { useNotificationStore } from '@/stores/useNotificationStore';

export default function NotificationBell({ userId }) {
    const [isOpen, setIsOpen] = useState(false);
    const userData = useAuthStore((state) => state.user);

    const { notifications, markAsRead } = useNotifications(userData.id);

    const unreadNotifications = notifications?.filter(n => !n.read) || [];

    const unreadCount = unreadNotifications.length;


    const handleMarkAsRead = (id) => {
        markAsRead([id]);
    };

    const handleMarkAllAsRead = () => {
        const unreadIds = notifications
            .filter(n => !n.read)
            .map(n => n.id);
        if (unreadIds.length > 0) {
            markAsRead(unreadIds);
        }
    };

    return (
        <div className="relative">
            <button
                onClick={() => setIsOpen(!isOpen)}
                className="p-2 rounded-full hover:bg-gray-100 relative cursor-pointer"
            >
                <svg className="w-6 h-6" 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>
                {unreadCount > 0 && (
                    <span className="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                        {unreadCount}
                    </span>
                )}
            </button>

            {isOpen && (
                <div className="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-50">
                    <div className="p-3 border-b flex justify-between items-center">
                        <h3 className="font-semibold">Notifications</h3>
                        <button
                            onClick={handleMarkAllAsRead}
                            className="text-sm text-blue-500 hover:text-blue-700"
                        >
                            Mark all as read
                        </button>
                    </div>
                    <div className="max-h-96 overflow-y-auto">
                        {unreadNotifications.length === 0 ? (
                            <div className="p-4 text-center text-gray-500">
                                No notifications
                            </div>
                        ) : (
                            unreadNotifications?.map(notification => (
                                <div
                                    key={notification.id}
                                    className={`p-3 border-b hover:bg-gray-50 cursor-pointer ${!notification.read ? 'bg-blue-50' : ''}`}
                                    onClick={() => handleMarkAsRead(notification.id)}
                                >
                                    <div className="font-medium">{notification.title}</div>
                                    <div className="text-sm text-gray-600">{notification.message}</div>
                                    <div className="text-xs text-gray-400 mt-1">
                                        {new Date(notification.createdAt).toLocaleString()}
                                    </div>
                                </div>
                            ))
                        )}
                    </div>
                </div>
            )}
        </div>
    );
}