Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.quebec/private_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

'use client';

import React, { useEffect, useState } from 'react';
import { toast } from 'react-hot-toast';
import { Bell, UserPlus, ThumbsUp, MessageSquare, Eye, Heart } from 'lucide-react';

interface RealTimeNotificationToastProps {
  notifications: Array<{
    id: string;
    type: 'follow' | 'endorsement' | 'message' | 'profile_view' | 'friend_request';
    message: string;
    userId?: string;
    userName?: string;
    timestamp: Date;
  }>;
}

const RealTimeNotificationToast: React.FC<RealTimeNotificationToastProps> = ({ notifications }) => {
  const [processedNotifications, setProcessedNotifications] = useState<Set<string>>(new Set());

  useEffect(() => {
    notifications.forEach(notification => {
      if (!processedNotifications.has(notification.id)) {
        // Show toast notification
        showToastNotification(notification);
        
        // Add to main notification system
        addToMainNotifications(notification);
        
        // Mark as processed
        setProcessedNotifications(prev => new Set([...prev, notification.id]));
      }
    });
  }, [notifications, processedNotifications]);

  const showToastNotification = (notification: any) => {
    const getIcon = () => {
      switch (notification.type) {
        case 'follow': return <UserPlus className="h-5 w-5 text-blue-500" />;
        case 'endorsement': return <ThumbsUp className="h-5 w-5 text-green-500" />;
        case 'message': return <MessageSquare className="h-5 w-5 text-purple-500" />;
        case 'profile_view': return <Eye className="h-5 w-5 text-gray-500" />;
        case 'friend_request': return <Heart className="h-5 w-5 text-pink-500" />;
        default: return <Bell className="h-5 w-5 text-gray-500" />;
      }
    };

    const getTitle = () => {
      switch (notification.type) {
        case 'follow': return 'New Follower';
        case 'endorsement': return 'New Endorsement';
        case 'message': return 'New Message';
        case 'profile_view': return 'Profile Viewed';
        case 'friend_request': return 'Friend Request';
        default: return 'Notification';
      }
    };

    toast((t) => (
      <div className="flex items-start space-x-3 max-w-sm">
        <div className="flex-shrink-0 mt-0.5">
          {getIcon()}
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-gray-900">{getTitle()}</p>
          <p className="text-sm text-gray-600 truncate">{notification.message}</p>
          <p className="text-xs text-gray-400 mt-1">
            {new Date(notification.timestamp).toLocaleTimeString()}
          </p>
        </div>
        <button
          onClick={() => toast.dismiss(t.id)}
          className="flex-shrink-0 text-gray-400 hover:text-gray-600"
        >
          ×
        </button>
      </div>
    ), {
      duration: 5000,
      position: 'top-right',
      style: {
        maxWidth: '400px',
      },
    });
  };

  const addToMainNotifications = async (notification: any) => {
    try {
      // Add to main notification system via API
      await fetch('/api/notifications', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          type: notification.type,
          title: getNotificationTitle(notification.type),
          message: notification.message,
          userId: notification.userId,
          metadata: {
            notificationType: 'profile_interaction',
            originalNotificationId: notification.id
          }
        })
      });
    } catch (error) {
      }
  };

  const getNotificationTitle = (type: string) => {
    switch (type) {
      case 'follow': return 'New Follower';
      case 'endorsement': return 'New Endorsement';
      case 'message': return 'New Message';
      case 'profile_view': return 'Profile Viewed';
      case 'friend_request': return 'Friend Request';
      default: return 'Profile Notification';
    }
  };

  return null; // This component doesn't render anything visible
};

export default RealTimeNotificationToast;