`frontend/src/components/LiveAlertModal.js`

241 lines
import React from 'react'

const LiveAlertModal = ({ alert, onClose }) => {
  if (!alert) return null

  const getSeverityColor = (severity) => {
    const colors = {
      critical: '#dc2626',
      high: '#d97706',
      medium: '#2563eb',
      low: '#6b7280'
    }
    return colors[severity] || '#6b7280'
  }

  const getTypeIcon = (type) => {
    const icons = {
      antisemitism: '✡️🚨',
      racism: '⚠️🚨',
      harassment: '🚫🚨',
      spam: '📧🚨',
      system: '⚙️🚨'
    }
    return icons[type] || '❗🚨'
  }

  const formatLocation = (location) => {
    if (!location) return 'Unknown Location'
    
    const parts = []
    if (location.city) parts.push(location.city)
    if (location.state) parts.push(location.state)
    if (location.country) parts.push(location.country)
    
    return parts.length > 0 ? parts.join(', ') : 'Unknown Location'
  }

  return (
    <div className="live-alert-modal">
      <div className="live-alert-content" style={{
        border: `3px solid ${getSeverityColor(alert.severity)}`,
        animation: 'pulse 1s infinite'
      }}>
        <div className="alert-header">
          <h2 style={{
            color: getSeverityColor(alert.severity),
            margin: 0,
            fontSize: '24px',
            fontWeight: '700'
          }}>
            {getTypeIcon(alert.type)} LIVE ALERT
          </h2>
          <button 
            className="alert-close"
            onClick={onClose}
            style={{ fontSize: '28px' }}
          >
            ×
          </button>
        </div>

        <div style={{
          background: '#fef2f2',
          padding: '16px',
          borderRadius: '8px',
          border: '1px solid #fecaca',
          marginBottom: '20px'
        }}>
          <div style={{
            fontSize: '18px',
            fontWeight: '600',
            color: '#dc2626',
            marginBottom: '8px',
            textTransform: 'uppercase',
            letterSpacing: '1px'
          }}>
            {alert.severity} {alert.type} DETECTED
          </div>
          <div style={{ fontSize: '14px', color: '#7f1d1d' }}>
            Immediate attention required • Real-time detection
          </div>
        </div>

        <div className="alert-details">
          <div className="alert-detail-row">
            <span className="alert-detail-label">🕒 Time:</span>
            <span className="alert-detail-value">
              {new Date(alert.timestamp).toLocaleString()}
            </span>
          </div>
          
          <div className="alert-detail-row">
            <span className="alert-detail-label">👤 User ID:</span>
            <span className="alert-detail-value" style={{ fontFamily: 'monospace' }}>
              {alert.userInfo?.userId || 'Unknown'}
            </span>
          </div>
          
          <div className="alert-detail-row">
            <span className="alert-detail-label">🌐 IP Address:</span>
            <span className="alert-detail-value" style={{ fontFamily: 'monospace' }}>
              {alert.userInfo?.ip || 'Unknown'}
            </span>
          </div>
          
          <div className="alert-detail-row">
            <span className="alert-detail-label">📍 Location:</span>
            <span className="alert-detail-value">
              {formatLocation(alert.location)}
            </span>
          </div>

          <div className="alert-detail-row">
            <span className="alert-detail-label">💬 Message:</span>
            <div style={{
              background: '#f8fafc',
              border: '1px solid #e2e8f0',
              borderRadius: '6px',
              padding: '12px',
              marginTop: '8px',
              fontFamily: 'monospace',
              fontSize: '14px',
              wordBreak: 'break-word'
            }}>
              {alert.message || alert.content?.message || 'No message available'}
            </div>
          </div>

          {alert.violation?.match && (
            <div className="alert-detail-row">
              <span className="alert-detail-label">🎯 Violation:</span>
              <div style={{
                background: '#fef2f2',
                border: '1px solid #fecaca',
                borderRadius: '6px',
                padding: '12px',
                marginTop: '8px',
                color: '#dc2626',
                fontWeight: '600',
                fontFamily: 'monospace'
              }}>
                "{alert.violation.match}"
              </div>
            </div>
          )}

          {alert.violation?.category && (
            <div className="alert-detail-row">
              <span className="alert-detail-label">🏷️ Category:</span>
              <span className="alert-detail-value" style={{
                background: getSeverityColor(alert.severity) + '20',
                color: getSeverityColor(alert.severity),
                padding: '4px 8px',
                borderRadius: '4px',
                fontSize: '12px',
                fontWeight: '600',
                textTransform: 'uppercase'
              }}>
                {alert.violation.category}
              </span>
            </div>
          )}
        </div>

        <div style={{
          background: '#fffbeb',
          border: '1px solid #fed7aa',
          borderRadius: '8px',
          padding: '16px',
          marginBottom: '20px'
        }}>
          <div style={{
            fontSize: '14px',
            fontWeight: '600',
            color: '#92400e',
            marginBottom: '8px'
          }}>
            ⚡ Automated Actions
          </div>
          <ul style={{
            margin: 0,
            paddingLeft: '20px',
            color: '#78350f',
            fontSize: '13px'
          }}>
            <li>User session flagged for review</li>
            <li>Alert logged in security database</li>
            {alert.severity === 'critical' && (
              <li style={{ fontWeight: '600', color: '#dc2626' }}>
                Threat response message sent to user
              </li>
            )}
            <li>Real-time notification sent to admin dashboard</li>
          </ul>
        </div>

        <div className="alert-actions">
          <button
            onClick={onClose}
            className="btn btn-secondary"
          >
            Acknowledge
          </button>
          <button
            onClick={() => {
              window.open('/alerts', '_blank')
              onClose()
            }}
            className="btn btn-primary"
          >
            View All Alerts
          </button>
          {alert.userInfo?.userId && (
            <button
              onClick={() => {
                window.open(`/users?search=${alert.userInfo.userId}`, '_blank')
                onClose()
              }}
              className="btn btn-danger"
            >
              View User
            </button>
          )}
        </div>

        <div style={{
          marginTop: '16px',
          fontSize: '12px',
          color: '#6b7280',
          textAlign: 'center',
          fontStyle: 'italic'
        }}>
          Alert ID: {alert.id || alert._id} • 
          Detection confidence: {(alert.violation?.confidence * 100) || 100}%
        </div>
      </div>
    </div>
  )
}

export default LiveAlertModal