import React, { memo } from 'react';
import { Bell, XCircle, AlertTriangle, Info } from 'lucide-react';
import { IAlert } from '../../types';

interface NotificationsDropdownProps {
  isOpen: boolean;
  alerts: IAlert[];
  unreadCount: number;
  onMarkAsRead: () => void;
  onViewAll?: () => void;
  notificationRef: React.RefObject<HTMLDivElement>;
}

const NotificationsDropdown: React.FC<NotificationsDropdownProps> = memo(({
  isOpen,
  alerts,
  unreadCount,
  onMarkAsRead,
  onViewAll,
  notificationRef
}) => {
  if (!isOpen) return null;

  return (
    <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 animate-in fade-in slide-in-from-top-2 duration-200 overflow-hidden" ref={notificationRef}>
      <div className="px-4 py-3 border-b border-slate-100 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900/50">
        <h3 className="font-semibold text-slate-800 dark:text-white">Thông báo</h3>
        <button onClick={onMarkAsRead} className="text-xs text-blue-600 dark:text-blue-400 hover:underline">Đánh dấu đã đọc</button>
      </div>
      <div className="max-h-[400px] overflow-y-auto">
        {alerts.length > 0 ? (
          alerts.map(alert => (
            <div key={alert._id} className={`px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 border-b border-slate-100 dark:border-slate-700/50 last:border-0 transition-colors ${!alert.isRead ? 'bg-blue-50/50 dark:bg-blue-900/10' : ''}`}>
              <div className="flex gap-3">
                <div className={`mt-1 flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center 
                    ${alert.severity === 'Critical' ? 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400' :
                    alert.severity === 'Warning' ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400' :
                      'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'}`}>
                  {alert.severity === 'Critical' ? <XCircle size={16} /> :
                    alert.severity === 'Warning' ? <AlertTriangle size={16} /> :
                      <Info size={16} />}
                </div>
                <div className="flex-1">
                  <p className={`text-sm ${!alert.isRead ? 'font-semibold text-slate-900 dark:text-white' : 'text-slate-600 dark:text-slate-300'}`}>
                    {alert.message}
                  </p>
                  <p className="text-xs text-slate-400 mt-1">{new Date(alert.createdAt).toLocaleString('vi-VN')}</p>
                </div>
                {!alert.isRead && <div className="w-2 h-2 rounded-full bg-blue-500 mt-2"></div>}
              </div>
            </div>
          ))
        ) : (
          <div className="p-8 text-center text-slate-500 dark:text-slate-400">
            <Bell size={32} className="mx-auto mb-2 opacity-20" />
            <p>Không có thông báo mới</p>
          </div>
        )}
      </div>
      <div className="p-2 bg-slate-50 dark:bg-slate-900/50 text-center border-t border-slate-100 dark:border-slate-700">
        <button 
          onClick={onViewAll}
          className="text-xs text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 font-medium transition-colors"
        >
          Xem tất cả
        </button>
      </div>
    </div>
  );
});

NotificationsDropdown.displayName = 'NotificationsDropdown';

export default NotificationsDropdown;