import { useState } from 'react';
import { Bell } from 'lucide-react';
import clsx from 'clsx';
import { useUnreadNotificationsCount } from '@/hooks/useData';
import { NotificationDrawer } from './NotificationDrawer';

export function NotificationBell() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const { data } = useUnreadNotificationsCount();

  const unreadCount = data?.count ?? 0;
  const hasUnread = unreadCount > 0;

  return (
    <>
      <button
        onClick={() => setIsDrawerOpen(true)}
        className="relative p-2 rounded-lg hover:bg-secondary-100 dark:hover:bg-secondary-700 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500"
        aria-label={`Notifications${hasUnread ? ` (${unreadCount} unread)` : ''}`}
        aria-haspopup="dialog"
      >
        <Bell
          className={clsx(
            'w-5 h-5 transition-colors',
            hasUnread
              ? 'text-primary-600 dark:text-primary-400'
              : 'text-secondary-600 dark:text-secondary-400'
          )}
          aria-hidden="true"
        />
        {hasUnread && (
          <span className="absolute top-1 right-1 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full" aria-hidden="true">
            {unreadCount > 99 ? '99+' : unreadCount}
          </span>
        )}
      </button>

      <NotificationDrawer
        isOpen={isDrawerOpen}
        onClose={() => setIsDrawerOpen(false)}
      />
    </>
  );
}