import { Bell } from 'lucide-react';

import { Button } from '@/components/ui/button';
import type { TopBarNotification } from '@/business/top-bar/types';

interface TopBarNotificationsProps {
  readonly notifications: readonly TopBarNotification[];
  readonly unreadCount: number;
  readonly isOpen: boolean;
  readonly onToggle: () => void;
  readonly onClose: () => void;
}

export function TopBarNotifications({
  notifications,
  unreadCount,
  isOpen,
  onToggle,
  onClose,
}: TopBarNotificationsProps) {
  return (
    <div className="relative">
      <Button
        type="button"
        variant="ghost"
        size="icon"
        onClick={onToggle}
        aria-label="Open notifications"
        aria-expanded={isOpen}
        className="relative p-2 rounded-xl hover:bg-slate-800 text-slate-400 transition-colors"
      >
        <Bell size={20} />
        {unreadCount > 0 && (
          <span className="absolute -top-0.5 -right-0.5 bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center min-w-[18px] h-[18px] shadow-lg shadow-red-500/40">
            {unreadCount}
          </span>
        )}
      </Button>
      {isOpen && (
        <>
          <div className="fixed inset-0 z-30" onClick={onClose} role="presentation" />
          <div className="absolute right-0 top-full mt-2 w-80 bg-slate-800 rounded-xl shadow-2xl shadow-black/40 border border-slate-700/50 z-40 overflow-hidden">
            <div className="px-4 py-3 border-b border-slate-700/50 flex items-center justify-between">
              <h3 className="font-semibold text-sm text-white">Notifications</h3>
              <span className="text-xs text-violet-400 font-medium">{unreadCount} new</span>
            </div>
            <div className="max-h-72 overflow-y-auto">
              {notifications.length === 0 ? (
                <div className="px-4 py-5 text-sm text-slate-400">No notifications yet.</div>
              ) : (
                notifications.map((notification) => (
                  <div
                    key={notification.id}
                    className={`px-4 py-3 border-b border-slate-700/30 hover:bg-slate-700/30 transition-colors ${
                      notification.unread ? 'bg-violet-500/5' : ''
                    }`}
                  >
                    <div className="flex items-start gap-2">
                      {notification.unread && (
                        <span className="w-2 h-2 rounded-full bg-violet-500 mt-1.5 flex-shrink-0 shadow-sm shadow-violet-500/50" />
                      )}
                      <div>
                        <p className="text-sm text-slate-300">{notification.text}</p>
                        <p className="text-[10px] text-slate-500 mt-0.5">{notification.time}</p>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
}
