import { Bell } from 'lucide-react';
import MetaTags from '../components/partials/MetaTags';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../app/store';
import { useEffect } from 'react';
import { fetchNotificationData } from '../app/reducers/notifications';
import LoadingSpinner from '../components/partials/LoadingSpinner';

export default function Notification() {
  const { notifications, dataFetched } = useSelector((state: RootState) => state.notifications);
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    dispatch(fetchNotificationData())
  }, [dispatch]);

  const markAsRead = (id: number) => {
    // setNotifications(notifications.map(notification => 
    //   notification.id === id ? { ...notification, read: true } : notification
    // ));
  };

  const markAllAsRead = () => {
    // setNotifications(notifications.map(notification => ({ ...notification, read: true })));
  };


  return (
    <div className="max-w-3xl mx-auto p-4">
      {!dataFetched && <LoadingSpinner text='Getting Notifications' />}
        <MetaTags title="Notifications" />
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        {/* Header */}
        <div className="flex justify-between items-center p-4 border-b">
          <h1 className="text-xl font-semibold flex items-center">
            <Bell className="mr-2" size={20} />
            Notifications
          </h1>
          <div className="flex gap-2">
            <button 
              onClick={markAllAsRead}
              className="text-sm text-primary hover:underline"
            >
              Mark all as read
            </button>
          </div>
        </div>

        {/* Notification List */}
        <div className="divide-y">
          {notifications.length > 0 ? (
            notifications.map((notification) => (
              <div 
                key={notification.notification_id} 
                className={`p-4 flex items-start hover:bg-gray-50 transition-colors ${!notification.check ? 'bg-red-50' : ''}`}
                onClick={() => markAsRead(notification.notification_id)}
              >
                <div className="mr-3 mt-1">
                  <img 
                    src={notification.photo} 
                    className="w-10 h-10 rounded-full object-cover" 
                    alt="Profile" 
                    referrerPolicy='no-referrer'
                  />
                </div>
                <div className="flex-1">
                  <p className={`${!notification.check ? 'font-medium' : ''}`}>{notification.message}</p>
                  <p className="text-xs text-gray-500 mt-1">{notification.time}</p>
                </div>
              </div>
            ))
          ) : (
            <div className="p-8 text-center text-gray-500">
              <Bell className="mx-auto mb-2" size={24} />
              <p>No notifications at the moment</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}