@startuml
title Notification System - Architectural Components (MVP)

!define COMPONENT_COLOR #E3F2FD
!define API_COLOR #FFF9C4
!define STORAGE_COLOR #F3E5F5
!define CLIENT_COLOR #E8F5E9

package "Backend Services" {
  component [Message Service] as MS
  component [Status Service] as SS
  component [Alert Service] as AS
  note right of MS
    Existing services
    trigger events
  end note
}

package "Notification System (NEW)" COMPONENT_COLOR {
  database "notifications\ntable" as DB STORAGE_COLOR {
    note right
      user_id
      event_type
      message (sanitized)
      created_at
      read (boolean)
    end note
  }
  
  database "user_preferences\ntable" as PREF STORAGE_COLOR {
    note right
      user_id
      event_type
      enabled (boolean)
    end note
  }
  
  component "Notification API" as API API_COLOR {
    note right
      GET /api/notifications/unread
      POST /api/notifications/mark-read
      GET/PUT /api/notifications/preferences
      
      Security:
      - Session auth (existing)
      - Rate limit: 100/min
      - Sanitize with bleach
    end note
  }
}

package "Frontend (React)" CLIENT_COLOR {
  component [Poller\n(30s interval)] as Poller
  component [Browser\nNotification API] as BrowserAPI
  
  note right of Poller
    setInterval(() => {
      fetch('/api/notifications/unread')
      .then(showNotifications)
    }, 30000)
  end note
}

MS --> DB : INSERT notification\n(if preference enabled)
SS --> DB : INSERT notification\n(if preference enabled)
AS --> DB : INSERT notification\n(if preference enabled)

Poller --> API : GET /unread\n(authenticated session)
API --> DB : SELECT WHERE\nuser_id AND NOT read
API --> PREF : JOIN preferences

API ..> Poller : JSON response
Poller --> BrowserAPI : Show popup

note bottom of DB
  30s latency acceptable
  No message queue needed
  ~33 req/s for 1000 users
end note

' Sequence flow for single notification
note as N1
  **Notification Flow:**
  1. Event occurs in Message Service
  2. Check user_preferences
  3. INSERT sanitized notification
  4. Client polls within 30s
  5. API returns unread notifications
  6. Browser shows popup
  7. User clicks → mark as read
end note

@enduml